Web Design and Development

Slides:



Advertisements
Similar presentations
Accessibility and WHO's web site Images courtesy of Flickr.
Advertisements

Scientific Communication CITS7200 Lecture 11 Designing and Writing Web Pages.
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
 Adding Background image  Creating internal links  Creating external links  Save your document as a webpage(.mht) file.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Lecture 5: Design and Prototype.
Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.
WEB DESIGNING Prof. Jesse A. Role Ph. D TM UEAB 2010.
Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.
Problemsolving 2 Problem Solving: Designing a website solution Identifying how a solution will function Taking into account the technical constraints a.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Website evaluation models and acceptability factors K.Vipartienė, E. Valavičius.
So You Want a Web Page!. What is a Web Page? According to Webopedia, a web page is: A document on the World Wide Web. A Web site is really a bunch of.
211 Multimedia Web Design Lesson 1 – Web Functionality & Purpose.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
+ Introduction to Wireframing. + Overview Storyboarding and wireframing your site before you start to code is another step in the website design process.
 What is a wireframe?  What features are important?  Which wireframe tools might you want to try?
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
Progress Report: Project 4 Web Solutions. Interviews (Jennifer) Usability Testing (Andrea Kayne) Final Report due Accessibility Analysis (Andrea.
Website St. Augustine A Technical Viewpoint Deja Vu anyone?
Objective Understand concepts used to web-based digital media. Course Weight : 5%
Web software. Two types of web software Browser software – used to search for and view websites. Web development software – used to create webpages/websites.
Designing & Testing Information Systems Notes Information Systems Design & Development: Purpose, features functionality, users & Testing.
Software. A web site is a collection of web pages on a particular topic. A web page is a document written in HTML code. Web pages are linked together.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Users and the Interface When designing an information system you need to have a clear idea of who the target audience is. If the target audience is an.
Web Site Development - Process of planning and creating a website.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
Unit 13- Web Design P1-Explain the intended uses and features of two different websites. M1-Review how the features in two websites improve presentation,
Learning Aim C.  Once the website is complete, you should test it using the test plan you created at the design stage.
Learning Aim B.  It is a good idea to think carefully about the design of a website before you try to implement it.
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
Unit 13 – Website Development FEATURES OF WEBSITES.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
Learning Aim A.  Websites are constructed on many different features.  It can be useful to think about these when designing your own websites.
COMP 143 Web Development with Adobe Dreamweaver CC.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
What makes a Good Website?. Examples of Bad Websites For more really.
DMT612 Professional Preparation EFFECTIVE WEB DESIGN.
Unit 14 - Task 3 Webpage Design. Lesson: eportfolio Class: 13d Date: 21 st Jan Starter pageguide/badpgguide.html.
Home page button Nokia link button Samsung link button Apple link button Blackberry link button Phone Accessories button Feedback button Contact us button.
 Define Wireframes, Mockups, and Prototypes  Techniques  Low vs. High Fidelity  Sketchy vs. Polished  Exercise: Define the Process.
What is an Information System?
Web and presentation software
Objective % Select and utilize tools to design and develop websites.
Investigating User Interfaces
Web-based structures, links and testing
Web Site Design Plan Checklist
Web software.
Designing Information Systems Notes
Introduction to Wireframing
Objective % Select and utilize tools to design and develop websites.
Web Design and Development
Layout - you need to understand that a simple navigation bar:
Objective % Explain concepts used to create websites.
How to Develop for e-learning
Page plans A01 Design.
Unit 13: Website Development
Unit 2 – Webpage Creation
Lesson Objectives Lesson Outcomes
Web and presentation software
Create and edit web pages 2
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Web and presentation software
Part 8 Q36 to Q40 of National 5 Prelim
Unit 3 - A Digital Portfolio
Objective Explain concepts used to create websites.
Presentation transcript:

Web Design and Development Design – Effective User Interface Design

Learning Intention I will learn about the factors to consider when designing webpages I will learn how to design a user interface using wire-framing.

Effective User Interface design When designing a website we need to consider a number of things: Visual Layout Readability Accessibility Navigation Consistency Positioning of media

Visual Layout Pages should look appealing to all users Avoid information overload A balance of graphics and text Avoid clutter – use whitespace

Readability Methods of making a website readable include:- Adjustable text size Adjustable colours A A A

Accessibility About making the website usable by everyone all abilities all impairments

What is wrong with this website?

Navigation How will the user navigate the web site? Browser buttons Hyperlinks Pop-up menus Search features Breadcrumbs Navigation bar

Which website?

Which website?

Which website?

Consistency Web pages should have a consistent appearance throughout the website Use the same: fonts and colours page layout balance of text and other media navigation features

Consistency What technology can we use to help us create a website with a consistent appearance in terms of colours, fonts, text size?

Positioning of media This considers how different types of media are positioned relative to each other.

Positioning of media TOP MIDDLE BOTTOM text image image text image

Identify two features used on this webpage to aid navigation.

Give one reason why the design of these links is not good practice

Web Design and Development Design – Designing a website

Learning Intention I will learn about the factors to consider when designing webpages I will learn how to design a user interface using wire-framing.

Designing a website We use a technique called wire-framing to design web pages. Wire-frames can be created using a computer or on paper. Wire-frames are the first design step.

Wire-Framing A wireframe shows the layout of the page including the position of: text media (images, audio and video) hyperlinks (and their type)

Wire-Framing

Bears wire-frame

Dream Job wire-frame

Wire-frame Exercise Complete Task 1 – ScotsWaterSport website wire-frame Use paper, pencils etc

Low fidelity Prototyping A prototype (a basic example) lets end- users see what the actual website will look like and feel like End-users can “test” how it will function Low-fidelity just means the prototype is simple and incomplete (but it has more detail than a wire-frame).

Prototype Exercise Complete Task 2 – ScotsWaterSport website prototype Use paper, pencils etc

I can use a wire-frame to design a web page while considering: Success Criteria I can use a wire-frame to design a web page while considering: visual layout readability consistency navigation relative positioning of media file formats of the media