The document discusses various areas of web design including core skills needed for different roles. It covers general web design areas like planning, prototyping, building, and testing websites. Specific roles covered include generalist web designers, visual designers, UX designers, interactive designers, motion graphic designers, front-end developers, and CMS specialists. It also discusses tools, technologies, and best practices for web design like HTML, CSS, JavaScript, content management systems, code editors, testing browsers, and prototyping tools.

1. Creating a website HTML,CSS
Dr. Abeer
Hasanin
Dr. Abeer Hasanin, Taief University, Graphic Design Department
2019/2018
!‫ي‬‫%رون‬‫ت‬%‫ك‬‫ال‬ ‫موقع‬ ‫%يء‬‫ش‬%‫ن‬‫ت‬ ‫%ف‬‫ي‬‫ك‬

2. Professional web design
Alternative ways to create web content
Template-based site ‫اجلاهزة‬ ‫القوالب‬ ‫علي‬ ‫تعتمد‬
Requires focus, time, and commitment
Blogging and social media ‫التواصل‬ ‫مواقع‬
‫والبلوج‬ ‫اإلجتمعي‬
!‫ي‬‫%رون‬‫ت‬%%‫ك‬‫ال‬ ‫موقع‬ ‫%يء‬%‫ش‬%%‫ن‬‫ت‬ ‫%اء‬%‫ش‬‫إلن‬ ‫%ة‬%‫ف‬%%‫ل‬%%‫ت‬%%‫خ‬‫م‬ ‫طرق‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
‫اإلحترافي‬ ‫التصميم‬

3. Web design areas
2. Content ‫واملضمون‬ ‫احملتوي‬
Planning/prototyping- building/ testing
Core skills
CSS JS
Abletobuilt
fromscratch
!‫ة‬%%‫ي‬‫%رون‬‫ت‬%%‫ك‬‫اإلل‬ ‫املواقع‬ ‫اشاء‬ ‫في‬ ‫%ل‬%‫م‬%%‫ع‬‫ال‬ ‫%االت‬%‫ج‬‫م‬
! ‫%ة‬%%%%%%%%%‫ي‬‫األساس‬ ‫%ارات‬%%%%%%%%%‫ه‬‫امل‬
3. Visuals ‫البصرية‬ ‫والرسوم‬ ‫الفنون‬
4. Technology‫االتكنولوجي‬ ‫استخدام‬
Delivery .5 ‫النشر‬
1. Purpose ‫من‬ ‫الهدف‬ ‫حتديد‬
‫املوقع‬ ‫تصميم‬
HTML
PS
!‫ي‬‫املبدئ‬ ‫التخطيط/النموذج‬ !‫ب‬‫تجري‬ / ‫بناء‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department

4. Web design areas
Generalist
Planning/prototyping- building/ testingCore skills
HTML CSS JS
Able to built from scratch
!."percenter 80" ‫بـ‬ ‫يعرف‬ ‫ما‬ ‫يكونون‬ ‫قد‬ ، ‫الحاالت‬ ‫من‬ ‫كثير‬ ‫في‬ .
‫جافا‬ ، HTML ، CSS) ‫األمامية‬ ‫الواجهة‬ ‫تطوير‬ ، ‫التصميم‬ ‫أساسيات‬ ‫فهم‬
، ‫البحث‬ ‫محرك‬ ‫ممارسات‬ ‫وأفضل‬ ، (‫االستجابة‬ ‫سريع‬ ‫الويب‬ ‫تصميم‬ ، ‫سكريبت‬
. ‫واملزيد‬ ، ‫الويب‬ ‫موقع‬ ‫وأداء‬ ، ‫الوصول‬ ‫وإمكانية‬ ، ‫االستخدام‬ ‫وإمكانية‬
، ‫املجاالت‬ ‫هذه‬ ‫من‬ ‫العديد‬ ‫في‬ ‫عملية‬ ‫معرفة‬ ‫يمتلك‬ ‫شخص‬ ‫هو‬ ‫العام‬ ‫األخصائي‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫م‬‫العا‬ ‫األخصائي‬

5. Web design areas
Visual designers
HTML CSS Ai Ps
Color, layout, typography, and graphics
Graphic designersCore skills
!‫م‬‫املصم‬
! ‫%ة‬%%%%%%%%%%%‫ي‬‫األساس‬ ‫%ارات‬%%%%%%%%%%%‫ه‬‫امل‬
Dr. Abeer Hasanin, Taief University, Graphic Design Department
‫العام‬ ‫والتنسيق‬ ‫اللون‬ ‫مع‬ ‫يتعامل‬
!‫م‬‫الرسو‬ ،‫والكتابات‬ ،‫للصفحه‬

6. Web design areas
Core skills
UX designers(User experience)
HTML CSS UX
Focuses on human behavior and interaction
Usually little to no web design skills
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫ل‬%%‫م‬%%‫ع‬%%‫ت‬‫%س‬%%%%%%%%‫مل‬‫ا‬ ‫خبرة‬ ‫%م‬%‫م‬%%‫ص‬‫م‬
!‫ي‬‫%ان‬%‫س‬‫اإلن‬ ‫%سلوك‬%%%%%%‫ل‬‫وا‬ ‫%امل‬%‫ع‬%%‫ت‬‫ال‬ ‫%ام‬%‫م‬%%‫ت‬‫اإله‬ ‫%ور‬%‫ح‬‫م‬
!‫م‬%‫ي‬%‫م‬%‫ص‬%‫ت‬‫بال‬ ‫%ة‬‫ط‬%‫ي‬%‫س‬‫ب‬ ‫معرفة‬ ‫لديه‬
! ‫%ة‬%%%%%%%%%‫ي‬‫األساس‬ ‫%ارات‬%%%%%%%%%‫ه‬‫امل‬

7. Web design areas
Core skills
Interactive designer
HTML CSS JS
frameworks
Build interface to create seamless interactions
Focus on JavaScript to modify HTML
JS
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫ي‬%%%%‫ل‬‫%اع‬%%%‫ف‬‫ت‬ ‫%م‬%%%‫م‬%%%%‫ص‬‫م‬
!‫ل‬%‫م‬%‫ع‬%‫ت‬‫%س‬%%%‫مل‬‫ا‬ ‫مع‬ ‫%ر‬‫م‬%‫ت‬‫%س‬%%%‫م‬ ‫%اعل‬‫ف‬‫ت‬ ‫ذو‬ ‫صفحة‬ ‫%اء‬‫ن‬‫ب‬
!HTML & JavaScript ‫%ي‬‫ل‬‫ع‬ ‫يركز‬! ‫%ة‬%%%%%%%%%‫ي‬‫األساس‬ ‫%ارات‬%%%%%%%%%‫ه‬‫امل‬

8. Web design areas
Core skills
Motion graphic designer
CANVAS CSS fl
Traditional animator
Typically use JavaScript and HTML5 technologies
JS
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫ة‬‫%حرك‬%%‫ت‬%%%%%%%%%%%‫مل‬‫ا‬ ‫الرسوم‬ ‫%م‬%%‫م‬%%%‫ص‬‫م‬
! ‫%ة‬%%%%%%%%%‫ي‬‫األساس‬ ‫%ارات‬%%%%%%%%%‫ه‬‫امل‬

9. Web design areas
Core skills
front end developer
Write scripts that run on the client side
Works to incorporate design elements with scripts to create the best experience
S
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫ت‬‫اإلنترن‬ ‫ملواقع‬ ‫األمامي‬ ‫%ور‬%‫ط‬‫امل‬
HTML CSS Ai PsDW
! ‫%ة‬%%%%%%%%%‫ي‬‫األساس‬ ‫%ارات‬%%%%%%%%%‫ه‬‫امل‬
!‫ع‬‫املوق‬ ‫%دمي‬%‫خ‬%%‫ت‬‫%س‬%‫مل‬ ‫خبرة‬ ‫%ل‬%‫ض‬‫اف‬ ‫%ق‬%‫ل‬‫%خ‬%%%%%‫ل‬ ‫%ة‬%‫ي‬%%‫ص‬%%‫ن‬‫ال‬ ‫البرامج‬ ‫ورموز‬ ‫%م‬%‫ي‬%%‫م‬%%‫ص‬%%‫ت‬‫ال‬ ‫%ريات‬%‫ظ‬‫ن‬ ‫مع‬ ‫%امل‬%‫ع‬%%‫ت‬‫ال‬ ‫%ي‬%‫ل‬‫ع‬ ‫%ل‬%‫م‬%%‫ع‬‫ي‬
‫رموز‬ ‫ويكتب‬ ‫للموقع‬ ‫النهائي‬ ‫الشكل‬ ‫بعرض‬ ‫يقوم‬
! ‫املستخدم‬ ‫يراها‬ ‫حتي‬ ‫النصية‬ ‫البرامج‬

10. Web design areas
Core skills
CMS specialist
Uses Drupal, Joomla, Wordpress to build highly
functional sites
Usually specialized in one CMS
(Content management system)
HTM
L
CSS PHP SQL
Dr. Abeer Hasanin, Taief University, Graphic Design Department

11. Getting online quickly
Create blog
Host your website or blog
Choose and register a domain name
Dr. Abeer Hasanin, Taief University, Graphic Design Department

12. Website structure
Dr. Abeer Hasanin, Taief University, Graphic Design Department

13. Workstation considerations
Powerful laptop or desktop
Max out the RAM and hard drive space
Use the operating system that works for you
Use a high resolution display
Storage considerations
Choosing a code editor
Dr. Abeer Hasanin, Taief University, Graphic Design Department

14. Choosing a code editor
What to compare
Syntax highlighting
Line numbering
Auto complete
Find and replace functions
Multilingual support
Syntax error highlighting
Code snippets for common code
Dr. Abeer Hasanin, Taief University, Graphic Design Department

15. Testing tools
Different internet browsers
Most browsers come with development tools
Dr. Abeer Hasanin, Taief University, Graphic Design Department

16. Testing tools
Local testing server
MAMP for mac WAMP for windows
Dr. Abeer Hasanin, Taief University, Graphic Design Department

17. Prototyping tools
Pre-presentation for your website
Power point
Getting a feed back
Key note
Dr. Abeer Hasanin, Taief University, Graphic Design Department

18. What to learn
technology
Professional web designRequires focus, time, and commitment
theory
+ experience
HTML CSS
The web and the technologies related to it is constantly evolving.
Dr. Abeer Hasanin, Taief University, Graphic Design Department
Design Ai Ps
DW
! ‫%م‬%%%%%%%%%%%%%%%%%%%%%%%%%‫ل‬%%%%%%%%%%%%%%%%%%%%%%%%%%‫ع‬%%%%%%%%%%%%%%%%%%%%%%%%%%‫ت‬‫ن‬ ‫ماذا‬
!‫ا‬%%%%%%%%%%%%%%%%‫ي‬‫%ولوج‬%%%%%%%%%%%%%‫ن‬%%%%%%%%%%%%%%%%‫ك‬%%%%%%%%%%%%%%%%‫ت‬‫ال‬
!‫ت‬‫%ريا‬%%%%%%%%%%%%%%%%%%%%%%%%%%%‫ظ‬%%%%%%%%%%%%%%%%%%%%%%%%%%%%‫ن‬‫ال‬
!‫ة‬‫%ر‬%%%%%%%%%‫ب‬%%%%%%%%%%%%‫خ‬‫ال‬

19. Web standard
Allows content to be future-friendly
Content is more accessible for search engines and individuals
using assistive technologies
CSSHTML
School w3
Dr. Abeer Hasanin, Taief University, Graphic Design Department
‫الويب‬ ‫معيار‬
World Wide Web
۱۹۹۸ ‫منذ‬ ‫بدأت‬
.‫اإلنترنت‬ ‫على‬ ‫الويب‬ ‫تقنيات‬ ‫لتعلم‬ ‫اإلنترنت‬ ‫على‬ ‫تعليمي‬ ‫موقع‬ ‫هو‬ -
‫اخملتلفة‬ ‫باللغات‬ ‫املتعلقة‬ ‫واملراجع‬ ‫التعليمية‬ ‫البرامج‬ ‫احملتوى‬ ‫يتضمن‬
‫املواقع‬ ‫إلنشاء‬
‫النشر‬ ‫قبل‬ ‫واختبارها‬ ‫األكواد‬ ‫جميع‬ ‫سالمة‬ ‫من‬ ‫التأكد‬ ‫خالله‬ ‫من‬ ‫يتم‬ -

20. Content strategy
Type of content
Responsibilities for content
Content planning
Define workflows for content creation and maintenance
Best presentation style for content
Dr. Abeer Hasanin, Taief University, Graphic Design Department

21. Content strategy
The most important content needs to be front and center, easily
accessible by the user
Content planning
Different between browsers and devices
Dr. Abeer Hasanin, Taief University, Graphic Design Department

22. Workflow segments
design
planning
development
publishing
Dr. Abeer Hasanin, Taief University, Graphic Design Department
!‫ل‬%%%%‫م‬%%%%‫ع‬‫ال‬ ‫%ر‬%%%‫ي‬‫س‬ ‫%وات‬%‫ط‬‫خ‬ !‫ط‬‫تخطي‬
!‫م‬‫تصمي‬
!‫ء‬‫انشا‬
!‫ر‬‫النش‬

23. Learn HTML and CSS CSSHTML
School w3
Dr. Abeer Hasanin, Taief University, Graphic Design Department
! W3School ‫خالل‬ ‫من‬ ‫املوقع‬ ‫%ار‬%%%‫ب‬%%%%‫ت‬‫اخ‬

24. https://code.org/
https://www.khanacademy.org/
Good Luck
Dr. Abeer Hasanin, Taief University, Graphic Design Department