SlideShare a Scribd company logo
1 of 53
Basic Web Design Ryan Dinwiddie UCC Spring 2010
Principle #1 Just because you  can  do it,  doesn’t mean you  should  do it.
Principle #2 Know your audience and have a clear goal for your web site.
Principle #3 Inform the user, don’t irritate them!
Principle #4 Don’t post an “under construction” graphic after you’ve published your URL.
Principle #5 Check your spelling!
Principle #6 Test, Test, Test, and Test some more  before  you go live or update!
Steps to a well designed  Web site ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Have a goal for your web site ,[object Object],[object Object],[object Object],[object Object],[object Object]
Identify your target audience ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Plan it out ,[object Object],[object Object],[object Object],[object Object]
Plan it out ,[object Object],[object Object],[object Object],[object Object]
Select a Web service provider ,[object Object],[object Object],[object Object],[object Object],[object Object]
Try it out: Optimize it for your audience ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Too many graphics are distracting
Few graphics makes it easy to navigate.
Maintain it ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
This document is “living” …in the past.
Characteristics of a  Good web site ,[object Object],[object Object],[object Object],[object Object],[object Object]
Make your site well-organized ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Organized by department.
Organized by audience type.
Organized by subject.
Make your site  easy to navigate ,[object Object],[object Object],[object Object],[object Object]
No scrolling necessary to start navigating.
Standard tool bars and a brief menu for easy navigation.
Make your site attractive ,[object Object],[object Object],[object Object],[object Object]
An example of a very unattractive site
Subaru provides a balanced, attractive Web site.
Avoid backgrounds that wash out your text.
Make your site useful ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ways to present information ,[object Object],[object Object],[object Object],[object Object]
Hierarchical organization ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Hierarchical organization.
Image Maps ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Imagemaps can provide easy means of navigation.
Tables ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tables provide Web designers with control over layout.
Tables also provide simple organization of information.
Frames ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Frames can be used to provide a static navigation window.
Static navigation windows can be along the bottom.
Tips for frames ,[object Object],[object Object],[object Object]
General Things to  Remember & Consider ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Test text colors against background colors.
General Things to  Remember & Consider ,[object Object],[object Object],[object Object]
General Things to  Remember & Consider ,[object Object],[object Object],[object Object]
General Things to  Remember & Consider ,[object Object],[object Object],[object Object],[object Object]
General Things to  Remember & Consider ,[object Object],[object Object],[object Object]
Remember Your  Hard-Copy Publishing Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Clearly and Consistently  Identify your site ,[object Object],[object Object],[object Object]
Essential Elements for  Every Page ,[object Object],[object Object],[object Object],[object Object],[object Object]
Suggested Page Elements ,[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

Example
ExampleExample
Example
tara
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1
Eric Legg
 
Website Design2
Website Design2Website Design2
Website Design2
Eric Legg
 
Connecting Rural Communities
Connecting Rural CommunitiesConnecting Rural Communities
Connecting Rural Communities
webhostingguy
 
Apple web design_guide
Apple web design_guideApple web design_guide
Apple web design_guide
3liblib
 
AITP Web Hosting-Web..
AITP Web Hosting-Web..AITP Web Hosting-Web..
AITP Web Hosting-Web..
webhostingguy
 

What's hot (19)

Web Site Design
Web Site DesignWeb Site Design
Web Site Design
 
Example
ExampleExample
Example
 
Design for the Web
Design for the WebDesign for the Web
Design for the Web
 
Joomla Day Austin Part 1
Joomla Day Austin Part 1Joomla Day Austin Part 1
Joomla Day Austin Part 1
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
Stickydrive Promotional Powerpoint
Stickydrive Promotional PowerpointStickydrive Promotional Powerpoint
Stickydrive Promotional Powerpoint
 
Principles of web design
Principles of web designPrinciples of web design
Principles of web design
 
OMG! Your Website Is Ugly
OMG! Your Website Is UglyOMG! Your Website Is Ugly
OMG! Your Website Is Ugly
 
Website Design Part 1
Website Design Part 1Website Design Part 1
Website Design Part 1
 
Website Design2
Website Design2Website Design2
Website Design2
 
Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
 
Web design principles
Web design principlesWeb design principles
Web design principles
 
Principle of a good web design
Principle of a good web designPrinciple of a good web design
Principle of a good web design
 
6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design
 
Connecting Rural Communities
Connecting Rural CommunitiesConnecting Rural Communities
Connecting Rural Communities
 
Apple web design_guide
Apple web design_guideApple web design_guide
Apple web design_guide
 
AITP Web Hosting-Web..
AITP Web Hosting-Web..AITP Web Hosting-Web..
AITP Web Hosting-Web..
 
Fundamentals of Good User Interface Designing, Development & Testing
Fundamentals of  Good User Interface Designing, Development & TestingFundamentals of  Good User Interface Designing, Development & Testing
Fundamentals of Good User Interface Designing, Development & Testing
 

Similar to Lecture 3

Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A Website
Zoaib Mirza
 
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docxASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docx
galerussel59292
 

Similar to Lecture 3 (20)

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
 
Characterstc of web
Characterstc of webCharacterstc of web
Characterstc of web
 
Web Disigning
Web DisigningWeb Disigning
Web Disigning
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdf
 
Proposed solutions
Proposed solutionsProposed solutions
Proposed solutions
 
Empowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and ElementsEmpowerment Technology - Basic Web Design Principles and Elements
Empowerment Technology - Basic Web Design Principles and Elements
 
Promote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A WebsitePromote Education Web Design Things To Consider When Designing A Website
Promote Education Web Design Things To Consider When Designing A Website
 
WebBestPractices3
WebBestPractices3WebBestPractices3
WebBestPractices3
 
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docxASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docx
 
Website best-practices
Website best-practicesWebsite best-practices
Website best-practices
 
Substance151 Best Web Practices
Substance151 Best Web PracticesSubstance151 Best Web Practices
Substance151 Best Web Practices
 
Notes8
Notes8Notes8
Notes8
 
Webdesign New
Webdesign NewWebdesign New
Webdesign New
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
November 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to MeNovember 2016 - ECN - You're Speaking Drupalese to Me
November 2016 - ECN - You're Speaking Drupalese to Me
 
Notes8
Notes8Notes8
Notes8
 
Website design
Website designWebsite design
Website design
 
Twf homepagedesign sb_okey
Twf homepagedesign sb_okeyTwf homepagedesign sb_okey
Twf homepagedesign sb_okey
 
What is a website builder
What is a website builderWhat is a website builder
What is a website builder
 
Website Design Issues
Website Design IssuesWebsite Design Issues
Website Design Issues
 

More from uccwebcourses (7)

Int Lecture 3
Int Lecture 3Int Lecture 3
Int Lecture 3
 
Int Lecture 4
Int Lecture 4Int Lecture 4
Int Lecture 4
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
Lecture 2
Lecture 2Lecture 2
Lecture 2
 
Lecture 5
Lecture 5Lecture 5
Lecture 5
 
Lecture 4
Lecture 4Lecture 4
Lecture 4
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 

Lecture 3

Editor's Notes

  1. This is an example of using two frames. A thin frame along the left margin that acts as a static navigation menu throughout the Web site. The second frame, which often isn’t even thought of as a frame because it takes the majority of the screen, is what some might call the “content window.” It is the frame in which all information in this Web site is displayed.
  2. This is another example of a static navigation frame. Each cell in this frame is a hyperlink that will bring a Web page up in the larger frame above it.
  3. 8 14 12
  4. 10 17
  5. 11 18