Web Development

Presentation Design Visualizing your web site or Visual Design

Presentation Design Visual Theme Choosing a theme will help you make choices about the visual elements or look of the site We use themes to provide a “Look & Feel” to our sites, creating consistency for our visitors

Presentation Design Visual Theme Choosing a theme can be the hardest part of designing a web site, and yet the most fun Examples: A archaeology site – make it look like the Indiana Jones movie poster, with similar colors, graphics and text A site about 1940’s clothing - base the theme on the music of that era, choose sights and sounds reflecting this

Presentation Design Visual Theme Examples cont’d: A site about Ants – use a military theme to select graphics, text and sounds of the military A college site – base your choices on the school colors, and sights around the property of the college

Presentation Design Visual Theme First Step: Review your design document, and read it for clues about what your site reminds you of. What theme would best contain all of my ideas?

Presentation Design Visual Theme Second Step: Create a new heading in your design.doc called: Web Site Theme Ideas Enter a few ideas for possible themes, brainstorm ideas, put any down, there are no bad ideas during this step

Presentation Design Visual Theme Third Step: Once finished brainstorming, weed out the bad ideas, narrow down your ideas and prioritize your top six ideas. Delete the rest, you only need six ideas.

Presentation Design Visual Theme Fourth Step: Now that the ideas are prioritized from 1 to 6 draw a thumbnail of your welcome page based on the six ideas you have left

Presentation Design Visual Theme Fifth Step: Get input from others about the six choices. Pick the best one of the six

Presentation Design Visual Theme Sixth Step: Make an new heading in your design.doc called: Final Theme Decision Explain why you chose this theme Save your design.doc

Presentation Design User Interface Now that you have a theme for your site you must apply that theme and create an overall look for your site.

Presentation Design User Interface There are three things to consider before you begin: A background that reflects your theme Foreground elements that reflect the theme Other elements that support the theme

Presentation Design User Interface Backgrounds: Colors or Images Colors are easier, just choose one and apply it to your page Images are more difficult, because you may have to find them first and try them to determine the best one to use. They must not overpower the text you use, and it makes it harder to find the right color to use for the text

Presentation Design User Interface Foregrounds: Content & Links This is the page content material of text and images to represent your message Foreground Elements include: Titles, Headings, Subheadings, Sidebars, Body Text, Illustrations (Graphics), Captions

Presentation Design User Interface You may have other elements on the page, like: Buttons, Hyperlinks, Search Tools, Navigation Bars, Tables, Interactive elements

Presentation Design User Interface Applying your theme: First Step: In the design.doc look at your storyboard pages, compare them with your thumbnail sketch of your welcome page, think about how your theme can apply across your entire web site.

Presentation Design User Interface Applying your theme: Second Step: Determine the number of pages you have for your web site and fold paper like before into six folds for the number of pages you need. You might need 1, 2, 3, or more pages folded depending on the number of pages you have

Presentation Design User Interface Applying your theme: Think about the theme and how to apply it while you are drawing the thumbnail sketches Use your welcome page sketch as a guide

Presentation Design User Interface Applying your theme: In the design.doc create a new heading: Application of the Design Theme to Web Site Explain the background, foreground, and other elements you have sketched into your page thumbnails, then save the document.

Presentation Design Using the Grid Design Approach Here we create a rough sketch of each page on a full size sheet of paper. Remember the theme elements you chose and apply them when doing the sketches

Presentation Design Using the Grid Design Approach Organizing space by using a Grid: A grid is just a bunch of vertical and horizontal gridlines (never diagonal) that you use to organize your page. These are just guides not seen by your visitors, they are imaginary lines to help us place our elements on the page.

Presentation Design Using the Grid Design Approach Example Gridlines:

Presentation Design Other Organization Methods: Unity – all elements on your page look like they belong together. Achieve this by making them look similar (color & style) and placing them on the page so they look “comfortable” around each other. The gridlines can help place these elements more efficiently

Presentation Design Other Organization Methods: Balance – like a see-saw in a playground, the elements on the page always balance. They may be equally weighted (symmetrically balanced) or unequally weighted (asymmetrically balanced), the key is that they are both balanced. A gridline vertically down the center of the page can help us keep balance when placing our elements on the page

Presentation Design Other Organization Methods: Proportion – the elements look like they are the right size. Grids help us determine proportion and when we need to reduce or increase the elements to fit the page

Presentation Design Once your sketches are corrected and final, you can begin building the pages in FrontPage or similar web site design program You may utilize HTML and Notepad as well if adventurous.

Presentation Design Questions?