02 Design and Layout, from 'ancient' till 'modern' websites

This page tells you what are product design principles, how you can design products, what matters, along with some rules and guidelines. It teaches you laying your elements out on your website and takes you on a journey from 'ancient' web, where HTML-based layouts ruled, till 'modern' web: responsive, reactive and full of SPAs.

Product design

Product

whatever you create. Item, book, poster, cover, website…​

Design

??? nobody knows! ;-)

Architecture

some people say architecture is design, or design is architecture, or both are interchangeable. Well, sometimes they are, sometimes they aren’t.

Design principles

By Dan Norman:

1. Visibility - what do I see

2. Affordance - what am I encouraged to do

3. Mapping - what can I map to, what analogies I can make

4. Feedback - what happens when I activate or use it

5. Constraints - what I’m told NOT to do

⚓ 🔖	Original blog post TIP: Short preso with mostly examples NOTE: 70-slides long preso

Kinds of layouts

1. Pure HTML ones:

   1. Table

   2. DIV-based

   3. HTLM5 semantic tags again

2. CSS-ones

   1. none

   2. `float`ing

   3. inline-block

3. Grid

4. Flex

5. adjustable, for MF and RWD

🎱 🎐	Reading materials Links worked on 28th October: . HTML table layout . Talks position and float . Form styling example . 4 ways to have same site

Rules

1. Golden ratio

2. Rule of third

3. Clutter is noise is ignored

4. Negative space

5. Typography again

🎱 🎐	Reading material Links tested on 28th October: 🍀 🎁 20 rules - overall encompassing article! Layout rules Golden section, rule of third, grid layouts fonts and typography in detail - 20 rules

Modern websites:

Later on…​

1. CSS3

2. MF, RWD

3. Viewport

4. Media queries

5. SPAs: http://singlepageappbook.com/single-page.html