Applications for Web Development (CIS 162)Intro to Web Design

Today’s Outline

•Storyboarding•Wireframes•Design

▫Grey Box Methodology•In Class / At Home Activity

Developing a Storyboard/Sitemap

Structuring Your Content

Typical Website Storyboard• Visual representation of your website's

structure that often looks like a flow chart or graphic organizer.

• Maps out all the components of your site and how they inter-relate

• Creating a website storyboard can help you plan and organize your website as well as plan the internal linking structure between pages

• By using a storyboard, you can plot a visitor’s path through your website to easily access your most important pieces of content

Typical Website Storyboard

The elements you see in the image can either represent the high level subject areas of your site or they can represent individual web pages. The arrowed lines connecting each are the hyperlinks that allow visitors to navigate between them.

Working with WireframesGrey Box Methodology

What is a Wireframe?• Basic mockup of the page without any design

elements• Provides a strategic view of the positioning of

elements within the layout• Shows how the content will flow on the page• An important step in determining the placement

of content, function and navigation. • Used to iron out any problems or missing

elements, and will act as the blueprint for the content, design and construction work that comes later

Grey Box Methodologyby Jason Santa Maria

“More and more I find myself employing a new beginning process for websites. I mean, I still start the way you really should with any design work, with a pencil and paper, but up until recently, after a sketching phase I would move on to Photoshop and begin producing a final mockup……….. In turn, I began over thinking my designs as I was doing them.”

Grey Box Methodologyby Jason Santa

Maria•The key is to “create the best design (you)

can. Not create the best CSS design or Flash design. The programs and the code are just the means to convey (your) message.”

Sample Sketches

Sample Sketches

Grey Box Methodologyby Jason Santa

Maria“After the sketch I moved into Illustrator

for what I call the Grey Box Method. ”

Early Composition

Symmetrical Two-Column Layout

Asymmetrical Two-Column Layout

Three-Column Layout

Final Selection (Layout #2)

Create a Draft StoryboardIn Class / At Home Activity

Typical Website Storyboard

The elements you see in the image can either represent the high level subject areas of your site or they can represent individual web pages. The arrowed lines connecting each are the hyperlinks that allow visitors to navigate between them.

Storyboard Instructions

Part 1•Get into teams of 2

▫For those of you at home, you will be completing this on your own

•Pick a business for which you would like to design a website (be creative and pick something fun!)

•Identify at least 5 pages that will make up your website

Storyboard InstructionsPart 1 cont.• Keep in mind that your visitors should always

know where they are and how to get back to the Homepage

• Visitors should either be able to contact you (via an email link) and/or have the option to provide feedback (via an online form or guest book)

• Consider what you think would be the easiest way to link pages so that your visitors can easily get from one topic to another

• If the visitor arrives at a sub-topic page (category page), how will they get to the other categories or the Homepage?

Note: You may do this on paper or with a tool such as Microsoft Word

Storyboard InstructionsPart 2• List the names you are going to give your pages; use an

organized format.• Every page should have a useful title that will tell the

visitor about the page and be picked up by search engines. Each word is important!

Example Using a Mock Spa• www.suzannesspa.com • www.suzannesspa.com/candles• www.suzannesspa.com/lotions • www.suzannesspa.com/accessories• www.suzannesspa.com/fragrances• www.suzannesspa.com/contacts

Storyboard InstructionsPart 2 cont.• You will also want to include the .html names in

your storyboard.• Often times people will unintentionally mis-spell

or mis-title a page.• It can be quite difficult to fix a mistake like that

after you publish your site, so be sure to do it right from the beginning.

Example Using a Mock Spaindex.html candles.html lotions.html accessories.html fragrances.html contacts.htmlsoaps.html

To Submit (as a team)

•Submit your final storyboard (to be created in the tool of your preference)

In your submission to me....• Identify the website topic you selected•Identify your teammate that participated

in the exercise along with you

Any questions?