Bad Design

  • It fails to fulfil the brief
  • badly crafted
  • it fails to recognise conventions
  • it fails to be novel
  • fails to communicate
  • lacks a central concept
7 steps – Design Process
  • define – Brief
  • research – background
  • ideate – solutions
  • prototype – resolve
  • select – rationale
  • implement – delivery
  • learn – feedback
Define the brief
Establish the problem. Briefs vary in their coherence, it is your job to make sense of them and create a response. Is the brief good enough? what info do you need?
1. do you understand what the brief is asing of you?
2. does the client understand what they are asking for?
3. do you both agree on the definition of terms?
4. does the brief have any flaws?
5. does the brief have opportunity?
6. can you manage client experation
7. will you have time to plan and deliver?
Design Process

Kolbs learning cycle

When designing anything in life, you could and will use this learning cycle to develop your artifact. There is no right or wrong place to start on the cycle nor any given direction. You can be sure you will use each example on the cycle, and once you complete your design or have made your piece, you find yourself going around the cycle again. For example you can reflect on what you have produced, find out your mistakes, what constructive criticism you have received. Reflect on this for your next project to make your next piece even better.

Concept – a general notion or idea is a concept. An idea of something formed by mentally combining the characteristics.

Artifact is the final piece of work

Color Psychology research – mood/feel

Jean Luc Goodard – “Its not where you take things from, its where you take them to”.


Intro to web lect 2

Good lecture, was nice to get some hands on experianhce.

Given Typography brief

Web design tools: Brousers
Internet explorer

Dreamweaver (my pref using as NON wysiwyg)
Notepad ++
Textwrangler (using in lect) (

Brouser Tools:
Web dev toolbar (easily show page source, makeup etc) (info>display ID & Class Outline>Block level)
Firebug  (shows page layout with css etc)
Colourzilla (nice way to find colours on the web)
whatFont (shows fonts used on sites, add to favs)

w3c markup validator Important tool to check html validation, ensure compatability within brousers.

Shown standard folder layout of root folder /image
Starter page is always index.html

Base html structure:


base markup for html 5


Basic tags:
<h1> </h1> Headers 1=large 2,3,4= smaller etc
<p> </p> Paragraphs
<em> </em> Italics
<strong> </strong> Bold

<br/> Line break (NOT to be used to add spacing)
<ul> </ul> Unordered list, must contain <li> </li> list tags (bullet points)
<ol> </ol> Ordered list, same as ul but uses numbered, must contain <li> </li> list tags

How to achieve listception
listceptionpass marker