Getting people to point their browsers to your webpages is critically important, but equally as critical is being able to keep them there and create for them a positive and rewarding first impression. This can be done in several ways, but in this post I’m going to be focusing on design and what NOT to do.
This is a descending list with an ascending importance as you read. It’s not comprehensive, but just filled with some of those website designs I encounter that make me cringe for one reason or another. This is not meant to be a knock on anyone or their style of web design, but is instead intended to be a “look out for these common design mistakes” kind of post. And I’m certainly not completely immune to my points either so know that some of this comes from personal experience as I’ve painted my web pages for both pleasure and profit.
So here we go…
6. Huge Headers: Now let me be clear that there are absolutely certain web design scenarios that require such a thing, but as a general rule of thumb in the year 2014, a big fat logo surrounded by a 500 pixel high Header that fills half the screen of your MacBook Air is not ideal. Headers are meant to “cap” your pages, showcase your brand and sometimes provide navigation, but this can be done quite effectively in 100 pixels or less of screen consuming Header height. Let your logo have first dibs on the eyes of your visitors, but then make sure the rest of your site has a turn before the scroll bar comes into play.
5. Careless Color Schemes: You have to be mindful about how you pigment the pixels of your webpages. Be consistent with your colors, make sure they complement each other (think “color palette”, not “finger painting”). And just because you like the design doesn’t mean the majority of your visitors will find it pleasing to the eye. Some people like to paint their bedroom walls fluorescent pink, but that doesn’t make that an ideal color for a coffee shop. So unless your site is one of those personal journal blogs that is only intended to be read by you and your cat then be sure to keep your wacky color preferences consolidated to bedroom walls only.
4. Poor Padding: This is all too common. You go to read a blog post on someone’s site and find that the content feels squished. Or even worse, parts of the pages are overly padded and other’s barely spaced out at all. The bottom line is that the way we space out the different areas of our website determines how distracting or seamless our site conveys to the visitor. We want our Header, Navigation, Sidebars and Footer to frame up our main content in such a way that it essentially disappears when the reader is consuming the information we provide. So space out your content in a way that’s consistent and appealing to the eye.
3. Terrible Typography: Gone are the days when a website can get away with Arial all around. With the abundance of beautiful, professional and wonderfully creative web fonts available today (See how easy you can utilize the hundreds of Google Web Fonts using our Dynamik Website Builder there’s just no excuse to litter your letters with low-budget “letter-texcture”. Some major no-no’s are:
- Too many font types which create confusion and clutter.
- Inconsistent font-family implementation. A good rule of thumb is to use the same font-family for all headings, for all content and for all navigation (i.e… 2 to 3 different font-family’s in total). Of course this isn’t always the case, like using a unique font-family for your main site title, but overall it’s a good way to keep your site visitor from having a font style seizure.
- Inappropriate font-size that creates an unnecessary barrier between your reader and your well thought out content. So be sure to make certain that 10px never applies to the letter size of your blog posts and that 50px would never even think to make its way over to your Sidebar titles.
- Too little line-height. What’s the use of trying to get your font-family and size dialed in if your lines are squished together like a Micky Dee’s McMuffin?! Do your sentences a favor and give them a healthy space-bubble. Your readers will thank you.
- Too many letters per line. There are of course correct terms for this, but the concept is simple. Based on your font-size and spacing you should have a certain width encompassing your content. So if you have an 800px content area it’s probably ideal that your text is quite large and/or spaced out. Otherwise your reader will feel like they have to take a water break after each line of text.
2. Dismissed Details: I’m not going to get too specific here other than to say that anything that is clearly incorrect and/or unintended regarding your site’s design causes an unnecessary interruption to the flow of the visitor’s site experience. So make sure you’re dotting your i’s and crossing your t’s, both literally and figuratively speaking, as your ability to tend to the details of your site showcases your ability to tend to the details of your business, clients, lifestyle, etc..
1. Dated Designs: I got started in the whole WordPress blogging, web design, and theme/plugin development thing back in 2008 and let me tell you that things have changed quite a bit with regard to design. Shadow effects and gradients were all the rage and quite overdone, to say the least. But these days, especially with the advent of Retina/HD displays, we find things like “Flat Design” to be much more appealing to the eye as it crisply fills our browser window. So as much as you’ve been dying to try out that new “call to action” button shadow technique in Photoshop, please be advised: a simple 3 pixel bottom border can get the job done while refraining from the otherwise 5 year flashback.
I’m sure I’ve missed several important points with regard to web design missteps so feel free to add your own in the comments below. I’m sure we can all benefit from each other’s insights as none of us our immune to website creation blind spots.
Follow & Share:
