Homepage mockups

Before coding the website I want to have a good idea of what I’m doing. While I have concepts in my head, it doesn’t always translate perfectly into reality. How nice it would be to know if something will work before going to the work of programming it. Thankfully, that is where mockups come in handy. And there is no better tool for creating mockups that Balsamiq Mockups. They have a demo version of their Mockups product that allows you to create, import, export, and save your mockups as PNGs. The only downside is that it reminds you that it’s a demo version every 5 minutes. But, it’s a create way to get a taste of the product.

Anyway, I wanted to start off creating mockups for the start/home page, as that sets the tone for the rest of the site. Given that, I created four different mockups that could be used for the home page:

First mockup of the login page.

Second mockup of the login page.

Third mockup of the login page.

Fourth mockup of the login page.

I ran all four past my fiancee Rachel to get her perspective on it. She liked the fourth one the best because it had questions to get you started right on the home page, plus she liked the conversational style (the chat balloon) and that it explained the name of the site immediately.

The fourth one happened to be my favorite as well, and interestingly it was the first one I worked on. So I’ll be using the fourth mockup as the base for my homepage, possibly pulling in some concepts from the other mockups.