WEB 200: Week 07
Week 7: Feb 15 (no TU class)
Lecture/Discussion: Color theory & using imagery
Reading: A simple color guide for web developers, Smashing Magazine; Photo and image best practices, DePaul University
Due Feb 11: 04: Wireframes
Due Feb 13: Three design resources, posted to Slack
Assigned: 05: Visual design studies & visual design
NOTE: Unless I specifically ask you to revise an assignment, feedback is intended to help you shape your final project. If you want to revise and have a second assessment, please ask. But if there is peer review going on, please do not change the URL – upload the revision with the same name.
Peer feedback: how to give an effective design critique
Typography best practices:
- say no to ALL CAPS (why?)
- do not (ever) force people to download type to see a page (why?)
- use type optimized for the web, not type optimized for print (why?)
- minimize the number of different type faces on a page (why?)
Reading assignment discussion (color and type)
- Based on the reading (or your research for design resources)
- Write down three concepts or best practices to consider when picking colors for a website
- Write down three concepts or best practices to consider when picking type
- For those of you at home — send your recommendations to me via Slack DM or via email at kegill / gmail.
- In groups of three(ish), share your ideas. As a group, develop three recommended practices for use of color and three for use of type. Be prepared to share these with the larger group.
- Using any color palette tool of choice (several of you like Adobe), create at least one color palette for your website. (Remember to write down their hex values!)
- In class tonight: use HTML and tables to create a color palette with readable hex values and a list that illustrates type choices.
- Create a CSS class (background-color) for each of the table cells.
- Identify how the colors are to be used — at a minimum, you need background, foreground (text), links (visited and unvisited), navigation, H1 and H2 — and identify the hex values for each color.
- In a list, identify your typographic choices — at a minimum, you need H1 and H2, text and navigation. Illustrate the choice using CSS to specify type, size and color.
- Name this file style-palette.html and upload it to your staging server. Link it to the staging server home page. This is due by 8 pm Sunday.
- Assignment: examine your peer’s wireframes (revised/with mobile) with your eyes and your brain. :-)
Send me an email (kegill / gmail) or a DM on Slack and tell me 2-3 ways that you’ve changed your thinking about your site design or your presentation of design concepts after analyzing your peer’s work. This is due by 8 pm Sunday.
Best practices IDed by students
- Start with one color that’s foundational
- Harmonious grays
- Color appropriate to business/genre/culture
- Consider color impairment (blindness)
- Use colors from opposite sides of the color wheel
- Limited palette (main, complementary, neutrals)
- Good contras for readability and info hierarchy
- Appropriate to the genre/business/culture
- Using family fonts (change weight/obliqueness within a font family)
- Avoid too much text decoration (weight/ obliqueness)
- Serif (headings) / sans serif (body)
- Ragged right
- Line spacing (make sure there’s enough)
- Line spacing (make sure there’s not too much – between headings and the graph that follows)
- Right type size to line length for readability
- Page needs to feel clean to feel readable