Facebook Design Teardown (3 of 3)

In Part 3, I put my prototyping skills to the test with mockups of three pages on Facebook. The aim was to hone my understanding of Balsamiq (the mockup tool I used), while also exercising a balance between speed of production with the fidelity of the mockup itself.

Through the process of this exercise, and after completing the Viking Code School Web Design Basics course, I’ve learned (more than) a handful of lessons (of which I’ll share a few here):

  • Design and UX are (perhaps obviously) about understanding the user, and what their objectives are (within a specific context, such as on a landing page)
  • It helps to start with the end in mind (i.e., what is the user’s goal here?) then design around that aim
  • The principles of design are accessible to anyone, and widely applicable outside of just a design setting

That about wraps it up! In case you missed them, you can see my review of the site’s UX and information architecture in Part 1, as well as my review of the visual layout in Part 2.

Home Page (when logged out)

Home Page/ News Feed (after signing in)

Profile Page