Assignment: Taking Apart Facebook

In our last class, I told you that I'd ask you to create some high-fidelity wireframes using an artist's website. Instead, I want you to document the Facebook Timeline interface.

For Wednesday you should create at least one wireframe using a computer application of your choice (i.e., not drawn by hand). If you use a tool like Illustrator be sure to find a set of standardized symbols to represent things like images and buttons. I've posted some links to other tools here on our class blog.

The purpose of this exercise is to break down the components of a Facebook profile page. Label each component of the page and explain how it works or what its function is on the page. Use a friend's profile as your model, so you don't focus on editing tools.

Bring both soft copy (editable digital file) and hard copy (a printed page) to class. Consider your printing options when sizing your digital document.

Also, remember to include all the required elements of a wireframe on your document. As we discussed in our last class, important elements include:

• Project Name
• Page/Element Name (if applicable)
• Version Number
• Date Created
• Created By
• Date Last Revised
• Revised By

Here are some examples of hand-sketched and computer-generated wireframes to inspire you:

18 Great Examples of Sketched UI Wireframes and Mockups

http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups

20 Effective Examples of Web and Mobile Wireframe Sketches

http://speckyboy.com/2011/05/29/20-effective-examples-of-web-and-mobile-wireframe-sketches/