VirtualMV/Internet & Web development (2)/Course materials/Overview/Design Tips

From WikiEducator
Jump to: navigation, search




Introduction

Overview

VmvIcon Objectives.png

By the end of this overview you will be able to:

  • Identify techniques that will improve web page design


Overview

VmvIcon Objective.png

Web Design Tips

By the end of this page you will be able to:

  • Have some tips for successful design

The following web design tips are based on those identified by Buchanan(2007)[1].

  • Who is it for?
    • Who is your target audience?
    • What level of computing experience and computer hardware do they have?
    • What content do you have, and how best can you sectionalise it so as not to over-load any one area of your site?
    • If you're building a site for a client, what are their expectations and requirements? (this phase can take days, even weeks to finalise)
  • Say something
    • Content is king
  • Users can navigate around quickly
    • Build your designs to help navigation. Avoid huge graphics.
  • Minimise page size (including graphics)
  • HTML or WYSIWYG?
    • Learn HTML
  • HTML tools
    • Invest in good HTML editor
  • Design first
    • Spend some time designing your site navigation on paper both how it works and what it looks like.
    • Should be clear, concise, easy to use and carefully planned
  • Get the map out
    • Provide a site map … but … design so you don’t need one.
    • Good navigation answers..
      • Where am I?
      • Where was I?
      • Where can I go?
    • Consider adding a search engine
  • Three clicks, you're out
  • Screening your audience (Responsive design)
    • The most popular PC screen resolution in use today is 1024 x 768. With browser toolbars and other OS clutter on-screen, the designer needs to take this into account when developing sites.
    • Mobile Web browsing is becoming important so your site needs to take this into account if you expect users to view your site on a mobile device.
  • What's your name?
    • keep your naming conventions consistent. Lower-case/Camel-case file names, no spaces
  • Manage your fonts
    • Use CSS
    • If you need special fonts use images but don't forget the alt/title tags
    • Don't embed fonts
  • Attaining balance
    • Try and keep a balance between the amount of text and the number of images on a page. Any more than two screens worth of text is probably too much, and you should consider breaking your page into smaller chunks. No scrollbars in both directions.
  • Use CSS
  • Watch your use of multi-coloured backgrounds.
  • Not-so-greatest hits (your eyes only)
    • Avoid Hit or page counters (If you have a database driven web site you can collect them there or if a public access consider Google Analytics.
  • Avoid frames
  • Use images smartly
    • specify a width and height (allows page to render before images loaded)
    • Reduce image colour and depth and compress
    • Use alt and title tags for images
    • Create thumbails for large images
    • reuse images where possible and check that the same images on different pages point to the same actual file. (e.g. logos) as they are cached.
  • Size does matter
    • Hosting is cheap, data transfer costs
    • Keep file sizes small
    • No more that 10-20 second downloads
    • Visitors you lose
      • 7% if under 7 seconds
      • 30% between 8-12
      • 70% if over 12
    • Not everyone has broadband!!
      • Reduce the number of files,
    • Optimise the file sizes
    • Compress HTML
    • Reduce sound quality
    • Use optimising software (especially if you have pasted from products such as MS-Word, or Internet pages)
  • Keep things simple
  • Saviour of the universe?
    • Use Flash judiciously
  • Use common plug-ins (Quicktime, flash)
  • Use Sound sensibly
    • Flash or HTML5, but remember may not play in client browser, use sparingly.
  • Don’t just use a new effect (it shows)
  • Test, test, test ..
    • Check your work thoroughly (Spelling/grammar)
    • Browser speeds
    • External links on your site – they do date
    • Check no absolute links - always use relative links for your own site E.g. Instead of http://virtualmv.com/webdesign/gooddesign.html use webdesign/gooddesign.html
    • Be consistent with your file names (and therefore links) and avoid special characters and spaces
  • Good v’s evil
    • Check different browsers (IE, Firefox, Safari, Chrome)
    • Don’t expect a page to look the same in every browser
    • Not all Browsers render the CSS the same
    • Don’t expect a perfect solution
    • Design for the one you expect the users to use (and your favourite hopefully), then modify to meet different browsers. Consider responsive design
  • Get others to test your site
  • Analyse this
  • Promote the site
    • Use Social Media
    • Use linking from other sites
  • Don't steal
    • use graphics you have created yourself, obtained from a royalty-free source or purchased the rights to. Borrowing or doctoring an image from another site still amounts to theft.
  • Backup
    • Keep copies of your web site. Backup the database if using a CMS. Check the backup works!!
Under Construction
  • No end in site
    • No Web site is ever finished. Its always under construction so don’t point out the obvious!


Burj Khalifa, Dubai
You may like to think of a web site as something like the Burj Khalifa, Dubai. It will always need work on it!!!

Burj Khalifa, Dubai : (approx US$1.5billion) Exterior completed in 2009, and officially opened Jan 2010, it is the tallest man-made structure in the world and the tallest building by a long shot with a height of 828m. The skyscrapers below the Burj Khalifa used to look tall. Note: previously the tallest building on earth, excluding an antenna, was Taiwan's Taipei 101 at 509m.

VmvIcon References.png References

  1. Buchanan, M. (2007) 35 great web design tips, Netguide. MSN NZ. Retrieved December 10, 2007 from http://www.netguide.co.nz/Home/TheGuide/HowTo/HowtoArticle/tabid/195/ArticleID/1546/Default.aspx

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/Internet & Web development (2)/Course materials/Overview/Design Tips. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 5, 2024, from http:https://wikieducator.org/VirtualMV/Internet_%26_Web_development_(2)/Course_materials/Overview/Design_Tips    (zotero)