Layout for web
0 likes165 views
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.
Layout for web
- 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 :(اشة((((شال (اس((((ي(((((قم