What’s Your Website Design Saying?
Tuesday, February 8, 2011 at 8:54AMAs a business owner you know what looks good within your industry's vertical. You think you know what your site should, and most definitely should not look like. That doesn't mean that the design is working. As bloggers, designers and social media professionals, we all talk a lot about content and design. Every five years or so a bunch of people pick up rakes and light torches and scream, "We don't need graphics anymore!" Then no one comes back to their lifeless website. But what happened is they must have thought their words were that of the chosen. It's a balancing act to say the least, but creating a 'reason for return' is an essential key to winning in business.
What makes good design are visuals that enhance your brand, articles, posts and overall messaging. Fortunately, these practices can be broken down into some core functional components.
Navigation Styles:
You might say, "What does navigation have to do with design?" Just like laying out a print ad or billboard, the navigational foundation is the driving force behind your usability and therefore the most import decision in your approach to your website.
Left-align primary (or main) navigation can say to the user "I'm all about best practice", it can also say "I can't get away from antiquated thinking." Yes, it's what we all grew up with on the web and sometimes it really is the best option, just make sure your designers show you alternate scenarios before approval.
Right-align primary navigation can say "The content is king!", it can also say "We didn't want to left align the nave' but couldn't think of anything better." Growing with the popularity from bloggers, the right aligned and multi-column layout became a fast favorite for thin sites that wanted to lean on articles, archives and advertising space. It's still a good option, but only for sites that don't require showing prominence to other sub navigational areas.
Horizontal top primary navigation can say, "Efficient use of premier space above the fold", it can also say "We've got a ton of stuff to pack in underneath this thing and needed all the room we can get!" Most feature-rich sites use horizontal navigation to establish primary structure and then often build left and right handed "sub-navigation" beneath it. The important thing to watch out for if you use horizontal navigation is 'drop-down' sub navigation. Are they cluttering up your content to the point of illegibility? Make sure navigating your sight seems fluid.
"Grid Style" navigational compartmentalization can say, "We're foreword thinkers prepped for tablet and mobile" and it can also say "Good Lord this looks cluttered I have no idea where to go!" Many are prognostication that grid formats and content "modules" will boom in popularity for their ability to fill pages as they expand and retract in horizontal and vertical executions for more iPad and tablet environments.
Layout Theme - Symmetry vs. A-Symmetry
In layout styles for websites there are 'fixed' and 'elastic.' Fixed simply means that the size ration is going to be consistently at said width and the columns are a defined (or coded) width. Elastic layouts take into account variable screen sizes and expand and contract applicably to meet the need of the "screen real estate", or size of the user's monitor.
Symmetrical designs (often grid style) make for a visual balance. Apple.com's home page for instance is almost always symmetrical giving equal weight to elements from the left to the right hand side. Apple uses the LARGE PANORAMIC image at the top to denote importance of subject matter.
A-Symmetrical designs (left and right hand navigation) use areas of the website for copy or larger images, then make smaller subordinate areas for things like sub-navigation and advertising. This visual draws the user to these portions of the page often referred to as "target areas" or areas of prominence. Amazon.com is a master of creating visual flow from their most recent product down into your profiled item selections.
So what do these pages say? Well think of size as volume. Larger areas of images and content are going to demand the most attention. As most blogs use A-Symmetrical design pushing the posts as the matter of importance. While larger business and services often opt for a more equal visual appeal. I would put it to you that if you have many items (products or services) that require equal and respective importance, then a symmetrical design is more than likely the best direction. One last point, if you do decide to gravitate to an a-symmetrical design, make sure that the prioritized content is speaking to your business goals.
Technology Usage
Simply stated, the day of the big giant flash open is over. Still seeing this is a testament to the egos of the company not taking into account platform adoption like iPad viewing and mobile. Additionally, it's important that your technology, albeit video or motion graphic, be as compliant as possible to the myriad of potential platforms that view it. For motion, use HTML5, for video stick with tried and true platforms like YouTube and Vimeo. Naturally, if you're writing reviews of beta technologies the sky's the limit, but remember when building your social graph it's best to stick with the platforms that offer the most traffic base and compliancy.
Colors & Fonts & Sizes
Consider colors, fonts and sizes the clothing you would wear to a pitch. Are you conservative and intellectual? Well then you might be a palette of grays and blues with Times New Roman and clean, amply spaced leading. Are you WILD, BOLD and YOUNG!? Well then you might be red and orange using CSS Font Face to embed some larger than life fonts like Aachen or ClarendonBT.
And just like that tie on your neck, the purse on your arm or the "hot gold" Dr. Marten's on your feet, colors speak volumes about who you are, what you sell and the friends that you keep.
Ask yourself:
• Who are we as a company?
• What is our attitude?
• Who is our demographic?
• How loud is our voice?
• What is our perceived level of quality and professionalism?
All these can be expressed with very fundamental tools for expression. If your company doesn't already have a brand standards manuals now might be the time to establish this level of thinking BEFORE spending money on a website or marketing materials.
Photography & Graphics
A picture says a thousand words right? So is the photography on your site saying, "Hey look who bought a digital camera at Wal Mart!" or is it saying "We're here to make your company as successful as we intend to make our own." And then of course there's the middle of the road in the land of (often) inconsistent stock photography. The thing to remember is this, your imagery must enhance the content, not distract your customer. If it's a blog post then a cell phone pic might be the most appropriate way to tell the story. But if it comes down to showing your product, the best money you spend might be on the images you sell.
Voice, Consistency & Timeliness Of Content
What is the "voice" or the "tone" of your content? Just like music, the way you and or your co-authors write your blog says a lot more than you think. If the content is to set a mood make sure that it does, but pay off your posts consistently. Differentiation may be right in some cases, but people that bind to your content and become loyalists are looking for two things: consistency and timeliness.
All of these elements combine to make the harmony of great design. No one thing will make or break a blog or website. Just be sure that whatever visual and conceptual expectation you are going for is being paid off throughout.
Mobile Ready?
Another remaining point should be is how your design looks on a mobile device. More than likely after all that time and money it will resemble a postage stamp addressed from hell. Make sure that your design team, agency or interactive firm show you a "MOBI" execution. This will speak volumes to certain consumers that run their life from the palm of their hand.
Testing, Testing 123
Lastly, take time to analyze your user data at 30, 60 and 90 days out. If it’s growing progressively then don’t change a thing and continue to monitor. If it’s failing to meet your expectations you can always address design changes and test it again. Pre-launch testing, heat mapping and surveys are also a great way to maximize on your investment. Design “optimization” is a necessary evil when it comes to making the most from your site and if steadfast you’ll find the winning combination.
So have you put the proper planning into your site? Share this article with others that it might benefit and comment below if I can answer anything else.
