1 / 40

Web Design

Web Design. Planning a Web Site. Web site Development Process. Planning Process. Six steps Define the site’s purpose Identify the site’s target audience Determine the site’s general content Select the site’s structure Design the look and feel of the site

nibal
Download Presentation

Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Planning a Web Site

  2. Web site Development Process

  3. Planning Process • Six steps • Define the site’s purpose • Identify the site’s target audience • Determine the site’s general content • Select the site’s structure • Design the look and feel of the site • Specify the site’s navigation system

  4. 1. Define Purpose • Goals • Results you want your Web site to accomplish • Objectives • How you will accomplish the goals • Purpose Statement – summarizes your site’s goals and objectives

  5. 2. Identify Target Audience • Visitors to which your site is targeted – who do you want to view your site • Profile • Requires research • Demographic characteristics • Psychographic characteristics • Wants, Needs, & Expectations • Complete a needs assessment

  6. 3. Determine Site’s Content • Home page – answer who, what, where • Underlying pages • Splash pages • Value added content – text, images, audio, video, animation • Activity – Exploring Web Page Animation & Multimedia (p86)

  7. 4. Select Site’s Structure • Arrangement of the home page to the site’s other pages • To do this use • Text outline • Storyboard • Flowchart

  8. Types of Structures • Linear/tutorial • Pages organized and presented in a specific order • Example – a how to web site (steps performed in a sequence) • Random or webbed • No specific order • Hierarchical • Organized into categories & subcategories • Example – a KSU Web site

  9. 5. Design Look & Feel of Site • Visual Consistency – repeat design features • Helps to strengthen site’s visual identity and brand • Color & Visual Contrast • Consistent use of same colors • Choose background & text colors to provide contrast and enhance readability • Page Layout – standardized arrangement of content elements creates a sense of balance and order • Can use tables or CSS

  10. 6. Specify Navigation System • Should be easy for visitors to understand and follow • Consists of • Different types of links – text, image, related links presented as menus, bars, site maps, search bar, frames, etc. • Should be user based and user controlled

  11. Links • Text • Use text that clearly identifies the target page, i.e. the page’s title • Underline (ensures accessibility by those who cannot see color) • Image • Entire image can be linked or a part of image (known as a hotspot)

  12. Links • Menu – list of related links • May contain multiple levels of links display as pop-out menus • Bar – uses graphic buttons • Pointing to button displays a drop-down menu • Tabs – best when linking to alternate views of the content

  13. Links • Breadcrumb Trail • Hierarchical outline or horizontal list -shows site visitor the path taken (order they have navigated the site) • Site Map – summary page of links • Similar to an index • Search Feature– gives ability to quickly locate info • Frames – used to divide screen into multiple areas • Frameset – master page in which multiple pages displayed

  14. Navigation Design Tips • User based and user controlled • Place major links at top and/or down left side of page (promote visual consistency and usability) • Avoid ambiguous text in links • Links should clearly identify target pages • Include a link back to the home page or underlying pages • Follow WAI guidelines

  15. Typography and images

  16. Typography • Font Sizes & Styles • Typeface • Type style • Type size • Font – specific typeface, style and size

  17. Types of Fonts • Serif • Feet, Times New Roman • Sans Serif • No feet, Arial • Cursive • Replicates handwriting • Fantasy • Use for decoration • Monospace – equal spacing between characters

  18. Font Selection • Font Selection – choose based on • Readability • TNR, 16 pixels is default for both IE and Firefox • Availability • Mood • Fonts can set a mood or specific state of mind • Key – you want to promote not detract from site’s message • Activity – Exploring Fonts (p136)

  19. Images • Add value to site • Want them to match or complement color scheme • Accurately represent content if they are linked • Contribute to overall mood of site and support site’s message • Activity – Exploring the Effective Use of Web Page Images (p138)

  20. Image Formats • Bitmaps • GIF • JPEG • PNG

  21. Bitmaps • Raster Images • Created pixel by pixel • Can be edited in software such as Paint • Resolution dependent –cannot resize without losing some image quality • Vector Images • Group of separate drawing objects • Resolution independent – can resize without loss of image quality • Can convert to bitmaps

  22. JPEG • Joint Photographic Experts Group – group that published image compression format standard • Used for digital photos, photo-like paintings, watercolors, and illustrations more than 256 colors • Less loss quality when compressed

  23. GIF • Graphics Interchange Format • Bitmap image file format • Original image format used on the Web • Maximum of 256 colors • Suitable for basic solid color images - cartoons, diagrams and navigation buttons

  24. PNG • Portable Network Graphics • Developed as a free open source image format to replace GIF format • Greater range of colors (16 million) • Not widely used due to lack of browser support

  25. Multimedia & interactivity elements

  26. Multimedia • Some combination of text, images, animation, audio and video • Goal is to produce stimulating, engaging Web pages • Drawbacks – download time, need for browser plug-ins, uses large amt of bandwidth, may not be accessible to visitors with hearing or visual impairments

  27. Animation • Used to catch visitor’s attention, demonstrate a process or illustrate a change over time • Forms – animated GIFs, Flash movies, avatars, gadgets

  28. Animated GIFs • Frames (images) are shown in a sequence • Usually states as frames-per-second or fps • Gives the illusion of movement or animation • Many available on the Internet • Gif Animations • Do a search – keywords: animated GIFS

  29. Adobe Flash • Visitors must have the Flash media player plug-in • Frame-by-frame animation • Designer changes image manually • Animation with tweening • Designer identifies original and final appearance and/or location of image • Software automatically creates frames with image changes

  30. Avatars • Alternative personas or virtual identities • Used for gaming or 3D virtual worlds • Virtual models used by some retailers • Lands End

  31. Gadgets or Widgets • Small code objects • Provide dynamic Web content – clocks, weather reports, breaking news headlines, etc. • Google Gadgets

  32. Audio & Video Elements • Downloadable or streaming • Downloadable – media must be downloaded in its entirety before it can be played on your computer • Streaming – media begins to play as soon as the data starts to stream or transfer from server to browser

  33. Downloadable Media Advantages Disadvantages Once downloaded can be accessed over and over Utilizes HTTP protocol to transfer data – does not require a specific media server Can take a long time to download – dependent on speed of connection and size of file Usually large file – uses considerable storage space on your computer

  34. Streaming Media Advantages Disadvantages Random access to data – you have control to choose file portion want to play Consumes RAM only while being played High bandwidth requirements Frequently requires a specific media server to transfer data

  35. Interactive Elements • Web-based forms • Javascript • Scripting language used to create rollover buttons, banners, pop-up windows • Applets – small program – execute within a browser • Game simulations • Does not require a plug-in

  36. Interactive Elements • Servlets • Similar to an Applet • Executes from a server versus from within the visitor’s browser • Blogs • Live Chat

  37. Promoting & Maintaining a Web site

  38. Testing • Perform usability testing before publishing • Self-testing • Look at site structure, page layout, color scheme, etc. • Does page function and confirm to design plan • Audience testing • Provide insight as to how potential visitors will respond to and use your site

  39. Publishing • Server space – Individuals & small businesses obtain through a Web Hosting Company • Charge a monthly fee • How do you know which one to choose? • Upload Web Site folders & files • Use FTP Client (File Transfer Protocol) – software • WYSIWYG Editor

  40. Maintenance & Evaluation • Keep content up to date • Check for broken links • Gather feedback – act on feedback • Mechanism on site • Check out and add new technologies

More Related