Difference between revisions of "Week Three (MGDP2050)"
Karl Jones (Talk | contribs) (→Exercises) |
Karl Jones (Talk | contribs) (→Create web page) |
||
| Line 143: | Line 143: | ||
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. | 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. | ||
Revision as of 09:27, 26 January 2016
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
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?
- TO DO: discuss in class
See also 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.
User interface
...
Usability
...
User Experience (UX)
...
Accessibility
...
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?
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.
