Blog

Best Practice Exchange: Web Design Do's & Don'ts

Editor’s Note

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.

Here are a few examples of the good, the bad and the ugly when it comes to measure (the length of a line of type) and leading (the space between the lines of type in a body of copy):

Measure Leading
measure leading

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.

grid

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.

consistent

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.

Related Blogs

We’ve all been there – spending long hours in the office in the days and weeks before an event. The West Florida Chapter of Community Associations Institute knew that situation well, until they started using Ungerboeck Software to plan their events. “When
“Change is the only constant.” – Heraclitus, Greek philosopher Successful organizations are always growing and changing. They see change as a natural and expected part of the growth process. Sometimes change can cause upheaval and frustration
There is indisputable evidence behind the value of in-person meetings. One report from ASAE called “The Value of Face-to-Face Meetings”
Oh, Google Glass. I just can't make up my mind about you. On one hand, I have to live in this world, and you're a bit unsightly (pun intended). I am interested to see what kind of looks I could get walking around with you on, looking like a teenage orthodontic

Wir verwenden auf unserer Website Cookies, um Ihr Erlebnis auf unserer Website so benutzerfreundlich wie möglich zu gestalten. Cookies sind ungefährliche kleine Textdateien, die auf Ihrem Rechner abgelegt werden und die Ihr Browser speichert, sodass Ihr Browser beim nächsten Besuch wiedererkannt wird. Wenn Sie diesen Hinweis mit "OK" bestätigen, erklären Sie sich damit einverstanden. Nähere Erläuterungen zur Cookie-Nutzung finden Sie in unserer Datenschutzerklärung.