This week I learned about web fonts and their slow evolution. I also discovered google web fonts and had a good time playing around with that. I also learned how handy grids were in web design and found some great resources to learn more.
On the Flourish website I completed the design document which I think turned out well. I also created the stye tile to show what the general aesthetic of the site could be, including fonts, textures, photos and colors.
Web Fonts!
Reading: Web Fonts
For your final project, you will be required to implement and use a pairing of web fonts. For a little history of web fonts, read the following:
In addition, we’ll need to review some general guidelines for selecting and choosing web fonts, as well as what qualifies as a “good web font.” Laura Franz has done extensive research on what makes a font worthwhile on the screen. Please read:
- Is the Font Easy to Read? (best read in Adobe Reader, for rollover effects)
- Good Web Fonts (explore the site and the pairings she suggests)
In our practice assignment we’ll be using Google Web Fonts. Read the overview of using Google Web Fonts, as well as the writeup on the best Google Web Font pairs.
Grid Systems!!
Articles/Websites
- Grid-Based Design: Six Creative Column Techniques - an article from Smashing Magazine that details the key elements of grid-based design for the web and gives Case Study examples.
- 960 Grid System - website detailing the 960 pixel grid system (which we will be using) and giving examples; read the overview and scroll down to the examples – click the “SHOW GRID” button next to each design to see an overlay of the grid that was used.
- Greeking Generator - use this website to create “dummy” placeholder text, or “greeked” text to use in your designs or storyboards ( http://www.lipsum.com/ )
