mission possible seo and UX

Mission Impossible? Designing an Appealing Site That’s Search Friendly

Your mission… should you choose to accept it, of course, is to design a new website that’s not only beautiful to look at but highly functioning and search engine-friendly. These seeming opposed objectives sparked off a debate on a HubSpot blog post that I read and commented on recently. The post was about 10 website with “kick ass” designs. Sure, many of the sites mentioned in the post were beautiful. Compelling imagery, web-friendly fonts and even some parallaxing in there, for good measure. The more I reviewed the list of sites, the more I realized how much they lacked in user experience (especially cross-browser) and SEO-friendly-ness.

Having it all isn’t easy but it’s not impossible either. It just takes a little pre-planning, some SEO-smarts and a whole lot of user experience strategy to back it all up. I figure we can create a super smart, super sexy website in three easy steps.

Step One – Start With Strategy

My recommendation for a successful website design? Start with a pad and paper and write down a few things about your site. Wait, huh? No computer? That’s right; no computer.

First, write down who your ideal target visitor is. Are they a 20-something post-college graduate or a mom living in the ‘burbs? Identify your audience and think about their needs. Even better, ask a few!

Next, write down the top three things you want your visitor to do on your site. Even if your site is just a blog, you still would like visitors to do something, right? You can skip the “I want them to drool over my site’s awesomeness.” That’s a given. Here’s an example list:

  • I’d like the user to read as much of my content as possible.
  • I’d like the user to feel compelled to fill out my contact form.
  • I’d like the user to purchase my [product, eBook, whatever].

What those three goals will do for the remainder of your project is remind you of what your true objectives are for your site. They’ll help you keep your eye on the ball, so to speak.

Step Two – Wireframes With a Side of Design

In my personal experience, many website owners are too eager to skip right to the design phase of their project.

Stop doing that!

First, start off with wireframes. I recommend you wireframe each unique layout, but if nothing else, at least do wireframes or prototypes for the most strategically important pages. Making changes in design is a lot more difficult (and expensive) than in a prototype and it helps you see through all the pretty colors. I’d make a short checklist for this step as well:

  • Where is my page heading 1?
  • Is there enough descriptive content for search engines on the page?
  • If there’s enough content, do you use sub-headings like heading 2 properly?
  • Is there a clear call-to-action on your site? Remember those three goals in step one.
  • Don’t forget image alt tags!

Step Three – Design Iterations

Personally, I find it really difficult to get design right on the first pass. My recommendation is to iterate your design. Make a first pass at it and let it simmer for a day or two. Make notes of what you like and what you don’t like and iterate changes in the next version. Perform at least two design iterations, but no more than five. You don’t want to fall into the design black hole. Make sure you stay true to your original goals and stick to your blueprints (wireframes), too.

A great looking site can be a challenge, but only if you don’t take a systematic approach to it. I know “systematic” seems to squelch creativity on the service, but it doesn’t have to. Just be smart about your designs. Oh, and cross-browser testing. Don’t forget the cross-browser testing!

Image credit.