Session 2
Monday, September 22nd, 2008
Classroom Session
Objectives
- Locate the most beneficial FF plugins to aide web design/development
- Identify color schemes as used in works
- Create a color scheme by using resources and imaging tools that enhance readability and usability
- Recognize the logical sections of a website
- Create a wireframe as a starting point for any design
- Define FTP as it pertains to website construction
- Upload and download files using the FTP functionality of Dreamweaver
Agenda
- Review Firefox Add-ons
- Color Theory
- Lab Time
- Choose a Scenario
- LBC Designs
LBC Designs is an interior design agency that has just opened in August 2008. They are located in Sandusky, Ohio. LBC Designs offers complete interior design needs including furnishing, design comps, consultancy, and large project management. Much of their business comes from clients looking for bright, vibrant colors in a modern but classic looking design. Their logo is a connected L, B, and C.
- Rola Soft Drink Company
Rola produces some of the worlds most popular soft drinks, they have world wide corporate offices. They are an established company, not wishing to rock the boat, they just need a website for their soft drink products. The colors used by the company are dark blue and white.
- Engreen LLC
Engreen is a "green" consultancy agency offering its services to those who wish to convert their home, vehicle, or business to a minimal energy use facility. Although they do help individuals the focus of their work is medium to large corporations. They have no logo and the only color requirement is green. They are not opposed to other colors, but green must be included.
- LBC Designs
- Introduction to Containers
- Wireframing
- Lab Time
Homework
Item 1
Review the connecting Assignments.
Item 2
Create 5 multiple choice exam questions that could be asked of students regarding the content discussed in the session 1 presentation. Mark up the questions in HTML and be sure the HTML validates.
Due: September 22nd, 2008
Write your HTML like this
<div class="question">
<p>What type of animal is Mr. Brown's pet named Maggie?</p>
<ol>
<li>Cat</li>
<li class="c">Dog</li>
<li>Mouse</li>
<li>Fish</li>
</ol>
</div>
It will render like this
What type of animal is Mr. Brown's pet named Maggie?
- Cat
- Dog
- Mouse
- Fish
See the sample
How do you want it?
I only want the questions, not any extra markup (do not send me the entire website). Save the questions in a text file, using notepad, and email to me as an attachment ( jeffrey[dot]todd[dot]brown[at]gmail[dot]com )
Item 3
- Create a wireframe for your independent website.
- Create a webpage that sections off the logical sections of your site using containers.
- Create a sitemap using a word processing program
<div id="containerName" >
stuff
</div>
NOTE: the division structure should match the wireframe
Connecting Assignments
Supplemental Teaching Materials
Gimme, Gimme
- Color Links
- Kuler: Adobe Labs has released an incredibly useful and well designed color palette creator that beats the rest.
- Contrast checker: evalute contrast between type and background
- Color Scheme Generator 2: My favorite color scheme generation tool for its control and variety of system generation.
- Color Blender: A good, simple color utility, which exports to Illustrator and Photoshop
- Colour Lovers: Color palette generation in a social setting
- Color Palette Creator: Give it a base color, it will give you a color palette
- The Man in Blue: Technicolor: Palette shown in context of a CSS layout
- 4096Color Wheel: A different approach to a color wheel
- Colr.org: Generate color systems from a photo or randomly
- Color Mixers: A staple in color generation systems
- CPD Archive (See top of page on right) - Thank you Tobias!