1. Web Programming– UFCFB3-30-1 Lecture-4
Instructor : Mazhar H Malik
Global College of Engineering and Technology

2. Lecture Four
Design Principles
LO 5
11/15/2018
Lecture 4

3. In this lecture… Purpose, planning, process for web page creation
Navigation
Use hierarchy, conventions, clearly defined page areas, obvious click-ability, and minimise noise
11/15/2018
Lecture 4

4. Creating a Website (summary)
1 Develop the purpose of the site
What is the site for? Why are you making it?
2 Plan the site
What are the goals of the site?
What will be in the site (content)?
Design - interface? navigation?
3 Go through the development process
Create templates
Gather/create components - graphics, sound, video, scripts
Create the site
Test the site - usability and standards compliance
SEE BELOW
Note that there are lots of models for creating websites, from simple to complex. The outline suggested here is designed to include the essentials, while not overwhelming the student - this is a very introductory paper.
11/15/2018
Lecture 4

5. 1 Purpose The purpose of the site will influence design
A business site
An entertainment site
An educational site
The audience will influence design
International or not
Age
Culture
etc
Will have very different design
Will have very different design
11/15/2018
Lecture 4

6. 2 Plan the site Plan all aspects (many are related and overlap)
Site overview
Use thumbnails and storyboard
Navigation
Page design (next few slides)
Template layout
Typography
Graphics
Multimedia
11/15/2018
Lecture 4

7. 3 Develop the Site Create the site Test Test Test Test again
Test for usability - can humans use it?
Test for compliance - validate the code
11/15/2018
Lecture 4

8. More on planning Plan the site using thumbnails
A “thumbnail” is a small, simplified picture of the final product. It is usually quickly hand-drawn and doesn’t take long to do
A storyboard is a collection of thumbnails
They can be used at different levels. The first examples are at the site level - they show all the pages, and often the navigation links.
Then there are some examples at the page level.
11/15/2018
Lecture 4

9. Story board for a personal site
11/15/2018
Lecture 4

10. Thumbnail of one page
This became
11/15/2018
Lecture 4

11. 11/15/2018
Lecture 4

12. Template Page A standard page with elements in place
Navigation buttons
Titles
Text areas
Graphics areas
Colours and backgrounds set up
Only need to insert the actual content
Remember the “standard” page layout
11/15/2018
Lecture 4

13. A common web page design
Will probably be the same on all pages
Will probably be the same in this section, and maybe on all pages
11/15/2018
Lecture 4

14. Successful web pages… Attract people; retain people; achieve your aim
Consider the audience
Good design principles
Strong design
Good typography
Effective colour choice
Careful use of graphics
Minimize "noise"
Fast download
Easy “intuitive” navigation
The rest of this lecture looks at navigation - but also think of all design factors mentioned
11/15/2018
Lecture 4

15. Follow the navigation links
Users need clear, simple and consistent navigation
Imagine you want to buy a pair of denim jeans. You go to a department store.
You can find your own way
Follow the signs…
Read a store map
Or you can ask a shop assistant
Follow the navigation links
Search
Whatever method you use, if you can’t find what you want you will leave
11/15/2018
Lecture 4

16. Navigate or Search Search Navigate - 3 clicks
Discuss the two ways of finding what you want
11/15/2018
Lecture 4

17. Three considerations Differences between a website and a real store
No sense of scale
When in a web site it is hard to tell how big it is…you can’t see the walls
No sense of direction
There is no left or right, up or down
No sense of location
It is harder to learn a website than learn a store…harder to go straight to what you want
Navigation is about getting there AND knowing where you are
Think about these considerations for the next slide
11/15/2018
Lecture 4

18. Orange “you are here” indicators
The store name
Sections
Utilities
Shaded tab - “You are here”
Navigation at current level
Orange “you are here” indicators
Hierarchical navigation
Emphasise navigation not only to find jeans, but also to locate the user within the store - what if they want to find some socks too? Is it easy?
Small text
site-wide links
11/15/2018
Lecture 4

19. Persistent navigation
The same (or almost the same) set of navigation elements are in the same place on every page
Users can to learn how to use one page and they know how to use the whole site
11/15/2018
Lecture 4

20. The Home page Very important
First impressions count
If the user is confused or lost, should always be able to find their way home
Usually the logo is also a link
it is sensible to also to have a “Home” button on all pages
Logo and link to home page
This is on every page in the same place
11/15/2018
Lecture 4

21. Good design?
Discuss page - good or bad?
11/15/2018
Lecture 4

22. Discuss page - good or bad?
11/15/2018
Lecture 4

23. Discuss - good or bad?
11/15/2018
Lecture 4