Principles of graphic design
Design is a fluid process, something that will change with each project, each challenge. Intuition is often a good starting point. Following the well-trodden paths which are influenced by long standing principles is another.
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.
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
site references I
- subtraction.com, Khoi Vinh
- Visual Elixir (no longer online)
- soulja.de, Robert Dabi
- floridaflourish.com (no longer online)
- 42angels.com (no longer online)
- agora.art.br (no longer online)
- instagalleryapp.com (no longer online)
design principles II
site references II
- nickyandcookie.com (offline)
- carsonified.com (no longer exists)
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.
tiny task – part #1
The aim of this project is to create a professional profile page for yourself, a single page design. Selecting any information you find suitable, create a design which will present your chosen information in a clear and meaningful manner.
This project will span over 4 weeks, allowing you plenty of time to complete your profile. Working in black and white only for part #1, we will look at typography and then colour and images next.
✔ CHECK LIST #1
- write/edit/collect the information you’d like to feature on your profile
- work with your given content to plan for effective presentation
- sketch out your ideas in your sketchbook, experiment/iterate/refine
- produce a digital mockup of your design (black/white only)
NOTE: You will find all briefs on the ‘projects’ page
- Jason Santa Maria: profile on personal site
- Veerle Pieters: profile on personal blog
- Trent Walton: profile on personal site
Please feel free to comment below if you have any questions :)
workflow & file organisation
As this is our very first design lesson – let’s get stuck in and get ready for your first little project :)
Let’s take a closer look at image cut outs, one of the most common tasks when working with visual design elements.
Use selections and layermasks to to isolate the phone, to be saved with transparent background.
↓ download image (.jpg / 19kb)
You might also want to have a look at the lovely “Photoshop Etiquette” by Dan Rose for more details.