1. Web Design and Development
Design – Effective User Interface Design

2. 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.

3. 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

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

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

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

9. What is wrong with this website?

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

11. Which website?

12. Which website?

13. Which website?

14. 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

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

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

17. Positioning of media TOP MIDDLE BOTTOM text image image text image

18. Identify two features used on this webpage to aid navigation.

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

20. Web Design and Development
Design – Designing a website

21. 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.

22. 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.

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

24. Wire-Framing

25. Bears wire-frame

26. Dream Job wire-frame

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

28. 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).

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

32. 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