Interactive Design I – Week 6

4 Comments

My Winter Ride

Session 1: Today we will continue demonstrating the techniques required to produce the cycling project. I will also assign the requirements for Cycling Project Milestone #3.

Cycling Project Milestone #3
Due: Week 7, Session 2 (before class starts)
1. Be prepared to show your template for final feedback
2. Illustrate working navigation to one or more additional pages
3. Demonstrate how your markup and stylesheet differ from the in-class demos

Session 2: Today we will discuss the requirements for the Typesetting for the Web exercise. This exercise is intended to illustrate the alternatives to web-safe type as well as alternatives to rendering type as images. Placing type as images in web documents used to be the only way that non-web safe font could be included in navigation and content headers. Although many web designers style use this technique it is well known that it limits accessibility and does not contribute to SEO enhancements.

Screen Shot 2014-09-21 at 1.23.11 AM

Technical Exercise 4: Typesetting for the Web
Due: Session 2, Week 7 (4 points)

Description:
Use the CSS3 @font-face rule to apply several open typefaces to a single web document. Create three headings and three paragraphs of place-holder text on the page. Use a minimum three open typefaces or fonts that you have a license to use for the headings and paragraphs. Experiment with the CSS properties line-height, and letter-spacing.

Requirements:
1. Use the CSS3 @font-face rule typeset three headlines and paragraphs
2. Download fonts from an open web resource or fonts that you are licensed to use
3. Use three or more typefaces for the headlines and paragraphs in the exercise
4. Apply several examples of the CSS properties line-height, and letter-spacing
5. Add the files and folders to your environment, zip the folder, and upload to D2L

Points Breakdown:
3 points will be awarded for applying each typeface
1 point will be awarded for using line-height effectively
1 point will be awarded for using letter-spacing effectively

Relevant Resources:
CSS Text Layout Properties
Open Font Library
Font Squirrel

4 thoughts on “Interactive Design I – Week 6”

  1. http://moz.com/learn/seo/on-page-factors
    -Basically just an article that goes more in depth about SEO processes and how it all works, and what you can do to get the most for your site.

    http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
    -An article from a designer giving @font-face advice on the different ways to achieve text on your site.

    http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/
    -More info on font-face and tips and tricks.

  2. http://webtypography.net

    This gives a brief overview of typography and gives several tips on how to use this information for better web design. Several sections describe image replacement techniques that allow for images of type to still have actual type associated with them. Finally, the article describes embedding font with the @fontface rule.

    http://css-tricks.com/rems-ems/

    This site describes how to use the rem tag effectively in typesetting. By itself, the rem tag appears to have limited use. However, when used as for each module’s font size while using px for the document and em for text elements, it can still be useful.

    http://code.tutsplus.com/tutorials/6-ways-to-improve-your-web-typography–net-6248

    This site gives a very detailed guide to typography for the web. It includes several sections that cover various elements of design and how to apply them to a page.

Comments are closed.