Design for web

Learning web design

If you are interested in getting started in web design - this is for you.

Chapters

Chapter content

  1. Introduction
  2. Design principles
    • Getting started
    • Creating good design
    • Classic design principles
  3. Typography
    • Typography basics
    • Type combinations
    • Working with web fonts
    • On setting type for the web
  4. Colour
    • Colour basics
    • Colour scheme design
    • Accessible colour use
    • Design process example
  5. Working with visuals
    • File formats
    • Measurements
    • Notes on preparing images for the web
    • Vector graphics
    • Bitmap images
    • Background images
  6. Layout
    • Effective web layout
    • Grids in web design
    • Responsive web design
  7. Inclusive design
    • What is inclusive design?
    • Content out
    • Accessibility & UX
    • Interface design
    • Site navigation
  8. Brand design
    • What is a brand?
    • Style guides
    • Icon design
    • Brand guides
  9. Design psychology
    • Gestalt psychology
    • Gestalt principles & design
    • Heuristic views
  10. Design presentations
    • Design rationale
    • Slide design
    • Present it well
  11. Web design workflow
    • Getting started
    • Tools of the trade
    • Managing the files
    • File sharing & backups
    • Team work & feedback cycles

How to use this site

The idea of this handbook is to introduce you to web design, chapter by chapter. Starting with principles and progressively going deeper into the topics in hand. Content is interlinked as fitting to allow you to recap or jump ahead into related material.

All chapters feature content for various topics, organised into sections. Any additional footnotes are section-specific and can be found at the very end of the section.
To allow a clear overview and easy access to content, each topic's title is set up as a toggle for the article, indicated by a preceding ‘+’ (plus symbol) which will reveal the content on click/tap; some articles include sub-toggles. This includes the tutorials which at times feature videos as well as step-by-step instructions.

Getting stuck in

Any craft is best learnt by doing: by practising and experimenting. By making a mess. By making mistakes. By having fun and letting loose before honing in on improving our skills.

One way this handbook is planned to support you in your learning journey are the step-by-step tutorials. They include explanations and clear instructions to achieve a certain outcome. The videos and steps are designed to get you to learn the process for the creation of the set design, from start to finish.

The other way to support your learning progress are the practice projects. These are intended to set you specific tasks to work on, asking you to stretch your design muscles and practise what you've learnt.

illustration of pencil and cursor.

Included after the chapter content itself, these projects are designed to focus on both the design and the execution. The briefs are written to set specific challenges with creative and technical objectives.

Project briefs state a list of the objectives, offering files for download (if needed) and links as relevant. Some but not all will include possible solutions or approaches. These projects are intended to serve as prompts for you to work on independently. Hope you'll enjoy these and have fun practising your new skills ツ

On the topic of coding

This handbook is intended as start into webdesign. There has been much debate about whether a designer should be able to code - and in my humble opinion, it is important to learn HTML and CSS to be able to design well for the web. My own background was in design before the web came along and changed my path. Being worried I would not be able to tackle coding myself, I ended up as a Flash[1] designer initially ~ I know... the wrong approach entirely but I did not realise it at the time. If you don't know what Flash is, that's fine ~ it no longer exists :D

Soon, I saw the error of my ways and started learning to code, thanks to ‘Designing with web standards’[2] by Jeffrey Zeldman[3] which made me change my approach to web design fundamentally and pushed my skills into the right direction. After reading this book, I ended up discovering more inspiring people who were promoting web standards and aiming to push us all towards an all inclusive web in the early days. I learnt much from Eric Meyer[4] whose blog posts explained the intricacies of the code I was trying to understand. His books helped me learn the code I was worried I would not be able to grasp. I read books and online articles from Molly Holzschlag[5], who is often lovingly called the 'fairy godmother of the web'. Her view of the web as open platform, as an accessible medium inspired my interest in accessibility early on. And then there were many blogs and sites - with A List Apart being one that is still around, still publishing brilliant articles and one I'd highly recommend to you.

I will always be grateful to the many sharing spirits, brilliant writers and experts who so openly shared their knowledge online. Without them I would not have learnt coding ~ and my design skills would not be what they are today. This is the reason why I added an extra section at the very bottom (right above the footer) to each chapter's page with links to external sources. These will progressively go deeper into coding methods to expand your skills. This is meant as a guide to help you learn how to code, ultimately help you to execute your designs as webpages ~ and become a better web designer.

word: code in monospace font

The 'learn coding' toggle can be found right above the footer of each section. The content will offer notes and links to various external resources, starting at beginner level and progressively going deeper into various coding techniques.

My advice is to at least learn the foundations and explore both design and coding (HTML + CSS) in parallel. While most tutorials in the handbook are focused on design only - some will include coding quite specifically and give you step-by-step instructions.

Even if you end up working solely in design and don't need to be able to code your own designs, a basic understanding and the ability to develop prototypes as static webpages will be a huge benefit. You'll find it easier to understand some of the technical aspects involved in the builds which will mean it'll be easier to talk to developers and discuss your design concepts. Hey, you might even discover that front-end development is for you.

footnotes

  1. Flash was a multimedia platform, created in 1996 by Macromedia. It was a proprietary application to create animation and interaction. The result could be published and embedded into a webpage as a single file, viewed with a plugin only. It offered great creative freedom and was influential in the publishing of some excellent designs on the early web. However, it was not readily accessible and had many disadvantages. It came to an end in 2020 when support was stopped by Adobe who had acquired the application years earlier.
  2. ‘Designing with web standards’ is a groundbreaking book which had a significant impact on the field of web design and development, advocating for the use of web standards which was a new concept at the time it was published in 2003
  3. Jeffrey Zeldman is one of the early web standards evangelists, a widely known web designer, author of ‘Designing with web standards’, and co-founder of A List Apart franchise. He is currently Director of Employer Brand at Automattic, Inc. Check out his profile on People of the web.
  4. Eric Meyer is considered THE expert on CSS since the early days of the web. Most web designers/developers would look to him for guidance on CSS. He is an author and speaker and the developer who published one of the most used CSS resets. Check out his profile on People of the web.
  5. Molly Holzschlag was one of the early web standards evangelists, an author of many books, speaker, and advocate of the Open Web. She is known for her contributions to web design and open standards. Check out her profile on People of the web.

Keep learning ツ

The beauty of the web is that we will all be students forever. The constantly changing nature of our medium means there's always something new to explore, something else to learn. I hope this site will help you get started. And if you feel so inclined, I'd love to hear from you. I'm always open for feedback, comments/corrections or suggestions for updates, please do get in touch