Web Programming– UFCFB3-30-1 Lecture-4 Instructor : Mazhar H Malik Email : mazhar@gcet.edu.om Global College of Engineering and Technology

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

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

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

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

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

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

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

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

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

11/15/2018 Lecture 4

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

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

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

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

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

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

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

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

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

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

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

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