Design for web

Chapter 1: Design principles

what is design?

This question is one that can be answered in different ways. In essence though, the answer must be that design solves a problem, meets a need and has the clear purpose to do good in the world. As designers we strive to make connections between people and the world around them, to create a positive change or outcome.

Design is a process which is driven by the desire to improve aspects of our lives. It seeks to balance aesthetics[1], functionality[2], and sustainability[3] to create solutions that endure and resonate with individuals and communities. To fulfil this mission, we will collaborate and seek input from those we design for. A successful effective design will deliver an outcome that considers context and people. It will be executed with empathy and understanding and be accessible and inclusive to all.

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

the author

view profile on 'people of the web'
Frank Chimero

related links

  1. Book website
  2. frankchimero.com

License CC BY-NC-SA

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[4] 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. ツ

footnotes

  1. 'Aesthetics' in web design refers to the visual appearance of the webpage. It is an often subjective interpretation of the look and display of elements in a specifically refined approach.
  2. The 'functionality' aspect of web design is its purpose, its method of executing its expected action. It involves the implementation of features and elements that facilitate user actions, such as navigation, forms and interactive elements such as buttons, links and presentational features such as sliders.
  3. The term 'sustainability' in web design refers to designing and developing websites with a focus on minimising their negative environmental impact and promoting long-term viability. It aims to minimise the use of resources such as energy, bandwidth, and server space by good working practices such as file compression, reducing unneccessary processes and server requests and employing caching techniques.
  4. 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.

3 ways good design makes you happy

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

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

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.

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.

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.

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.

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

Play & experiment with visual balance

If you're new to design, having some fun and simply playing around with shapes and very few graphic elements can be a great way to learn about the use of space in layout and the weight of colour. In this exercise, your brief is to create multiple versions of presenting the following quote. Comprised of only three words, it will allow you to experiment freely.

Less is more. Mies van der Rohe, Bauhaus

The objective of this project is to play ツ and to make yourself aware of how colour, size and space will affect the mood and feel of the visual. Use whichever graphic app you like. If you don't have a favourite yet, this lovely free online vector drawing app is perfect: editor.method.ac

brief

Working on a square visual, use the three words and only very simple shapes (lines/circles/rectangles), limit yourself to only one typeface, greyscale for colour and create variations of composition to express different dynamics between the elements.

  1. set up a new document at an aspect ratio of 1:1
    e.g. 800px x 800px (or larger).
  2. type out the quote and decide on one single typeface to use.
  3. working in greyscale, create a composition of the words and very basic lines and shapes.
  4. save your visual and create new designs ~ saving each one for comparison. Continue with new designs on until you run out of ideas ツ
  5. take a look at all your final visual and compare the effect your use of space and colour has on the atmosphere, and on the expression of the quote's message.

The following example have been created in the editor from method and are to serve as mere samples of possible approaches. V01 uses a serif typeface and limits itself to pure black and white only. Using only lines and blocks of colour, you can see that the visual balance varies much between them. V02 makes use of a sans-serif typeface and uses shades of black/grey with white.

version 01, serif typeface (Alegreya)

example design 1 example design 2 example design 3 example design 4 example design 5 example design 6 example design 7 example design 8

version 02, sans-serif typeface (Cuprum)

example design 1 example design 2 example design 3 example design 4 example design 5 example design 6 example design 7 example design 8

These are merely some experiments to trigger your thinking ツ

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