Design for web

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.

#oneweb

“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.

footnotes

  1. tweet by @timberners_lee, 27 July 2012: “This is for everyone #london2012 #oneweb #openingceremony @webfoundation @w3c”
  2. Tim Berners-Lee: inventor of the World Wide Web and director of the World Wide Web Consortium (W3C)
  3. #oneweb is the web’s ideal principle of universal access to content, promoted by Tim Berners-Lee, Jeremy Keith and many others
  4. Web Content Accessibility Guidelines
  5. The World Wide Web Consortium (W3C) is an international community who work together to develop Web standards.

The World-Wide Work

This is the brilliant talk Ethan Marcotte gave at the wonderful New Adventures Conference, 23/1/2019. A strong message which resonated strongly with me and everyone else - I cannot recommend it enough! Do make the time to watch it! And check out the coverage page for more. Or read my personal notes ;)

Ethan's urgent talk concerning the web as an agent of power, its potential to do harm, the changing nature of our work, and the need for hope.—@naconf
This might be the best conference talk I’ve ever seen. It’s certainly the most important.—@adactio

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

The web standards model

To understand how a webpage is constructed, it is important to look at the underlying principles that guide the coding approach. This article is part of a series of Coding explainers for web design students by David Watson[1]. Before getting started with learning coding, the web standards model is an important concept to understand. The 'learn coding' content is guided by this principle.

illustration of the web standards model.

In this article (which also offers an audio version), David outlines the background of what web standards are and explains how this model of coding came to become the current approach to front-end development[2]. Understanding the structure a design should take once implemented with code will benefit your approach to learning how to code. read: The web standards model

W3C web standards

Web standards are the building blocks of the web. They are the blue prints of how to implement browsers, blogs, graphic editors, search engines, and many more software that power our experience on the web.

They enable developers to build rich interactive experiences that can be available on any device.

read: About W3C web standards

footnotes

  1. David has been coding since the early days of the web and founded one of the first Master Programmes in web design in the UK
  2. involves writing HTML, CSS and Javascript which are the languages that will be passed onto the browser to render the webpage for viewing in the browser

Front-end dev reference

While there a seemingly endless amount of resources out there to help you get started with coding, it is important to find a reliable source as a starting point. Once you know how to code, you'll be in a position where you can distinguish good practices and avoid the bad. The Mozilla[1] developer network has put together one of the best documents for both beginners and pros, with up-to-date references, code examples and explanations.

screenshot of MDN

The site is used widely as a reference by developers[2] and will be useful at any level of skill. For complete beginners, there is a whole section that offers guides to installing the right software and how to get started.
read: Getting started with the web

footnotes

  1. Mozilla is free software community founded in 1998. Their most commonly known products include the Firefox web browser, Thunderbird e-mail client and many others.
  2. the term developer is quite general and describes anyone who codes, writing any of the various programming languages; this handbook will include links useful for learning front-end development primarily, with a focus on HTML and CSS