Project One: Product Redesign

This slideshow requires JavaScript.

Redesign website. This could be a restaurant you frequent, a personal website for someone you know who has a service to offer (designer, plumber, hairstylist, anything). This will not be a responsive design as I would like you to get comfortable with other skills before we get there… This project is our intro project, our longer webpage will focus on responsive design.

WEEK TWO: Research/Planning + Wireframe Stage

Written Design Brief:

What is your product/Company?

What is the company mission?

Who is the target audience?

Wireframe of 1st and 2nd level pages

Use assets/components : See this project as a way to practice beginning web design in Dreamweaver. I’d like to see basic layouts with image and text, divs, experimenting with CSS. Remember: The more time you spend planning, the more cohesive and functional your website will be.

See these great links for ideas on “What makes good website design?

5 Simplicity in Design Tips

Smashing Magazine – 10 Principles of Effective Web Design

Good Design – Dieter Rams

9 Essential Principles

Today’s class technical demonstrations + discussions:

    1. What is Wireframing? Wireframing + Planning stage
    2. Plan out your website mockup in Photoshop. Set folders for all pages and export all images for web. Remember: The more time you spend planning, the more cohesive and functional your website will be. Areas to think about : (And look at this: Anatomy of a Website) Header, Navigation, Heading 1, Heading 2, Paragraph, Footer and images. What is on your Navigation Bar? (“About”; “Locations”; “Portfolio”; “Contact”, etc.)
    3. Setting up a Photoshop Mockup – using the extract menu from home and here
    4. Launching a starter page in Dreamweaver (I’d recommend working in “Split” view so you can work visually with your imagery, but also start wrapping your head around code – Defining the Site
    5. I’ll demo basic concepts today – but mostly we are in the planning stage
    6. Share feedback from PBSC new site exercise.



Setting up HTML

Adding content


And look at this: Anatomy of a Website

Also: Look at the DEVELOP menu (View Page Source) 

In your redesign: things to think about: 

Four keys to Designing Connections: 1. Color 2. Logo  3. Type  4. Shape

See this article in Smashing Magazine for 10 Principles of Effective Website Design

Also this one for The Best Designs

Are you thinking in advance as to how to alter your website for IPad or IPhone viewing? Check this handy link for all pixel dimensions of standard screen sizes. 

See this link for Google Web Fonts





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s