Class 10: Web Application Design
Tasks to complete for this class
- Follow the lecture material presented below
- Read the article: Web Design Process in 7 Simple Steps (opens in a new tab)
- Watch the Web Development Foundations (opens in a new tab) video (in Pacific Lynda (opens in a new tab))
Quality Factors in Design
The short introductory video (opens in a new tab) discusses more of the engineering approach that we should take when designing a website.
The video also discusses some of the different factors that affect quality that we need to keep in mind when designing a web application, which are:
- Usability - how easy is it to use?
- Functionality - does it have bugs?
- Reliability - can I trust what it is presenting to me?
- Maintainability - is it easy for another developer to modify/maintain?
- Efficiency - is it responsive?
- Security - is my sensitive data being safeguarded?
- Availability - is it something that I can access at any time?
- Scalability - will this solution still work if we have a million users using the application?
- Time to Market - how long before we can put this in the hands of users?
All of these are important to consider because they all end up impacting our ultimate design and development.
Content Design
In our next video (opens in a new tab), we discuss some additional tips regarding designing a website.
This means:
- Keep things simple
- Stick to using three to four colors (better if they work with the Canva Color Wheel (opens in a new tab))
- Stick to one or two fonts
- Maintaining consistency in how you structure your pages, sections and layout make your pages easier to navigate
Applying Design to the Real world
This next video (opens in a new tab) explains one of the class assignments that we will do that I will be asking you to do during class time today.
As part of that video, I go through an example of a critique or analysis that I would like you to do. This is what you will end up doing as your reflection. If you've already done a reflection then you want to add this critique. Make sure that you end up doing this in class as we'll have a conversation about this at the beginning of the class.
In this video we also go over the idea of some of the principles of aesthetic design, including:
- Using lots of white space
- Making sure content is organized and grouped in an sensible way
As well as content design, where you focus on how representing your content can be represented as objects and how it relates to other content in your web application.
Navigation Design and Your Project
The last video (opens in a new tab) for today reviews the idea of navigation design.
It's important that we use available tools, like UML Diagrams to better understand how to design our web applications.
Lastly some pointers are provided about your projects, with the most important being that your application will need to be designed multiple users/use cases.
If you aren't aware of UML, you can peruse this UML primer/Reference (opens in a new tab)