SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
Let`s Make A Deal

It is tempting in a web design course to start
right away developing web pages. However,
since our goal is for you to learn to develop
high-quality websites, we first must spend some
time understand what "quality" means.
Technical Definitions

• A webpage is a single HTML document.

• A website is a collection of related webpages.

• Web design is the planning and creation of
  websites that meets the goals of the owner
  and designer.
What Makes A Quality Website?

•    Search Engine Optimization.

•    Usability.

•    Stickability.

•    Compatibility.
Search Engine Optimization

• SEO is defined as the act of optimizing a
 webpage and/or web site to perform well in
 the search engines.
  – When your web site is found higher in the Search
   Engines, your visitors will increase and your
   product will sell.
Usability

• Usability help a site be user-friendly.
  – Effectiveness, efficiency and satisfaction.

• To have a site that is user-friendly, You should
  have a site that loads fast, has good and easy
  navigation and consistent.
Stickability

• Stickability is the ability of a web page to
  "hold" your attention.
  – Attractive design, and offer good information.
Compatibility

• Compatibility allows your web site to work
  with all browser without difficulty.
Website Design and Development Process

       Phase 1   Information Gathering

       Phase 2         Planning

       Phase 3          Design

       Phase 4       Development

       Phase 5    Testing and Delivery

       Phase 6       Maintenance
Phase One: Information Gathering

• Why, Who, What & How
  – Why this site will exist, who are your target
    audience?, what tools will be required in order to
    meet the objectives and finally, how can we tie
    these pieces together into an attractive design and
    functional Website.
1st Step : Why this site will exist?

• A website without objectives is like going on a
  trip without a destination.

• What is the purpose of the site? Do you want
  to provide information, promote a service, sell
  a product… ?
2nd Step : Goals

• What do you hope to accomplish by building
 this web site?
  – Two of the more common goals are either to make
    money or share information.
3rd Step : Target Audience

• Identify your target audience:
  – Is there a specific group of people that will help
    you reach your goals?
     • Consider their age, sex &r interests

  – A Good Website Provides Value to Your Audience
    that draws them to your site again and again.
4th Step : Content

• What kind of information will the target
  audience be looking for on your site? Are they
  looking for specific information, a particular
  product or service.
Phase Two: Planning

• list of all main topic areas of the site, as well
  as sub-topics. This serves as a guide as to what
  content will be on the site, and is essential to
  developing a consistent, easy to understand
  navigational system.
Phase Three: Design

• It’s time to determine the look and feel of
  your site.
• Target audience is one of the key factors taken
  into consideration. A site aimed at teenagers,
  for example, will look much different than one
  meant for a financial institution.
Phase Three: Design
• You will create one or more prototype designs for the
  website.

• In this phase, communication between both you and
  website owner is very important to ensure that the final
  website will match his/her needs and taste. It is important
  that you work closely with the owner, exchanging ideas,
  until you arrive at the final design for the website.

• Then development can begin…
Phase Four: Development

• The developmental stage is the point where
 the web site itself is created. At this time, your
 will take all of the individual graphic elements
 from the prototype and use them to create
 the actual, functional site.
Phase Five: Testing and Delivery

• At this point, your web designer will attend to
  the final details and test your web site. They
  will test things such as the complete
  functionality of forms or other scripts, as well
  last testing for last minute compatibility issues
File Transfer Protocol

• It is time to deliver the site. An FTP (File
  Transfer Protocol) program is used to upload
  the web site files to your server. Most web
  designers offer domain name registration and
  web hosting services as well.
• Now your site is viewable to the public.
Phase Six: Maintenance

• One way to bring repeat visitors to your site is
  to offer new content or products on a regular
  basis.
• You should offer maintenance packages at
  reduced price to update the information on
  the web site.
References
• http://www.idesignstudios.com/blog/web-
  design/phases-web-design-development-
  process/
• http://webdesignidaho.com/quality.html

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Mohammed Safwat
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Development
apnwebdev
 

Was ist angesagt? (20)

Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
FRONT-END WEB DEVELOPMENT-Intro.pptx
FRONT-END WEB DEVELOPMENT-Intro.pptxFRONT-END WEB DEVELOPMENT-Intro.pptx
FRONT-END WEB DEVELOPMENT-Intro.pptx
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
 
PPT on web development & SEO
PPT on web development & SEOPPT on web development & SEO
PPT on web development & SEO
 
Web development
Web developmentWeb development
Web development
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
How to build Micro Frontends with @angular/elements
How to build Micro Frontends with @angular/elementsHow to build Micro Frontends with @angular/elements
How to build Micro Frontends with @angular/elements
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
Web design proposal
Web design proposalWeb design proposal
Web design proposal
 
Web Design Proposal Powerpoint Presentation Slides
Web Design Proposal Powerpoint Presentation SlidesWeb Design Proposal Powerpoint Presentation Slides
Web Design Proposal Powerpoint Presentation Slides
 
Create User Flow & Wireframing for an Application
Create User Flow & Wireframing for an ApplicationCreate User Flow & Wireframing for an Application
Create User Flow & Wireframing for an Application
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Development
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 

Andere mochten auch (6)

Html tutorial.lesson10
Html tutorial.lesson10Html tutorial.lesson10
Html tutorial.lesson10
 
Tutorial 9 multimedia web page
Tutorial 9 multimedia web pageTutorial 9 multimedia web page
Tutorial 9 multimedia web page
 
Class 9 Lecture Notes
Class 9 Lecture NotesClass 9 Lecture Notes
Class 9 Lecture Notes
 
Html web designing 1
Html web designing 1Html web designing 1
Html web designing 1
 
Seo 1
Seo 1Seo 1
Seo 1
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
 

Ähnlich wie Web Design

3. Web Presence: E-Strategies and Tactics
3. Web Presence: E-Strategies and Tactics3. Web Presence: E-Strategies and Tactics
3. Web Presence: E-Strategies and Tactics
Jitendra Tomar
 

Ähnlich wie Web Design (20)

Web Designing Kit
Web Designing KitWeb Designing Kit
Web Designing Kit
 
The more information Website Design_New.pdf
The more information Website Design_New.pdfThe more information Website Design_New.pdf
The more information Website Design_New.pdf
 
Partner Training: Web Development
Partner Training: Web DevelopmentPartner Training: Web Development
Partner Training: Web Development
 
Website designing company in mumbai
Website designing company in mumbaiWebsite designing company in mumbai
Website designing company in mumbai
 
Web development chandigarh
Web development chandigarhWeb development chandigarh
Web development chandigarh
 
Website Development Explained (abriged from "The Website Manager's Handbook")
Website Development Explained (abriged from "The Website Manager's Handbook")Website Development Explained (abriged from "The Website Manager's Handbook")
Website Development Explained (abriged from "The Website Manager's Handbook")
 
Digital Retail Training Session Two
Digital Retail Training Session TwoDigital Retail Training Session Two
Digital Retail Training Session Two
 
How to Design Your Own Website.pptx
How to Design Your Own Website.pptxHow to Design Your Own Website.pptx
How to Design Your Own Website.pptx
 
3. Web Presence: E-Strategies and Tactics
3. Web Presence: E-Strategies and Tactics3. Web Presence: E-Strategies and Tactics
3. Web Presence: E-Strategies and Tactics
 
INORBITAL METHODOLOGY
INORBITAL METHODOLOGYINORBITAL METHODOLOGY
INORBITAL METHODOLOGY
 
Does Your Website Stink?
Does Your Website Stink?Does Your Website Stink?
Does Your Website Stink?
 
Marketing 101
Marketing 101Marketing 101
Marketing 101
 
FAQ: planning and building a website
FAQ: planning and building a websiteFAQ: planning and building a website
FAQ: planning and building a website
 
SEO Disasters to Avoid During a Website Redesign
SEO Disasters to Avoid During a Website RedesignSEO Disasters to Avoid During a Website Redesign
SEO Disasters to Avoid During a Website Redesign
 
Must Have Small Business Website Features
Must Have Small Business Website Features Must Have Small Business Website Features
Must Have Small Business Website Features
 
Web Site Design,
Web Site Design,Web Site Design,
Web Site Design,
 
7 phases of web development.
7 phases of web development.7 phases of web development.
7 phases of web development.
 
Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbai
 
Web site design
Web site designWeb site design
Web site design
 
Web development life cycle by a web design & development company
Web development life cycle by a web design & development companyWeb development life cycle by a web design & development company
Web development life cycle by a web design & development company
 

Mehr von Spy Seat

Notify progresscontrol
Notify progresscontrolNotify progresscontrol
Notify progresscontrol
Spy Seat
 
Listbox+checkedlistbox
Listbox+checkedlistboxListbox+checkedlistbox
Listbox+checkedlistbox
Spy Seat
 
If then vs select case
If then vs select caseIf then vs select case
If then vs select case
Spy Seat
 
If then vb2010
If then vb2010If then vb2010
If then vb2010
Spy Seat
 
Date & time picker
Date & time pickerDate & time picker
Date & time picker
Spy Seat
 

Mehr von Spy Seat (20)

Kazdoura & Luciano Jan – Aug 2016 Cost Analysis
Kazdoura & Luciano  Jan – Aug 2016 Cost AnalysisKazdoura & Luciano  Jan – Aug 2016 Cost Analysis
Kazdoura & Luciano Jan – Aug 2016 Cost Analysis
 
Software Design
Software DesignSoftware Design
Software Design
 
Visual Basic 6 Data Base
Visual Basic 6 Data BaseVisual Basic 6 Data Base
Visual Basic 6 Data Base
 
Visual Basic ADO
Visual Basic ADOVisual Basic ADO
Visual Basic ADO
 
Visual basic 6
Visual basic 6Visual basic 6
Visual basic 6
 
Create Contacts program with VB.Net
Create Contacts program with VB.NetCreate Contacts program with VB.Net
Create Contacts program with VB.Net
 
Create Your first website
Create Your first websiteCreate Your first website
Create Your first website
 
How Computer work
How Computer workHow Computer work
How Computer work
 
visual basic 6 Add Merlin
visual basic 6 Add Merlin visual basic 6 Add Merlin
visual basic 6 Add Merlin
 
My Bachelor project slides
My Bachelor project slides My Bachelor project slides
My Bachelor project slides
 
Difference between asp and php
Difference between asp and phpDifference between asp and php
Difference between asp and php
 
Error handling
Error handlingError handling
Error handling
 
I/O PHP Files and classes
I/O PHP Files and classesI/O PHP Files and classes
I/O PHP Files and classes
 
Php session 3 Important topics
Php session 3 Important topicsPhp session 3 Important topics
Php session 3 Important topics
 
Notify progresscontrol
Notify progresscontrolNotify progresscontrol
Notify progresscontrol
 
Listbox+checkedlistbox
Listbox+checkedlistboxListbox+checkedlistbox
Listbox+checkedlistbox
 
If then vs select case
If then vs select caseIf then vs select case
If then vs select case
 
If then vb2010
If then vb2010If then vb2010
If then vb2010
 
For next
For nextFor next
For next
 
Date & time picker
Date & time pickerDate & time picker
Date & time picker
 

Kürzlich hochgeladen

An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
SanaAli374401
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
MateoGardella
 

Kürzlich hochgeladen (20)

This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 

Web Design

  • 1.
  • 2. Let`s Make A Deal It is tempting in a web design course to start right away developing web pages. However, since our goal is for you to learn to develop high-quality websites, we first must spend some time understand what "quality" means.
  • 3. Technical Definitions • A webpage is a single HTML document. • A website is a collection of related webpages. • Web design is the planning and creation of websites that meets the goals of the owner and designer.
  • 4. What Makes A Quality Website? • Search Engine Optimization. • Usability. • Stickability. • Compatibility.
  • 5. Search Engine Optimization • SEO is defined as the act of optimizing a webpage and/or web site to perform well in the search engines. – When your web site is found higher in the Search Engines, your visitors will increase and your product will sell.
  • 6. Usability • Usability help a site be user-friendly. – Effectiveness, efficiency and satisfaction. • To have a site that is user-friendly, You should have a site that loads fast, has good and easy navigation and consistent.
  • 7. Stickability • Stickability is the ability of a web page to "hold" your attention. – Attractive design, and offer good information.
  • 8. Compatibility • Compatibility allows your web site to work with all browser without difficulty.
  • 9. Website Design and Development Process Phase 1 Information Gathering Phase 2 Planning Phase 3 Design Phase 4 Development Phase 5 Testing and Delivery Phase 6 Maintenance
  • 10. Phase One: Information Gathering • Why, Who, What & How – Why this site will exist, who are your target audience?, what tools will be required in order to meet the objectives and finally, how can we tie these pieces together into an attractive design and functional Website.
  • 11. 1st Step : Why this site will exist? • A website without objectives is like going on a trip without a destination. • What is the purpose of the site? Do you want to provide information, promote a service, sell a product… ?
  • 12. 2nd Step : Goals • What do you hope to accomplish by building this web site? – Two of the more common goals are either to make money or share information.
  • 13. 3rd Step : Target Audience • Identify your target audience: – Is there a specific group of people that will help you reach your goals? • Consider their age, sex &r interests – A Good Website Provides Value to Your Audience that draws them to your site again and again.
  • 14. 4th Step : Content • What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service.
  • 15. Phase Two: Planning • list of all main topic areas of the site, as well as sub-topics. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system.
  • 16. Phase Three: Design • It’s time to determine the look and feel of your site. • Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution.
  • 17. Phase Three: Design • You will create one or more prototype designs for the website. • In this phase, communication between both you and website owner is very important to ensure that the final website will match his/her needs and taste. It is important that you work closely with the owner, exchanging ideas, until you arrive at the final design for the website. • Then development can begin…
  • 18. Phase Four: Development • The developmental stage is the point where the web site itself is created. At this time, your will take all of the individual graphic elements from the prototype and use them to create the actual, functional site.
  • 19. Phase Five: Testing and Delivery • At this point, your web designer will attend to the final details and test your web site. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues
  • 20. File Transfer Protocol • It is time to deliver the site. An FTP (File Transfer Protocol) program is used to upload the web site files to your server. Most web designers offer domain name registration and web hosting services as well. • Now your site is viewable to the public.
  • 21. Phase Six: Maintenance • One way to bring repeat visitors to your site is to offer new content or products on a regular basis. • You should offer maintenance packages at reduced price to update the information on the web site.
  • 22. References • http://www.idesignstudios.com/blog/web- design/phases-web-design-development- process/ • http://webdesignidaho.com/quality.html