Basic Web Design Principles (Guest Lecture for The Iron Yard Atlanta Ruby Class)

Transcript

1. Web Design Principles TIY–Atlanta
2. Setting Up HTML • Use classes so you can repeat common design patterns as much as possible. • name your classes something related to what they do or what they contain, rather than something stylistic like “redbox” or “green” that might change.
3. CSS systems • Use classes over and over to make your design more consistent • Use pixels or percents for width, left, and right • Use ems or px for height, top, and bottom
4. Consider these: • Typography • Grid • Color • White Spacing (Padding and Margins) • Hierarchy • Responsive
5. Typography • Use the unit of ‘ems’ as much as you can. It allows readers to scale the typography for accessibility unlike ‘px’ or ‘pt’ • You can also use ‘rems’ which are like ‘ems’ but cannot be multiplied with container CodePen • Improve typography and readability with line-height and line length • Practical Typography
6. Grid • If grids seem overwhelming, start with a 12-column grid. It’s flexible because it’s divisible by 1, 2, 3, 4, 6, 12, etc. • Grid lines are guides, but not rules. Break the grid when you want something to stand out • Allow yourself to use patterns over and over as it builds consistency. (eg. 4-4-4, 6-6, 4-8, etc) • Use something like Neat to make grids easier to work with or build out your own
7. Color • The higher the contrast between background and foreground colors, the better it is for more types of users and devices • Consider color-blindess, screen brightness, and projectors • Use a11y checklist
8. White Space • One of the best design tools out there • White space isn’t about leaving an area blank so something can be put in there, it’s about leaving it blank so attention is focused to the main content • It can also ease the user into reading what you want them to read. • Use a lot of padding around typography
9. Hierarchy • Hierarchy isn’t about making everything stand out all the time, it’s about making things stand out in the order of their importance. If a headline or paragraph is supposed to stand out, make the type larger, bolder, or brighter to draw attention to it • Drawing attention to all elements on a page make nothing stand out.
10. Responsive Web Design • Using media queries in CSS • Website layout and design changes based on constraints such as browser window width or resolution • Use of % for width • Usually ignoring height on divs • Brad Frost’s This is Responsive • My RWD checklist