layout for web site design, the component of the web page and organizing the page

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 :‫(اشة‬((((‫ش‬‫ال‬ ‫(اس‬((((‫ي‬(((((‫ق‬‫م‬