Web Design and The Art of Reason

Tim Brown

Visual Language 2

Reason: the idea for your website

• Adhere to These Fundamentals
• Of course you should not adhere to those fundamentals
• Before building a website, ask yourself....
• Why am I making this website?
• Why would someone visit this website?
• What do I want to have happen as a result?
• Now, you have reasons

Mo’ reasons, mo’ problems

• Design is problem solving
• Your reasons are your problem
• Find solutions
  • Content – atomic chunks
  • Narrative threads – sequence
  • Wireframes – space
• Handwriting & sketches or computer generated
• Information architecture: solutions based on reason

There’s a reason it looks like this

• Eliciting intended emotions
• Targets via descriptive words and phrases
  • Warmth, care, openness, simplicity
  • Smell of a good book, squeak of polished glass, heft of thick rope
• Mood boards express compound emotions
• Graphic design & your message: Contrast & Meaning
• Appease critics; boost communication

Reasons add up to reality

• Reasons → Solutions → Narrative Threads & Wireframes
• Reasons → Emotions → Mood Boards
• Solutions + Narrative Threads = Site Map
• Site Map → HTML markup
• Wireframes + Mood Boards = Comps
• HTML markup + Comps + CSS = Website
• HTML markup + Comps = Project 2