Posts tagged #web design

Pixel Pushers: Design on the Cheap

This post won’t go over well with everyone in the design community. Some of them might get their Pantones in a wad over what I’m about to tell you. But by the end, the rest of you will be thanking me. And to the designers that hate this post, it's better that you know the rules then to hate the game.
Posted on February 12, 2013 and filed under Business, Design, Process.

What’s Your Website Design Saying?

As 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.

Posted on February 8, 2011 and filed under Advertising, Business, Design, Process.

Best Of The Web? No Such Thing.

So today I see this question poised on linkedin.com: "Which site has the best navigation design on the web?"

To that I respond:

In what capacity? It's easy to say that Amazon has some of the most robust commerce user-interface (UI) deployments online but it's also easy to say that Facebook does too from a social capacity (though hated by many). Facebook having recently hired Matthew Papakipos former director of engineering at Google will increase their attention to UI and data development as well. I think that hiring someone that not only understands UI but how it reacts in an a full operational environment (i.e. Google Chrome) was a really smart move on their part.

Then you can also make the case for 'design over substance' when it comes to navigation. Advertising agency Leo Burnett - has a interesting "exploratory" navigation, it's hardly useful (IMHO) but it's very cool. That being said, given your demo it might be the right approach. I would say that the tween' and teen markets are the most sophisticated as far as excepting UI learning curves. There's an natural tendency for game-makers to design increasing levels of complexity in all facets of game play. I see this as an almost intuitive understanding from these age groups. While the rest of us struggle to find the old tools in CS5 that we can't live without, the rest of the young world is finding it exactly where they thought it should be.

Back on point -- So is your market commerce based, app based, social based or simply a website intended to be added to an already preexisting marketing mix? These are important questions that need to be answered long before informational architecture and wire frames are even created.

The rule of thumb for most is one click with a high "K.I.S.S." (keep it simple stupid) factor. It depends on the kind of site you intend it to be – quick hit (Twitter) or long term profile based 'i cannot live without checking this site 10 times a day' (Facebook, YouTube, etc..) For sites that intend to increase dwell time such as Facebook, Flickr, YouTube (and in some instances amazon) the time-sink can be constructed by becoming progressively more complex the deeper you fall into the website. Much like game play previously discuss, you start with the standard login and thirty minutes later you've loaded five application on your profile and you're being attacked by zombies.

Then there's tier-based navigational structures such as ESPN and CNN. The home page is a sea of choices and possible interests, refining itself the further your deep linking takes you until, more often than not, you fall into a pretty specific article. Once you've captured the users attention at the basement of content they then eloquently advocate you share the data in one of a hundred ways.

Lastly, I think there's something to be said for sites such as most Wordpress layout (such as this website). Simple, standard horizontal or left/right hand vertical navigation is constantly still being adopted. Like it or not there's a reason why it's weather the storms. Will yours?

Posted on June 29, 2010 and filed under Design, Interactive, Process.

Google Browser Size: A Cool Tool For The New School

Website designers, statisticians and advertisers alike should take a quick peek at the new Google Browser Size tool. It's nice as a quick reference tool to see where various parts of your website are falling at it comes to not simply usability, but user attention.

"This is useful for ensuring that important parts of a page's user interface are visible by a wide audience. On the example page that you see when you first visit this site, there is a "donate now" button which falls within the 80% contour, meaning that 20% of users cannot see this button when they first visit the page. 20% is a significant number; knowing this fact would encourage the designer to move the button much higher in the page so it can be seen without scrolling."

More from the Google development team.

Posted on December 17, 2009 and filed under Interactive, Tools.