1. Website Design What is Involved?

2. Web Design ConsiderationsSlide 2Bsc Web Design Stage 1 Website Design Involves Interface Design Site Design –Organising Information or the Content of the site (Information Architecture) –Designing Navigation Schemes Page Design –Designing the appearance/style of the pages of the site –Balancing elements (text, graphics)

3. Web Design ConsiderationsSlide 3Bsc Web Design Stage 1 Interface Design How the user interacts with the site Methods Used: –Metaphors –Images –Text

4. Web Design ConsiderationsSlide 4Bsc Web Design Stage 1 … Interface Design Your website needs an interface that suits for your target audience It must be easy to use Consistency throughout the site

5. Web Design ConsiderationsSlide 5Bsc Web Design Stage 1 … Interface Design Must have clear Navigational Aids –Links should be obvious and consistent Viewer should be able to return to the home page or other major navigation points in your site at all times The basic links should be presented on every page

6. Web Design ConsiderationsSlide 6Bsc Web Design Stage 1 … Interface Design Define an efficient hierarchy of information –This allows users to access what they want quickly –Minimize the steps needed to reach it the information

7. Web Design ConsiderationsSlide 7Bsc Web Design Stage 1 Site Design Organising information –Organising site content. Each page in your site needs to be placed in a structure chart or storyboard Designing the Navigation Structure –Textual v graphical –Consistent placement and colour of links –Global, local and document navigation

8. Web Design ConsiderationsSlide 8Bsc Web Design Stage 1 Organising Information Organising content –We can learn from the organisation of printed material ie books, magazines and periodicals and their conventions: Chapters, tables of contents, page numbering, footnotes, indexes etc Web documents will evolve and develop their own conventions in time

9. Web Design ConsiderationsSlide 9Bsc Web Design Stage 1 … Organising Information Divide the content into logical units –Establish a hierarchy of importance among units –Use this to structure relationships among units Build a site to closely follow your information structure Test your site

10. Web Design ConsiderationsSlide 10Bsc Web Design Stage 1 Navigation Structure Should be easy to follow Use accepted conventions ( eg links are blue!) Links within your web pages draw the viewer down the page and further into your site (this is the goal)

11. Web Design ConsiderationsSlide 11Bsc Web Design Stage 1 … Navigation Page/Screen length –Many pages dont fit on the screen Need to be able to navigate through the document quickly ie: – Go to Top or – Go to bottom etc

12. Web Design ConsiderationsSlide 12Bsc Web Design Stage 1 … Navigation DO NOT rely on the built-in browser navigation

13. Web Design ConsiderationsSlide 13Bsc Web Design Stage 1 … Navigation Use previous and next links within documents to help continuity –Back should lead to the last page viewed –Previous leads to the previous page associated with the page you are currently looking at but may not be last page viewed

14. Web Design ConsiderationsSlide 14Bsc Web Design Stage 1 Page Design What does every web page need? –An informative Title –The creators Identity - Webmaster –A creation/revision Date –At least one link to a local or home page –The ability to get back to the home page

15. Web Design ConsiderationsSlide 15Bsc Web Design Stage 1 Print v Web Similarities/Differences –Search facility v Indexing –Scanning of Link information v Titles, Headings etc Screen v paper size Different fonts

16. Web Design ConsiderationsSlide 16Bsc Web Design Stage 1 Web v Print Documents The viewer needs to know who, what, when and where about the document

17. Web Design ConsiderationsSlide 17Bsc Web Design Stage 1 Who Ownership of the page –Profit-seeking enterprise –Individual/Personal –Charitable organisation –Government agency etc

18. Web Design ConsiderationsSlide 18Bsc Web Design Stage 1 What What is the site/page about? –Page Titles can give useful information –Titles are used by Search Engines to index pages –Meta information – information you put in the HEAD section of your web page

19. Web Design ConsiderationsSlide 19Bsc Web Design Stage 1 When A documents value can depend on its timeliness –Newspapers have day and date –Dating your web pages lets viewer know how up-to-date the information is

20. Web Design ConsiderationsSlide 20Bsc Web Design Stage 1 Where Web surfers enter sites from many different angles and may not enter by the Home page –Link all pages in site to the Home page –Make sure viewer finds out who you are

21. Web Design ConsiderationsSlide 21Bsc Web Design Stage 1 Other Design Considerations Bandwidth Keep it Simple Be Consistent Engage the viewer through interactive content Facilitate User Needs Graceful Degradation

22. Web Design ConsiderationsSlide 22Bsc Web Design Stage 1 Bandwidth Considerations Research shows that the threshold for frustration is about 10 seconds The general web surfer probably has a 56K modem at best (this may be changing!)

23. Web Design ConsiderationsSlide 23Bsc Web Design Stage 1 Simplicity Minimise multimedia content Simple interface Suitable fonts

24. Web Design ConsiderationsSlide 24Bsc Web Design Stage 1 Consistency Use a consistent approach –Titles, subtitles –Page footers/headers –Navigational links to home and other pages

25. Web Design ConsiderationsSlide 25Bsc Web Design Stage 1 Interactivity Good websites are interactive –Order and Payment systems Be prepared to respond to viewers comments and queries –Feedback Forms –Email contact –Support forums (FAQs)

26. Web Design ConsiderationsSlide 26Bsc Web Design Stage 1 Facilitating User Needs Use alternative content for users who might have disabilities ie using sound for the visually impaired

27. Web Design ConsiderationsSlide 27Bsc Web Design Stage 1 Graceful Degradation This term means that your website should look good regardless of the technology of the user –Dont design for the best machine –Design for the average viewer –Do not design for the latest browser or plug-in technology –Allow alternatives/choices to viewer

28. Web Design ConsiderationsSlide 28Bsc Web Design Stage 1 The best information designs are ones the user does not notice!