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. ١٤/١٢/١٤٣١
٨
‫اﻟﻣﺳﺢ‬ ‫اﺗﺟﺎه‬ ‫ﺣﺳب‬ ‫اﻟﺗﺻﻣﯾم‬