02 Design and Layout, from 'ancient' till 'modern' websites - LIttleAncientForestKami/shiny-octo-doodle GitHub Wiki
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
-
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.
By Dan Norman:
-
Visibility - what do I see
-
Affordance - what am I encouraged to do
-
Mapping - what can I map to, what analogies I can make
-
Feedback - what happens when I activate or use it
-
Constraints - what Iโm told NOT to do
|
โ ๐
|
Original blog post TIP: Short preso with mostly examples NOTE: 70-slides long preso |
-
Pure HTML ones:
-
Table
-
DIV-based
-
HTLM5 semantic tags again
-
-
CSS-ones
-
none
-
`float`ing
-
inline-block
-
-
Grid
-
Flex
-
adjustable, for MF and RWD
|
๐ฑ ๐
|
Reading materials
Links worked on 28th October:
. HTML table layout
. Talks |
-
Golden ratio
-
Rule of third
-
Clutter is noise is ignored
-
Negative space
-
Typography again
|
๐ฑ ๐
|
Reading material
Links tested on 28th October:
|
Later onโฆโ
-
CSS3
-
MF, RWD
-
Viewport
-
Media queries