During today’s class, we’ll move quite fast and cover the following topics:
We will do several tutorials in class today. The first will focus on CSS3 typography. This second will take focus on a typographic based blog. This tutorial will not only deal with typography but layout as well. The third will focus on creating menu using lists.
In your journal, create 10 wireframes that copy the layout structure of pre-existing websites. You could sketch the Yahoo! homepage, or the Google News page, the Facebook Group page, or the My Little Pony’s site. The purpose of this exercise is to understand their structure and layout. If you use color, be sure it is minimal, only demarking important areas, or links, for example.
Label each wireframe with the name of the site and the URL that you are sketching.
DO NOT REPEAT SITES.
Choose two of the attached html pages. With CSS, focus on typography and style the pages. You can chose to style an article, a chapter from a novel, a scene from a play, or a page of sonnets.
Make your two pages look very different: if one is dark, the other should be light. If one uses sans-serifs, the other should use serifs, etc.
Be sure to implement good typographic practices. If you’re a bit unclear on good practices, or need some inspiration, look to this week’s class links. You’ll find links to both practices and examples of excellent typography.
*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk3_hw1/
Complete the homework assignment for ALL FOUR type options.
*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk3_hw1/
Wk4 Typography Homework Choices
During today’s class, we’ll move quite fast and cover the following topics:
We will do several tutorials: we will create a HTML5 template, a CSS reset template, and a website from a pre-existing Photoshop comp (located here). If you want, go to the website, and you can see a tutorial on creating the website layout in Photoshop to begin with. It’s fairly easy to go through.
In your journal, create 10 wireframes that copy the layout structure of pre-existing websites. You could sketch the Yahoo! homepage, or the Google News page, the Facebook Group page, or the My Little Pony’s site. The purpose of this exercise is to understand their structure and layout. If you use color, be sure it is minimal, only demarking important areas, or links, for example.
Label each wireframe with the name of the site and the URL that you are sketching.
DO NOT REPEAT SITES.
Read the following article on Grids: “Grid-Based Design: Six Creative Column Techniques”
In your journal, write a quick paragraph discussing grids. Have you designed/developed with grids before? Do you see any pros or cons to using grids? Are grids a new concept to you? Are you sick grids already? Do you feel like Kevin Flynn? Are you old enough to remember when the MCP was a chess program?
Your choice between the two:
A. Read about and download the Teehan + Lax grid system here. Create an HTML page that mimics their comps. Some of the text placement will be a little tricky (like the blue tout on the left). That’s okay! Try and do as much you can, try to match the html to the Photoshop comp as well as you can.
B. Work through the WebDesign Tuts “Design And Develop A Complete Website” tutorial. [parts 1, 2, 3] You only need to focus on the home page. This should take you just a bit north of 6 hours to design and develop the homepage. Also, be forewarned, there are some references to JavaScript in this tutorial. This assignment is about learning how to design and develop using the grid. I recommend you try this if you’re more interested in design, and up for a challenge.
*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk3_hw1/
Hey everyone, these are some awesome links explaining the different items that we talked about today:
Happy MLK Day!
Yay!