COMP 2057 Lecture Notes - Lecture 7: Responsive Web Design, W3Schools, User Experience
27 Jun 2018
School
Department
Course
Professor
1
60-205 – INTRODUCTION TO THE INTERNET
WEEK #7 – DESIGN PRINCIPLES & CSS
Contents
Dr. Stephanos Mavromoustakos
find more resources at oneclass.com
find more resources at oneclass.com
2
WEEK #7 – DESIGN PRINCIPLES & CSS
Learning Objectives
This week students should be able to:
Describe the importance of usability and user-centered design
Explain the usability components
Apply HTML and CSS for designing websites
THEORY – DESIGN PRINCIPLES
Professional web designers do much than just write HTML, and often are more involved than simply
producing the "look" of a media object. Modern professional web designers often are skilled in:
visual design
interaction design
information design
...and have training in ...
ousability
oaccessibility
When a web designer sits down to design a page or a site, she must make a number of choices. Some of
those choices may be neutral and have no significant impact on the user experience. But many of those
choices will directly impact the user's ability to interact with the web site, and may even prevent the
user from accomplishing her task.
[ Ref. http://openhighschoolcourses.org/mod/page/view.php?id=9806 ]
Plan
Before begin developing a website you need to have a plan. Here are the steps you need to follow:
1. Define the purpose and goals of the website
2. Identify the budget you have for the website
3. Assign roles e.g. Graphics Designer, Web designer, Programmer, etc
4. Create a content strategy e.g. Text, Videos, Images
Dr. Stephanos Mavromoustakos
find more resources at oneclass.com
find more resources at oneclass.com
3
5. Choose the right technologies
6. Decide on the structure of your site
7. Mock-up design – wireframes
8. Design
9. Test
10. Maintenance
Software Quality
ISO 9126 classifies software quality in a structured set of characteristic and sub-characteristics. These
adapted for a Web application are:
Functionality – Suitability, Accuracy, Interoperability, Security
Reliability – Performance, Fault Tolerance, Recoverability
Efficiency – Time, Resource utilization
Maintainability – Analyzability, Changeability
Usability – Understandability, Learnability, Operability, Attractiveness, Consistency, Direct
Feedback
[ Ref. https://en.wikipedia.org/wiki/ISO/IEC_9126 ]
Usability
Why do users come to a Web site? Why do any of us do anything? We have a need for something. Users
go to a Web site to acquire something, for example, information or a product. In other words they need
to accomplish a task.
[ Ref. http://openhighschoolcourses.org/mod/book/view.php?id=9809 ]
Usability is the ease with which end-users (or the customer) can use a particular tool or other object in
order to achieve a particular goal.
Usability can also refer to the methods of measuring usability and the study of the principles behind an
object's perceived efficiency or elegance.
[ Ref. http://openhighschoolcourses.org/mod/book/view.php?id=9809&chapterid=3331 ]
5 components in usability
Jakob Nielsen, a sometimes controversial usability guru, writes in Usability 101:
Dr. Stephanos Mavromoustakos
find more resources at oneclass.com
find more resources at oneclass.com
Document Summary
Describe the importance of usability and user-centered design. Professional web designers do much than just write html, and often are more involved than simply producing the look of a media object. Modern professional web designers often are skilled in: visual design interaction design information design. And have training in : usability, accessibility. When a web designer sits down to design a page or a site, she must make a number of choices. Some of those choices may be neutral and have no significant impact on the user experience. But many of those choices will directly impact the user"s ability to interact with the web site, and may even prevent the user from accomplishing her task. Before begin developing a website you need to have a plan. Here are the steps you need to follow: define the purpose and goals of the website.
