Design¶
User Interfaces¶
Forms / Widgets
Layouts
Scene
Graph
Frontend¶
Design has been fairly commodotized.
Free
Material CSS
Metro UI
Bootstrap
Semantic UI
Paid
Theme Forest
Icons
Stock Photographs
Can all be bought or downloaded for free.
Interactive Design is new is a new breed of HTML5 design that focus on
Game like interactions.
Skills
Layout
Colors
Typography
Accessibility
Gimp
CSS / Sass
Accessibility
Sound Mixing
Readability
Data Visualisation
WebGL
D3
Books
Desig of Everyday things
Don’t make me think
Elements of Typographic Style
Designing Interactions
Responsive Design
Set Aspect Ratio
Get Window Size
Draw Container
Set Background
Use Zoom
http://www.hcibib.org/
https://www.interaction-design.org/
ppi and dpi
see graphics are just pixels. how they appear on the screen is dependent on the ppi of the printing medium.
1/ppi is basically the width of the pixel.
thus the quality of the printer or the quality of the monitor can be be determined by how many pixels it can draw and thus by how small 1/ppi is.
the A* paper sizes are designed in the following manner
height : width = root2 : 1
A4 size is 8 1/4 ? 11 3/4 in inches
before going to printing fonts, we have to define point. 72 points make an inch. so if
so if you want to print
Hue == Color
Saturation, Muteness
Lightness Darkness (Accent)
Tint (white), Shade(black), Warm(Red), Cool(Blue)
Neutral Colors - White, Black, Grey
The main idea of colors is to create contrasts. Contrasts are used to direct the users attention.
Typography¶
https://www.modularscale.com/
https://basehold.it/
http://lorempixel.com/
/* Large desktop */
@media (min-width: 1200px) { … }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { … }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { … }
/* Landscape phones and down */
@media (max-width: 480px) { … }
Concepts¶
grid layout
fixed
fluid
elastic
responsive
golden ratio
color palette
baseline
typography
colors
spacing
css tricks
shadows
rounded corners
sprite
minify
overlay
opacity
transitions
hover styles
aesthetics
Frameworks¶
960
gloden grid
blueprint
skeleton
yaml
foundation
cascade
http://grid.mindplay.dk
bemwhats it to you pork face ?
functions – smallest divisible unit, avoid repitition
vertical rhythm
explain to 6 year old