WDIM 161 A

Hey All,

In today’s class, we’ll be talking about tables, and we’ll go over three tutorials. Pretty quick class. You can download the wk7_classplan, and the tutorial files here.

Week 7 Homework

Wireframes

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.

Homework 1

You’ll create a one page website for “Projecterific”, an online project management website. The page is a sign-up page with the below information. You’ll need to make a table displaying the different plans so that users can easily compare plans. Be sure to include a “sign up” button.

Name of Company

Proejectorific

Misc Information

• 30-day free trial on all accounts
• Sign up in 60 seconds
• No credit care required
• Upgrade, downgrade, or cancel anytime

Plan

Max
$149/month
“Top of the Line”
Unlimited Projects
75GB storage
Unlimited Users
30-day free trial

Premium
$99/month
“The Sweet Spot”
100 Projects
30GB storage
Unlimited Users
30-day free trial

Plus
$49/month
“For Small Groups”
35 Projects
15GB storage
Unlimited Users
30-day free trial

Basic
$24/month
15 projects
5 users
5GB storage
30-day free trial

Free
$0/month
1 project
5 users
10MB storage

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk5_hw1/

Hey all,

I received a few questions about the homework, so I put together an example of what your homework should do.

I created a basic website, in the same vein of wireframes. There’s just a few boxes outlining sections of the site. I then duplicated the site, and using CSS, I made one of the pages elastic, and the other fixed width.

Check ‘em out:
fixed width layout
elastic layout 

In today’s class, we’re going to switch it up a little from the syllabus. Originally, we would only discuss Navigation and Sprites, but it seems like we need to talk a little more about layout and positioning on the page. So, while we have a lot of topics on hand, we’ll get through as many as we can.

Today’s topics include:

• Presentations: everyone will present one of their homework assignments. Presentations will be brief, no more than two minutes each, and you will briefly discuss your best work, what you like most about it, and what you would have liked to improve
• Types of Layouts: fixed, fluid, elastic, responsive
• Positioning techniques: floats and positioning
• Lists (ordered and unordered)
• Navigation and Sprites
• Midterm prep

Week 5 Homework

Wireframes

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.

Homework 1

You will create a website and show two layout styles. Create a page with the following sections: a header, a sidebar, a main content area, and a footer. Do not fill any of the sections with text. Instead, give each section a border and a background color. Using the same layout, create fixed-width page and a fluid/elastic page.

These pages should look similar to the wireframes that you’ve been drawing. No actual content should be on the page, instead, we should see visible blocks for each section on the page. If you’re getting stuck with the width of the blocks, you may need to set each item to {display: block;} or set the width of the block.

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk5_hw1/

Extra Credit: Playing Cards

(Worth no more than 1% of your total grade) In the /classic-cards/ folder, you’ll find 52 pngs, each relating to a specific playing card. Create an HTML page listing each one out. Using your layout method of choice (floats, absolute or relative positioning), separate and create 4 piles of the cards so they are grouped by suit.

*Remember to validate your code, include your name at the top of each document, and label your folder like so: /lastname_firstname_wdim161_wi12_wk5_extracredit/

Tutorials and Extra Credit files: wk5_handouts

Typography Articles

• 8 Simple Ways to Improve Typography in Your Design
• A Guide to Web Typography
• Web Design  is 95% Typography
• The Ultimate Guide to CSS Typography
• 10 examples of Beautiful CSS Typography and how they did it

Tutorial Sources

• Create Beautiful CSS3 Typography
• Create a Typography Based Blog Layout