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

 

Discussion

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.

Student staging links

  • 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

Color

  • 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

Typography

  • 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