MAT 125: Exercises & Projects

Exercise 5: Refining Your Design

In this exercise we will review some Simple Design Concepts, learn how to use Google Fonts, wireframes, moodboards, style tiles and use an ID of "wrapper" for Page containment.

Exercise Requirements

Watch: the step by step Videos Lectures for Exercise 5.
Read: The Design Lecture which is in the Demos starting at demo 5a)

Minimum Number of Pages/Documents Required for Exercise: 3

Text Content: Choose a topic to write about that you can make at least 4-5 paragraphs. You will need some images as well. You will use the same content on the index page and page 2. The index page will be mostly unstyled content. For Page 2 you will add CSS to make the page layout look good, plus add a Google font for the headlines.

Page 3: This will be your Artist Statement Page. You will create this content before you create your page 2. It will include a Wire Frame (rough page design layout) and a Mood Board or Style Tiles that include your font and color choices.

All Pages in the Exercise Must Link Together.

Page Content:

  1. Index.html - Page Content in Natural Flow.
    • Headline (or link name) - Unstyled Page
    • You will use the same content on the Index page and Page2. This page will have limited or no CSS styles included. Set up the content in the order you want your viewer to follow through it.
    • Text Content for 4-5 paragraphs. Use headlines and subheads, paragraphs and images as needed.
    • Images - You can use background images and placed images for this exercise.
    • Think about what you learned from the Design Lecture and use Heirarchy for placing your content in order. Work from what is most important to what is the least important.
    • Link ALL pages together.
  2. Page2.html
    • Headline (or link name) - Styled Page
    • Use the exact same content as on your Index page. The only additionas should be CSS styles.
    • Use CSS to style a wrapper div with a set width and centered alignment (see below)
    • Use Google Fonts for your headlines (or more)
    • Use all the Design Concepts covered in the Demos for Exercise 5
  3. Page3.html - Your Artist Statement Page
    • Headline - Artist Statement
    • Wireframe - a sketch showing your page layout plan
    • MoodBoard or Style Tiles - show your font choices and color palette for Page 2. You can use both or just one of these.
    • Text Content - Discuss your layout, font and color choices.

Review the Exercise 5 demo pages and video pages for more information.

Points: 30

Design Elements

Review the design lecture to learn how a good website is well C.R.A.P.H.T.E.D.

C is for Concept & Contrast
R is for Repetition
A is for Alignment
P is for Proximity
H is for Heirarchy
T is for Typography
E is for Ease of Use
D is for Depth

Using an ID with Wrapper Value




HTML Elements to a DIV with an ID

Use the DIV with an ID that you write CSS for in your CSS Document Styles (in the head of the page)

Add the Div with the ID right after you open the body tag.

<div id="wrapper">

Add your page content. Close the div right before the closing body tag:


Add CSS Styles for the #wrapper in the Document Styles. Choose a pixel width. Using auto for the right and left margin amount centers the Div on the page. FYI- an ID can only be used once per page, just like an address number on a street.

Be sure to use the # sign when using wrapper as a selector. This tells the browser it is an ID.

#wrapper {width: 1200px;
margin: 10px auto 10px auto;}

Adding Google Fonts

Visit the Google Fonts Page to find more interesting fonts to use on your pages.

Use Decorative fonts for H tags or HEADLINES.
Use simple fonts for the P tags or paragraph text.

Planning Your Page

One of the first things you want to do when you are in the process of developing a new website (or revising an old one) is to do a basic layout of how you want the pieces to fit together. It is a great way to establish an overall look so that your pages look consistent, making it easier for the end user to enjoy their visit to your website. It also makes it easier for the design team to place the content onto the pages so the end product looks close to what your initial concept was. We always called them doodles, but now they are called wireframes. They are the skeleton that the content fits into.


The Basic Page Layout for a Website

Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, and navigation for your website. They do not include color, font choices, logos or any real design elements, only the basic site or page structure. They are the skeletal framework of a website.

Wireframes can range from a simple doodle of an idea, to a polished more professional layout created in software designed specifically for creating wireframes to present to clients.

Wireframes can help establish the heirarchy of a website. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and by those with expertise in interaction design, information architecture and user research.

Mood Boards

A mood board can include just about anything — photography, designs or illustrations, color palettes, textures, descriptive words — anything that helps you define the direction of your project.

Color Palettes - Looking to nature is a great place to find a "natural" set of colors that work well together. Planning your color use helps pull the pieces of your web site together so they look consistent and well designed. If you have a dominant photo you will be using, that is a good place to look for color options that will integrate well from photo to text to overall page style.

This is a good place to look to find some ideas for preset color palettes You can check online for other options.

Style Tiles

Use Style Tiles as the next step after you create your Mood Boards and before actually coding/building out the first pages of a website. Share your color palette and how you might put it into use. Share the fonts you have chosen and again, show how will you use them, what sizes, colors, and placements you are thinking of using.

When creating style tiles for a client you could include a mock up of one page to show how you plan on fitting the pieces together. This gives the client a visual on how your design will work with his existing brand.

Creating style tiles for projects gives you and your client a clearer view on what to expect and helps facilitate discussions on what meets the goals of the project design and where you need to make changes to match the client's preferences.

Exercise Five Grading Rubric
Item/Points 1-3 4-5 6
Coding / Errors Some Mostly Correct All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Most Requirements Above & Beyond
Design & Creativity Basic Average Amount Above & Beyond


This exercise is worth up to 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort/experimentation (6)
Design (6)