Objectives | To seek and choose well designed web pages. –Observe them closely through the process of drawing thumbnails. –Learn to draw thumbnails that communicate.
Drawing slows down the looking process and promotes the process of seeing. Seeing is an active and methodical evaluation. A careful study of web page anatomy gives you, as a designer, more options to choose from when creating your own web pages and sites.
Draw 12 thumbnails of prexisting webpages
Evaluation | blog post
Process
Find | 12 existing well designed web pages. Choose a wide variety in content, audience and visual design.
Draw | Using the sites that you found, draw the 12 thumbnails above the fold.
- Paper | letter size, white, no lines, no tears (ripped from a notebook). Only draw on one side of the paper.
- black line | use a black pen. If you must use a pencil adjust the contrast after scannig to make the line black.
- url | below each drawing
Use all the design skills and craftsmanship that you have acquired in your previous courses. Nothing will escape the eye of design in this course.
Observe | similarities and differences, main parts of each page and pay attention to the function of each part.
Scan | Scan the page of thumbnails at a resolution of 72 ppi, 1000 px wide in rgb color mode. Then save for web and devices from Photoshop. Keep the original page in a binder
Examples
fig. 1 | A thumbnail sketch of a page of 12 thumbnail sketches.
Thumbnail page | The thumbnail page fig. 1 is a sheet of letter size paper with three drawings across and four down. Actually it is a thumbnail of a page of thumbnails but I think you get the point. This will total 12 different thumbnails that should be based off a current functioning web page. Write the web address below each drawing as in fig. 2.
Draw a range of different kinds of pages from different industries and for different audieces in an effort to see the options avalable to you as a designer. Pay special attention to the function that each element of the site plays especially the user interface. Is it clearly apparent how to move through the web site? Look for good uses of the elements and principles of design.
fig 2 | A thumbnail sketch or the web page of the National Marriage project.
Thumbnail | This thumbnail communicates the basic compositional parts of the web page. All navigational elements should be drawn.
The typography is all indicated in a way to show different typographic textures. Differences in letter spacing, line width, leading and size are communicated without making any actual letter forms.
The photographs should be indicated. Don’t draw boxes with “X’s” for the image place holders. The drawing of the photograph is just the essence of the image. While the drawing isn’t exactly proportionate to the page it was based on the proportions of the page and the elements within the page closely relate to the page it was based on. The web address is written below the thumbnail
fig 3 | The web page of the National Marriage project from Rutgers University
Screen Shot| A screen shot is not required for this assignment but I think that having it here as an example gives a good idea of what is expected of in translating from an existing page into a thumbnail sketch.
Blog Post
fig. 4 | Format for the blog entry
Introduction | a restatement of the objectives in your own words
Image | large: 400 px wide; linked to larger image
Learning summary | What did your learn? What was the most challenging part of the exercise? Did you meet the exercise objective? Do you have any suggestions to improve this exercise?
Conclusion | A finishing statement emphasizing objectives achieved.
Resources | books, web sites, other students or any other sources that you used to complete this lab. The resources are added for your future reference so that if you need to accomplish this task again you have a place to start. In web design there is so much to remember and if you aren’t doing it every day it is easy to forget the details.
