This document provides guidelines for web site design principles: 1. Design for the computer medium by creating a unified site design that is accessible across different browsers, operating systems, and connection speeds. Consider how the user will read or scan the page. 2. Use a grid structure and active white space to provide visual hierarchy and guidance to the user. Plan themes and structures to maintain consistency across pages. 3. Test designs thoroughly even when feeling confident. Focus design efforts on the needs and preferences of the user.

1. ١٤/١٢/١٤٣١
١
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

2. ١٤/١٢/١٤٣١
٢
‫اﻟﻛﻣﺑﯾوﺗرﯾﺔ‬ ‫اﻟﻣواد‬ ‫ﺗﺻﻣﯾم‬
‫ﻣﺗﻌددة‬ ‫ﻋﻣل‬ ‫ﻣﻧﺻﺎت‬ ‫ﻋﻠﻰ‬ ‫ﺗﺻﻣﯾﻣك‬ ‫ﯾﻌﻣل‬ ‫أن‬ ‫راﻋﻲ‬)
‫ﻣﺗﻌددة‬ ‫ﻣﺳﺗﻌرﺿﺎت‬(
 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.

3. ١٤/١٢/١٤٣١
٣
‫اﻟﺗﺎﻟﻲ‬ ‫اﻟﺗﺻﻣﯾم‬ ‫راﺟﻊ‬
‫اﻟﻌرض‬ ‫وأﺳﻠوب‬ ‫اﻟﺷﻛل‬ ‫ﺗﺣدﯾد‬
‫ﺗوﺣﯾد‬ ‫راﻋﻲ‬‫واﻟﺑﻧﯾﺔ‬ ‫اﻟﺳﻣﺔ‬‫ﺗﺻﻣﯾﻣك‬ ‫ﻓﻲ‬.
 Plan with unifying themes and
Structures
‫اﻟﺑﻧﯾﺔ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺣﻔﺎظ‬ ‫واﻟﻌرﺿﯾﺔ‬ ‫اﻟطوﻟﯾﺔ‬ ‫اﻟﺧطوط‬ ‫اﺳﺗﺧدم‬
‫ﻟﻠﺻﻔﺣﺔ‬ ‫اﻟﺑﺻرﯾﺔ‬.
 Use a grid to provide visual structure
‫اﻟﻔﻌﺎﻟﺔ‬ ‫اﻟﺑﯾﺿﺎء‬ ‫اﻟﻣﺳﺎﺣﺎت‬ ‫اﺳﺗﺧدم‬.
 Use active white space

4. ١٤/١٢/١٤٣١
٤
‫اﻟﺣﺎﻟﯾﺔ‬ ‫ﻟﻠﺻﻔﺣﺔ‬ ‫ﺟﯾدا‬ ‫أﻧظر‬
‫ﺑﺎﻟﺳﺎﺑﻘﺔ‬ ‫اﻟﺣﺎﻟﯾﺔ‬ ‫اﻟﺻﻔﺣﺔ‬ ‫ﻗﺎرن‬
‫اﻟﺻﻔﺣﺔ‬ ‫ﺑﻧﯾﺔ‬ ‫ﻋﻠﻰ‬ ‫ﻟﻠﺣﻔﺎظ‬ ‫اﻟﺧطوط‬ ‫اﺳﺗﺧدم‬
Use a grid to provide visual structure

5. ١٤/١٢/١٤٣١
٥
‫اﻟﻔﻌﺎﻟﺔ‬ ‫اﻟﺑﯾﺿﺎء‬ ‫اﻟﻣﺳﺎﺣﺎت‬ ‫اﺳﺗﺧدم‬
‫ﺗﺻﻣﯾﻣك‬ ‫ﻓﻲ‬ ‫اﻟﻣﺳﺗﺧدم‬ ‫راﻋﻲ‬
 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

6. ١٤/١٢/١٤٣١
٦
‫ﻟﻠﻣﺳﺢ‬ ‫ﻣﺻﻣﻣﺔ‬ ‫ﺻﻔﺣﺔ‬‫ﻟﻠﻘراءة‬ ‫ﻣﺻﻣﻣﺔ‬ ‫ﺻﻔﺣﺔ‬
‫ﻟﻠﻣﺳﺗﺧدم‬ ‫وﻓﻘﺎ‬ ‫اﻟﺻﻔﺣﺎت‬ ‫ﺗﺻﻣﯾم‬

7. ١٤/١٢/١٤٣١
٧
‫اﻟﺗﻔﺿﯾل‬ ‫ﻣﻧﺎطق‬ ‫ﺣﺳب‬ ‫اﻟﺗﺻﻣﯾم‬
‫اﻟﺗﻔﺿﯾل‬ ‫ﻟﻣﻧﺎطق‬ ‫ﻣﺛﺎل‬
‫اﻟﻘراءة‬ ‫ﻻﺗﺟﺎه‬ ‫وﻓﻘﺎ‬ ‫اﻟﺗﺻﻣﯾم‬

8. ١٤/١٢/١٤٣١
٨
‫اﻟﻣﺳﺢ‬ ‫اﺗﺟﺎه‬ ‫ﺣﺳب‬ ‫اﻟﺗﺻﻣﯾم‬