Presentation is loading. Please wait.

Presentation is loading. Please wait.

Howard Redfearn Stormwater Manager, City of Mansfield.

Similar presentations


Presentation on theme: "Howard Redfearn Stormwater Manager, City of Mansfield."— Presentation transcript:

1 Howard Redfearn Stormwater Manager, City of Mansfield

2 Introduction  Howard Redfearn  Stormwater Manager – City of Mansfield  Senior Planner, Storm Water – Denton County  GIS Research Assistant – University of North Texas created 2 web based mapping sitescreated 2 web based mapping sites

3 The Goals  Understand general concepts for effective site design  Basic introduction to vocabulary  Encourage creativity and enthusiasm about creating a great website  Understand how viewers use the internet

4 The Basics  Webpage vs. Website  What, exactly, is a web page/site?  Different extensions:.html/htm,.php,.jsp,.asp  What can a website do?  Why use a website?

5 The Beginning  Do you need a website? What will you use it for?  Public Outreach; Internal Training; Public Participation; Data Entry; General and Pointed Education; Document Delivery  Identify objectives  Visit other sites  Check with your organization about format  Many communities have a set format and layout for web pages, it is usually best to develop your site within these requirements  Sketch initial site diagram – brainstorm  Include others if possible  Gather content examples

6

7 Site Design – The Architecture  The backbone that will determine how pages are related  Separate information into logical “chunks”  Public Education, Construction Activity, Public Involvement  Chunk hierarchy  Which chunk is the most important for your community  Most important content needs to be at the top of every page  Content relationships  Web site function – shallow vs. deep  A few pages that are very long, or several pages that are shorter

8

9 Site Design – The Homepage  Avoid pop-ups as much as possible – notify users when there are inevitable  Home page & subsection homepages  Different layout, or the same as internal sites?  Can include font type, color, graphic locations, etc…  To flash, or not to flash?  Page layout grid – where things go throughout the site

10

11 Site Design – The Elements  Use menus and subsites to keep clutter off homepage  Other related sites / external links  Site guides – provide information about how large the site is  Site maps – graphical or textual representation of site connectivity (index or table of contents)  What’s new? and Calendar of events – page should contain last updated date

12 Site Design –More Elements  Option to search the site  Contact and feedback info are critical – include email, phone, fax and address  Get the FAQs  Lessons from intranet design  Clear, consistent design throughout the site  Predictable behavior of site elements  Design for the user

13 Page Layout – Graphic Design  Layout should lead readers to content  Remember user expectations:  Internal links on the left  External links on the right  Anything flashing is an advertisement  Viewed links change colors, anything underlined is a link  Use spaces between paragraphs  Do not be afraid of white space  Logical, consistent and organized  Consistent, but differentiated sections

14 Page Layout – Content  Text lines about 4 inches wide  Limit paragraphs to one main idea and about 6-8 lines  Avoid horizontal scrolling at all costs  Most users have between 17”-19” screens and screen resolution of 800x600 pixels  Each page needs to stand on its own  Use descriptive link text – not click here descriptive link text click heredescriptive link text click here  Notify users if links are off-site  When possible, use bulleted lists  Lists should still be short and succinct, around 5-6 items

15

16 Page Layout – More Content  Front load content – the main idea of the paragraph, or page, should be stated first  Even with a web page there is a before and after “the fold”  Before: 410 pixels from the top, After: everything below  Short, succinct and to the point  Clear, simple language Can you define promulgated?Can you define promulgated?  Use descriptive sub-headings between ideas  Short title that allows scanners to quickly get an idea of what is in the paragraph

17

18 Page Layout – Still more content  Color, contrast and fonts  Font types, colors, and sizes used in concert with graphic design, white space and consistency to provide contrast pulling the reader into content  Cascading Style Sheets (css) vs. HTML Tags  Cross-browser compatibility issues  “Framing” the problem  Frames have some drawbacks, particularly printing issues

19

20 Page Layout - Specifics  Left align text  Bold important words  White space can be used to add interest and increase scanning  Paragraph indentation and alternatives  Typeface – also known as font  5 useful, cross-platform typefaces – Times New Roman, Verdana, Georgia, Arial, Trebuchet  Vary weight within single typeface for emphasis and interest  Avoid using unusual or proprietary typefaces

21 Page Specifics – More Specifics  Type size – fixed vs. flexible  Using “em” in style sheets to set relational font size for flexibility  Text color should sufficiently contrast with background – but keep vision impaired users in mind  All caps vs. sentence case  All caps can increase read time and decrease interest  Initial caps in headlines and titles can do the same  People read information on the web based on form and shape then letters

22 Page Specifics –Emphasis  Creating emphasis  Headlines and subsection headings one of: Larger / Bold ; ALL CAPS for short headingsLarger / Bold ; ALL CAPS for short headings  Italics creates shape contrast from other text – but has academic usage implications  Underlined – generally reserved for links  Colored text – do not use blue, if you use a different color Users can specify default font colorsUsers can specify default font colors Works well for differentiating headings from body textWorks well for differentiating headings from body text  Capital Letters – use very sparingly, one of the most common and least effective means for creating emphasis  Spacing and indentation – one of the most effective ways of creating interest and emphasis

23 Navigation – Links  Majority of links should be within your site  Use of outside links should reinforce your message and be clearly marked so users know they are leaving your site  If the link will open a new window, let the user know  Place minor, parenthetical links on the bottom of the page  Links should maintain context (no click heres)

24

25 Using Images  Web readers often ignore text in images  Consider load time of image  Select the appropriate format:  GIF – Graphic Interchange Format – limited to 8-bit 256 colors simple compression scheme – best for images with large areas of homogenous colorsimple compression scheme – best for images with large areas of homogenous color  JPEG – Joint Photographic Experts Group – 24-bit full color complicated mathematical compression – photos and artwork with smooth color and tonal transitions and few harsh contrasts and sharp edgescomplicated mathematical compression – photos and artwork with smooth color and tonal transitions and few harsh contrasts and sharp edges  PNG – Portable Network Graphics –developed by graphics designers as alternative to GIF Designed specifically for use on web pagesDesigned specifically for use on web pages Transparency not supported in IE6 or belowTransparency not supported in IE6 or below

26

27 Using Images – Part II  Be sure to save the original files, intermediate files and the final files  Smaller, less than 200x200 pixel, images should be GIF or PNG  Screen vs. Print – don’t be shocked when you print images designed for the web and they are ugly  Wherever possible, use background color to add color and contrast to the site, instead of images

28 Multimedia – Double Edged Sword  Can be effective at delivering the message  Bandwidth Usage  Non-standard browser plug-in requirements  Users have no control over animated GIFs  Some users find them highly annoying  Best usage is to provide links to multimedia sources on your site with adequate descriptions for interested users

29

30 References  http://www.webstyleguide.com/index.html - Web Style Guide 2 nd ed. hosted by Yale University, written by Patrick Lynch and Sarah Horton http://www.webstyleguide.com/index.html  http://www.useit.com/alertbox/designmistakes.html - Top Ten Web Design Mistakes of 2005 -Jakob Nielsen’s Alertbox - subjective editorials about irritating web design practices – other useful by Dr. Nielsen can be found at: http://www.useit.com/jakob/ http://www.useit.com/alertbox/designmistakes.html http://www.useit.com/jakob/ http://www.useit.com/alertbox/designmistakes.html http://www.useit.com/jakob/  http://psychology.wichita.edu/optimalweb/default.htm - optimal web design - Michael L Bernard – Software Usability Laboratory Wichita State University http://psychology.wichita.edu/optimalweb/default.htm  http://www.webcredible.co.uk/user-friendly-resources/web- usability/ - Web usability articles & resources – several article regarding usability and effective site design tips http://www.webcredible.co.uk/user-friendly-resources/web- usability/ http://www.webcredible.co.uk/user-friendly-resources/web- usability/


Download ppt "Howard Redfearn Stormwater Manager, City of Mansfield."

Similar presentations


Ads by Google