-
Notifications
You must be signed in to change notification settings - Fork 11
A11
Tired of staring at a basic HTML? Us too. Time to start adding the design elements in. For this assignment, you will be heavily referencing your creative brief and design personas. The following should be implemented:
- typography
- grid / layout
If you'd like to start adding in color, that's fine, but not required.
Note: This should all be done in your external stylesheet. If you add inline styles, your assignment will be rejected.
Using a grid helps establish hierarchy in your design. It creates consistency among pages and aids the user in consuming the content.
First, determine how many total columns the grid will have.
I tend to use:
- 4 columns for small screens
- 8 columns for medium screens
- 12 columns for large screens
I've found using even-numbered grids yield more flexibility. However, odd numbered grids are okay, too.
There are many fantastic grid systems out there. If you want to roll your own (or use Flexbox), you can, but beware of the maintenance that comes with it.
Some popular grid systems:
Note: If you are comfortable using Sass/SCSS, then I recommend Neat or Susy. If not, then ignore this statement.
Once you've decided on your grid, begin to implement it into your layout. Most likely you'll have to wrap <div> around elements to package them as units. This will also involve adding class names to those elements and telling it how many columns it should span.
Add the fonts that you chose in your style guide. If it's not a web-safe font, then you should implement it via a hosted font library (such as Google Fonts).
If you don't care about the typography, your reader shouldn't care about your site.
Strong typography skills makes the difference between a mediocre designer and a great designer. As you choose weights and sizes, imagine one of your personas in the environment that they interact with your content.
Ask yourself questions like:
- Can [insert persona name] read this?
- Would [insert persona name] want to read this?
- Does it fit the pace of the content?
- Does the tone work here?
For example, Local Elections has a "Fast Facts" section for each candidate. The type for that section should look much different than My Life My Town or Digital History.
You'll want to be look at the design on the actual device. Trying to decide whether the type works from your laptop is like trying to read a billboard from 30k feet in the air: pointless.
This article does a fantastic job on illustrating the importance of type on the web.
Use the CSS validator to catch any syntax errors. Use the HTML validator to catch any errors. Your CSS & HTML should validate without errors (warnings are okay).
You are expected to continue using Git and Slack (obviously).
This will be due on Thursday, November 19, by 11:59 p.m. It will be worth 40 points.