Introduction

This handbook is for my students as well as anyone starting out in web design. I have been teaching web design for many years and created and accumulated quite a lot of material. Having learnt so much from the many sharing spirits out there when I started, this is my way of spreading the love, hoping to help newbies get started.

This book does not assume any knowledge and aims to give you a way to learn about the different aspects involved in designing for the web. This is merely one way to get started and the content is guided by my approach to teaching web design to newbies. Each chapter contains various resources in form of slides, articles, tutorials, inspiring examples, links to further reading to prompt you to delve in deeper and give you step-by-step practical projects to work through. Have fun!

Preamble

Before we even start on the design of any project, we have to consider the context, the purpose of the design and importantly who it is for. My advice is never to use placeholders but always work with real content (even if you have to make it up for learning purposes).

While you're learning, you might feel this is not an important point to worry about. I'd argue that it is vital. Give your exercises and practice projects a purpose and you'll soon be flying ツ

Content precedes design. Design in the absence of content is not design, it's decoration.

Jeffrey Zeldman, 2008

This approach is referred to as working Content out — starting with the content first before moving onto the design. Working with actual content will always result in a better final design as it will focus us on the context and guide our design thinking.

“This is for everyone.” ^[1]
as Tim Berners-Lee ^[2] so famously said about the web. This philosophy of the #oneweb ^[3] is what makes working on the web so special. If we take the right approach to our work, we will contribute to this mission, that the web with its vast content is for everyone. This means our websites need to be accessible: accessible inclusively to all people, accessible in turn to their chosen devices and accessible on connections of varying speeds.

Only inclusive design is good design.
We will therefore strive to create our websites to be easy to use by everyone, whatever their abilities or devices. We will aim to meet the WCAG 2.0 ^[4] as outlined by the standards body of the W3C ^[5]. This is something to consider as you start out, it's a philosophy as well as a practical working approach for both design and code. Adopting good habits from the start is easier than having to unlearn bad ones later on ツ

Reading

The ever-changing nature of the web is both wonderful and challenging and it's something we have to get used to in order to keep producing good work. I would highly recommend to read the following - whether you are just starting out or already working on the web. Understanding the nature of our medium and adopting the right attitude will allow us to evolve as designers.

• A Designer's code of Ethics Mike Monteiro

  A broken gun is better designed than a working gun. Mike Monteiro

• A DAO of Web Design John Allsopp, 2000

  [The Sage] accepts the ebb and flow of things, nurtures them, but does not own them. John Allsopp quoting: Tao Te Ching; 2 Abstraction

• Resilient Web Design Jeremy Keith

  Ideas are more resilient than code. I’ve tried to combine the most resilient ideas from the history of web design into an approach for building the websites of the future. Jeremy Keith

How to keep learning

The web community is mainly amazing, and finding whose work is inspiring and whose writing teaches you most will be the best way to keep up to date. In my little mini site 'people of the web' I am collecting and featuring many brilliant minds and links to their amazing work. This is a slightly biased list, of course - do have a look and explore. The site is being updated with new additions regularly, and if there's anyone you feel is missing and should be included, please do let me know ツ