Web Site Design (Week 8, Tuesday, October 16)
In class on Tuesday, I discussed the use of Style Tiles as a tool for trying out type and color schemes for a website. Today you'll create three style tiles with different color and type approaches to your website project.
Setting Up Files
Download the styletiles.zip file (right click and choose "Save File As..."), and unzip it. You should have a styletiles directory with four files in it: base-styles.css, index.html, styletiles2.html, and styletiles3.html. These are the files I demo'ed in lecture.
Don't modify the base-styles.html file; it controls the overall layout and appearance of the page. All of your changes will be in the <style> element and the content of the page.
Modify all three of the HTML files, creating different color and type combinations for each. Make sure to update all the following on each page:
- Add the font(s) you plan to use. I recommend no more than two different typefaces--one for headings and one for body text. In many cases (including all of the examples I gave you), varying the size and weight of a single typeface is sufficient.
- Select your colors, and apply them to the #square-xxx definitions. Add the hex code for the color to the html.
- Add the colors to the definition of typographic and button elements.
- If you are considering the use of any background patterns, add their URL to the texture definitions.
- Update the text description to explain why you chose the type and colors that you did. How does it fit your idea of the site?
- Update the adjectives to fit with the description and your idea of the site.
Deliverables
Upload the folder with the modified style tile documents to your igme110 directory on banjo.rit.edu. It should be available at http://people.rit.edu/youruserid/igme110/styletiles/ by noon on Saturday, October 20.