Line25

5 Must Know Web Design Polishing Techniques

Read the full post

There are a range of simple techniques that can be employed by web designers to add the finishing touches to a website design, giving an extra level of detail that makes the design jump from the screen. Jacob Cass takes a look at five of these polishing techniques that can be easily implemented in your next design project to give dramatic results.


First and foremost, this article is not for advanced web designers, as you will more than likely know these tips but you may be surprised by one or two tips, who knows?

These tips are focused on making your website more ‘polished’ which I will explain by outlining some techniques I have used to create this chocolate gift basket website.

1. Use Anti Aliased Text

Anti Aliased Text

Something that is often over looked when designing for the web is the use of Anti-Aliasing in your image based text. For those who don’t know, anti-aliasing is the technique of minimizing distortion artifacts. There are a few ways to minimize this distortion in your text but the best way is to make use of your ‘Character’ panel. You can choose between None, Sharp, Crisp, Strong and Smooth. The best way to see what works best is to experiment as different fonts and sizes will yield different results however the sharp setting usually prevails in most cases.

2. Use Subtle Contrasting Stroked Borders

Contrasting Borders

Something that really makes a difference in making a website pop is the use of 1 pixel stroked borders and lines. These stroked borders really add that extra crispness to the design as it gives extra contrast to the surrounding elements and gives the design more depth. Notice the zoomed-in screenshot above; see the inner purple lines that run alongside the inside of the boxes? You can add these 1 pixel borders by using your stroke option found in the ‘Blending Options’ or ‘Layer Styles’ panel. This technique also works great for large text.

3. Use Subtle Gradients

Subtle Gradients

Gradients are popping up everywhere in web design and for a reason – they add depth and real aesthetic to the design. Unlike print design where gradients seem flat, on the screen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot above? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen so to speak. Use the ‘Blending Options’ or ‘Layer Styles’ in Photoshop to create these nice subtle (emphasis on subtle) effects.

4. Use A Grid

Grid Layout

Although it may sound like basic knowledge, I know for a fact that not all designers use grids however they are extremely useful and in my opinion, vital. Alignment and spacing in web site design creates order, organizes the page and groups parts of the website for easy navigation. In the screenshot above you can see the guidelines in place ensuring everything is aligned (the grid template is from www.960.gs). Notice how the logo and all of the text is left aligned? Also, take note of the even spacing around the boxes and text. Use the guidelines in Photoshop to ensure all of your elements are aligned which can be done by dragging ‘rulers’ from your rulers tab. Press Ctrl+R to turn rulers on.

5. Use Levels, Curves & Unsharp Masking

Levels and Curves

In web design, photos, icons and images are usually quite prominent so you should ensure that they are of the utmost highest quality. Check the color balance, sharpness and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Photoshop’s ‘Levels & Curves‘ & ‘Unsharp Masking‘ tools. Click on the links provided to show how to do this – these functions go beyond the scope of this article.

Anyway, hope these tips help in polishing off your next website. Do you have any other not so well known web design polishing tips?

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Jacob Cass

Jacob Cass is a logo, graphic and web designer from Newcastle, Australia and the guy behind design blogs Just Creative Design, Logo Designer Blog and Logo Of The Day.

74 Comments

  1. Ionut Staicu says:

    The „Use Anti Aliased Text” technique is not one of the best idea. Especially when you have a difficult client which want same result in browser. How the heck you get THAT AA on windows PC’s? :|

    • Gaya says:

      With the magic of images I guess =)

      • Chad says:

        If you make it an image you’ll have to fight with the SEO people.

      • Brett D says:

        I like to do a simple css replacement for text/images. For example, most of my logos I do this way:

        h1 { background: url(path/of/logo.png) no-repeat; }
        h1 span { display: none; }

        Company/Branding Name – Descriptive text for search engine.

        What this does is when CSS is accessible, it will hide any text in your span while processing your background-image (ie. your logo).

        This is extremely effective for search engine optimization and Google won’t penalize this method (as long as its not abused) as this is more of an accessibility concern for standards-compliancy so you can properly identify your web site to all users.

        This has a few benefits:
        – Users only see your image or logo.
        – Spiders only see your text.
        – H1 elements get properly utilized for SEO.
        – Provide descriptive text for the search engine without cluttering the communication you intend for your user.

        Anyone have any thoughts to add on this?

        • Brett D says:

          my HTML didn’t go through:

          #header h1 { background: url(path/of/logo.png) no-repeat; }
          h1 span { display: none; }

          (div id=”header”)
          (h1)(span)Company Name – Descriptive text for Search Engine(/span)(/h1)
          (/div)

          lol, hopefully that works.

    • Jacob Cass says:

      This is best for text that will later become images. Maybe I should get Chris to add that.

    • Sharlene says:

      Actually, anti-aliased for sharp mimicks how IE renders and hints text.

    • Great tips here! Thank you for sharing. Anti Aliased Text is great for headlines but I think they should be avoided when mocking up normal text. If you intend to use HTML headings in your mockup and in the website, I would set Anti Aliased to none.

    • Using a popular image relacement technique might be the key. Something like sIFR.

    • Cosmin says:

      Ionut, that is intended for print design.

      It matters in browsers only if you use images. And no sane designer would leave a font with no anti-aliasing.

      @chad – “SEO” is over-marketed. Common sense web design is all you need for “SEO” purposes. CSS can help you place text below an image and shift it so it doesn’t appear…

  2. great tips, cheers! :)

  3. Gaya says:

    Nice article, these are the things I’ve learned from looking at designers at work. Great read.

  4. Ryan says:

    Great tips for the beginners. Thanks guys once again

  5. Mampranx says:

    Heyyy …, nice post. Many thanks.

  6. Mark says:

    Great tips – the AA puzzle always throws me!

  7. rahshia says:

    Nice tips – thanks for the post

  8. This is great stuff Jacob. Thanks for the article!

  9. Great post, with good tips.

  10. Tom says:

    Good tips.

  11. Joel Drapper says:

    Thanks Jacob!

    Great tips.

  12. Another quality contribution to the web design community, thanks for the tips!

  13. Tony Jose says:

    So lovely, great tips.

  14. OmarI Brandt says:

    Great advice, Jacob. Thanks for this.

    Re: Anti-aliased text, I’ve always found using AA text a better option than setting it to “None.” Granted there will always be that difficult client wanting to see an exact representation of the final product. However, I’ve found it easier to explain to that one client “mocks are not a 1:1 to the final product” than have a bunch of janky looking text in your design samples.

    • Semblance says:

      Yes, I agree with you. It actually bothers me personally to look at “janky” text on the screen while I work. When I send my first proof, I explain these kind of things.

  15. Navdeep says:

    Neat tips for any web design…

    @3drockz

  16. Luis Eduardo says:

    Those things are the principles of every web design, but its also really that we forget them sometimes, its good to re-read about it
    really great tips,
    thanks Jacob!!

  17. Art Webb says:

    Nice tips. I have always used Anti-aliasing but I will definitely try “sharp”
    @webb_art

  18. Brandon says:

    Great article Jacob.

  19. W3Planting says:

    I use most of them already, but not all :) Great tips for the beginners as well advance user :)

  20. Kev Jaques says:

    Surprised designers are not using sharp alias on text, for years adobe has not really improved their text rendering, to use the others (apart from none) is a waste of time. Horrible rendering.

    Here’s a tip, if you “have to” use text on buttons or images and you have a clear background it might be beneficial to knock up a quick html file and put in a small bit of inline css purely to create the text style you want and render it in a browser, take a screenshot then move it into PS. Of course don’t do that for print ;)

    The rendered text from the browser is far sharper than PS ever will be

    • Sharlene says:

      Agreed. I’m surprised designers haven’t used BrowserCam or ever peeked how things look in Photoshop/IE on a PC.

      Sharp = IE quite perfectly. You might as well anti-alias your stuff as sharp; easier on the eyes and it’s what people see.

  21. Howie says:

    There’s some good stuff on here, good to see different methods and ideas and how people are approaching their designs. Top post, cheers :)

  22. Uow, nice tips!
    I’m a brazilian web designer and always used this “Polishing Techniques”…
    Now, I favorited your blog!
    See ya!

  23. Very good tips and I generally use all of them besides the grid! I am thinking about using 960 from now on because it is highly recommended by fellow developers.

  24. Kayla says:

    Awesome tips, thank you! In one of my classes we’re focusing on #5, paying better attention to the quality of the images in design. I’m starting to see how that can really help.

  25. nice tips thanks for the article..

  26. Kp says:

    Looks good thanks.

  27. Re: AA text. It’s all fine that it’s a great tweak when think about design.

    One problem that we’ve experienced (and learned) from at our design bureau is that many clients don’t use AA text support in their browser.

    So, they see and approve a design with AA text, and when they see the live site in their browser, it doesn’t have the AA-niceness.

    This has caused some frustrations with our clients and today we always use the “None” property for all our text representations in webdesigns, thus eliminating lots of misunderstandings with the client.

    Just my/our learnings :-)

  28. wil waldon says:

    Good tips. AA text is great for images, but a lot of my clients browsers just don’t support it. But, it’s great for image text.

  29. Saylor says:

    Great Tips.

    It’s all in the details.

  30. T-Law says:

    Thanks for tips, but most of them I knew.

  31. Alis says:

    Stunning Article, thanks!

  32. I’ve applied this to my websites, and the results are great.

    Thanks for the post. Keep adding.

  33. tim says:

    Great tips, thanks a lot.

  34. Hinh anh dep says:

    Great tips, thank you:)

  35. Thanks for the tips. It’s the little, subtle things that make the biggest difference.

  36. Rob Mason says:

    Any views on how you should make the navigation elements line-up within the grid (horizontal rather than vertical). Is is a must have or nice to have or not important?

  37. Mike says:

    Sage advice; thanks for the reminder.

  38. Hardcore Guy says:

    Whats photoshop?

  39. Allen says:

    Wow,It’s very cool and fashion show!

  40. Fantastic tips!.. cheers.

  41. Union Room says:

    Great stuff here, only just started using grids myself and they do help a lot when spacing things out.

  42. Johannes says:

    “[...] they add depth and real aesthetic to the design.”

    That’s an interesting take on things – I’d sooner describe gradients as “fake” esthetics. While I’m not at all opposed to their usage, I’d say nearly anything else about design is more important than gradients.

  43. Amy says:

    Great advice!

    Amy

  44. Amy says:

    Useful advice!

    Amy

  45. Nice tips. My wife always busts my rocks for not doing the stroke. I like the stroke on the content panes also, as this provides the polish you are teaching.

    Thanks.

  46. this is a great article, im not aware of this before but because of this i can design more professional looking website. Thank you Jacob

  47. Good stuff, we use a technique broadly similar to that which Brett D describes to get the best of both worlds, aesthetics and accessibility/semantics.

Sorry, comments are now closed