The document discusses layout design principles for webpages. It covers defining good design, page components like headers, bodies and footers, and things to consider before publishing a website like adding a grid, selecting typography and colors. It also mentions common design questions around browsers used, device types and screen resolutions. Finally, it recommends creating a site map for a personal website.

1. Layout Design For Web
Dr. Abeer
Hasanin
Dr. Abeer Hasanin, Taief University, Graphic Design Department
2019/2018
!‫ب‬‫الوي‬ ‫(ات‬(((‫ح‬((((‫ف‬‫ص‬ ‫(م‬(((‫ي‬((((‫م‬((((‫ص‬‫ت‬

2. Defining the Good Design
Dr. Abeer Hasanin, Taief University, Graphic Design Department
! ‫(ت‬(‫ن‬‫ال‬ ‫(ات‬(‫ح‬((‫ف‬((‫ص‬‫ل‬ ‫(د‬(‫ي‬((‫ج‬‫ال‬ ‫التصميم‬ ‫(حديد‬(((((((‫ت‬
‫ايجاد‬ ‫وسرعة‬ ‫للتصميم‬ ‫املستخدم‬ ‫رضاء‬ ‫بني‬ ‫املوازنة‬
!‫ة‬‫املطلوب‬ ‫املعلومات‬
‫(ل‬(((‫م‬((((‫ع‬((((‫ت‬‫(س‬(((‫مل‬‫ا‬ ‫(ل‬(((‫ق‬((((‫ن‬‫ت‬ ‫وسرعة‬ ‫الروابط‬ ‫وضوح‬
‫(ر‬‫ي‬(‫ش‬‫ت‬ ‫(ا‬‫ه‬‫ان‬ ‫ووضوح‬ ‫(ال‬‫ع‬‫ف‬ ‫بشكل‬ ‫اليها‬ ‫والوصول‬
! ‫الرابط‬ ‫(ال‬(‫م‬‫إع‬ ‫من‬ ‫(أكد‬(‫ت‬‫وال‬ ‫(الة‬(‫ع‬‫ف‬ ‫(ة‬(‫ح‬((‫ف‬‫ص‬ ‫الي‬
Usability Professionals
Act as a conduit between the User and
the user and the information
The visibility of the navigation block
‫كل‬ ‫مكونات‬ ‫بني‬ ‫اختالفات‬ ‫وجود‬ ‫من‬ ‫الرغم‬ ‫علي‬
‫ترابط‬ ‫علي‬ ‫الحفاظ‬ ‫املصمم‬ ‫علي‬ ‫انه‬ ‫اال‬ ‫صفحة‬
‫ناحية‬ ‫من‬ ‫الصفحات‬ ‫لجميع‬ ‫التصميم‬ ‫عناصر‬
‫اللونية‬ ‫واملجموعة‬ ‫للصفحات‬ ‫العام‬ ‫التخطيط‬
!‫ة‬‫الكتابي‬ ‫والخطوط‬
Users recognize each page as
belonging to the site

3. Things to do Before the Next Step Put your thoughts on paper first
Add a grid
!‫ي‬‫اإللكترون‬ ‫للنشر‬ ‫التجهيز‬ ‫قبل‬ ‫اآلعتبار‬ ‫في‬ ‫تؤخذ‬ ‫أشياء‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
Start sketching ‫التخطيطي‬ ‫الرسم‬
Choose your typography
Select your color theme
Rethink the established
Prototypes
Share designs with clients
!‫ت‬‫الشبكيا‬
!‫ة‬‫الكتابي‬ ‫الخطوط‬ ‫مجموعة‬ ‫اختيار‬
!‫ة‬‫اللوني‬ ‫املجموعة‬ ‫تخير‬
!‫ذ‬‫التنفي‬ ‫قبل‬ ‫التصميم‬ ‫تقييم‬
!‫ي‬‫املبدئ‬ ‫التصميم‬ ‫وضع‬
!‫ل‬‫العمي‬ ‫علي‬ ‫التصميم‬ ‫عرض‬

4. Page Components
HEADER
!‫ب‬‫الوي‬ ‫(ة‬(‫ح‬((‫ف‬‫ص‬ ‫(وين‬(‫ك‬‫ت‬ ‫(اصر‬(‫ن‬‫ع‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
BODY
FOOTER
!‫ة‬‫الصفح‬ ‫رأس‬
!‫ة‬‫الصفح‬ ‫تزييل‬
!‫ة‬‫الصفح‬ ‫جسم‬
Container ‫احلاوية‬
Wrapper ‫غالف‬

5. Page Components
HEADER
!‫ب‬‫الوي‬ ‫(ة‬(‫ح‬((‫ف‬‫ص‬ ‫(وين‬(‫ك‬‫ت‬ ‫(اصر‬(‫ن‬‫ع‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
BODY
FOOTER
!‫ة‬‫الصفح‬ ‫رأس‬
!‫ة‬‫الصفح‬ ‫تزييل‬
!‫ة‬‫الصفح‬ ‫جسم‬

6. Page Components
HEADER
!‫ب‬‫الوي‬ ‫(ة‬(‫ح‬((‫ف‬‫ص‬ ‫(وين‬(‫ك‬‫ت‬ ‫(اصر‬(‫ن‬‫ع‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
Logo
!‫ي‬‫االعل‬ ‫املتصفح‬
Top Navigation
Social Media
Search Bar
Special Graphics
!‫ر‬‫الشعا‬
!‫ي‬‫اإلجتماع‬ ‫التواصل‬ ‫روابط‬
!‫ث‬‫البح‬ ‫مكان‬
!‫م‬‫والتصمي‬ ‫بالعرض‬ ‫خاصة‬ ‫رسوم‬ ‫اي‬
!‫ة‬‫الصفح‬ ‫رأس‬

7. Page Components
!‫ب‬‫الوي‬ ‫(ة‬(‫ح‬((‫ف‬‫ص‬ ‫(وين‬(‫ك‬‫ت‬ ‫(اصر‬(‫ن‬‫ع‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
BODY
!‫ة‬‫الصفح‬ ‫جسم‬
Container ‫احلاوية‬
Imagery
Content
Side Navigation
!‫ر‬‫(و‬(((((((((((((((((((((((((((((((((((((‫ص‬‫ال‬
!‫ي‬‫(و‬(((((((((((((((‫ت‬((((((((((((((((‫ح‬‫امل‬
!‫ي‬(((((‫ب‬‫(ان‬((((‫ج‬‫ال‬ ‫(ح‬((((‫ف‬(((((‫ص‬(((((‫ت‬‫امل‬

8. Page Components
!‫ب‬‫الوي‬ ‫(ة‬(‫ح‬((‫ف‬‫ص‬ ‫(وين‬(‫ك‬‫ت‬ ‫(اصر‬(‫ن‬‫ع‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
Contacts
FOOTER
!‫ة‬‫الصفح‬ ‫تزييل‬
Links ‫هامة‬ ‫روابط‬
Social Media
Copy Rights
!‫ي‬‫(اع‬(‫م‬((‫ت‬‫اإلج‬ ‫التواصل‬
!‫ل‬‫(واص‬((((‫ت‬‫ال‬ ‫(ة‬((((((‫ي‬(((((((‫ف‬(((((((‫ي‬‫ك‬
!‫ر‬‫(ش‬((‫ن‬(((((((((((((((‫ل‬‫وا‬ ‫(ف‬((‫ي‬‫(أل‬((‫ت‬‫ال‬ ‫(وق‬((‫ق‬‫ح‬

9. Alternative ways to create web content Add a grid 960px
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!Photoshop File ‫(ة‬((‫ي‬(((‫ك‬(((‫ب‬‫(ش‬((((((((((‫ل‬‫ا‬ ‫(ف‬((‫ل‬‫مل‬ ‫الرجوع‬

10. Website Dimentions Devices & resolutions!
Dr. Abeer Hasanin, Taief University, Graphic Design Department
common questions!
What browsers do people use?! !ً‫ا‬‫(ار‬(‫ش‬((‫ت‬‫ان‬ ‫(ر‬(‫ث‬‫األك‬ ‫املتصفح‬
!‫ح‬(‫ف‬(‫ص‬(‫ت‬(‫ل‬‫ل‬ ‫(دم‬‫خ‬(‫ت‬‫(س‬‫مل‬‫ا‬ ‫(از‬‫ه‬(‫ج‬‫ال‬
! ‫(اشة‬((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((‫ش‬‫ال‬ ‫دقة‬
On what kind of devices?!
What is their screen resolution?!

11. Website Dimensions Devices & resolutions!
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫ض‬‫(ر‬((((((((((‫ع‬‫ال‬ !‫ع‬‫(ا‬((((((‫ف‬‫اإلرت‬ !‫م‬‫(دا‬(‫خ‬((‫ت‬‫اإلس‬ ‫في‬ ‫(ار‬(‫ش‬((‫ت‬‫اإلن‬ ‫نسبة‬

12. Site Map Your personal web site !
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫ت‬‫(ا‬(((‫ح‬((((‫ف‬((((‫ص‬‫ال‬ ‫(ل‬(((‫س‬((((‫ل‬‫(س‬(((((((((((((((((((‫ت‬ ‫(ة‬(((‫ط‬‫خري‬ ‫رسم‬

13. Website Dimensions Devices & resolutions!
Dr. Abeer Hasanin, Taief University, Graphic Design Department

14. Website Dimensions Devices & resolutions!
Dr. Abeer Hasanin, Taief University, Graphic Design Department

15. Website Dimensions Devices & resolutions!
Dr. Abeer Hasanin, Taief University, Graphic Design Department
! Site Map for your personal web site :‫(ات‬(‫ح‬((‫ف‬((‫ص‬‫ال‬ ‫(ل‬(‫س‬((‫ل‬‫(س‬(((((((((‫ت‬ ‫(ة‬(‫ط‬‫خري‬ ‫رسم‬
! 960px X900px :‫(م‬((((‫ي‬(((((‫م‬(((((‫ص‬(((((‫ت‬‫ال‬ ‫(اس‬((((‫ي‬(((((‫ق‬‫م‬
! 1024px X1000px :‫(اشة‬((((‫ش‬‫ال‬ ‫(اس‬((((‫ي‬(((((‫ق‬‫م‬