Welcome, is this your first visit to The Hopkinson Report? START HERE Weclome Arrow

Part 2 in a series, showing how to build a personal website for your brand, using a real-world example

Click here to view Episode 161: How to create a personal website, Part 1

– Download podcast: Via iTunes | Save to computer (Right click, Save As)
– Play it below:
 

In Part 1, I explored the basic questions:

Why do you need a personal website?
– You want to be found on Google
– You are conducting a job search
– You want to start a blog

What is the goal?
– Business
– Personal Blog
– Hobby
– Personal Branding

What is the blog format and how will you design it?
– Tumblr vs WordPress
– Existing theme
– Do it yourself
– Hire a designer

How much will it cost?
– How much do you have? 🙂
– $500 to $5000 to $50,000

Before you buy your URL…
– Decide where you want to host your site
– I’ve had good success with Dreamhost, but there are dozens of other great hosting companies

Now, I’m in the creation stages. Here are things that I’ve done:
1) Set up a google doc for communication between myself and the designer
2) Keep track of change requests so that I can make sure all suggestions are completed.
3) To speed up the process and save money, instead of my designer coming up with multiple designs for me to choose from, we decided to model the website from a single source: SethGodin.com

Why?
– The design is simple
– The design is clean
– It is on a white background, which makes it easy to see type and photos
– We have similar interests (speaking, books)

But I also modeled it from other similar sites in my field:
– Saul Colt (Saul.is)
– CC Chapman (cc-chapman.com)
– Chris Brogan (chrisbrogan.com)
– Bill Rancic (billrancic.com)
– Evan White (evanwhitepr.com)
– Mike Davidson (MikeIndustries.com)
– Pat Flynn (smartpassiveincome.com)

Let’s take a look at mockup #1 (Click for larger image)

homepage-mockup1

Changes I made:
– Hated this photo
– Made sure the “sliders” were mobile-compatible
– Debated the red/black/white colors, but my designer said it was a great color to use, and that the industry uses it so often and it performs so well in usability, that “it’s like cheating”
– I did however, want to change the red on black letters
– I had a few footer changes

Jim homework for round 1:
– Write content for the sliders and other panels
– Decide on which topics would be on the slider panels
– Decide on the main name of the site
– Decide on which footer elements would be present

Logo treatment
One thing that came out of this round was that the “name” of the website was “Jim Hopkinson” on the header, and then my name was prominently displayed again. I realized a lot of other sites had a graphical treatment or “larger entity” name (Mike Industries, Saul Is, etc)

My designer said she would mock up some simple logo treatments, but made it clear that doing an entire process of coming up with a “brand identity” was beyond the scope of the original page.

Type treatments

Hopkinson-Type-study-1

So I had to basically go with one of these five for now.

Here was my thought process:
1) Liked it, but not quite my style; almost like the copyright symbol
2) Too basic
3) Winner – Really liked it; clean helvetica; can’t remember what it reminds me of
4) Runner up – Liked this as well
5) Didn’t really like the larger “H” and “N”

Then is was on to Mockup #2 (Click for larger image)

homepage-mockup2

My thoughts:
– Love the look of the typeface (for now)
– Love the white text on the nav, but still too small
– “Jim” is too big (I have a big ego, but not that big)
– I am going to have 5 sliders and chose cool photos for each
– I gave feedback on the Nav bar at bottom

Current Mockup #3 (Click for larger image)

homepage-mockup3

My thoughts
– Larger nav looks great
– Back to small Jim
– Condensed footer – nailed it

Just one issue… noticed this when she added the “Home” link in the footer, and it is something to keep in mind:

When someone leaves your home page, how do they get back to it? SOME people know to click the logo, but a study we did on one of our websites here indicated that it was not always the case. Thus, the final change here will be to add “Home” to the main nav bar.

Lessons learned
– I’m an extreme micromanager. Just this week alone I have worked closely on this design, and infographic design, and a video production
– I really, honestly try to let the designer/creator do their best work, but I also want to be fully part of the process
– I may drive designers crazy (they are all awesome btw… see links at the end of this post), but the reason is this:
You must own your own brand experience

You can’t put a price on image and first impressions when someone comes to your site. Even if you get one extra client, it will pay off to hire the best and do things right. Of course, this depends where you are and what your goals are. Just starting out with a blog? By all means, the more important thing is to get something up and running, so grab a theme on Tumblr and go. But as you expand or run a business, design can be a huge differentiator.

Next steps for part 3:
– I have a lot of content to write
– My designer is finalizing the homepage, and moving on to the sub pages

Stay tuned.

My awesome all-star team of creatives:
Meghan O’Neill, Monday Designs (All JimHopkinson.com designs above)
Brandon Werner, New Media Rock Star (HopkinsonReport, SalaryTutor)
Shaun Sanders, Infographic God (Salary Infographic)
Michelle Vargas, Video Goddess (Upcoming book trailer)

Note… hoping to have all three designers on the show soon.

Blogger disclaimer: some links in this post contain affiliate links

Comments Closed

Comments are closed.

.