The Design Process

The design process can also be referred to as design methodology. It basically refers to a number of steps that a design can be broken down to from the initial idea or client request to the final printed end piece or manufactured prototype.

There are several trends to create a streamlined step-by-step approach, but it is not chiseled in stone. You can look at my preferred method and modify it for your needs.

I have based mine on my practice, research and education and it is working well for me. A great source of inspiration was the Double Diamond or the 4Ds developed by the British Design Council. The 4Ds stand for discover, define, develop and deliver.

The design process below is particularly suitable to communication design, but works for other design disciplines as well.

Here are the 7 steps:

  1. Project Analysis or Project Considerations
  2. Research
  3. Design Strategy
  4. Concept Development with Evaluation
  5. Concept Refinement with Evaluation
  6. Prototyping or Modelmaking
  7. Delivery and Completion
Design Process broken down into 7 steps by Federico Viola

The Design Process – in 7 steps – by educator Federico Viola

  1. Project Analysis or Project Considerations

The first step is to define the problem or the request for a design. Either you are approached by a client or alternatively you may get your hands on a brief through a competition or by your teacher.

  • Your first step has to be to analyse what the client needs and define a written brief. So, you need to write a short description that lists, what is required, what materials are needed, who it is for and by when it is needed. So, list the problem and what you need to design as well as dead lines or due dates.
  • Next you need to create a project plan or action plan. This is a list of each task, with a task description, allocation (who will do the task), due date and a tick box. The allocation column is not necessary if you work on your own and complete all the tasks on by yourself.
  • You should also include a section on potential problems in this project. This could be a mind map and it should allow you to see any complications early. An example could be the stability of a desk based yearly calendar, or the wear and tear of an exterior.
  1. Research

 The research stage is your attempt to learn about the design that you are about to create. You want to research these 3 stages as a minimum: competitors, target audience (or target market) and design and technology.

Competitor Research

After establishing what product (or service) you are designing for your client, find 3 or more competitors that offer the same or a similar product or service. It is good to look at a market leader as well as competitors at a similar level to your client. This can start of as a brain storm of all competitors that come to your mind or a search of similar businesses online. You may want to find competitors via an online business directory, e.g.: www.truelocal.com.au or by using Google. If you are not aware of many online business directories try a Google search for ‘business directory’.

You can document your brainstorm in form of a mind map and your research in form of a page including:

  • short description of the competitor
  • images of their products
  • logo of the competitor or product
  • other aspects of their visual identity (e.g.:colours, fonts, etc.)
Photo of a family by alexander41 found on morgueFile.com

Who is your target audience? – Source: morgueFile – photographer: alexander41

Target Audience Research

When you are setting out to understand and define a target audience you are looking to recognise why this group or individual person is seeking out your client’s product or services. By understanding a target audience you understand their needs, desires and interests in a particular product. This is central in designing a product or service. We are trying to understand a target audience by looking at data of that group. These are typical criteria to collect data by:

  • demographic (measurable data: age, income, gender, culture, language)
  • psychographic (personality-related data: life style choices, hobbies, interests, political agenda, cultural traits)
  • customer needs
  • customer desires
  • frequency of use
  • geographic location

Below you will be introduced to different tools you can use to collect data:

  • mind mapping – a good starting point, mind map the various aspects of the target audience
  • target audience list – filling in a list of criteria related to the target audience
  • moodboard or visual board – this is fun: put everything related on a sheet of paper or into a digital presentation
  • character profile – this needs to be representative of a typical person in the target audience, preferably a common personality or a leader, see examples below

Finding information about a target audience might mean to actually listen in on your target audience. You can create specific discussion groups with participants of the correct demographic (age, gender, etc.) and psychographic (interests, political persuasion, etc.) profile. You can search online for chat forums or in the comments to related blogs and Facebook is a powerful resource as well.

Example of a character profile

Example of a character profile – developed for class.

Character Profile - The Librarian

Character Profile – The Librarian – FViola

Design and Technology Research

Design research is the fun part of our research and is where we want to look at inspiration for our design. This can be

  • existing products of the type we are about to design as well as
  • layouts
  • typefaces (fonts) > http://www.dafont.com
  • colours suitable to the target audience, product and client business
  • textures
  • shapes

The technology aspect relates to manufacturing, finishing or prototyping methods used for the product you are designing. It is central to understand the process and materials applied in the making of the product. If you are working on a plastic component to be inserted into a dashboard of a car or yacht you may need to research the plastic manufacturing process (e.g.: injection molding). While if you are designing a pamphlet, you will need to research printing and folding techniques. So ensure to research:

  • manufacturing and other technology
  • materials
  • other aspects

I like to use Pinterest in my research and highly recommend it as it is a fun site.

Screenshot of Pinterest site showing a Pinterest board of poster designs

Pinterest Screenshot

  1. Design Strategy

A design strategy is a written statement that will help you establish what you are setting out to design. It is your chance to reflect on your analysis and research and now clearly state what your intended design strategy will be. Make sure to relate your strategy to your design ideas and link it to your research and brief.

Example: ‘I will set out to design a poster for the MUFF (Melbourne Underground Film Festival). I will use vector graphics to show a group of festival goers waiting in a lobby. They will all look eclectic and wear some retro-style clothes. The font needs to work with the MUFF logo. The poster will have a retro appeal, but look contemporary. I want to avoid designing a poster that looks dated. The layout will have a clear visual hierarchy and good use of white space. The colour scheme needs to be decided.’

You see that the design strategy is a method to plan your design, but needs to link your ideas to the brief and research. Your design strategy may be a work in progress and you may not conclude every aspect. It is a bit a cooking recipe for a design. Incorporate problems or difficulties with this project as you may have found in your Project Analysis.

  1. Concept Development

Now you can get creative by developing concepts or ideas. The preferred method is the sketching of thumbnails on paper. Use pencils or fine liners to sketch out your concepts. You need to create a large number of ideas. Do not limit yourself to only your first few ideas, but use brainstorming, mind mapping and other creative thinking tools to come up with creative and unorthodox concepts. I would develop a minimum of 30 thumbnail sketches.

Poster concept sketches developed for an event poster.

Poster concept sketches by S.Lau

  1. Concept Refinement with Evaluation

Select 3 of the most suitable and promising concepts. You may select them yourself or get the feedback of a colleague or the client. Refine the concepts by exploring variations for layout, fonts, scale, colours and shades, as well as image choices and finishes. Always include a colour scheme (options of colours) and font choices.

  • Depending on the product you may create 3 mockups to give a feel for the product.
  • Present your 3 refined concepts to your design team and client for evaluation and feedback. Choose the preferred concept.
  • You may create a style guide that clearly defines the different aspects of this design (font choices for headers, base text, colour choices, and more)

The evaluation takes your design strategy into account and looks at how well each design has achieved the desired aspects.

  1. Prototype or Modelmaking

Create a to-scale prototype in the correct finish and finalise your design.

  1. Completion

Finalise all the paperwork and files. Support your client and other third party companies with the correct information, files and support.

  • Ensure the manufacturer or printer is completing the job (e.g.: by signing off a test print)
  • Save all files into correct folders. Store the files.
  • Finalise all invoicing and payments.
  • Supply your client with all the correct files and instructions.
  • Write a completion report

Other Useful Resources

Quicksprout’s How To Define Your Target Audience

The 7 Steps of a Professional Design Process by DesignCrowd

Inspirationfeed’s 7 Design Process Steps Designers Should Follow

Visual Design Components – Class 7

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4     Class 5     Class 6

Today’s Class

  • Feedback on both Assessments
  • Assessment Files
  • Adding Meta-data to an Image in Photoshop
  • Inspirations

Feedback on Both Assessments

I will walk around and provide feedback on your work. Make sure that you consider the Visual Hierarchy of your work.

Create a layout of your work from basic outlines and place numbers against the different elements or pieces.

Is there one element that stands out the most? Are they all equal? Boring!!! You want to create a piece that is dynamic! For it to be dynamic it needs:

  • some movement
  • an entry point to the work (this is the first piece or element in your visual hierarchy)
  • a second, third, and other pieces in your Visual Hierarchy
  • A focal point – this can be achieved by an arrow pointing, a person pointing, a person looking at the focal point, the direction of text, etc
Example for Visual Hierarchy - based ‘Think small’ Advertisement for VW Beetle by Helmut Krone, 1960

Example for Visual Hierarchy – based ‘Think small’ Advertisement for VW Beetle by Helmut Krone, 1960

The image of the Beetle advertisement by iconic graphic designer Helmut Krone is a good example for a clear Visual Hierarchy.

  1.  Product image – due to position (we are trained to look at the top left first), high contrast (darkness of the beetle against the white background helps to make it stand out), generous use of white space (makes the image visually more important).
  2. Heading – due to position (it is positioned on the path to the next elements), bold and larger than body text, high contrast.
  3. Body textposition and size of text area. You could argue that the logo is visually as important.
  4. Logo – position, size (opposed to text) and white space around the logo.

The advertisement can be found at the AIGA Design Archives (and many other sites).

Scale – play with the size of things! Do not accept the first concept that you create. Rearrange it and change the scale of one element. How does the work look if one element is much larger?

Playing with the scale should be a lot of fun! In illustrator you might need to group some elements (Ctrl+G/Cmd+G) and select with V, the Selection Tool and drag to increase or decrease.

Assessment Files

Below are copies of both your assessments:

Assessment 1 – Student Diary Cover

Assessment 2 – Design a GUI

Adding Meta-data to an Image in Photoshop

The easiest way to integrate Meta-data into a file in Photoshop is to open the File Info Sheet: click File>File Info from the drop menu or use the short cut: Shift+Ctrl+Alt+I to open the window.

Next enter your information into the text fields. You want to add a title, name of author (creator), description, keywords and a copyright status.

Shift+Ctrl+Alt+I or File>File Info...

Shift+Ctrl+Alt+I or File>File Info…

Example of File Info being filled in.

Example of File Info being filled in.

PS Screenshot - File Info 02

Inspirations for Your Assessments

We were discussing different trends and inspirations in class. Here are some ideas and inspirations. Click on the images to activate a Google Image Search for the type of images in the thumbnails.

Retro Book Cover Illustrations 50s - Click the image for a Google Search

Retro Book Cover Illustrations 50s – Click the image for a Google Search

Retro Futurism - Click the image for a Google Search

Retro Futurism – Click the image for a Google Search

Vintage Book Illustration - Click the image for a Google Search

Vintage Book Illustration – Click the image for a Google Search

Visual Design Components – Class 6

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4     Class 5

Today’s Class

  • Feedback on your Student Diary Cover for Assessment 1
  • Work on Student Diary Cover
  • Inspirations

Progress with Assessment 1

Please open your assessment 1 – Student Diary Cover; I will walk around and look at everyone’s progress.

You will receive feedback and be able to work on your assessment.

Inspirations for Assessment 1 – Student Diary

You want to visit and bookmark these two online resources:

Typographic images can be a strong visual treatment of thought and ideas someone may have. The thoughts could be made visual in a comic-like sense.

The Face by drfranken

The Face by drfranken, found on ChromoArt.de

What Time is it Now? by King_Bobbles

What Time is it Now? by King_Bobbles, found on Templates Blog

Visual Design Components – Class 5

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4     Class 6

Today’s Class

  • Discuss your assessment progress with Assessment 1
  • Discuss your approach to your target audience
  • Inspirations

Progress with Assessment 1

Please open your assessment 1 – Student Diary Cover; I will walk around and look at everyone’s progress. Please open up anything you have done.

I would like to see some ideas and concepts at this stage, a description of the target audience and possibly you might have started on the project in Photoshop, Illustrator or InDesign. I will spend approximately 20 mins on this.

Inspirations for Assessment 1 – Student Diary

Swiss International Style – an iconic style of graphic design from the 1950s, strongly influenced by the ideals of the German Bauhaus – Click the image for a Google search on Swiss Style:

Swiss International Style Screenshot Google

Swiss International Style

Swiss International Style

Constructivism – The immensely graphic art and propaganda style of Communist Russia, or to be more precise, of the Soviet Union. Early 1920s – 1940s. Click the image for a Google search on Constructivism:

Constructivism

Constructivism

Vietnamese Propaganda Posters – this is a particular style popular in Communist Vietnam. Visually very flat with the use of rich patterns and stunning in colour scheme. I feel very attracted to this style. Vietnam particularly in 1960s and 1970s. Click the image for a Google search on Vietnamese Propaganda Poster:

Vietnamese Propaganda Poster

Vietnamese Propaganda Poster

Photomontage – Artform that became extremely popular in the early 20th Century. Particularly popular in German Expressionism and Dadaism. Click the images for links to the original images or sites:

Photomontage: Amir Ebrahim Photography

Photomontage: Amir Ebrahim Photography

Massive Attack - The Essential Mix

Massive Attack – The Essential Mix

ruthworkx -http://ruthworkx.files.wordpress.com

ruthworkx -http://ruthworkx.files.wordpress.com

Mosaic of Sofia Coppola - by Maurizio Galimberti - www.mauriziogalimberti.it

Mosaic of Sofia Coppola – by Maurizio Galimberti – http://www.mauriziogalimberti.it

Photo Montage by SGlider12 on Webdesign.org - Click image for great Gimp tutorial

Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial

Assessment 2 – Design a GUI

This assessment covers this class for these units: Create Visual Design Components and  Analyse Information and Assign Meta-Tags and Create A User Interface.

Due Date: in July

Design a Graphic User Interface. You can choose to design for a Website or App.

First: think about a project. What do you want the GUI to be for? Think about a client scenario, who is your client and what is the purpose of the site or app? What do you want the user to do after visiting it?

Develop sketches and refine your design in Photoshop.

You will need 4 pages (example Website: home, about us, portfolio, …)

Make sure to include:
Platform consideration – basically decide on the output platform and write it down
Dimensions – at what size will the user view your GUI?
Target Audience – Visit class 3 for ‘Visual Design Components’ for ideas on how to develop your target audience.
Influences – ‘screenshot after screenshot’, capture screenshots of influences, look up sites that influenced you.
UCD considerations, design your GUI around User Centred Design considerations
Follow a step by step approach for your design process – Visit class 2 for ‘Visual Design Components’ for examples of a design process

You will need to supply original photos taken by you! Each photo needs meta-data assigned to it. Include photographer details, tags, image title, copyright statement. Include a folder with the edited images with meta-data.

Tutorial9 - Glossy Reflection

Tutorial9 – Glossy Reflection

Glossy Reflection Tutorial

Follow the in-class presentation of this tutorial The 5 Essential Photoshop Reflections or complete it yourself.

Visual Design Components – Class 4

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 5    Class 6

Today’s Class

 

Based on image by hotblack on morgueFile.com - F.Viola

Based on image by hotblack on morgueFile.com – F.Viola

 

Visual Design Components – Class 3

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 4     Class 5     Class 6

Today’s Class

  • Applying Step 1 of the Design Process: The Project Outline
  • Target Audience Workshop

Applying the Design Process –

Step 1: The Project Outline

  1. You must clearly define what is required to be designed.
    What requirements/problems must the design solve? – inform, promote, sell. define a mood, etc.
  2. Define the target audience?
  3. Determine format and delivery platform. Are there any specifications or constraints? Think about size, format, cost, time, colour, etc.

>

Based on image by hotblack on morgueFile.com - F.Viola

Based on image by hotblack on morgueFile.com – F.Viola

Target Audience Workshop

When defining your target audience you might fall into the same trap as most people, you might define your target audience to broadly. It is a common mistake to assume that (potentially) everyone is your target audience. The mistake is the assumption that a larger target audience gives you a larger gruop of potential customers, buyers or clients. The reality is unfortunately different and I would like to clarify it with a metphor:

Love in the making… Cupid 1 says that he wants to shoot an arrow and hit any person in a park. He assumes that he will hit one eventually. He closes his eyes and shoots an arrow.

Cupid 2 aims for a specific couple, he studies them, estimates the distance, the direction and strength of the wind and then (and only then) takes aim on that particularly couple.

Cupid 2 has it right, he will get the target audience that he anticipated, his product (the arrow) is custom made for the task. Furthermore Cupid 2 takes the time to find the right people for each other, not just anyone…

Source: GraphicsFairyBlog - click image for link

Source: GraphicsFairyBlog – click image for link

When defining your target audience you need to be specific and aim to get into the mindset of your audience. Understand what excites them, what interests them, what issues are important to them, how they communicate verbally and in social media. You want to understand what style appeals to them, what colour scheme is suitable and what other products, websites, apps, social media they purchase or frequent.

Clear Goal Media advises to find a niche market and ask yourself these 5 questions about your target audience:

  • Desires (things they aspire to but not necessarily need)
  • Values (a code of behaviour they define as ‘good’, ‘cool’ and /or  ‘appropriate’)
  • Needs (things within your niche they cannot do without and if you provide solutions will ‘hook’ them)
  • Can they pay for the products you promote or sell?
  • What is their level of expertise (you need to pitch your ideas slightly above that, but not too far above that).

Read the complete post by Clear Goal Media: How to define the target audience for your website?

Define Demographics and Psychographics

Inc. advices to define a target audience by looking at demographics (aspects related to the persons status and whereabouts) and psychographics (personal characteristics of a person).

Read the complete post by Inc. : How to Define Your Target Market

Think about demographic factors:

  • Age
  • Location
  • Gender
  • Income level
  • Education level
  • Marital or family status
  • Occupation
  • Ethnic background

Think about psychographic factors:

  • Personality
  • Attitudes
  • Values
  • Interests/hobbies
  • Lifestyles
  • Behaviour

‘Determine how your product or service will fit into your target’s lifestyle. How and when will they use the product? What features are most appealing to them? What media do they turn to for information?  Do they read the newspaper, search online, or attend particular events?’ Inc.

Create Personas

Finally, another important step in making your target audience more real and being able to reach them on a more personal level is creating personas. Personas are a customised target audience. What it is you are actually naming your target audience segment and give them a personality. The idea of personas is to make your target audience more real and to give them a face with needs and characteristics.

Read more about Personas on: Raventools’ How to define your target audience the right way

Create 2 -3  personas for the target audience of the student diary cover.

Visual Design Components – Class 2

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all Classes    Class 1     Class 3     Class 4     Class 5     Class 6

Assessment 1 – Design of a Student Diary Cover

See the Brief: 2014_Cover comp guidelines

It is important to apply the steps of the design process when designing. Jumping on a computer and creating whatever comes to mind excludes your ideas and limits you to what you are able to do with the software.

Make sure to include steps that allow you to analyse the project (Project Outline), research the topic, generate ideas (brainstorming, using Kickcard method, using spider grams, creating a Metaphorical Analysis, The Inverse, sketch, doodle, etc) and discuss them with someone else on the project (eg teacher, friend or other student). You want to sketch and label your ideas.

Now refine them and work them on the computer.

Use the examples below as a step by step design process (the second one is more Web design focused, so ignore any coding references):

Design Process – Graphic Design    Design Process – Web Design

Make sure to write more about the Target Audience than just a sentence. I have attached an example of my own work. The Target Audience is for a Photography website: Example Profiling Target Audience

Note: You will receive an assessment cover sheet.