Top 10 Tips for Creating Kick Awesome Websites

by Jonathan Longnecker

Thought we’d share just a few tips we’ve come across as we design each day. Seth Godin says lists are cool so I’m going to try one.

1. Think like a website. Try to keep in mind the limitations and strengths of the web when designing. For example, look for backgrounds that can repeat easily, or avoid designs that have a lot of overlapping transparency (at least until IE6 isn’t on so many computers).

2. Web typography. Your web typography will set your design apart from other studios. Study optimum line heights, widths and look for inventive ways to guide the viewer through your layout only using CSS rules. There’s something refreshing about only having 3 or 4 good fonts to work with. Flash replacement (sIFR) is alright, but don’t overuse it.

3. Subtle effects. A subtle gradient or shadow can add dimension without being tacky. Please keep the word subtle in mind, and only use when necessary. We don’t need shadows and gradients everywhere.

4. Variations of the same color. I like complimentary colors as much as the next designer, but not all designs have to be so polar. Again, subtle is the key here. Look for ways to implement your color, but at a different intensity.

5. Grids aren’t evil. There are lots of studies on grid based design, and generally I think they are a good idea. It helps you line things up and keep them organized. But hey, you gotta know the rules to break them, right? Pick your moment and break that grid for some visual interest.

6. Graphics and icons. Your icons or images need to be awesome. If you make them yourself, pay attention to detail and try to keep them uniform if you’re doing a set. If you can’t make them yourself, go buy a good set to use. Crappy icons or images will bring down the feel and professionalism of the site.

7. Details. Honestly, it’s all about the details. Sweat over them, pour over them. Work on it until it feels right, both as an individual section and when viewed with the rest of the site as a whole. It takes time, but it’s worth it. You’ll be happier with your work and your client will be, too.

8. Beauty can’t be skin deep. You can’t just make it look good, it has to be usable, too. Your grandma should be able to figure out how to use it. Don’t be too proud to change it if it doesn’t work the first time. Or if it can be better.

9. Design solves problems. We have our work cut out for us. Not only do we have a short time to understand an industry we’re probably not familiar with, but we have to satisfy the client and create a great user experience for the end user. Not to mention increase sales and traffic. Again, your job is not just to make it pretty. Make it useful. Solve the problems.

10. Code architecture. If we’re coding the XHTML and CSS, then a whole other discussion on design comes up (maybe another Top 10 list in the future). We are given the task of designing the architecture of the site from a code standpoint. The way we utilize HTML elements like header tags, blockquotes, divs, etc… has very important ramifications for accessibility and search engine optimization, and can help future proof the site for new designs down the road. Our design to the code that most people will never see can be almost as important as the part that they do.

April 08, 2008

Design

Comments

  1. 1

    Brad - Apr 09, 2008

    Very nice tips!  I found your page through thebestdesigns.com and I really like the designs you guys put out. Will definitely be checking back in the future.

  2. 2

    Paul - Apr 09, 2008

    Do you any website where to get good color combinations?
    Thanks

  3. {screen_name}

    Jonathan Longnecker - Apr 09, 2008

    Thanks for the kind words, Brad!
    Paul, I just usually “go with my gut” on colors, but I hear Adobe Kuler is pretty cool.

  4. 4

    Adam Kayce - Apr 10, 2008

    Here’s one that Darren Hoyt just turned me on to: ColourLovers. Awesome.

    And yes, I’ve seen Adobe’s Kuler - cool, too, especially the Monandrium (sp?) plugin.

  5. 5

    Richard Angstmann - Apr 20, 2008

    Another excellent article.  I am just getting back into he swing of things after a week or so doing other things…  I am about to embark on the first full web project I have done for many years,  from concept, layout and design to coding and cms implementation.  It will be challenging thats for sure, so thanks for the inspiration.

  6. 6

    Simon - Apr 21, 2008

    Hey there, nice list. I’m just building my first site (and I’m no designer nor anything like a web expert so far). But I’m looking forward to the first redesign and to apply some of this.
    Really nice work boys, you’re in my design rss folder from now on! smile

  7. 7

    SEO Consultant LA - May 06, 2008

    Hi,
    You have gathered nice tips about web designs. Very informative article.
    I can’t get innovative ideas like u.
    If you have more, pl post here.

  8. 8

    Web Design Company Los Angeles - May 26, 2008

    Fantastic work. I really appreciate it

  9. 9

    Jenny - Jun 18, 2008

    These are some great tips. I’ll surely keep them in mind with my new design!

  10. 10

    Reece - Jul 05, 2008

    I’m a student studying web design and those 10 ten tips are sure to help me! Cheer’s Guy

  11. 11

    Personalized Custom T-Shirts - Jul 09, 2008

    Its also best to get a designer who will be able to catch your vision for your website. Using free templates or even ready-made wordpress templates are never enough . The key is to make the website as reflective of your business’ culture and character as possible.

  12. 12

    Web design india - Jul 24, 2008

    Hey, you have provided such a good tips here.

    Thanks for explaining your views.

  13. 13

    jack - Jul 25, 2008

    nice article dude, thanks for sharing

  14. 14

    blogger666 - Jul 27, 2008

    This is such a good list to follow.

  15. 15

    Web Developing blog - Jul 30, 2008

    Being a web developer -not a web designer- I find very difficult selecting the best fitting typography on my personal designs. I always end up using the same old known fontfaces: Arial, Georgia, Verdana or Times New Roman. It gets really boring xD

    About the rest of your tips, I was already aware of some of them (and I still suck at designing… that’s why I’m a good coder hehe)

  16. 16

    website traffic - Jul 31, 2008

    Fantastic list.  Will be sharing this with a few folks grin

  17. 17

    Bobby - Aug 14, 2008

    Nice tips, Jonathan.  I passed these around to some guys in my office.

  18. 18

    Steve - Eightyone Design - Aug 17, 2008

    Great list - very helpful so thanks.

    Steve

  19. 19

    conseils emarketing - Aug 23, 2008

    Hello, do you know a website that explain which colour we might use for specific audience? I’m going to build a website for seniors, but I didn’t find a ressource that explain which colour suits the best for this audience.

    thanks
    greetings from France

  20. {screen_name}

    Jonathan Longnecker - Aug 23, 2008

    Hey Conseils, donR#8217;t know of any sites like that. It really depends on what segment of seniors, the colors of the company, etc. Lots of factors involved here, and not really a quick answer, unfortunately. Do lots of research!

  21. 21

    Rejuvenate - Aug 27, 2008

    Definitely no quick answer to that, but if you do find any information (website) on the subject of color targeting for an audience, etc. I would definitely be interested as well.

  22. 22

    Arizona Web Designer - Sep 03, 2008

    Remembering to pay attention to detail when creating logos is important…..it is also important to remember to ensure there is not enough too much going on to the point the logo design gets lost and becomes UNmemorable.

  23. 23

    AV - Sep 14, 2008

    I am in love with your quality articles! I wish I had time and patience to make my blog like yours. Thanks for the informative information you share. Bookmarked your blog.

  24. 24

    John - Sep 14, 2008

    Thanks, Very interesting read, you should be proud of your blog. I’ve been really enjoying checking up your posts from time to time. Looking forward to see your future posts smile

  25. 25

    Fender Guitar - Sep 15, 2008

    This is simply GREAT! Tour articles are more than awesome… Must admit that you are one of the best bloggers I ever saw.I am a guitar lover searching for cool stuff like this! Thanks for posting this informatve article with us.

  26. 26

    Moumita - Dec 11, 2008

    All very important points. I found the point Variations of the same color is most interesting and useful.

  27. 27

    Shiva - Dec 12, 2008

    Nice 10 Points. Thanks for reminding.

  28. 28

    Shruti - Dec 18, 2008

    Like Seth Godin your points are also cool. Thanks for telling them.

  29. 29

    Adam - Mar 24, 2009

    Another inspriational post .. good work lads

  30. 30

    Les - Apr 30, 2009

    Hi,

    Those are some really great tips you’ve put together. I agree that perfectionism with website design usually pays off.

    I have a few questions:
    What’s the main paragraph font you are using. Is it verdana? Something about it looks good. I notice for instance you aren’t using 100% white but instead a pale colour which is easier on the eyes.

    Would anyone like to take a look at my website (http://www.vertebr.ae) and offer some constructive criticism about the design and content? My sister normally does this for me but it’s not possible for her to look at it after every little update.

    Oh one more thing. This is the second time I typed this out. The first time I forgot to put the email address & I lost all the info & had to type it all over again. Some websites manage to store the details entered. You might get more comments if you can enable a feature like that.

  31. {screen_name}

    Jonathan Longnecker - Apr 30, 2009

    Hey Les, yeah it’s Verdana. And yes, subtlety is the key. You could probably soften up your site a bit with some dark greys instead of black on white. It’s a small thing but goes a long way for comfort reading.

    Not sure why it didn’t save your stuff if your forgot something. I’ll have to look into it. Thanks!

  32. 32

    Nicholas Maietta - Sep 11, 2009

    You just summed up my advice to others.. without my typical talking one’s ear off. smile

  33. 33

    tapan mandal - Mar 07, 2015

    i love u

Behold our Amazing Portfolio

Check it Out