web design process - tips & guidelines

“A lot of times people don’t know what they want until you show it to them.”

–Steve Jobs

A lot more goes into a web site than just code.You’ve got big ideas and your process book will help you document your creative process.

A process book can be used to present ideas to your client or boss.

Think of it as a way for you to sell your work to them.

Your presentation should impress the client.They should be impressed enough that they

want to continue working with you

You are a graphic designer.Your presentation shouldn’t look like it was designed in word or powerpoint. It should be designed to impress the client.

Your cover page should excite us.Be sure it includes the project name, your name, the course name, your instructor's name, and the semester you are taking the course.

An introduction will help us understand what we’re about to view.

This may be a creative brief summary or your project description.

Presentation is everything.Communicating your ideas visually and in writing could very well

help land you your next creative gig.

Get us inspired.It’s great to share your creative inspiration. But don't just show me a bunch of pictures though. Help us understand why you're showing us all the inspiration you're including in your presentation.

Get inspired away from the computer.Before you design a web site get creative away from the computer. Working only behind a computer will crush your creativity. Find inspiration elsewhere every chance you get.

A site map can help you get organized.It can help your client or boss see what is needed to complete the project.

A sitemap is one of the key 1st steps to creating a web site.It’s an outline that can help you plan how many pages might be created

and allows you to think of the content and navigation necessary.

Mindmapping can help you brainstorm ideas.

Jot down ideas to help you brainstorm.

Mindmapping can help you think through ideas.They can be useful, especially when you’re stuck or your mind is overflowing with ideas. Mindmapping tools can be a useful alternative to drawing them.

Type studies allow you to test drive your typographic ideas.

Before you move full speed working on your web site design begin by thinking about the typography you might use.

Show a minimum of two type studies.Be sure to indicate heading, subheading, and body copy typefaces.

The web doesn’t give you an excuse to ignore typography. You are designing for the web so you will face type limitations but that doesn't give you an excuse to ignore good typographic principles. Web fonts should usually be used for body copy. For identity and heading fonts you may use images or font replacement techniques.

http://www.busesatthebrewery.com/

Color studies help you explore color schemes.

It helps to think through potential color combinations for your project early on.

Study how colors interact with other colors.

Color can draw a user into a web site and interest them. It can also also heavily impact legibility.

Take time to get inspired by color.Don’t expect for color schemes to just miraculously pop up in your head as you design. Reference great color design and refer to inspirational color resources to help you come up with potential color schemes for your project.

http://www.colorschemer.com/http://www.colourlovers.com/http://kuler.adobe.com/

Wireframes or rough drafts can help you plan out your ideas.

Sharing rough ideas could save you hours of time that you might invest in photoshop on an idea the client might think is lame.

If your sketches are too rough your client will never understand your ideas.

Write or type notes to help us understand your ideas.

Wireframes shouldn’t be too vague.Never assume that we’ll understand the ideas in your head. It doesn’t

matter how perfect they look, if they don’t communicate your ideas they are useless to the client.

Explore multiple ideas.Thinking through more than just your first idea could

lead to a more creative solution for your project.

Sketch out ideas to share your plans.It may seem like busy work, but it’ll likely save you a

lot of time thinking through layout ideas this way.

Wireframes should be rough but clear.The should communicate layout, content and

interactivity plans for your project.

Sketch a home & sub page idea.Thinking through the page structure for more than one page will help you anticipate changes between pages.

Wireframe tips

•Don’t use lined paper

•Don’t just draw boxes - explain what the box would be used for.

•Be sure to identify all the important sections on your web page.

•Don’t just write “text” or “image” - be clear in the type of content that might be used in the site.

•Write or type notes to help the client understand your ideas.

•Your client can’t understand chicken scratch so type notes if necessary and make sure your sketches aren’t too sloppy.

•Wireframes aren’t finished concepts, they are initial ideas.

•Scans or photos of wireframes should be a good quality.

Before you ever code a thing...You must first design your web page visually.

Comps are created to help share your ideas.They help the client understand what you want to do before you code.

Always present more than one idea.And present a home & sub page of each idea.

Comps should look just like a real web site.But they shouldn’t function yet.

Show the variation between pages.It can help the client get excited about a project and understand your ideas.

Page layouts don’t have to look identical.But they should have some consistency between pages.

Think about the web site’s interactivity.What will happen when the user interacts with things like navigation?

Design beyond the top fold.The top fold is what the user sees before they scroll.

It helps to see more than just the top fold.Put your heart into designing the page content.

It helps see the whole page, even the bottom.Give your footer a little TLC...if your user made it that far they

deserve to get that much more excited by your design.

Present unique & different ideas.Don’t just change colors and type. Change the layout and concept.

Focus on showing what is important.You may zoom in or use a unique perspective to help the client get

more excited about the ideas you’re presenting.

No if’s, and’s, or but’s about it...use a grid.

In web design a grid system can help you align elements in your page and create a stronger page flow and improve hierarchy in a page.

Two popular grid systemshttp://960.gs/http://cssgrid.net/

Using a grid system helps keep things aligned.Templates are available online to help you keep elements in your

web page aligned properly.

Grids help keep your web site in order.A variety of grid systems are accessible to web designers.

After your site is built, test it.Share views of your web site tested from web browsers.

Test in multiple web browsers.Test it in as many web browsers as you can to ensure it looks

consistent across multiple web browsers.

Test in browsers used on both Mac & PC.You won’t be able to control what browser or type of computer the

viewer of your web site will be using.

Test all pages, not just one.You’ll want to make sure it’s fully functional on all browsers before

a web site is launched publicly.

Identify any issues across browsers.Make notes if there are any bugs or problems identified that were

not able to be corrected before your project’s completion.

Final Process book tips

•The size should be 8.5” x 11” landscape. It’s intended to be viewed online

•Create a cover page and guide the user through your presentation with notes, headings, and imagery.

•You’ve got big ideas. Help the client understand what they are. They should be able to review this without you present.

•Don’t try to cram all your ideas on one page.

•Make sure images are an adequate quality.

•If you put your heart into your process book at the start of your project you won't have to redesign it by the end of the semester.

•Save as an optimized pdf so it may be shared online.