Homework Site Concept

Here is a concept of my Homework Site utilizing the selected color scheme.This is to help give a basic idea on how the color, typeface, and layout will be applied.

Color Concept

Color Concept
Here are the 3 selected colors for my website.
Included are Hexadecimals and the Pantone equivalents.

Flexible Text Using Ems

The em is a sliding measure; one em is proportionally the same as a point size. One em is equal distance to that of the type size. If the type is at 6pt, then the em is also at 6 points; in 12pt type an em is 12 points and in 60pt type an em is 60 points.

Em based method offers an alternative to sizing text using em units. Ems allows designers the advantage for more precision and control. In addition, they offer familiarity for designers who are use to thinking in pixels.

In addition, Em based method also makes the text easier to work with. A good example from the book is when you take the default text size of 16px to 10px. This is turn makes is easier to round off and compensate for the rest of the text. Below is an example of how the em method can be applied.

body { font-size: 62.5% } /* gives us a base of 10px */

h1 { font-size: 2em; } /* 20px */

h2 { font-size: 1.8em; } /* 18px */

p { font-size: 1.2em; } /* 12px */

HW Timeline MM2203

Week 1

Research interesting ideas for your homework page and sketch two examples. Must be paper and pencil. Scan image then use Photoshop to block out content via grids. Print this version and, again using pencil, note navigation, technology, purpose, etc. on this image. Scan and upload to blog. Email me the url.

Create a timeline and/or schedule for your homework assignments and post to your blog.

Week 2

Create a tutorial page on the Box Model. Be sure that a newbie would be able to understand the difference between content, padding, margin, and border areas. Post to blog. Due week 4.

Color practice: on this same blog, list 3 pantone colors and their RGB equivalent. Should relate to your layout. Due beginning class next week.

Read Chapter 1 of Bulletproof Web Design and create the same stylesheet using Ems (page 22). Link on your blog. Due beginning class next week.

Week 3

Converting tables to divs - separating content from style. Deconstructing a page: Take this web page and reconstruct it using an embedded style sheet. You don't have to use all content, but enough to show your work. Your guidelines will be chapter 3 of the book called "Expandable Rows". As a goal, try to use as few div's as possible. Discuss on your blog and provide a link to the finished page. [Note: embed your .css on the page. Do not link as an external stylesheet. I want to see your work displayed with the .xhtml.]

Week 4

Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.

Extra credit: Write one style that combines selectors (compound selector) to save code. Post to blog.

Write in your blogs your best advice for getting creative.

Week 5

Read chapters 5 and 6 of the book and create a page using elements of both. Use can use CSS3 to create your rounded corners but make sure your layout uses "Indestructible Boxes" and can pass the 10-second usability test. This is your [take home midterm] and is due beginning of next class.

Week 6

Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source. This is due week 8 at the beginning of class.

Week 7

Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective. This blog (as opposed to the lab above that is due today) is due by beginning of next class.

Week 8

Create wireframe of final project and post to blog.

Week 9

Work on final project. Blog how you are creating your project to stand out from all the other submissions. Reflect on how you might use the allowed .css code to give a different look to your page. How can you incorporate what you've learned from Bulletproof Web Design?

Week 10

Work on project. Create a blog posting that is a sample of a possible process page for your final project. Include screenshots and images. How would you present to potential employers to demonstrate your knowledge? Email me once you have blogged.

Week 11

Formal presentation and critique of Student Projects.

HW Site Sketch 2

In this second design, I have created four small square buttons that will also serve as my main navigation. These button will link to various sites such as Sketch,Homework,Portfolio, and Zen Garden. Each button will showcase a preview of content below in the large rectangular box upon rollover.

HW Site Sketch 1

In this first design, I have created four rectangular thumbnails that will also serve as my main navigation. These thumbnails will link to various sites such as Sketch,Homework,Portfolio, and Zen Garden. Each thumbnail will showcase a preview of content upon rollover.

Today is the first day!!!

Hello...people!!!! Wanna check out some CHARMING SHOPS!!!