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