Scribd
Upload
307 views22 pages

Web Site Design Principles

This document outlines principles for web site design, including designing for the computer medium, creating a unified site design, and designing for the user. Some key principles discussed are designing across platforms so the site works on different browsers and devices, planning for low bandwidth so pages load quickly, using a grid structure and white space for visual design, and designing pages considering whether users will read or scan the content. The document provides examples of how to design pages for reading versus scanning and how to guide users' eyes through a site based on reading or scanning patterns.

Uploaded by

dr gawdat
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
307 views22 pages

Web Site Design Principles

This document outlines principles for web site design, including designing for the computer medium, creating a unified site design, and designing for the user. Some key principles discussed are designing across platforms so the site works on different browsers and devices, planning for low bandwidth so pages load quickly, using a grid structure and white space for visual design, and designing pages considering whether users will read or scan the content. The document provides examples of how to design pages for reading versus scanning and how to guide users' eyes through a site based on reading or scanning patterns.

Uploaded by

dr gawdat
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 22

Web Site Design Principles

‫أﺳس ﺗﺻﻣﯾم ﻣواﻗﻊ اﻟوﯾب‬


By : Dr. Mostafa gawdat
www.mostafa-gawdat.net
‫ﻟﻧﺑدأ ﺗﺻﻣﯾﻣﻧﺎ اﻷول‬
‫ﻗﺑل أن ﻧﺑدأ ﺗﺻﻣﯾﻣﻧﺎ اﻷول ﯾﺟب أن ﻧﺗﻔق ﻋﻠﻰ ﻋدة‬ ‫‪‬‬
‫أﺳس ﻧﺗﺑﻌﮭﺎ‪.‬‬
‫ﻓﻠﻧﺗﻔق أوﻻ ً‬
‫ﻧﺣن ﻧﺻﻣم ﻣﺎدة ﻛﻣﺑﯾوﺗرﯾﺔ‬ ‫‪‬‬
‫‪ Design for the computer medium‬‬
‫ﻧﺣﺗﺎج ﻟﻌﻣل ﺗﺻﻣﯾم ﻣوﺣد ﻟﻠﻣوﻗﻊ ﻛﻛل‬ ‫‪‬‬
‫‪ Create a unified site design‬‬
‫ﻣراﻋﺎة اﻟﻣﺳﺗﺧدم ) اﻟﺟﻣﮭور( ﻓﻲ ﺗﺻﻣﯾﻣﻧﺎ‬ ‫‪‬‬
‫‪ Design for the user‬‬
‫ﻧﺣن ﻧﺻﻣم ﻣﺎدة ﺗﻌرض ﻋﻠﻰ اﻟﺷﺎﺷﺔ وﻟﯾس ﻣﺎدة‬ ‫‪‬‬
‫ورﻗﯾﺔ أو ﻣﻠﺻﻘﺎت‬
‫‪ Design for the screen‬‬
‫ﺗﺻﻣﯾم اﻟﻣواد اﻟﻛﻣﺑﯾوﺗرﯾﺔ‬
‫‪ ‬راﻋﻲ أن ﯾﻌﻣل ﺗﺻﻣﯾﻣك ﻋﻠﻰ ﻣﻧﺻﺎت ﻋﻣل ﻣﺗﻌددة )‬
‫ﻣﺳﺗﻌرﺿﺎت ﻣﺗﻌددة (‬
‫‪ Design for Cross Platform‬‬
‫‪ ‬راﻋﻲ أن ﻻ ﯾﺳﺗﮭﻠك ﺗﺻﻣﯾﻣك ﺳﻌﺔ ﻧطﺎق اﻟﺷﺑﻛﺔ‪.‬‬
‫‪ Design for low bandwidth‬‬
‫‪ ‬ﺧطط ﻟﺗﺻﻣﯾم واﺿﺢ ﯾﺳﮭل ﻣﻌﮫ اﻟوﺻول إﻟﻰ‬
‫ﻣﻌﻠوﻣﺎﺗك‪.‬‬
‫‪ Plan for clear presentation and easy‬‬
‫‪access to your information‬‬
‫اﻟﺗواﻓق ﻣﻊ ﻣﻧﺻﺎت ﻋﻣل ﻣﺗﻌددة‬
‫ ﻣوﻗﻌك اﻹﻟﻛﺗروﻧﻲ ﯾﺟب أن ﯾﻌﻣل ﺑﺷﻛل ﺻﺣﯾﺢ ﺑﻐض‬
‫اﻟﻧظر ﻋن اﻟﻣﺳﺗﻌرض أو ﻧظﺎم اﻟﺗﺷﻐﯾل أو ﻧوع ﺟﮭﺎز‬
.‫اﻟﻛﻣﺑﯾوﺗر‬
 Your Web should be accessible across
different browsers, operating
systems, and computer platforms
.‫ اﺧﺗﺑر دوﻣﺎ ﺗﺻﻣﯾﻣك ﺣﺗﻰ ﻟو ﻛﻧت واﺛﻘﺎ ﻣﻧﮫ‬
 Remember to test your work even
when you feel confident of your
results
‫ﻣراﻋﺎة ﺳﻌﺔ ﻧطﺎق اﻟﺷﺑﻛﺔ‬
‫ﯾﺟب اﻟﻼ ﯾﺳﺗﻐرق ﺗﺣﻣﯾل اﻟﺻﻔﺣﺔ أﻛﺛر ﻣن ‪ ٧‬ﺛواﻧﻲ‬ ‫‪‬‬
‫‪.7 Second Rule‬‬
‫ﯾﻔﺿل أن ﻧﺻﻣم ﺻﻔﺣﺗﻧﺎ ﻟﺗﺗﻔق ﻣﻊ اﻟﺳرﻋﺎت اﻟﻣﺧﺗﻠﻔﺔ‬ ‫‪‬‬
‫ﻟﻺﻧﺗرﻧت‪.‬‬
‫‪ Plan your pages so that they are‬‬
‫‪accessible at a variety of connection‬‬
‫‪speeds.‬‬
‫راﺟﻊ اﻟﺗﺻﻣﯾم اﻟﺗﺎﻟﻲ‬
‫ﺗﺣدﯾد اﻟﺷﻛل وأﺳﻠوب اﻟﻌرض‬

‫راﻋﻲ ﺗوﺣﯾد اﻟﺳﻣﺔ واﻟﺑﻧﯾﺔ ﻓﻲ ﺗﺻﻣﯾﻣك‪.‬‬ ‫‪‬‬


‫‪ Plan with unifying themes and‬‬
‫‪Structures‬‬
‫اﺳﺗﺧدم اﻟﺧطوط اﻟطوﻟﯾﺔ واﻟﻌرﺿﯾﺔ ﻟﻠﺣﻔﺎظ ﻋﻠﻰ اﻟﺑﻧﯾﺔ‬ ‫‪‬‬
‫اﻟﺑﺻرﯾﺔ ﻟﻠﺻﻔﺣﺔ‪.‬‬
‫‪ Use a grid to provide visual structure‬‬
‫اﺳﺗﺧدم اﻟﻣﺳﺎﺣﺎت اﻟﺑﯾﺿﺎء اﻟﻔﻌﺎﻟﺔ‪.‬‬ ‫‪‬‬
‫‪ Use active white space‬‬
‫أﻧظر ﺟﯾدا ﻟﻠﺻﻔﺣﺔ اﻟﺣﺎﻟﯾﺔ‬
‫ﻗﺎرن اﻟﺻﻔﺣﺔ اﻟﺣﺎﻟﯾﺔ ﺑﺎﻟﺳﺎﺑﻘﺔ‬
‫اﺳﺗﺧدم اﻟﺧطوط ﻟﻠﺣﻔﺎظ ﻋﻠﻰ ﺑﻧﯾﺔ اﻟﺻﻔﺣﺔ‬
Use a grid to provide visual structure
‫اﺳﺗﺧدم اﻟﻣﺳﺎﺣﺎت اﻟﺑﯾﺿﺎء اﻟﻔﻌﺎﻟﺔ‬
‫راﻋﻲ اﻟﻣﺳﺗﺧدم ﻓﻲ ﺗﺻﻣﯾﻣك‬
 Keep your design efforts centered
around your user
 Design for interaction
 Design for location
 Guide the user’s eye
 Decide whether the user will read or
scan
‫ﺗﺻﻣﯾم اﻟﺻﻔﺣﺎت وﻓﻘﺎ ﻟﻠﻣﺳﺗﺧدم‬

‫ﺻﻔﺣﺔ ﻣﺻﻣﻣﺔ ﻟﻠﻘراءة‬ ‫ﺻﻔﺣﺔ ﻣﺻﻣﻣﺔ ﻟﻠﻣﺳﺢ‬


‫اﻟﺗﺻﻣﯾم ﺣﺳب ﻣﻧﺎطق اﻟﺗﻔﺿﯾل‬
‫ﻣﺛﺎل ﻟﻣﻧﺎطق اﻟﺗﻔﺿﯾل‬
‫اﻟﺗﺻﻣﯾم وﻓﻘﺎ ﻻﺗﺟﺎه اﻟﻘراءة‬
‫اﻟﺗﺻﻣﯾم ﺣﺳب اﺗﺟﺎه اﻟﻣﺳﺢ‬

You might also like