Overview
Design Choices
Boilerplating
Ready-to-Style
Simple Styling
Backgrounds
CSS Exercises

Design Choices

Here is how the "client" wants the document to look:

(If you've never seen a visual identity guide, they're always very interesting to scan: I don't have the ADL guide, but here is one from UNC Greensboro, and a 2014 guide from Miami University.)

What does this mean to us, as designers and site builders? Here's how I see it:

  1. Put everything into "plain vanilla" HTML. Just make it readable. This output won't be sexy, but it would work perfectly well on someone's website, and will be easy for someone else to style-up later: If our client cannot afford much, or if we don't have any time to dedicate to this project, then this plain vanilla is where we would leave it.
  2. We should figure out color ahead of time. I put one of the recent logos from their website into Photoshop, and here is what I came up with:
  3. Light Blue (in hexadecimal): #00a0dd
  4. Dark Blue (in hex): #0a406b
  5. For the line on the lefthand side of the screen, we'll just make a quick background image and use that.
  6. And then for a government-oriented graphic, we'll visit one of the go-to sources for designer comps, flaticon.com, where the graphics are a bit cliche but often free and always relevant. We might not be able to use many of those graphics at flaticon for an actual ADL site -- we'd need to investigate the terms of use. But for educational use, we're in good stead.

Note that if we doing this for real, we would not (typically) just grab their colors and branding material from the web, where we might get an outdated, unofficial, or altered asset.

So that's it: I've created a to-do list (essential part of this process) and I'm ready to get started.

To Do

  1. Put text into HTML;
  2. Add bare-bones CSS;
  3. Make a background graphic;
  4. Add background;
  5. Add style: Choose a typeface?
  6. Add style: reversed-out headers
  7. Get gov't graphic
  8. Insert graphic