There’s no shortage of expertise here at Ungerboeck HQ. Same goes for our digital services crew. So, we figured, why not spread the wealth here and there and maybe start a conversation we could learn from while we’re at it? Thus, today marks the beginning of a new series of posts we’re calling the Best Practice Exchange.
From time to time, we’ll put together a little roundup of our tricks of the trade for web design, development, online marketing and the like and post it here as a starting point for what we hope will become a lively and useful discussion among our fellow fans of all things digital.
First up, our resident graphic design guru, Angie Golio, offers up her short list of web design do’s and don’ts. Take it away Angie!
We begin with the Don’ts:
Don’t: Make Users Think
I need to preface this “don’t” with another: Don’t mistake this as a slam on the intelligence of users. Users are not dumb. They are busy. They’ve also been conditioned to expect instant gratification and are dealing with a near constant stream of information that competes for their time and attention. It’s out of this realization that I make my first recommendation, which is to ensure that you are designing with these facts in mind.
I’m not the kind of gal that’s going to list urls or include screenshots here of sites that are doing this poorly, but you know one when you see it:
- Busy color palette
- Widgets aplenty
- Things that blink
Your landing/home page has 50 milliseconds to communicate who you are and what you want the user to do. If your eye is drawn to the wrong spot on the page or doesn’t even know where to settle in the first place, the jig is up.
Don’t: Forget About Content Blocks
It’s not sexy, but measure and leading can make or break a site. No matter how good your content is, if it’s uncomfortable or difficult to read, no one will bother.
Don’t: Always Design Mobile First
This bit of advice goes against the grain of what most other professional designers and design sites would advise, but it’s something I’ve found to be true for my process and that I think is somewhat unique to the events industry. While the trend is certainly headed the way of a mobile majority, plenty of users for venues, events and associations are still desktop devotees. Given that, I think it still serves best to design desktop first, while keeping mobile in mind. This way, you can plan for things to fold in naturally but still keep a logical hierarchy for all devices. It’s always easier to take away than it is to add.
Now, on to the Do’s:
Do: Structure Pages Using a 12 Column Grid
Having just advised you to design desktop first while being mindful of mobile, my first “Do” puts my money where my mouth is. Using a 12 column grid to bring order and consistency to the way information is presented makes it easier for the user to follow information and easily locate what they’re after across all platforms. It’s especially useful as a framework for effective responsive design that will structure information in a way that works well on mobile devices.
Using relative widths that are defined using percentages instead of pixel values ensures that the grid keeps its proportions at all sizes. All columns grow or shrink to the same degree. However, when the width of the grid increases, the height increases.
Do: Keep it Simple & Consistent
Back to my earlier point about the scant amount of time you have to get your message across on your website, it’s a good idea to use every available trick in the book to make it easy and obvious for users to know what’s important.
As far as design is concerned, that starts with proper H tags to help users focus on key information. Additionally, you can use pull quotes, block quotes and images. Designing styles for buttons and links also keeps pages consistent and calls to action, obvious.
Do: Look at Your Competitors
As designers, we all like to think we’re incapable of anything but truly original work. This is generally a good thing, except when it keeps us from using a really good idea as a starting point. Before you build your site, don’t miss out on the opportunity to learn from what is and isn’t working for your competitors. If you find something great, there’s no reason not to use it as inspiration for your own unique version.
Bonus! Do: Check with your Programmer
Don’t let the “bonus” fool you, this one’s a must. Always be sure to check with your developer and/or programmer before sharing mockups with the client to ensure what you’ve dreamed up is technically sound and in scope. You don’t want to be the person who has to tell a client you can’t deliver on something you’ve already sold them on.