GD 66 Class 08 + 09

Class 08 Topics:  Midterm Project Due

Class 09 Topics:  Review Final Project Assignment, Take Home Quiz 3 on April 28, Web Design Critiques (Typography), Embedding fonts, Image Resources. 

 

Announcements

  • Midterm grades are posted to gradebook. 
  • Make sure Assignment 5 (Sketches) and Assignment 6 (Wireframes for 3 pages) are posted to your WordPress site.
  • Be sure to bring your assignments to class every week.

Class 08


Midterm Presentations

Presentations are an opportunity to receive feedback from me and your peers. Be prepared to talk about your design process and what choices you’ve made with your design. Act like we’re the client and tell us things important when presenting to a client:

  • Prepare to speak for 5-10 minutes about your project.
  • Show us your midterm project website posted on the class server.
  • Who is the target audience? How does your design meet the needs of the target audience? In what way does your design appeal to this audience?
  • What are the needs of the client? Talk about the needs and objectives and how your design serves these needs.
  • Talk about the specifics of your design: Why did you pick the color palette for the website? How did you organize the content and design the navigation?
  • Learning to talk about your designs is one of the most important skills to develop during your time in school! Be sure to stand up tall and speak loudly so we can hear you in the back of the room.

While critiquing your peers’ work remember to be respectful and constructive. We’re all here to learn so give thoughtful, useful feedback.

While critiquing your peers’ work remember to be respectful and constructive. We’re all here to learn so give thoughtful, useful feedback.

How to Survive a Critique: A Guide to Giving and Receiving Feedback
http://www.aiga.org/how-to-survive-a-critique/

The Unwritten Rules of a Great Design Critique
http://tympanus.net/codrops/2012/10/15/the-unwritten-rules-of-a-great-design-critique/


Class 09


Review Final Project

http://classes.jamiecavanaugh.com/grdes/gd-66/gd-66-midterm-final/

Due Dates

Tuesday, April 28: Work on a revision to your Design Comp and create a second version. Start working on your Design Comps for the rest of your pages.
Tuesday, May 5: 2 Landing page Design Comps due + Final Home page Design Comps due.
Tuesday, May 12: Final Design Comps due. Start HTML5/CSS
Tuesday, May 19: Keep working on HTML5/CSS
Tuesday, May 26: Integrate Responsive elements: Menu, Form, jQuery Slideshow
Tuesday, June 2: In-class lab time
Tuesday, June 9: Final Project Due

Upload your final project to your “lastname_firstname_final” folder on or before Tuesday, June 9.


Visual Design

Start working on your Design comp for each of the three pages of your final project. You’ll need to complete a design comp for smartphone, tablet and desktop (all three for each page).

Keep in mind the Basics of Web Design:

  1. The Grid (Use this Grid, or you can find your own)
  2. Basic Design Principles (composition, balance, white space, proportion etc.)
  3. Color
  4. Typography (Keep in mind: hierarchy)
  5. Navigation

Reminders

  • Refer to your Style Tile and wireframes. Your design should support these although they don’t need to follow the Style Tile or wireframe exactly.Don’t create a design or layout that you can’t make responsive. Simplify your design if you need to. Look at responsive websites here: http://mediaqueri.es/
  • Decide which responsive navigation you want to use (options listed on final project webpage) and integrate this into your final design.
  • Same thing with the Slideshow and Form. Decide which jQuery plugin(s) you want to use and integrate this into your final design.
  • Note, that it’s difficult to customize jQuery plugins to match your design, it’s easier to match your design to an existing plugin.

More on Retina Display
http://classes.jamiecavanaugh.com/grdes/gd-75/gd-75-class-10/


Web Typography: Examples

Future of Web Design
http://futureofwebdesign.com/

Forefathers Group
http://forefathersgroup.com/

A List Apart
http://www.alistapart.com

Media Queries
http://mediaqueri.es/

Choosing the Right Font: A Practical Guide to Typography on the Web
http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web–webdesign-15

Major points:

  • Readability
  • Typefaces
  • Pairing
  • Size
  • Hierarchy
  • Leading (line-height)
  • Tracking (letter-spacing)
  • Color
  • The Grid

Embedded Fonts

Adding Web fonts to your computer system fonts

Here’s how to add fonts from Font Squirrel to your computer fonts so you can use the fonts when you create your comp in Photoshop.

  1. Download the fonts from Font Squirrel. The file format will be either TTF (True Type Font) or OTF (Open Type Font).
  2. Unzip the zip file and move the individual files (not the entire folder) to your Fonts folder in your Library.

Below is a link to more detailed instructions, and the instructions if you have a PC.

http://www.fontsquirrel.com/help
(Note: FontSquirrel suggests using a Font Manager, which you can do but don’t have to. I do not currently use a font manager.)

Once the fonts are “installed,” if you have Photoshop open, close it and then reopen it. Now you should see the new font in the drop down menu of font families when you go to insert type into your Photoshop file.

The font files you will use for the website are different than the TTF or OTF. Be sure that the font you select has a @font-face kit (this is what we used to embed the font in the web page) in addition to the TTF or OTF files.


Embedded Fonts Demo

Please download this file to use in class demo.


Embedded Fonts: @ font-face

While it would be nice to be able to just throw a font on the web and link it up, we’re hit with two major limitations.

  1. Licensing, and
  2. Browser Support of font formats: http://webfonts.info/node/379

Even many free fonts have limitations on how they can be used, often times requiring specific directions on linking back to the original source or only using them in non-commercial sites.

These days, a number of resources are popping up—especially those dedicated to font embedding. A good start to finding the right font for your project would be Font Squirrel.

Font Squirrel even provides @font-face kits to make implementation on your web site easy. However, even these kits don’t provide complete browser support.

This exposed the elephant in the type foundry: Type makers have largely refused to license their raw typefaces on webpages out of concerns about piracy. The @font-face implementation has brought this concern to the forefront, prompting all parties to figure out a mutually copacetic solution. And many solutions are either available or in the works, ranging from augmented font end-user license agreements to hosted third-party font services such as Typekit or Google Fonts

Above information found here: http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

Four steps to embedding font

Step 1. Download your font files
Step 2. Include the font files in CSS as @font-face
Step 3. Add the font-family declarations in CSS
Step 4. Load the fonts to your server via FTP

http://zoerooney.com/blog/tutorials/installing-web-fonts-start-to-finish/

Example: Including the font files via CSS and adding your font-family declarations in the CSS.

embed_font

Above snippet: http://css-tricks.com/snippets/css/using-font-face/

Fonts in font folder

If you place your fonts in a fonts folder, (and your CSS files are in a CSS folder) be sure to add the fonts folder to your CSS like this:

 

Leave a comment