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:
- What is Wireframing? Wireframing + Planning stage
- 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.)
- Setting up a Photoshop Mockup – using the extract menu from home and here
- 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
- I’ll demo basic concepts today – but mostly we are in the planning stage
- Share feedback from PBSC new site exercise.
IN CLASS EXERCISES:
Setting up HTML
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