SlideShare a Scribd company logo
1 of 24
FOR VSTSB
A short introduction to website world.
Web Site Design
What is a web site?
A website is an address (location) on the World Wide Web that
contains your web pages. Basically, a website is your personal
online communications connection to the rest of the world.
■ A website is totally different from any other type of publishing,
advertising or communications media.
■ The Design Process
Designing for the web requires the relevant content of a
brochure or magazine, the colorful look of high-quality print, and
the attention-grabbing impact of television advertising. Plus it
should offer a valuable product and/or information, be updated
frequently and stay current with changing technology
■ A Web Site is never done
By: khAn
Once you have decided to establish a web site there are three
steps to getting it online.
1 - Get a domain name - This is your personal/private address on
the Web.
2 - Find a web hosting service- Here is where your website will
reside.
Free vs Private Web Hosting
3 - Design, build and upload your website - The process of
website creation.
Five step process for effective website design
1. Analyse
• Info / content
• Target Audience
• Top 10 Checklist
1. Organise
• Navigation
• Content
• Page layout
• Page design
1. Develop
• Web page layout
• Site layout
• Web page construction
• Graphics techniques
4. Implement
• User Interaction
• Final Checklist
• FTP
• Fine Tune
5. Maintain
• Marketing
• Optimisation
• Traffic analysis
Analyse
The first question to ask yourself is do you really need a web
site? To help you decide, ask yourself the following questions:
Why do I want to create this web site?
– promote your ideas, hobbies, or beliefs
– To advertise your company or product
– Make loads of money really fast
– Provide customer services and support
– To keep your customer base informed
– Give or sell information
– Create an 'Extended Business Card' for your company
– Provide internal information and services for your company
Analyse (1) Web Site Content
Before you can start deciding what content the site is going to contain you
need to determine
– Who your target audience is.
– What age group are your users?
– What is there skill level with the Internet?
– How can I communicate effectively?
– You also need to determine the purpose of your site. What is the
site for?
Once you have determined these factors you can start to plan the content
your site will have. Remember who your target will be when deciding on
content:
Analyse (2)
2 - Who is my target audience?
What type of visitors do I want my site to attract? What will be
their age, sex and education? Will they search for my site because
we share a hobby, like the same television shows or are they
looking for specific information?
3 - How can I communicate effectively?
Now that I know who the audience will be, what is the best way to
communicate with them?
4 - What information do I need?
If you are designing a site for a client, you will need to know the
answers to the preceeding questions as well as what their vision is
for this site. Do they have a logo they want you to use, do they
have specific colors in mind, do they want to include phone and
fax numbers on their pages? If this is your own business site,
these are questions you should answer also.
Personal Site
Research WebSites
This is a very important part in the creation of a web site, and usually
very useful.
– Spend time looking at other internet sites, particularlly your
competitores
– See if you can get any ideas you can use and improve on
– Don't be mistaken that the flashest coolest looking web site is
the best.
– Sites with lots of animation are not always the best.
– You must also keep in mind that not everyone has a fast
Internet connection.
Analyse (3)
5 - What content (data, graphics, photos, etc.) will be included?
This is the ''big'' job...gathering all the content that you want to include on
your web site. Are you going to use photos? What kind of graphics do
you want? And what information or data are you putting online?
Make a list of the items you think you will want to have on your website.
Audience analysis
Audience analysis is the starting point for any project. You need to figure
out your audience's demographics:
– how old they are
– where they work
– what they earn
– where they live, anything that's appropriate
Analyse (4)
Your content has to have a goal
The key thing to remember about audience analysis is the goal: to
have a well-defined audience at the end of the process. The only
good audience definition is a specific target definition. The better
you can pigeon-hole or niche your audience, the more likely your
site will succeed.
A checklist for type of Content you may wish to include on your
website
– Frequently updated information
– Product and Company articles
– Question and answers
– Online purchasing of products
– Guest book that your guests to your site can sign and add
their own comments
– Web site forum or chat room to generate conversation
between your web site users
– Web site search  very useful for larger sites
– Weekly poll, to poll your visitors on a particular question
– Quizzes and sweep stakes, with prizes to promote your
products
– Free offers
– News
– Unique information
– Location maps
– Contact and Booking forms
Top 10 website design tips - checklist
1. Know your audience
2. Keep web pages short
3. Limit the amount of text
4. Avoid large images
5. Use web safe colours
6. Clearly identify all links
7. Check spelling
8. Use a site map or directory page
9. Update and check all links
10. Include contact information
Website Journal
It is a good idea that you maintain some sort of journal for your
website. Don't confuse a site journal with a site outline. Your journal is
a collection of your ideas, your thoughts and whatever you want to
remember, jot down ideas when they pop into your head.
For starters pick out a website that impresses you and examine it;
– What is the color scheme and layout?
– How is navigation accomplished?
– What is the content?
– How is the content presented?
Write down anything that you believe makes this website good and
any ideas that you might want to use yourself.
Organisation
Next to Analyse, organisation is one of the key tools to website design.
We've discussed who you feel your audience will be and what kind of
information they will be looking for and what questions they will be
asking. Now we need to help them find the information and the answers
hopefully, by the shortest route possible.
There are three main elements in the organization of a web
site. They are:
1 - Structure: The form of your web site and its navigation
2 - Content: The substance of your web site
3 - Layout: The theme or method of presenting your web site
Organisation - Structure
Now we're going to look at the
overall design of a web site and
"how to structure a website". This is
different from the individual pages
within the site (i.e. content).
Site design includes the structure of
your site, the different sections and
navigation within those sections. It
also encompasses the theme you
choose.
As the diagram shows a web
site is composed of three
main areas:
•The Home Page
•The Main Sections
•The Subsections
Organisation - Structure (1)
HomePage Do’s
■ Visitors first impressions
■ Should tell the visitors what your site is about
■ Answer questions on the 5 Ws
■ Should provide index or table of contents
■ Keep the home page short and to the point
Homepage don’ts
■ Should not contain a lot of text
■ Don’t present your users with a huge list of links to every single
page
Organisation - Structure (2)
Main Sections
Determining and naming the main sections of your site is very
important. Sections should contain material grouped according to
visitor needs - in other words, these are sizeable chunks of related
information. For example, if you are creating a site for a tourist
visiting Dublin, you would want to make it easy for the visitor to find
the right information.
The main sections might include:
The main section is your site index on your homepage, it is the
foundation to your navigation of the website.
Once you have divided your content into main sections, decide their
order of importance
Travel Restaurants Pubs Accommodation
Organisation - Structure (2)
Subsections
Not all main sections necessarily need to have subsections,
but most will require a further breakdown of information. It
really depends on the amount of content on your site.
When designing a new web site, keep in mind that the
content will increase as you update and add information to
the site. Build in room to expand as you determine your
main and sub sections.
Once you have established the home page, main sections and
subsections of the web site, organise them into order of importance
and note it. This is the basic layout of your web site.
Organisation - Navigation
Now we need to help them find the user find the information and
the answers to their questions and we hope we can do this by the
shortest route possible
There are three different navigation methods.
– Linear navigation - Moving in a straight line.
– Database navigation - Many branches from your main
page.
– Hierarchical navigation - A completely connected
website.
Linear Navigation
Linear navigation is used for a web site where you want the visitor to go
from one step to another in a particular order. This is usually used within
a web site but seldom as a stand alone design. The idea here is that the
visitor follows the pages in a predefined order or sequence that you
determine. This is particularly useful for tutorials.
Straight line or sequential links
Linear "straight line" Navigation Diagram
Arrange your links so that they only permit movement in a straight line
from one page to another.This is straight line navigation. You set up your
links in such a way as to compel the visitor to start at one end and
continue to a conclusion.
Linear reciprocal links
Linear "reciprocal" Navigation Diagram
Reciprocal navigation allows the visitor to move back and forth
between a series of pages. Set-up your links with a start page an
end page and links tying the pages together that lie between them.
Database Navigation
Database Navigation
The database or grid design is made up of multiple divisions and each
division has its own structure. This type of navigation can be used
effectively when large amounts of data are required in the web site design.
Database Navigation Diagram
Hierarchical Navigation
The hierarchical design goes from the general to the specific; from a home
page to divisions to subdivisions. A visitor could easily go from the home
page to other areas of the web site and back again.
Hierarchical Navigation Diagram
The End
Thank you for your time

More Related Content

What's hot

Editorial SEO Strategy
Editorial SEO StrategyEditorial SEO Strategy
Editorial SEO StrategyRob Flaherty
 
Brooklyn Center for Media Education: Basic Marketing Techniques 2012
Brooklyn Center for Media Education: Basic Marketing Techniques 2012Brooklyn Center for Media Education: Basic Marketing Techniques 2012
Brooklyn Center for Media Education: Basic Marketing Techniques 2012briccommunitymedia
 
Brad Matthews Advanced Portfolio - Evaluation Question 1
Brad Matthews Advanced Portfolio - Evaluation Question 1Brad Matthews Advanced Portfolio - Evaluation Question 1
Brad Matthews Advanced Portfolio - Evaluation Question 1Brad Matthews
 
Web Optimization Playbook
Web Optimization PlaybookWeb Optimization Playbook
Web Optimization Playbookmtwocomms
 
Stuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityStuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityMichael Nolan
 
Website upgrade strategy
Website upgrade strategyWebsite upgrade strategy
Website upgrade strategyAngiline Rauf
 
Building Your Business With Google January 2011
Building Your Business With Google January 2011Building Your Business With Google January 2011
Building Your Business With Google January 2011Noah Boswell
 
Your window to the digital world
Your window to the digital worldYour window to the digital world
Your window to the digital worldMasih Nabizadeh
 
Web design for business.ppt
Web design for business.pptWeb design for business.ppt
Web design for business.pptwebhostingguy
 
Search Engine Optimization (2009)
Search Engine Optimization (2009)Search Engine Optimization (2009)
Search Engine Optimization (2009)Matteo Wyllyamz
 
eMarketing: a Strategic Approach
eMarketing: a Strategic ApproacheMarketing: a Strategic Approach
eMarketing: a Strategic Approachquirkemarketing
 
The website business! agr 399
The website business!   agr 399The website business!   agr 399
The website business! agr 399summerdaze
 
How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...
How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...
How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...Doyle Buehler
 
Lead conversions: It's all in the detail page
Lead conversions: It's all in the detail pageLead conversions: It's all in the detail page
Lead conversions: It's all in the detail pageKelley Howell
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and designAndz Bass
 

What's hot (20)

Editorial SEO Strategy
Editorial SEO StrategyEditorial SEO Strategy
Editorial SEO Strategy
 
Brooklyn Center for Media Education: Basic Marketing Techniques 2012
Brooklyn Center for Media Education: Basic Marketing Techniques 2012Brooklyn Center for Media Education: Basic Marketing Techniques 2012
Brooklyn Center for Media Education: Basic Marketing Techniques 2012
 
Brad Matthews Advanced Portfolio - Evaluation Question 1
Brad Matthews Advanced Portfolio - Evaluation Question 1Brad Matthews Advanced Portfolio - Evaluation Question 1
Brad Matthews Advanced Portfolio - Evaluation Question 1
 
Web Optimization Playbook
Web Optimization PlaybookWeb Optimization Playbook
Web Optimization Playbook
 
Stuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill UniversityStuff what we're doing at Edge Hill University
Stuff what we're doing at Edge Hill University
 
Website upgrade strategy
Website upgrade strategyWebsite upgrade strategy
Website upgrade strategy
 
Internet Marketing
Internet Marketing   Internet Marketing
Internet Marketing
 
Building Your Business With Google January 2011
Building Your Business With Google January 2011Building Your Business With Google January 2011
Building Your Business With Google January 2011
 
Your window to the digital world
Your window to the digital worldYour window to the digital world
Your window to the digital world
 
Web design for business.ppt
Web design for business.pptWeb design for business.ppt
Web design for business.ppt
 
Web design
Web designWeb design
Web design
 
Search Engine Optimization (2009)
Search Engine Optimization (2009)Search Engine Optimization (2009)
Search Engine Optimization (2009)
 
eMarketing: a Strategic Approach
eMarketing: a Strategic ApproacheMarketing: a Strategic Approach
eMarketing: a Strategic Approach
 
The website business! agr 399
The website business!   agr 399The website business!   agr 399
The website business! agr 399
 
Making social media work, building on line community
Making social media work, building on line communityMaking social media work, building on line community
Making social media work, building on line community
 
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web
 
How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...
How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...
How to Grow Your Audience & SEO Through Images and Video - Semrush Webinar on...
 
Lead conversions: It's all in the detail page
Lead conversions: It's all in the detail pageLead conversions: It's all in the detail page
Lead conversions: It's all in the detail page
 
EBWAY Creative Tour 2015
EBWAY Creative Tour 2015EBWAY Creative Tour 2015
EBWAY Creative Tour 2015
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and design
 

Viewers also liked

Advantages and disadvantages of performance appraisal
Advantages and disadvantages of performance appraisalAdvantages and disadvantages of performance appraisal
Advantages and disadvantages of performance appraisalcoxdennis362
 
720 degree performance appraisal
720 degree performance appraisal720 degree performance appraisal
720 degree performance appraisalcoxdennis362
 
Taste the Music of the Great River Road
Taste the Music of the Great River RoadTaste the Music of the Great River Road
Taste the Music of the Great River RoadJill Bowers
 
Review of performance appraisal
Review of performance appraisalReview of performance appraisal
Review of performance appraisalcoxdennis362
 
Travel Leaders Academy
Travel Leaders AcademyTravel Leaders Academy
Travel Leaders AcademySharon Boots
 
Performance appraisal of wipro
Performance appraisal of wiproPerformance appraisal of wipro
Performance appraisal of wiprocoxdennis362
 
Completed performance appraisal samples
Completed performance appraisal samplesCompleted performance appraisal samples
Completed performance appraisal samplescoxdennis362
 
Website proposal
Website proposalWebsite proposal
Website proposalkAlim khAn
 
Website proposal vstsb
Website proposal vstsbWebsite proposal vstsb
Website proposal vstsbkAlim khAn
 
Straight ranking method of performance appraisal
Straight ranking method of performance appraisalStraight ranking method of performance appraisal
Straight ranking method of performance appraisalcoxdennis362
 
Travel Leaders Academy
Travel Leaders AcademyTravel Leaders Academy
Travel Leaders AcademySharon Boots
 

Viewers also liked (12)

Advantages and disadvantages of performance appraisal
Advantages and disadvantages of performance appraisalAdvantages and disadvantages of performance appraisal
Advantages and disadvantages of performance appraisal
 
BETTER
BETTERBETTER
BETTER
 
720 degree performance appraisal
720 degree performance appraisal720 degree performance appraisal
720 degree performance appraisal
 
Taste the Music of the Great River Road
Taste the Music of the Great River RoadTaste the Music of the Great River Road
Taste the Music of the Great River Road
 
Review of performance appraisal
Review of performance appraisalReview of performance appraisal
Review of performance appraisal
 
Travel Leaders Academy
Travel Leaders AcademyTravel Leaders Academy
Travel Leaders Academy
 
Performance appraisal of wipro
Performance appraisal of wiproPerformance appraisal of wipro
Performance appraisal of wipro
 
Completed performance appraisal samples
Completed performance appraisal samplesCompleted performance appraisal samples
Completed performance appraisal samples
 
Website proposal
Website proposalWebsite proposal
Website proposal
 
Website proposal vstsb
Website proposal vstsbWebsite proposal vstsb
Website proposal vstsb
 
Straight ranking method of performance appraisal
Straight ranking method of performance appraisalStraight ranking method of performance appraisal
Straight ranking method of performance appraisal
 
Travel Leaders Academy
Travel Leaders AcademyTravel Leaders Academy
Travel Leaders Academy
 

Similar to Website world

Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbaiCss Founder
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhiCss Founder
 
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.pdfssuser088e5b
 
AMA Basics in Website Design
AMA Basics in Website DesignAMA Basics in Website Design
AMA Basics in Website Designtheresaboucher
 
Web Design
Web DesignWeb Design
Web DesignSpy Seat
 
Seo the soul of web design Anand Saini
Seo the soul of web design Anand SainiSeo the soul of web design Anand Saini
Seo the soul of web design Anand SainiDr,Saini Anand
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdfrkraina4
 
Top10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for BloggersTop10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for BloggersBrian Sullivan
 
Is Your Economic Development Website Dying?
Is Your Economic Development Website Dying?Is Your Economic Development Website Dying?
Is Your Economic Development Website Dying?Atlas Integrated
 
The Wonderful Wide World of Seo
The Wonderful Wide World of SeoThe Wonderful Wide World of Seo
The Wonderful Wide World of SeoMichael Jones
 
What Makes a Good Website
What Makes a Good WebsiteWhat Makes a Good Website
What Makes a Good Websitequinnluqayothrb
 
Positive People - Self Employment - Website Design (Honiton, 20/09/2018)
Positive People - Self Employment - Website Design (Honiton, 20/09/2018)Positive People - Self Employment - Website Design (Honiton, 20/09/2018)
Positive People - Self Employment - Website Design (Honiton, 20/09/2018)Cosmic
 
Positive People - Self Employment - Website Design (Bideford, 08/10/2018)
Positive People - Self Employment - Website Design (Bideford, 08/10/2018)Positive People - Self Employment - Website Design (Bideford, 08/10/2018)
Positive People - Self Employment - Website Design (Bideford, 08/10/2018)Cosmic
 
The Essential Guide to Web Planning
The Essential Guide to Web PlanningThe Essential Guide to Web Planning
The Essential Guide to Web PlanningSerious SEM
 
Positive People - Self Employment - Website Design (Torquay, 06/09/2018)
Positive People - Self Employment - Website Design (Torquay, 06/09/2018)Positive People - Self Employment - Website Design (Torquay, 06/09/2018)
Positive People - Self Employment - Website Design (Torquay, 06/09/2018)Cosmic
 
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.pptxGreenCardinalDesign
 

Similar to Website world (20)

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 Site Design,
Web Site Design,Web Site Design,
Web Site Design,
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
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
 
AMA Basics in Website Design
AMA Basics in Website DesignAMA Basics in Website Design
AMA Basics in Website Design
 
Web Design
Web DesignWeb Design
Web Design
 
Seo the soul of web design Anand Saini
Seo the soul of web design Anand SainiSeo the soul of web design Anand Saini
Seo the soul of web design Anand Saini
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdf
 
Top10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for BloggersTop10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for Bloggers
 
Is Your Economic Development Website Dying?
Is Your Economic Development Website Dying?Is Your Economic Development Website Dying?
Is Your Economic Development Website Dying?
 
Creating a Website: Design and Layout
Creating a Website: Design and LayoutCreating a Website: Design and Layout
Creating a Website: Design and Layout
 
The Wonderful Wide World of Seo
The Wonderful Wide World of SeoThe Wonderful Wide World of Seo
The Wonderful Wide World of Seo
 
What Makes a Good Website
What Makes a Good WebsiteWhat Makes a Good Website
What Makes a Good Website
 
Positive People - Self Employment - Website Design (Honiton, 20/09/2018)
Positive People - Self Employment - Website Design (Honiton, 20/09/2018)Positive People - Self Employment - Website Design (Honiton, 20/09/2018)
Positive People - Self Employment - Website Design (Honiton, 20/09/2018)
 
What is a website
What is a websiteWhat is a website
What is a website
 
Positive People - Self Employment - Website Design (Bideford, 08/10/2018)
Positive People - Self Employment - Website Design (Bideford, 08/10/2018)Positive People - Self Employment - Website Design (Bideford, 08/10/2018)
Positive People - Self Employment - Website Design (Bideford, 08/10/2018)
 
The Essential Guide to Web Planning
The Essential Guide to Web PlanningThe Essential Guide to Web Planning
The Essential Guide to Web Planning
 
Positive People - Self Employment - Website Design (Torquay, 06/09/2018)
Positive People - Self Employment - Website Design (Torquay, 06/09/2018)Positive People - Self Employment - Website Design (Torquay, 06/09/2018)
Positive People - Self Employment - Website Design (Torquay, 06/09/2018)
 
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
 

Recently uploaded

Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtimeandrehoraa
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...OnePlan Solutions
 
Buds n Tech IT Solutions: Top-Notch Web Services in Noida
Buds n Tech IT Solutions: Top-Notch Web Services in NoidaBuds n Tech IT Solutions: Top-Notch Web Services in Noida
Buds n Tech IT Solutions: Top-Notch Web Services in Noidabntitsolutionsrishis
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作qr0udbr0
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...Technogeeks
 
Xen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfXen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfStefano Stabellini
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfFerryKemperman
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWave PLM
 
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Hr365.us smith
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityNeo4j
 
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odishasmiwainfosol
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Velvetech LLC
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 

Recently uploaded (20)

Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtime
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
 
Buds n Tech IT Solutions: Top-Notch Web Services in Noida
Buds n Tech IT Solutions: Top-Notch Web Services in NoidaBuds n Tech IT Solutions: Top-Notch Web Services in Noida
Buds n Tech IT Solutions: Top-Notch Web Services in Noida
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...
 
Xen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdfXen Safety Embedded OSS Summit April 2024 v4.pdf
Xen Safety Embedded OSS Summit April 2024 v4.pdf
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
 
Introduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdfIntroduction Computer Science - Software Design.pdf
Introduction Computer Science - Software Design.pdf
 
What is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need ItWhat is Fashion PLM and Why Do You Need It
What is Fashion PLM and Why Do You Need It
 
Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)Recruitment Management Software Benefits (Infographic)
Recruitment Management Software Benefits (Infographic)
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
 
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New Features
 
Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...Software Project Health Check: Best Practices and Techniques for Your Product...
Software Project Health Check: Best Practices and Techniques for Your Product...
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 

Website world

  • 1. FOR VSTSB A short introduction to website world.
  • 2. Web Site Design What is a web site? A website is an address (location) on the World Wide Web that contains your web pages. Basically, a website is your personal online communications connection to the rest of the world. ■ A website is totally different from any other type of publishing, advertising or communications media. ■ The Design Process Designing for the web requires the relevant content of a brochure or magazine, the colorful look of high-quality print, and the attention-grabbing impact of television advertising. Plus it should offer a valuable product and/or information, be updated frequently and stay current with changing technology ■ A Web Site is never done By: khAn
  • 3. Once you have decided to establish a web site there are three steps to getting it online. 1 - Get a domain name - This is your personal/private address on the Web. 2 - Find a web hosting service- Here is where your website will reside. Free vs Private Web Hosting 3 - Design, build and upload your website - The process of website creation.
  • 4. Five step process for effective website design 1. Analyse • Info / content • Target Audience • Top 10 Checklist 1. Organise • Navigation • Content • Page layout • Page design 1. Develop • Web page layout • Site layout • Web page construction • Graphics techniques 4. Implement • User Interaction • Final Checklist • FTP • Fine Tune 5. Maintain • Marketing • Optimisation • Traffic analysis
  • 5. Analyse The first question to ask yourself is do you really need a web site? To help you decide, ask yourself the following questions: Why do I want to create this web site? – promote your ideas, hobbies, or beliefs – To advertise your company or product – Make loads of money really fast – Provide customer services and support – To keep your customer base informed – Give or sell information – Create an 'Extended Business Card' for your company – Provide internal information and services for your company
  • 6. Analyse (1) Web Site Content Before you can start deciding what content the site is going to contain you need to determine – Who your target audience is. – What age group are your users? – What is there skill level with the Internet? – How can I communicate effectively? – You also need to determine the purpose of your site. What is the site for? Once you have determined these factors you can start to plan the content your site will have. Remember who your target will be when deciding on content:
  • 7. Analyse (2) 2 - Who is my target audience? What type of visitors do I want my site to attract? What will be their age, sex and education? Will they search for my site because we share a hobby, like the same television shows or are they looking for specific information? 3 - How can I communicate effectively? Now that I know who the audience will be, what is the best way to communicate with them? 4 - What information do I need? If you are designing a site for a client, you will need to know the answers to the preceeding questions as well as what their vision is for this site. Do they have a logo they want you to use, do they have specific colors in mind, do they want to include phone and fax numbers on their pages? If this is your own business site, these are questions you should answer also. Personal Site
  • 8. Research WebSites This is a very important part in the creation of a web site, and usually very useful. – Spend time looking at other internet sites, particularlly your competitores – See if you can get any ideas you can use and improve on – Don't be mistaken that the flashest coolest looking web site is the best. – Sites with lots of animation are not always the best. – You must also keep in mind that not everyone has a fast Internet connection.
  • 9. Analyse (3) 5 - What content (data, graphics, photos, etc.) will be included? This is the ''big'' job...gathering all the content that you want to include on your web site. Are you going to use photos? What kind of graphics do you want? And what information or data are you putting online? Make a list of the items you think you will want to have on your website. Audience analysis Audience analysis is the starting point for any project. You need to figure out your audience's demographics: – how old they are – where they work – what they earn – where they live, anything that's appropriate
  • 10. Analyse (4) Your content has to have a goal The key thing to remember about audience analysis is the goal: to have a well-defined audience at the end of the process. The only good audience definition is a specific target definition. The better you can pigeon-hole or niche your audience, the more likely your site will succeed.
  • 11. A checklist for type of Content you may wish to include on your website – Frequently updated information – Product and Company articles – Question and answers – Online purchasing of products – Guest book that your guests to your site can sign and add their own comments – Web site forum or chat room to generate conversation between your web site users – Web site search  very useful for larger sites – Weekly poll, to poll your visitors on a particular question – Quizzes and sweep stakes, with prizes to promote your products – Free offers – News – Unique information – Location maps – Contact and Booking forms
  • 12. Top 10 website design tips - checklist 1. Know your audience 2. Keep web pages short 3. Limit the amount of text 4. Avoid large images 5. Use web safe colours 6. Clearly identify all links 7. Check spelling 8. Use a site map or directory page 9. Update and check all links 10. Include contact information
  • 13. Website Journal It is a good idea that you maintain some sort of journal for your website. Don't confuse a site journal with a site outline. Your journal is a collection of your ideas, your thoughts and whatever you want to remember, jot down ideas when they pop into your head. For starters pick out a website that impresses you and examine it; – What is the color scheme and layout? – How is navigation accomplished? – What is the content? – How is the content presented? Write down anything that you believe makes this website good and any ideas that you might want to use yourself.
  • 14. Organisation Next to Analyse, organisation is one of the key tools to website design. We've discussed who you feel your audience will be and what kind of information they will be looking for and what questions they will be asking. Now we need to help them find the information and the answers hopefully, by the shortest route possible. There are three main elements in the organization of a web site. They are: 1 - Structure: The form of your web site and its navigation 2 - Content: The substance of your web site 3 - Layout: The theme or method of presenting your web site
  • 15. Organisation - Structure Now we're going to look at the overall design of a web site and "how to structure a website". This is different from the individual pages within the site (i.e. content). Site design includes the structure of your site, the different sections and navigation within those sections. It also encompasses the theme you choose. As the diagram shows a web site is composed of three main areas: •The Home Page •The Main Sections •The Subsections
  • 16. Organisation - Structure (1) HomePage Do’s ■ Visitors first impressions ■ Should tell the visitors what your site is about ■ Answer questions on the 5 Ws ■ Should provide index or table of contents ■ Keep the home page short and to the point Homepage don’ts ■ Should not contain a lot of text ■ Don’t present your users with a huge list of links to every single page
  • 17. Organisation - Structure (2) Main Sections Determining and naming the main sections of your site is very important. Sections should contain material grouped according to visitor needs - in other words, these are sizeable chunks of related information. For example, if you are creating a site for a tourist visiting Dublin, you would want to make it easy for the visitor to find the right information. The main sections might include: The main section is your site index on your homepage, it is the foundation to your navigation of the website. Once you have divided your content into main sections, decide their order of importance Travel Restaurants Pubs Accommodation
  • 18. Organisation - Structure (2) Subsections Not all main sections necessarily need to have subsections, but most will require a further breakdown of information. It really depends on the amount of content on your site. When designing a new web site, keep in mind that the content will increase as you update and add information to the site. Build in room to expand as you determine your main and sub sections. Once you have established the home page, main sections and subsections of the web site, organise them into order of importance and note it. This is the basic layout of your web site.
  • 19. Organisation - Navigation Now we need to help them find the user find the information and the answers to their questions and we hope we can do this by the shortest route possible There are three different navigation methods. – Linear navigation - Moving in a straight line. – Database navigation - Many branches from your main page. – Hierarchical navigation - A completely connected website.
  • 20. Linear Navigation Linear navigation is used for a web site where you want the visitor to go from one step to another in a particular order. This is usually used within a web site but seldom as a stand alone design. The idea here is that the visitor follows the pages in a predefined order or sequence that you determine. This is particularly useful for tutorials. Straight line or sequential links Linear "straight line" Navigation Diagram Arrange your links so that they only permit movement in a straight line from one page to another.This is straight line navigation. You set up your links in such a way as to compel the visitor to start at one end and continue to a conclusion.
  • 21. Linear reciprocal links Linear "reciprocal" Navigation Diagram Reciprocal navigation allows the visitor to move back and forth between a series of pages. Set-up your links with a start page an end page and links tying the pages together that lie between them.
  • 22. Database Navigation Database Navigation The database or grid design is made up of multiple divisions and each division has its own structure. This type of navigation can be used effectively when large amounts of data are required in the web site design. Database Navigation Diagram
  • 23. Hierarchical Navigation The hierarchical design goes from the general to the specific; from a home page to divisions to subdivisions. A visitor could easily go from the home page to other areas of the web site and back again. Hierarchical Navigation Diagram
  • 24. The End Thank you for your time