Assignment 7: Site Style Basics

For this assignment we are going to do a version of a Style Tile for your midterm site. To complete the assignment you can either

Option 1: Download the Style Tile PSD file and complete it.

This option is best if you are already comfortable with Photoshop. If you aren’t then you should use Option 2.

Go here to visit the Style Tiles web site: http://styletil.es/

Read up a bit on her philosophy of the Style Tile.

Download the PSD File: http://styletil.es/downloads/Style_Tile_Template.psd.zip

Edit the file to include your colors and fonts. For example the words This is an Example of a Header, should be changed to use the font-family, color and size of the way you want the header to appear on your site. You don’t need to create a logo. Instead put the site title there in the font. you want.

If you like the column guides then you may want to lock them View > Lock Guides. If you want to keep them but not see them: View > Show > Guides to toggle on and off.

All of the elements are carefully organized in folders and layers. Feel free to move and add things but keep them organized as well.

You can change the size of things, remove them if not needed

The Adjectives section is where you change Lorem Ipsum Dolor Sit Amet Magna to be 4-6 words that describe the feel of the site (bold, colorful, playful, trustworthy, exciting).

Option 2: Create a PDF document that lists the following questions with their answers

Copy all of the questions and prompts below into a document (Word, Google Doc etc).

For each question there are spaces underneath to add answers. Add an answer for each prompt (font-family, font-size, color etc).

What is the type treatment for your Site Title?
Font-family:
Font-size:
Color:

What is the type treatment for your page titles?
Font-family:
Font-size:
Color:

What is the type treatment for your sub titles?
Font-family:
Font-size:
Color:

What is the type treatment for your paragraphs?
Font-family:
Font-size:
Color:

What is the type treatment for your links?
Font-family:
Font-size:
Color:

What colors are you going to use on the site?
List at least 3 colors as hexadecimal values that you would use in CSS like #ff7722. You can make it more visual by including a block of that color along with the hex value.

Next to two of the colors list the main background color and main text color:
#59c7bf: main background
#000000: main text color

List at least four words to describe the feel of the site.
You are not writing in full sentences, just words like: bold, colorful, playful, trustworthy, exciting

SUBMITTING THE ASSIGNMENT

Submit for Option 1: If you are doing option one, submit the Photoshop PSD file

Submit for Option 2: If you are doing option two, write your answers in a Word or Google Doc or other software, then save as a PDF and submit the PDF file.