Download - Website design principles
![Page 1: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/1.jpg)
Web Site Design Principles
1
![Page 2: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/2.jpg)
Design For The Medium A Web site is designed for the computer – not paper Look and Feel:
1. The interface that the user must navigate often is called the look and feel of the Web site.
2. Users look & feel when they explore the info design of the site.3. Look and feel implies the personality that the Web site conveys
to the user and the way it works.
2
Summary
![Page 3: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/3.jpg)
Design For The Medium Make your Design Portable:
1. The Web site must be portable across different browsers, OS and computer platforms (hardware).
2. Test the website in different browsers such as Internet Explorer, FireFox, Google Chrome, Opera, etc.
3. Certain features of HTML like cascading style sheets cannot be interpreted properly by certain browsers.
4. If necessary, design separate websites for different types of browsers; detect the user’s browser and direct him to appropriate version of the Web site
5. Check website in different browsers; a website designed for a desktop PC may not be usable on a mobile device.
3
Summary
![Page 4: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/4.jpg)
Design For The Medium Design for Low Bandwidth:
1. Different types of Internet connections are used – dial-up, broadband, cable, etc.
2. Plan your pages so that they are accessible at different connection speeds.
3. Avoid large images, complicated animations, movies as these take time to download.
4. Provide alternate text (by using the ALT tag of HTML) 5. Design an alternate page that uses less graphics so that it will
download quickly for users with a slow connection.
4
Summary
![Page 5: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/5.jpg)
Design For The Medium Plan for Clear Presentation of Information:
1. Information design (ID) means the presentation and organisation of your information. ID is the most important factor in determining the success of a Web site.
2. Don’t use too many fonts & colors as this distracts the user.3. Provide direct links to the areas in the Web site that you think are
the most in demand.
5Summary
![Page 6: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/6.jpg)
Design For The Medium Plan for Clear Presentation of Information:
1. Break large paragraphs into smaller paras.2. Provide a suitable headings so that users can find the info quickly.3. Break up long text into columns.4. Link text with hyperlinks
6
Summary
![Page 7: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/7.jpg)
Screen Resolutions Horizontal and Vertical Dimensions
640 x 480, 800 x 600, 1024 x 768
Fixed Resolution Designs
Flexible Resolution Designs
7
800 x 600 1024 x 768640 x 480
Next Slide
640 x 480 800 x 600 1024 x 768 1152 x 864
Summary
![Page 8: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/8.jpg)
8
![Page 9: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/9.jpg)
9
![Page 10: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/10.jpg)
10
![Page 11: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/11.jpg)
11
![Page 12: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/12.jpg)
12
![Page 13: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/13.jpg)
13
![Page 14: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/14.jpg)
14
![Page 15: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/15.jpg)
Design For The Medium Summary
◦ Look and Feel◦ Make Your Design Portable◦ Design for Low Bandwidth◦ Clear Presentation, Easy Access◦ Design for Different Screen Resolutions
15
Summary
![Page 16: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/16.jpg)
Design the Whole Site When designing the site, plan the unifying themes and structure that will hold the pages together.
The theme should reflect the personality of your organization
16
Summary
![Page 17: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/17.jpg)
Design the Whole Site Create Smooth Transitions
◦ Create a unified look among the pages◦ Reinforce the identifying elements of the site◦ Create smooth transitions from one page to another – this is done by repeating colors and
fonts for similar page elements.◦ E.g., all para headings in a particular font and color on all pages◦ All body text in a particular color and font style on all pages.
17
Summary
![Page 18: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/18.jpg)
Use of Active White Space
18
White space is created by: Line spacing Margins – space around a para or a picture Headings – used to separate content into small chunks. Images – can be used to separate text
Summary
![Page 19: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/19.jpg)
Design the Whole Site Summary
◦ Unifying Themes and Structures◦ Smooth Transitions◦ Use White Space
19
Summary
![Page 20: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/20.jpg)
23
1
2
3
4
5
![Page 21: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/21.jpg)
Design for the User Guide the User’s Eye
25
![Page 22: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/22.jpg)
Design for the User Summary
◦ Design for Interaction◦ Design for Location◦ Guide the User’s Eye◦ Keep a Flat Hierarchy◦ Use the Power of Hypertext Linking◦ Resist Overload
29
Summary
![Page 23: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/23.jpg)
Design For The Screen Summary
◦ Shape Of The Screen◦ Source Of Light◦ Monitor Resolution◦ A Screen Is Not A Page
31
Summary
![Page 24: Website design principles](https://reader035.vdocuments.mx/reader035/viewer/2022062405/55561cdad8b42a5b528b4573/html5/thumbnails/24.jpg)
Web Design PrinciplesSummary
Design for◦ Medium◦ Whole Site◦ User◦ Screen
32