Your personality

Project: Personality Test Landing Page - Step 5

October 30, 2014|Project: Personality Test Landing Page

It's time to flush out the rest of the landing page. I love creating stuff and so we're getting close to the really fun part.

As I began this step I wasn't real clear about what I wanted it to look like. Sometimes this step goes really smoothly and easily. This time it wasn't that way. The design didn't come together for me and it took a lot more work than it normally does. But, never fear, persistence pulled me through.

Wireframe - Attempt 1

My first shot looked like this: Wireframe Phase 1, Page 1 You can see right below the content I say something like, "Include: point #1". I'm referring to the ideas I want to communicate with this design.

Here's the second page: Wireframe Phase 1, Page 2

At this point I can tell this isn't going well but I keep pushing on: Wireframe Phase 1, Page 3

I don't love it but I don't know how to make it better. I think the problem lies with what I'm communicating. It's too much information which is making the design too busy.

So I took a few days. That usually helps me. I had to step away from it to clear my mind. I didn't even think about the design. I worked on other parts of the personality test - coding the backend parts. This requires a different way of thinking and it gave my mind a break.

So, when I came back to it a few days later it came together quickly for me. Wireframe Phase 2, Page 1

Again, you can see the biggest challenge was what to communicate. The message will make or break your design.

If it hadn't come together I would have given it a few more days and kept trying to simplify the message - get to the core of what I'm communicating.

The design still wasn't really clear to me. I wasn't sure if I should use icons to illustrate the points I was making or if I should use screenshots. You can me going between the two in this rough wireframe.

Lately when I get to this step I find that I'm ready to jump into creating the page in HTML/CSS. This one wasn't smooth for me though and the details of the design weren't clear in my head. So, I jumped into Photoshop and worked it out:

Personality Test Landing Page Design

The Next Step (Step 6)

I played around with different colors. I'll tell you more about why I decided on the colors I did.

Want to level up your CSS skills?

Sign up below to receive a CSS tip each week as well as access to my courses and articles as they become available.

I won't send you spam, promise. If it ever feels that way you can unsubscribe at any time.

Sign Up For Free


Sign In