Design for web

Chapter 1: Design principles

3 ways good design makes you happy

Don Norman[1], Cognitive scientist[2] and design critic

creating good design

As designers is it our job to make people happy, as Don Norman so nicely highlights. Luckily all our projects have a clear objective, and are aimed at a specific group of people. This means we have a starting point and a set direction for our work, from the beginning to the completion of the project.

Form follows function. Louis Sullivan, "The Tall Office Building Artistically Considered.", 1896
Adopted as one of the leading design principles by the Bauhaus

This famous quote is one that applies to all design and is a great first step our learning journey. It expresses the most effective approach to creating functional (user-friendly and inclusive) and beautiful (aesthetically pleasing) designs. Web design begins with the content and proceeds to focus on the people accessing the site - both of which will then inform the design concept and production.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

the speaker

view profile on 'people of the web'
Simon Collison

related links

  1. Bauhaus website
  2. history of Bauhaus

where to begin?

When we are new to design, it can be difficult to decide where to start, how to tackle the challenges ahead. It might feel intimidating but design is a skill that can be learnt. While artwork is a creative expression with a purely subjective perspective, design is something that has a specific purpose, is created for a specific target group[3] and it can therefore be studied, tested and understood from an objective point of view. There is always a clear objective. There are people who our designs are created for and they can give us insights and feedback which will help shape the final design and keep improving our skills.

Nothing will ever beat pen & paper ツ

Before we begin any design, we need to consider the task in hand, the content, the people its for and the overall aim of the project. Next, we'll brainstorm and come up with as many ideas and concepts as we can.

No matter how good or bad your drawing skills are right now – continue or start using your sketchbook for notes, doodles and design drafts. You will find that the best approach is to capture your idea without distraction on paper. It is quicker and easier than any other tool!

Digital tools tend to get in the way and slow us down. The immediacy of sketching on paper means we can let our mind loose and focus on only the essence of our ideas.

pens on paper with scribbles and a lightbulb

The best approach is to do a 'brain dump' ~ literally putting any idea on paper, there are no bad ideas ツ Even a silly idea might trigger great new thoughts and approaches and result in a new angle. And when we continue to draw until we run out of ideas, we will end up with a lot of concepts to review and a number of starting points for the new design. This collection of scribbles and notes is one we might even revisit further down the line.

This stage of sketching is not going to be the very first step when it comes to most projects. We will likely spend a lot of time initially to understand people and the problem in hand before we even start sketching. But if when we're new to this - it can't do any harm to get practising and get into the habit of note taking and drawing out our ideas. ツ

stay curious • experiment • consider context

When it comes to starting on the design in hand, we can look at anything and everything to inspire our approach. Inspiration can be found in any form of design: architecture, print design, product design, and also music or nature ~ anything! Sometimes the most innovative ideas will come from the most unusual places and in the most unexpected moments.

It is a good idea to look at classic principles, at successful web designs and common patterns. We have to understand all we can about our medium, about how people use the web and what makes a design both accessible and beautiful.

Learn design theory basics

website logo with tiny bouncing ball
Design Trampoline is a lovely little site for anyone new to the subject. It was created by Anna Riazhskikh, one of my former students and aims to teach the basics of design theory and includes 5 modules. Go ahead - jump in ツ Thank you, Anna ツ
Is it still necessary to learn design theory basics these days? Theory may sound boring. The goal of this project is to show that it’s not true. If you are new to design or never studied anything design-related, learning some basic design rules can be quite helpful to feel confident when you start working on your own design project. [...]
Learn the rules, follow them, break them, but wisely.

footnotes

  1. Don Norman is co-founder and Principal of the Nielsen Norman Group, world leaders in research-based user experience. He is a highly regarded prominent figure in the field of UX design and cognitive science, a teacher and speaker and expert in user-centred design.
  2. Cognitive science focuses on understanding and studying the human mind, intelligence, cognition, and behaviour. It combines insights from various disciplines and can inform the decision making process during all stages of design.
  3. The term 'target group' refers to the intended audience of the web project in hand. The aim of defining a target group is to narrow down details such as type of person, age, gender, background and personal preferences and habits which will then inform the design approach and process.

graphic design principles

While the web brings its own specifics to achieving good design, there are some principles that are standing the test of time and can be applied to many areas of design. Whether that is graphic design for print, or digital design for web ~ and even to some extent product design. When we are new to design thinking, it will be very informative to look at these principles and aim to understand why they are so effective and timeless.

As creative thinkers it is too easy to dismiss common approaches with the aim of creating something different, something original and unique. While this is not wrong, it will help us to apply some of these established rules to our thinking when starting a new design. Being aware of some of the well-studied and proven psychological and artistic effects of certain aesthetic principles will help us learn and ultimately become better designers.

PLEASE NOTE:
some of the examples shown in the slides have since been updated, or no longer exist. I’m keeping the references as this now allows us to compare their previous to their current design, and recognise the relatively temporary nature of some websites.

Design principles I

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 1.9MB (optimised) PDF, 18.7MB (original)

In this slide deck:

  1. Balance
  2. Gradation & contrast
  3. Repetition & rhythm

Referenced sites

  1. subtraction.com, Khoi Vinh
  2. gunardson.com, Jim Gunardson (formerly: visualelixir.com)
  3. dabi.me, Robert Dabi (formerly: soulja.de)
  4. floridaflourish.com, no longer online
  5. ipolecat.com
  6. artofflightmovie.com
  7. 42angels.com (no longer online)
  8. agora.art.br (no longer online)
  9. fuelbrandinc.com (no longer online)
  10. instagalleryapp.com (in different hands)
  11. veerle.duoh.com
  12. alwaysreadthemanual.com

Design principles II

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 1.9MB (optimised) PDF, 15.2MB (original)

In this slide deck:

  1. Dominance
  2. Unity & continuation
  3. Proportion

Referenced sites

  1. nest.com
  2. unfold.no
  3. nickyandcookie.com (offline)
  4. griplimited.com
  5. mailchimp.com
  6. carsonified.com (no longer exists)
  7. teamtreehouse.com

Composition in web design

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 4.7MB (optimised) PDF, 24.2MB (original)

In this slide deck:

  1. Emphasis & focus
  2. A/symmetry
  3. Leading lines
  4. Rule of thirds

Referenced sites

  1. Analog (no longer online)
  2. A List Apart (alistapart.com) & Readability (no longer exists)
  3. Simon Collison - colly.com (v4)
  4. Vlog.it, Marco Rosella - vlog.it
  5. Amazee Labs, designed by Mike Kus - amazeelabs.com
  6. Square Space, squarespace.com
  7. Jason Santa Maria, jasonsantamaria.com
  8. Silverback, by ClearLeft - silverbackapp.com (no longer exists)
  9. “Inquirer”, design by Ethan Marcotte, alistapart.com : responsive web design

Your work space

Working on a web project means being very organised with files and involves setting up a project folder. It will be best to make sure that the file names and extensions are readily available and easy to see.

Learn HTML

To start with learning coding, the best approach is to first learn HTML[1] ~ which is used to mark up[2] our content. This has to be done before we can look at the visual presentation on the webpage itself (which is done via CSS).

The 'Structuring the web with HTML' section of the MDN site will introduce HTML explaining related coding terms and the structure of a webpage's code. You will learn how to write HTML to create a webpage and mark up the content.

illustration of Anatomy of an HTML element, © MDN

Included are 'active learning' boxes which will allow you to add the tags and will check your input for correct code. You will learn about adding images and links.

illustration of Anatomy of an HTML page, © MDN

You will be able to copy & paste code snippets and use them to learn from by adding them to your own files. My suggestion is to work through the 'Introduction to HTML' section and practice writing plain HTML to get familiar with marking up pages in full.
read: Structuring the web with HTML

footnotes

  1. HyperText Markup Language
  2. in computing, markup refers to the tags added to content within, adding meaning and structure to a document