logo
08
Jul

What Would Jeff Do?

Jeffrey Haddock is our favorite web designer. Sure, there are a lot of pretenders (haters gotta hate right?). You probably know a guy who used Squarespace to build a page. Well, we know a guy who dipped a Twinkie in coffee and called it tiramisu. Anyway, there’s pretenders, and then there’s Jeff. He’s the cat’s meow, the funky cheese, the top-shelf-gotta-see-it-to-believe-it dawg. Well, at least he is when it comes to web design.

We asked him to talk about design patterns that everyone uses but tend to get wrong. In other words, when it comes to web design, what would Jeff do?


Here are six web design elements you might be using improperly but, with a little Jeffrey-love, could turn right around.

1. Animated Icons

Simple use of animation on a website, whether it be icons, infographics, navigation, can be effective at quickly gaining attention or directing your visitors. Below is an example of how Google creates clean, subtle, sexy icon animations.

Source: Delightful Details

 

2. Repeating Backgrounds

Again, subtlety is what we’re going for. If you need to use a repeating background (which, quite possibly, you don’t), we recommend checking out subtlepatterns.com – a library of free, repeating patterns.

Screen Shot 2015-07-06 at 10.28.37 AM

3. Fixed Nav

Simple, and always there for your convenience.* By fixed nav, we mean as you scroll down the webpage, your navigation doesn’t move, allowing you to always quickly access other pages. If your nav lacks a little spice of life, try fixing it up! (Get it??)
*Keep responsive design in mind.

4. Borders

The keyword in this blog post is going to be “subtlety.” Small doses of these 6 design elements can go a long way in a website design. Today, you’ll see a lot of “Ghost Buttons” on websites. These buttons rather than being a literal button, are created with nothing but a border outline around the text. You can see one here 🙂  thekestrel.co

5. Drop Shadows

No, not orange, teal, blue, yellow, and green drop shadows like your grandma used to use. We’re talking about subtle shadows that create a realistic sense of appropriate depth (when necessary.) Examples below include a clip from Google’s Material Design guide (highly recommend reading the whole guide if you’re into that kind of thing) and of course, Apple.

Google’s Material Design: www.google.com/design/spec/material-design/introduction.html

Screen Shot 2015-07-06 at 2.01.55 AM

Screen Shot 2015-07-06 at 2.17.53 AM
Screen Shot 2015-07-06 at 2.19.09 AMScreen Shot 2015-07-06 at 2.20.42 AM

 

6. Gradients

Saved the best for last. We all know the DOUBLE RAINBOW gradients that our friends used on their logo when they created their own business. But gradients with complimenting colors can set the tone of a website when done right. They can be used to capture particular emotions from your visitors.

Apple frequently uses them well (another beautiful example is a digital agency out of Morocco called Agadir). They use full screen gradually changing gradients as you progress through the site. They won a couple web design awards, so if that’s not a free pass to go (subtle) gradient crazy on your website then what are we even talking about?

Screen Shot 2015-07-06 at 2.27.20 AM
www.symodd.com

 

Most of these improvements can be summed up in the maxim Jeff lives by – “Less is always more.” If you insist on having a go at designing your website, for the love of all things beautiful, please follow Jeff’s basic rules. Even better, give us a holler and let’s talk about getting your new website professionally designed and built by the team at the Kestrel Co. Unless you’re specifically wanting a Looney layout, you’ll be happy you did.