Embed Size (px)
Citation preview
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 ThemeChoosing a theme can be the hardest part of designing
a web site, and yet the most funExamples:
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.
01-31-07
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?
