a look at design for the web & all it entails

· view menu ·

planning for adaptive design

animation by Tiago Franco
animation by Tiago Franco © 2012

We can no longer design any site without considering a mobile strategy. A good responsive design will allow the content to adapt to the viewport, be that a computer, TV or mobile. But always bear in mind who you design for ~ our web geek crowd is not our typical user group ;-)

It is now over three years ago that the wonderful Ethan Marcotte coined the term “responsive web design“, or RWD,  via his article on A List Apart. Though there have been great developments with more tools and debates in different approaches – this article is still the perfect introduction to the topic :)

Let’s read Ethan’s original article and study his beautiful example:
continue reading »

Vector images: core skills

Vector graphics are wonderful ~ they allow for prefect precision and scale without loss of quality. With the long awaited arrival of SVG for the web – you should definitely spend time to create vector graphics for your sites and understand their use on the web.

continue reading »

grids in webdesign

image: street reflections – photo © Jeffrey Zeldman 2014

A lot has been written and discussed about grids in design, from historic examples, architecture, graphic and web design. As an approach to design, this is a technique which is loved by many, loathed by some and under constant debate. There is no doubt that grids can be a fantastic tool which can assist you in the layout and design of any given page.
continue reading »

typography for the web

Oliver Reichenstein famously wrote:

Web Design is 95% Typography.
(read original article)

Though this is a bold statement which you might, or might not, agree with – there is no doubt that carefully crafted
typography will not only ensure good legibility of text and therefore accessibility but also greatly enhance the design and impact of any given website.

To get you started with some basics and give you plenty of material to study – let’s have go through some of the content of this post:

typography for the web ↗

continue reading »

images & colour with CSS

(webpage design course)

☞ images and colour on the web

please note: this presentation was created with the wonderful CSSS slideshow by Lea Verou, which uses some very new techniques. This means that it is best viewed in Firefox 3.6+, the latest Chrome/Safari or Opera 10.60+. It will not work at all in Internet Explorer. As you are all becoming web workers now, I hope you will have most if not all of these browsers installed already and that this won’t cause you any issues ;)

If the slide’s content and text is too large and going beyond your screen – you can use CMD/CTRL and +/- (plus/minus) to change the type size.

continue reading »

Bitmap images – core skills

Looking forward to hearing all about your current working techniques and discuss good working practices for visual element creation with you ;)
This presentation is intended to summarise various aspects of a typical workflow, covering a lot of details. It is intended as reference for you – whether you are entirely new to design and Photoshop, or whether you are already happily working in Photoshop. We’re using Photoshop as example of a common bitmap editor only, this is by no means a recommendation.

continue reading »

People of the web.

Happiness is connecting ~ with people of the web ;)

A very brief introduction to only some of the brilliant people working on the web, influencing its development and helping us all along. There are many more we will introduce you to over the coming months.

Please feel free to download the original PDF with its active links for easy viewing :-)

tools of the trade.

Whether you are an experienced designer already or just starting ~ you’ll need the right tools for the job :) So here’s a quick look at a few options:

continue reading »

online editors & browser add-ons

In addition to the tools already mentioned – there are a whole lot more to give you a helping hand ;) There will be a few more additional bits which we will talk about in class ~ for now, a few to get started with.

continue reading »