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.

  • http://dev.iamntz.com Ionut Staicu

    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? :|

    • http://www.gayadesign.com Gaya

      With the magic of images I guess =)

      • Chad

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

      • http://www.lucki.us Brett D

        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?

        • http://www.lucki.us Brett D

          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.

    • http://justcreativedesign.com Jacob Cass

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

    • http://www.tinytank.net Sharlene

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

    • http://www.raymondselda.com Raymond Selda

      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.

    • http://www.parisvega.com/ Green Graphic Designer

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

    • Cosmin

      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…

  • http://blog.callumchapman.com/ callum chapman

    great tips, cheers! :)

  • http://www.gayadesign.com Gaya

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

  • http://www.search4toffee.co.uk Ryan

    Great tips for the beginners. Thanks guys once again

  • Mampranx

    Heyyy …, nice post. Many thanks.

  • http://webturist.net WebTurist

    Great tips /

  • http://www.tak5haka.net Mark

    Great tips – the AA puzzle always throws me!

  • http://www.linendoll.com rahshia

    Nice tips – thanks for the post

  • http://www.crbarnett.com Chris Barnett

    This is great stuff Jacob. Thanks for the article!

  • http://www.cbedon.com Cristhian Bedon

    Great post, with good tips.

  • http://tomdoerr.net Tom

    Good tips.

  • http:/joeldrapper.com Joel Drapper

    Thanks Jacob!

    Great tips.

  • http://toddgiannattasio.com/ Todd Giannattasio

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

  • http://www.pivotknot.com Tony Jose

    So lovely, great tips.

  • http://www.brandtmediagroup.com OmarI Brandt

    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.

    • http://www.semblance.co.za Semblance

      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.

  • http://dezinerfolio.com Navdeep

    Neat tips for any web design…

    @3drockz

  • http://www.exxcorpio.com Luis Eduardo

    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!!

  • http://www.tutsearch.net Art Webb

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

  • http://www.bdesign-studio.org Brandon

    Great article Jacob.

  • http://www.W3Planting.com W3Planting

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

  • http://multilayerdesign.com Kev Jaques

    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

    • http://www.tinytank.net Sharlene

      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.

  • http://www.logicdesign.co.uk Howie

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

  • http://www.rhodesign.com.br/blog/ Rodrigo Filardi

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

  • http://www.serenedestiny.com Nicole Foster

    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.

  • http://theypi.net The YPI

    awesome

  • http://webitect.net Kayla

    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.

  • http://www.joyoge.com/ joyoge designers’ bookmark

    nice tips thanks for the article..

  • http://www.backcountrygeneration.com/webdesign.html Kp

    Looks good thanks.

  • http://www.designit.com Henrik Hedegaard

    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 :-)

  • http://www.wilwaldon.com wil waldon

    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.

  • http://www.twitter.com/austinsaylor Saylor

    Great Tips.

    It’s all in the details.

  • http://iniwoo.net T-Law

    Thanks for tips, but most of them I knew.

  • http://www.fairybliss.net Alis

    Stunning Article, thanks!

  • http://www.Webdesignquote.ca Web Design Quote

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

    Thanks for the post. Keep adding.

  • http://tbmedia.co.uk tim

    Great tips, thanks a lot.

  • http://xemanhdep.com Hinh anh dep

    Great tips, thank you:)

  • http://www.design-works.com Web Design Bay Area

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

  • http://spongeproject.co.uk Rob Mason

    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?

  • http://www.littledogdg.com/ Mike

    Sage advice; thanks for the reminder.

  • http://mustfindher.blogspot.com Hardcore Guy

    Whats photoshop?

  • Allen

    Wow,It’s very cool and fashion show!

  • http://www.nextgen-design.co.uk web design leeds

    Fantastic tips!.. cheers.

  • http://www.unionroom.com Union Room

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

  • http://www.forrykt.com/ Johannes

    “[...] 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.

  • http://www.corporatewebsolutions.net/ Amy

    Great advice!

    Amy

  • http://www.corporatewebsolutions.net/ Amy

    Useful advice!

    Amy

  • http://nwds-ak.com Alaska Web Design

    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.

  • http://www.sonnydesign.com Web designer Philippines

    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

  • http://www.ne-web.com ne – web design newcastle

    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.