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: 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:
At this point I can tell this isn't going well but I keep pushing on:
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.
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:
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.