MA Web Design + Content Planning materials for applied art for the web • major project

peace sign in Ukrainian colours, blue + yellow

Principles of graphic design

Design is a fluid process, something that will change. Change over time. Change with each project. Each challenge will teach us more. Unlike art which often builds on a certain skill- or mind-set, some will argue - design is shaped by people and their needs. It is a skill that can be learnt.

But where to begin? - Intuition is often a good starting point. Following the well-trodden paths which are influenced by long standing principles is another.

abstract illustration of design patterns

an ongoing journey

Design is not something you ever stop learning. Whatever your background or experience, there's always more to learn. Consider this a continuous process which will allow you to keep growing your skills :)

We'll look at some of the classic principles after we've explored some moodboards. This little exercise will allow us to capture your mindset at this moment in time ~ and it might help with your first project too :)

If you are new to design, this might become a good first step to experiment and explore. If you're already happily designing, this might already be part of your process ~ or become a new tool :)


Moodboards are essentially a form of digital scrapbook or collage. Collecting any kind of visuals (photographs/graphics) to capture an aspect of the planned design and combining them in a collage can establish a direction and guide the next steps.

Moodboards are popular in many areas, from interior to fashion, and of course, graphic and web design. They are used to express visually what might be difficult to describe in words.

create a moodboard

There's a possibly fitting course on pluralsight I thought I should mention. I've not had time to check out all the offerings available in pluralsight - but I had a quick look to see if anything would fit our topic - and there's one you might want to have a look at: The Fundamental Gestalt Principles - Understanding Perception, part of An Introduction to Design By Jason Roberts. If you do have a look, let me know what you think :)

Let’s take a look at some established as well as popular graphic design principles and their possible inspiration for design for the web. While working on your first mini project, start your initial design process by considering how some of these established concepts might contribute to your design.

sculpted paper spiral
sculpted paper spiral

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.

what is it?

"... a unified workspace for thinking and collaboration."
It's an online tool for creating/editing flowcharts, wireframes, mind maps and notes via sticky notes.

whimsical logo whimsical logo

Join the design4web workspace
If the link does not work, let me know and I'll send you an invite.

why whimsical?

A mere suggestion, nothing more. There is a plethora of options out there. You should keep an open mind, and a watchful eye, on available options and find what suits you, your mindset and workflow best.

In our field, it's best to be flexible and ready to learn new tools. Worth trying out at least - it could be great collaboration tools for us ~ or not ¯\_(ツ)_/¯


Recently, I've had to plan out a complex project and explored Whimsical. And I think it is lovely. A quick and easy tool for idea generation, project planning and best of all: collaboration. It's super simple - very easy to use and I think you will like it too. Feel free to ignore it, of course, if it's not your cup of tea ;)

Whimsical offer an education plan which I applied for and which now gives us a workspace we can all use. You will have full access for 2 years and can create an unlimited number of boards. Please just sign up and have a look around.

Go ahead and create a folder for yourself and use this for your project work or anything else :)

profile project

This is your first little project - for which you are to create a single page profile design.
Check project briefs for details and examples from students in the previous years.


  1. write/edit/collect the information you’d like to feature on your profile
  2. work with your given content to plan for effective layout
  3. sketch out your ideas in your sketchbook, experiment/iterate/refine
  4. produce a digital mockup/wireframe of your design (black/white only)
    you might want to try out Whimsical for digital wireframing :)

20/10/2020 group feedback on part #1

feedback threads on Slack

To get us all used to sharing our work, our process and giving and receiving feedback, let's take this project as a warm-up. I've taken the list of your names and put this through a generator to form 5 teams.

Remember the threaded conversations ~ read a quick reminder
The idea is that each group will start their own thread and share and discuss the work on the various stages of this project. There's one week between each stage, one week for the teams to collaborate on all phases, from brain storming and ideas, revisions and iterations and onto the final piece.

By working in smaller teams, we can hopefully have productive chats. At the same time, the threads are open to read for all, and join in by anyone as well. Hopefully this will work nicely.

And each week, there'll be a re-shuffle of teams to give everyone a chance to work with everyone else ~ well, in theory anyway ツ

speechbubble + hello

feedback groups

group 1
  1. Mary
  2. Maya
  3. Barbara
  4. Jyothisha
  5. Anna
  6. Vishnu VV
group 2
  1. Paula
  2. Carla
  3. Vishnu AK
  4. Katherine
  5. Qu
  6. Sara
group 3
  1. Tariq
  2. Anto
  3. Nikki
  4. Anoop
  5. Alasdair
group 4
  1. Yinka
  2. Jenny
  3. Julija
  4. Emily
  5. Peterson
group 5
  1. Crystal
  2. Dennis
  3. Shreya
  4. Caspar
  5. Jahnavi


  • create new wireframe under 'My Boards'
  • name your file
  • add elements via the toolbar
  • create a copy for iteration
  • get used to including versioning in your file name
    (for yourself)
  • get used to including your name in your file name
    (for team coms / collaboration / submissions)
  • share your file for comments and feedback
    add into folder: design4web > profile layouts

collaborative feedback

Hopefully you'll all having fun experimenting with wireframes, and so I thought it might be handy to prepare your ideas for feedback next week. Whimsical is only one tool to try but we have to start somwewhere :)

As you can also upload images, please add your layout ideas in any fitting form, ready for wednesday. To get into the team spirit, check on ideas of your fellow designers and leave comments, feedback and suggestions.

NOTE: let's try out Whimsical for this project and see how it goes. If consensus is against it in the end, we can explore something else :)

Advice on design.

The publication ‘Dear Design Student’ is an excellent collection of various articles by industry professionals, written for design students in answer to their questions. I’d highly recommend that you check out these articles. Excellent reading and plenty of food for thought.

One article in particular I’d like you to read and think about is Mike Monteiro’s “A Designer’s Code of Ethics”.

A broken gun is better designed than a working gun.

Mike Monteiro, A Designer’s Code of Ethics
sculpture of knotted gun
[Non-Violence, Carl Fredrik Reuterswärd, 1985]