Introduction to web design

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

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

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
!‫ي‬‫املبدئ‬ ‫التخطيط/النموذج‬ !‫ب‬‫تجري‬ / ‫بناء‬

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

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

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
!‫ل‬%%‫م‬%%‫ع‬%%‫ت‬‫%س‬%%%%%%%%‫مل‬‫ا‬ ‫خبرة‬ ‫%م‬%‫م‬%%‫ص‬‫م‬
!‫ي‬‫%ان‬%‫س‬‫اإلن‬ ‫%سلوك‬%%%%%%‫ل‬‫وا‬ ‫%امل‬%‫ع‬%%‫ت‬‫ال‬ ‫%ام‬%‫م‬%%‫ت‬‫اإله‬ ‫%ور‬%‫ح‬‫م‬
!‫م‬%‫ي‬%‫م‬%‫ص‬%‫ت‬‫بال‬ ‫%ة‬‫ط‬%‫ي‬%‫س‬‫ب‬ ‫معرفة‬ ‫لديه‬

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

Web design areas
Core skills
Motion graphic designer
CANVAS CSS fl
Traditional animator
Typically use JavaScript and HTML5 technologies
JS
!‫ة‬‫%حرك‬%%‫ت‬%%%%%%%%%%%‫مل‬‫ا‬ ‫الرسوم‬ ‫%م‬%%‫م‬%%%‫ص‬‫م‬

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
!‫ت‬‫اإلنترن‬ ‫ملواقع‬ ‫األمامي‬ ‫%ور‬%‫ط‬‫امل‬
HTML CSS Ai PsDW
!‫ع‬‫املوق‬ ‫%دمي‬%‫خ‬%%‫ت‬‫%س‬%‫مل‬ ‫خبرة‬ ‫%ل‬%‫ض‬‫اف‬ ‫%ق‬%‫ل‬‫%خ‬%%%%%‫ل‬ ‫%ة‬%‫ي‬%%‫ص‬%%‫ن‬‫ال‬ ‫البرامج‬ ‫ورموز‬ ‫%م‬%‫ي‬%%‫م‬%%‫ص‬%%‫ت‬‫ال‬ ‫%ريات‬%‫ظ‬‫ن‬ ‫مع‬ ‫%امل‬%‫ع‬%%‫ت‬‫ال‬ ‫%ي‬%‫ل‬‫ع‬ ‫%ل‬%‫م‬%%‫ع‬‫ي‬
‫رموز‬ ‫ويكتب‬ ‫للموقع‬ ‫النهائي‬ ‫الشكل‬ ‫بعرض‬ ‫يقوم‬
! ‫املستخدم‬ ‫يراها‬ ‫حتي‬ ‫النصية‬ ‫البرامج‬

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

Getting online quickly
Create blog
Host your website or blog
Choose and register a domain name

Website structure

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

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

Testing tools
Different internet browsers
Most browsers come with development tools

Testing tools
Local testing server
MAMP for mac WAMP for windows

Prototyping tools
Pre-presentation for your website
Power point
Getting a feed back
Key note

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.
Design Ai Ps
DW
! ‫%م‬%%%%%%%%%%%%%%%%%%%%%%%%%‫ل‬%%%%%%%%%%%%%%%%%%%%%%%%%%‫ع‬%%%%%%%%%%%%%%%%%%%%%%%%%%‫ت‬‫ن‬ ‫ماذا‬
!‫ا‬%%%%%%%%%%%%%%%%‫ي‬‫%ولوج‬%%%%%%%%%%%%%‫ن‬%%%%%%%%%%%%%%%%‫ك‬%%%%%%%%%%%%%%%%‫ت‬‫ال‬
!‫ت‬‫%ريا‬%%%%%%%%%%%%%%%%%%%%%%%%%%%‫ظ‬%%%%%%%%%%%%%%%%%%%%%%%%%%%%‫ن‬‫ال‬
!‫ة‬‫%ر‬%%%%%%%%%‫ب‬%%%%%%%%%%%%‫خ‬‫ال‬

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

Content strategy
Type of content
Responsibilities for content
Content planning
Define workflows for content creation and maintenance
Best presentation style for content

Content strategy
The most important content needs to be front and center, easily
accessible by the user
Content planning
Different between browsers and devices

Workflow segments
design
planning
development
publishing
!‫ل‬%%%%‫م‬%%%%‫ع‬‫ال‬ ‫%ر‬%%%‫ي‬‫س‬ ‫%وات‬%‫ط‬‫خ‬ !‫ط‬‫تخطي‬
!‫م‬‫تصمي‬
!‫ء‬‫انشا‬
!‫ر‬‫النش‬

Learn HTML and CSS CSSHTML
School w3
! W3School ‫خالل‬ ‫من‬ ‫املوقع‬ ‫%ار‬%%%‫ب‬%%%%‫ت‬‫اخ‬

https://code.org/
https://www.khanacademy.org/
Good Luck

Introduction to web design

More Related Content

Similar to Introduction to web design (20)

More from Abeer Hasanin (12)

Recently uploaded (20)

Introduction to web design