TIL Python Basics Day 65 - Web Design School

Colour

Moods
Red: passion, Energy e.g. Car
Yellow: Joy, Attention Grabbing
Green: Fresh, Safety, Growth e.g. Food co.
Blue: Stability, Trust, Serenity e.g. PayPal
Purple: Royalty, Wealth, Femininity

What message am I trying to convey?

Combining Colors

• Analogous Colours: colour right next to each other
  not standing out / nav bar, body

• Complementary Colours: Opposite end, Clashing / logos, icons

• Colour Discord: No text background.

Adobe color gives colour palette
colorhunt.co

Typography & Fonts

* Serif family

feet at the end of their central beams. It looks old, serious, traditional, authoritative.

Old: old style
Modern: Diddot, Thick and Thin constrast

* San-Serifs

Rounder: body which needs to be more legible and readable.
It looks Friendly, comtemporary, simple, sensible.

Humanist

Sticking Two Fonts in one Design

Similar Mood, Time Era
Contrast: serif-ness, Weights (Think-Thin)

User Interface (UI) Design

1. Hierarchy
Colour, Size(Bigger ones draw your eyes to it)

Feature > Email button > Logo

2. Layout
Different sizes makes design interesting.
Wikipedia looks very blend, boring.

Optimal line lenghth 40-60 width is comfotable.

3. Alignment
center, left, right align

Matching starting point makes it consistent.
Reduce the number of lines. Coherent. Professional looking. Use grid line.

4. White Space (empty)
Luxury stores! Space things out. Same principle applies.

5. Audience
What's important to convey to them?

User Experience (UX) Design

1. Simplicity
Monocle example
https://monocle.com/

2. Consistency
nav bars

3. Natural Reading Patterns

• F-Layout
  Top left of the corner browsing down. F
  Have the most important things on the left gutter.

• Z-Layout
  Z for browsing fast.

4. All Platform Design: Mobile Responsive

5. Avoid Tricking People
   Dog Pattern
   Ryan Airline!!!!!

word
pare it down
to reduce or remove by or as by cutting; diminish or decrease gradually (often followed by down): to pare down one's expenses.