Week Three (MGDP2050)
Lecture notes and exercises for Week Three of Web Design and Development II (MGDP2050).
Contents
In the news
2015's worst password was 123456
You may not be surprised to learn that the Worst Passwords of 2015 include:
- "123456"
- "password"
See also:
Followups
Miscellaneous followup topics from previous weeks.
Books
No textbook is required for this class. You are free to use any supplemental materials.
See Recommended reading (MGDP2050).
Hyperlinks
See:
Scaling up
Scale is a measure of proportion.
Scale is a critical factor in many areas of technology, art, and life.
A classic problem in software development:
- We have software development in progress
- We wish to finish sooner
What can we do to finish sooner?
- Deliver partial product
- In other words, admit failure to deliver all the deliverables
- Browser ...?
- Fire team members to save money
- Good luck with that
- Hire team members to speed up development
- Probably not: see The Mythical Man-Month.
- ...?
Parallax scrolling
Parallax scrolling is a technique in computer graphics and web design, where background images move slower than foreground images, creating an illusion of depth in a 2D scene.
Language, writing, memory
Last week, I talked about how language changes as people change.
I said -- inaccurately -- that Plato said that the invention of writing would result in the loss of memory skills.
An idea somewhat like this does appear in Plato's Phaedrus (dialog).
But the idea is somewhat different, and the idea is attributed to Egyptians:
Socrates tells a brief legend, critically commenting on the gift of writing from the Egyptian god Theuth to King Thamus, who was to disperse Theuth's gifts to the people of Egypt.
After Theuth remarks on his discovery of writing as a remedy for the memory, Thamus responds that its true effects are likely to be the opposite; it is a remedy for reminding, not remembering, he says, with the appearance but not the reality of wisdom.
Future generations will hear much without being properly taught, and will appear wise but not be so, making them difficult to get along with.
User interface design
User interface design (UID) or user interface engineering is the design of user interfaces for machines and software.
The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).
Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself.
Graphical user interface (GUI)
A graphical user interface (GUI, pronounced "jee-you-eye") or sometimes /ˈɡuːi/ ("gooey") is a type of interface that allows users to interact with electronic devices.
Usability
Usability is the ease of use and learnability of a human-made object.
Obviously this is a very broad definition.
Web usability
Web usability is the ease of use of a website.
Broad goals of web usability include:
- Presentation of information and choices in a clear and concise way
- Lack of ambiguity
- Placement of items in appropriate areas
- Important items where they will be seen quickly
- Supporting items where they can be found easily
- Should be readable on a wide range of devices
User Experience (UX)
...
Accessibility
Accessibility refers to the design of products, devices, services, or environments for people with disabilities.
Prototypes, mockups, etc.
...
Exercises: in class
Study groups
Organize yourself into groups of three or four.
Discuss your project idea(s) and wireframe sketches.
Think about usability, UX, and other group-related activities.
Ask yourself:
- How can I use the power of a study group to improve my project?
- How I can be helpful to other students as part of a study group?
Exercises: for next week
Project
Decide what you want to do for your project, if you have not already done so.
Study group followup
Think about your conversation with your study group.
Improve wireframes
Improve your wireframes.
You should have three wireframes, for three device sizes:
- Phone
- Tablet
- Desktop
Optional extra credit, make wireframes for four device sizes:
- Phone
- Tablet
- Laptop / Desktop
- Desktop (wide)
Wireframe images
For each wireframe, make an image for the web.
- JPG or PNG, your choice
These are images you might show to a client, early in the web design process.
- Should look better than a back-of envelope scribble
- Does not need to be final, professional-grade presentation
Create folder
In your Local root folder, create a new folder named wireframe.
Create web page
In your wireframe folder, create a file named index.html.
Make this an HTML 5 web page, similar to your home page.
Set the page title and other standard information accordingly.
Display your wireframe images on the page.
Add text in the web page as appropriate -- state the device display size for each image, and anything else you care to say about the wireframes.
Update your Home page
On your Home page, make a link to your new Wireframe page.
Reading: for next week
Familiarize yourself with this material:
