Although I’m jumping ahead a bit, I’m going to start off my series by showing a simple HTML rendering of the LMC Photoshop design comp that was created for the redesign of the College website. I realized that, before I could do much more work on my own design, I needed to have a good picture of what was being proposed for the main College website.

Typography

I started off by coding up the typographic choices described on the LMC design comp.

Roboto Slab, a friendly and readable serif font was chosen for all of the heading tags, except for H5, which used Roboto, a sans-serif counterpart. Source Sans Pro, a light sans serif font, was used for blockquotes. Geneva, a common sans serif system font, appears to be used for all other typography. So far, so good.

I went through the proposed style guide (which was delivered, at this point, as a Photoshop comp, rather than HTML and CSS) to pick out the recommended font weights and styles and came up with this list.

1. Roboto Slab: Light 300, Normal 400, and Bold 700
2. Roboto: Medium 500 and Bold 700
3. Source Sans Pro: Light 300, Light 300 Italic, and Normal 400

Delivered as a Google Font package, it is a wee bit heavier than you would probably want, but probably not so weighty as to drastically impact page load times.

The thing I struck me as odd, however, were the sizes and line heights chosen for some of the critical page design elements. Headings ranged from 20pt to 80pt with 10-20pt line height buffers except the smallest two. Blockquotes were set at 26pt except when overlayed on hero element images where they were bumped up to 36pt. Paragraphs and list items were also bigger than browser standard at 16pt and with double-space line heights. (The browser standard for 1em is 12pt or 16px, whereas 16pt is 1.313em or 21px.)

• H1. ‘Roboto Slab’ Regular 80pt/100pt #000000
• H2. ‘Roboto Slab’ Regular 50pt/60pt #000000
• H3. ‘Roboto Slab’ Regular 40pt/60pt #000000
• H4. ‘Roboto Slab’ Regular 30pt/40pt #000000
• H5. ‘Roboto’ Medium 26pt/36pt #000000
• H6. ‘Roboto Slab’ Regular 24pt/26pt #000000
• “H7” (really a .h7 class). ‘Roboto Bold’ 20pt/24pt #009161
• BLOCKQUOTE. Source Sans Pro’ Light Italic 26pt/36pt (or 36pt/46pt) #000000 centered
• P and LI. ‘Geneva’ Regular 16pt/32pt #000000

Here’s what these elements look like rendered as a CodePen.

See the Pen Simple Mockup of LMC Design Comp by Tom Keays (@tomkeays) on CodePen
3

The overall effect is that all the page elements are really large. I guess this is the design trend du jour. Although I suspect nobody on campus besides myself has mocked up the style guide comps yet and realized exactly how big everything is, thinking back on what the design firm was told was the main purpose of the LMC website — recruitment and marketing — this is probably exactly what the marketing folk were looking for and when they see it live, they will like it. For one thing, the design will be good for presenting short blocks of information with good readability.

However, this typography schema is just too outsized for presenting more in-depth information that is required by the Library website. My next steps will be to figure out what font sizes and line heights I want to use (I probably won’t deviate far from the choices Bootstrap offers) and what font weights I actually need in order to make a smaller Google Font package.

Colors

Bootstrap gives you a limited palette of color choices out ot the box: 6 button and alert box colors (what they call “brand” colors) and 5 shades of gray. However, using the Less CSS pre-processor, it is fairly easy to add more. The design comp defined 7 shades of green and 2 shades of “gold” (although they look more tan to my eyes).

After staring at the CSS hex codes for the sequence of greens, I guessed they were based on the same hue but darkened to different degrees. Using the “darken” function in Less, I was able to work out that they were darkened approximately in increments of 5%. Here’s my finished LMC color palette, including the descriptions from the comp for how they should be applied.

@lmc-green-1:                     #00c483;  // #00c483: lightest: background, links
@lmc-green-2: darken(@lmc-green-1,    5%);  // #00ab72: background, text
@lmc-green-3: darken(@lmc-green-1,   10%);  // #009161: background, primary green link
@lmc-green-4: darken(@lmc-green-1,   15%);  // #007850: background, gift box, dolphin
@lmc-green-5: darken(@lmc-green-1, 19.9%);  // #005f3f: background, bars, primary green link hover
@lmc-green-6: darken(@lmc-green-1,   25%);  // #00452e: background, super navbar
@lmc-green-7: darken(@lmc-green-1, 27.5%);  // #003825: darkest: background, search field
@lmc-gold-primary:                #cfb57e;  // #cfb57e: primary gold, buttons, links
@lmc-gold-secondary:              #ddb253;  // #ddb253: secondary gold, small arrows

@lmc-green-3 appears to be the primary green link color (with @lmc-green-5 used for the hover state) and what I’ve called @lmc-gold-primary is used for gold links and all call to action buttons. The other shades of green are used as the background colors of different marketing information boxes (that I’m probably not going to need). I will need to pay attention to @lmc-green-6, which is used for the site navigation bar, but I’ll explore that in a later post.

Here’s another CodePen showing the color palette rendered as HTML.

See the Pen LMC Color Palette by Tom Keays (@tomkeays) on CodePen
3