image: screenshot of Fontwalk
Hopefully you're already having fun experimenting with typography for the web :) Let's take your typesetting further and take a closer look at implementing webfonts.continue reading »
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 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 »
image: Pavement – Form Follows Groove © Horst Kiechle 2011
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 »
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:
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.
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.
Let’s take a closer look at image cut outs, one of the most common tasks when working with visual design elements.
continue reading »
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 :-)
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.