Web design Introduction

18
ع ق وا م ل م ا ي م ص ت حات ف ص ل م ا ي م ص ت ط و ي ط خ ت ى : ل و الأ وحدة ل اE

Transcript of Web design Introduction

Page 1: Web design Introduction

تصميم المواقعالوحدة األولى : تخطيط و تصميم الصفحات

E

Page 2: Web design Introduction

http://heaven.internetarchaeology.org/heaven.html#bottom

http://donswansonracingschool.com/programs.htm

http://www.cloud9walkers.com/

http://www.pennyjuice.com/htmlversion/whoispj.htm

http://webpagesthatsuck.smugmug.com/Other/Bad-Web-Design/6837311_tyvTi#!i=752104126&k=zng6F&lb=1&s=O

http://anselme.homestead.com/AFPHAITI.html

لتكون مجهود تبذل مواقعسيئة

http://heaven.internetarchaeology.org/heaven.html#bottom
http://donswansonracingschool.com/programs.htm
http://www.cloud9walkers.com/
http://www.pennyjuice.com/htmlversion/whoispj.htm
http://webpagesthatsuck.smugmug.com/Other/Bad-Web-Design/6837311_tyvTi#!i=752104126&k=zng6F&lb=1&s=O
http://webpagesthatsuck.smugmug.com/Other/Bad-Web-Design/6837311_tyvTi#!i=752104126&k=zng6F&lb=1&s=O
http://anselme.homestead.com/AFPHAITI.html
Page 3: Web design Introduction

ما العوامل التي تجعل الموقع جيد ؟

رأي الخبراء

Page 4: Web design Introduction

.. أن يجب الجيد الموقعالواقع .• من المستخدم لدى المكتسبة المعرفة يستخدمالموقع .• داخل المستخدم حريةالوقوع • من األخطاء رسائل) منع أو تحزيرية رسائل أرسال تجنب

.) للمستخدم خطا. أكواد على تحتوي ال و مفهومة تكون أن يجب الخطأ رسائل

•. األستخدام في الكفائة و المرونةلمستخدم ) • بسيط موقع الخبرة عديم المستخدم أن أعتبر

غبي(.المليئة • أو المعقدة للمهمات مساعدة وسائل توفير يجب

بالتفاصيل.

http://www.makeuseof.com/pages/the-best-of
https://www.youtube.com/
https://www.google.com/
http://www.ebay.com/
http://jobs.nsw.gov.au/How-to-use-this-site.aspx
Page 5: Web design Introduction

( ) األلوان القارئ عين لقيادة•. األلوان أستخدام من األساسية األغراض•. أهمية أقل هو ما و مهم هو ما أبراز•. للصفحة الوظيفية األماكن تحديد•. ببعضها عالقة لها التي الصفحة عناصر ربط

التباين•تباين • أفضل يعطي لبعضها المكملة األلوان استخداممستويات • أعلى لة البيضاء الخلفية على األسود النص

التباين.واألصفر • األزرق مثل مكملة kulerالوان

https://kuler.adobe.com/
http://www.sibagraphics.com/colour.php
http://www.ask.com/
http://alison.com/
Page 6: Web design Introduction

التماسك•. , هوية لموقعك يعطي أنة حيث مهم بل ممل ليس التكرارموقعك • داخل بارع مالح أنة المستخدم يشعر ان يجب

ثقة و بسهولة فيتنقلالبساطة . في العبقرية

https://www.facebook.com/
http://www.cheese.com./
Page 7: Web design Introduction

Web Page Layout تخطيط الصفحات

بين • التنقل صعوبة الي يؤدي السيء التخطيطالصفحات.

•. المعلومات موقع تحديد صعوبة• . سريعا الزائر هروب

Page 8: Web design Introduction

• Areas of a Web Page

Menu

Header

Content

Logo

• Other designs:• www.adobe.com

• menu on right.

• www.uintafishing.com • many rows.

http://www.adobe.com/
http://www.uintafishing.com/
Page 9: Web design Introduction
Page 10: Web design Introduction
Page 11: Web design Introduction

Table / Navigational tools

•Elements of a web pageDocument title

Address (URL)

BannerWeb page title

Footer / Copyright

Graphic elements Hyperlinks

Content

Search tool

Navigational tools

Frames

Hyperlinks

Page 12: Web design Introduction

للموقع الكلي الشكل•. الموقع هدف مع متوافق يكون أن يجب•. التكوين بساطة و موحد ألوان نظام على المحافظة•. ومتوقع منطقي بشكل المعلومات تنظيم•. القراءة سهل بأسلوب و بأيجاز النصوص أستخدام

Page 13: Web design Introduction

الرسومات•. الصفحة بمحتوى صلة ذات•. معلومات / تقديم أو و غرضا تخدم•. المناسب والشكل والحجم النوعية منالتصميم • إلى قيمة إلضافة أستخدامها

العام.

Page 14: Web design Introduction

تفعل ال•. بالمحتويات مكتظة صفحتك تجعل ال•. المحتوى لدعم فقط تستخد]مها بل الرسومات في تفرط ال•. المحتوى قراءة عن تعيقة و المستخدم تشتت خلفية تستخدم القابلة • قطع إلى تقسيمها يجب بل نص من طويلة فقرات تستخدم ال

للقراءة.•. محدد لمتصفح تصمم ال•. مسدودة صفحات تنشأ الال • ان يجب اخر بموقع موقعك تصل تشعبية روابط هناك كان اذا

. خارجية صفحة في تفتح بل الصفحة نفس في تكون

Page 15: Web design Introduction

اTلTدTوTلTيTة TةTكTبTشTلTا TتTرTيTغ TعTقTاTوTمGoogle

Wikipedia

Amazon.com

Hotmail

Facebook

Twitter

YouTube

http://google.com/
http://en.wikipedia.org/wiki/Main_Page
http://www.amazon.com/
http://www.hotmail.com/
http://facebook.com/
http://twitter.com/
http://youtube.com/
Page 16: Web design Introduction

.

Simple Web Design ExamplesLess elements Mean More Focus• Apple

• Bell.ca

• Shoeguru.ca

• Tokyocube

Get inspired from other websites

http://www.apple.com/
http://www.bell.ca/
http://www.shoeguru.ca/
http://shop.tokyocube.com/toys.htm
Page 17: Web design Introduction

Prototyping

Page 18: Web design Introduction

Next Module HTML Coding


Introduction to Research Design Print

Introduction to Research Design Print

Atelier web et mobile design partie i introduction au web design ahmed bachir cherif esba2015

Atelier web et mobile design partie i introduction au web design ahmed bachir cherif esba2015

INTRODUCTION OF DESIGN PRINCIPLES ESDEP Course … · INTRODUCTION OF DESIGN PRINCIPLES ESDEP Course ... Introduction to the Design of Steel and C omposite Bridges: Part 2 ... 'Principles

INTRODUCTION OF DESIGN PRINCIPLES ESDEP Course … · INTRODUCTION OF DESIGN PRINCIPLES ESDEP Course ... Introduction to the Design of Steel and C omposite Bridges: Part 2 ... 'Principles

Ux design - a definitive introduction

Ux design - a definitive introduction

Introduction and Design Concept

Introduction and Design Concept

Web Design > Visão geral do Web Design

Web Design > Visão geral do Web Design

Android Design Club #1: Introduction to Design

Android Design Club #1: Introduction to Design

Ch01 Introduction design of thermal system

Ch01 Introduction design of thermal system

Analysis Design Introduction

Analysis Design Introduction

Lab 6 SP601 Design Platform Introduction

Lab 6 SP601 Design Platform Introduction

Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

Introduction au design de service - Design Innovation-Azimut 060314

Introduction au design de service - Design Innovation-Azimut 060314

Architecture Design Introduction Arabic

Architecture Design Introduction Arabic

The 7Cs of Learning Design Introduction

The 7Cs of Learning Design Introduction

User experience design web en mobile - introduction

User experience design web en mobile - introduction

Introduction au Domain Driven Design

Introduction au Domain Driven Design

Introduction to mechatronics and mechatronics system design

Introduction to mechatronics and mechatronics system design

Design Powerpoint Introduction 2013

Design Powerpoint Introduction 2013

EEE348 Introduction to Integrated Circuit Design ...

EEE348 Introduction to Integrated Circuit Design ...

Brief introduction to domain-driven design

Brief introduction to domain-driven design