Your personality

Project: Personality Test Landing Page - Step 4

October 27, 2014|Project: Personality Test Landing Page

The header is most likely the first thing a visitor to your page will see. You need to take care of your visitors. Here’s how: tell them clearly what they will find on your page or website.

The first few seconds your visitors is asking him/herself if they’ve found what they’re looking for. Help them answer that question. Talk in a way that they will understand.

Focus your efforts on who you want to visit your site. For MajorFinder the target audience is high school and college students. The secondary audience is career changers - someone in a career but wants to switch to a different career.

My Design Goals

My number one goal for this design is that I want to be extremely clear about what I’m offering. I want to be clear and clean in design and in what is communicated (images and content). Here’s the reason why this is my goal:

This service will not cost them any money but it will cost them something of much more value, their time. Our time is the most valuable currency that exists and I want it to be extremely clear what they will get and how they will benefit so they can make a decision about whether it’s worth their time or not.

I, of course, plan to create something that is so valuable that it’s not even close to a question of whether it’s worth their time. But, that’s not the point of this step.

Design Directions For the Header

I found a number of designs that were what I envisioned for the header. Here they are:

Flat and Minimal Header

Inky.com Home Page

Segment.io Website Design

Minimal Design

Designing the Header

I almost always fully design the header. I put much more attention and focus on getting this right than any other part of the page.

I stared out by drawing out the header. I grabbed whatever paper I had quickly accessible. I don't really care how it looks the purpose is just to pull together the ideas I've gotten from the designs above. It's a way of sketching out my thinking. For the design today it was really rough and simple. Here's what I scratched together:

Hand Drawn Sketch of Landing Page Header

This took about two minutes. The hardest part was knowing what words to use. The message is the central part of the focus of the design. I wanted to get it as close as I could.

The points on the top left with an arrow next to them were me trying to figure out the core message or benefit.

You can see I played around with the message on the button. This is so important. What you put on your buttons make a huge difference.

I also mentioned their freedom of choice. This was intentional. Research shows that you're much more persuasive when you say they're free to choose.

Then I jumped onto Photoshop and began designing. This went pretty fast too. Again, the message is what I kept changing and what took the time.

One line or two lines? What size should the font be? Am I communicating clearly? Will my target audience want to proceed?

This is where I ended:

Photoshop Design of Landing Page Header

Once I begin creating it in HTML/CSS I may end up changing it slightly. I pay attention to the tiniest of details.

The Next Step (Step 5)

Wireframe the page. This step is to create the layout and basic design of the page.

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

×