These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
In this project, you'll be able to try out everything you've learned in this mini-course. In the first part, you'll be asked to do a UX and design teardown of Facebook and in the second part you'll be asked to mock it up.
The first step of this project is to go to Facebook and think of it like a designer would. You'll tease out what it does well and what it does poorly while applying the same approach we've discussed in previous lessons.
Facebook is a huge application and you certainly don't need to go poking around all its corners. We'll try to stick with the main use cases and sections of the site. If you find yourself being pulled down a rabbit hole investigating some tangential feature (e.g. privacy settings), rewind and start again with something more obvious.
Note: You'll need to have a Facebook account for this so you can properly log in. If you're adamantly anti-Facebook, then instead of following the pages we'll be mocking up, follow their signup flow and critique that.
As with the other teardowns, these can make good blog posts if you have a blog of your own. Send us an email if we can include the link to yours here.
This shouldn't stretch your imagination too much since you are likely the user!
For this section, we'll focus on several of the key pages on Facebook:
Now that you're intimately familiar with each of the pages in the previous section, turn each of them into a mockup in Balsamiq. That's it!
Don't worry about getting all the color schemes right or including absolutely every element or icon. This project is really about becoming familiar with mocking up pages not going overboard with the details.
If you'd like to submit your solutions so other students can see them, upload your files to your own Github repo and add the link to it to our public solutions repo right here.
The checklist of files to include in your repo would be:
.pdf
form (so people without Balsamiq can view them).Don't remember how to do a Github pull request? Go back to the previous mini-course's project on Git and the Command Line. You can add any type of file you want to a Git repo, not just text files.