Week 04

Resources

Links

• Simplified Site Setup

• New CSS Features

• CSS3 Support

• CSS Zen Garden

Tutorials

• Adding Structure to Text

  • Managing Assets

• Placing Images

• Creating Links

• Understanding Style Sheets

Note: While these tutorials will be helpful to everyone, they are primarily meant to fill in for students who do not yet have the text.

If you do indeed have the text, I recommend beginning to watch the DVD tutorials, concentrating on getting through sections 7, 8, and 9.

CSS Tutorials

• CSS Introduction

• CSS Syntax

• CSS How to

• CSS Background

• CSS Text

• CSS Font

• CSS Links

• CSS Lists

• Styling Tables

• CSS Box Model

• CSS Border

• CSS Outline

• CSS Margin

• CSS Padding

Web Design Examples

• Designer's Websites

• 50 Best Designs

• 10 Great Sites for Designers

• Design Charts

Project 1 - Workflow - DUE Oct. 9, 2012

Here's your first "project" for the semester.

When creating a website, much like building a house, or any other project for that matter, there are many steps to attend to before you actually start to see your work accumulate. Throughout the course of this first project, you will be introduced to the appropriate workflow and procedure of defining, designing and developing your web project.

Project Plan

For the first phase of the project, you obviously need to know why you're building the site in the first place. This is the best time to gather specifics. Think of it like the Who, What, Where, When, Why time in the project. You should have all those things ready, plus some research into what your client likes / dislikes about other sites that are already out on the interwebs. This part of the project should include data collection, gathering design inspiration, and making notes / sketches. Typically, most of your work is done in this phase of development, but we don't have a lot of time luxury this semester, so you'll have to move quickly.

Required Documents for "pitch":

• • Company Name

  • Statement of purpose for company (or mission statement)

  • Audience / Demographic Analysis

    • who is the audience, what do they like, why, how will you appeal to them

  • 10 different sites within the same / similar niche

    • for each site, write a few paragraphs about what you like and what you don't like about them

  • Logo and Color scheme

    • if you need a catch phrase.... work that up too.

Web Design

For this step, you will start with the sketches from the planning phase and begin developing the project into a multimedia experience. You should assess what was common in the inspiration sites found, and what functionality will be necessary. It's much easier to build around needed items than to build them into a design that didn't plan for them. You will also be expected to wire-frame your project. Wireframing will allow you to quickly prototype how you will use the available screen real estate. After wire-framing, comes the mock up phase, which again doesn't require coding or anything of the sort, you just begin adding text / images / graphics to your wire-frame design to get a better visual of how the site will look / feel.

Required Documents for Web Design proposal:

• • Wireframe

  • Mockup

  • Sample buttons and textures

  • Sample Images

  • Sample Fonts

  • Locked in color scheme

Development:

In this stage of the project, you will take your designs and begin translating them into proper markup. This will be a difficult task to collaborate on unless you utilize something like Dropbox to really share your work in real time. Use whatever HTML Editor you prefer and really make sure that your site looks good on all the more capable browsers out there.