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 Wireframes Grey 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 Methodology by 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 Methodology by 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

Grey Box Methodology by 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 Storyboard In 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 Instructions Part 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 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 Instructions Part 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

Storyboard Instructions Part 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 Spa index.html candles.html lotions.html accessories.html fragrances.htmlcontacts.html soaps.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?