Just Creative

I’m Jacob Cass, the founder of JUST™ Creative. I’m a multi-disciplinary graphic designer, working with clients all around the world. My specialty is logo & brand identity design. JUST™ Get in touch.

Love


How To Make Your Next Website Design Pop

Posted on

Bubblegum - Photo by Porcelaingirl °

Web design is one of those areas that when done right, you know it. It looks polished, refined and generally, just well done – it pops! There are a number of ways that you can achieve this and that is by ‘polishing’ off your design. Here we look at some of the ways to do just that.

1. Layout The Fundamentals

Before you go about making your website pop, you first must have your basic fundamentals in place. By this stage you would have done the research, laid out your website appropriately and done most of the basic design work: but you have not yet done ‘the polish’. In this tutorial we are looking at some techniques put in place for a chocolate delivery website; however, these techniques can be applied anywhere.

On another note, you may also like to read about the logo design process for the UKE logo you see below.

Layout The Fundamentals

2. Check Alignment & Spacing

Alignment and spacing in web site design creates order, organises the page and groups parts of the website for easy navigation. In the screenshot below you can see the guidelines in place ensuring everything is aligned (the grid 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.

Alignment & Spacing

3. Apply Anti-Aliasing To Text

Something that is often over looked when designing for the web is the use of Anti-Aliasing in your text. For those who don’t know, anti-aliasing is the technique of minimising distortion artefacts. There are a few ways to minimise 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.

Anti Aliased Text

4. Add a 1 Pixel Stroke

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 below; 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’ panel. This technique also works great for large text.

Pixel Border

5. Add Subtle Gradient Effects

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 below? 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’ in Photoshop to create these nice subtle (emphasis on subtle) effects.

Gradient Effects

6. Add Subtle Drop Shadows

Used in conjunction with the gradients and stroked borders is the use of subtle drop shadows. Once again, these shadows add a new depth and dimension to your design as it makes the different elements on the page play against each other so that they pop out at you. Notice in the screenshot below; the logo, text and boxes all have subtle drop shadows applied to them which break them away from the other elements. You can use the Photoshop ‘Blending Options’ to achieve these effects – but make sure you use them in moderation.

Drop Shadow

7. Have a Hierarchy & Call to Action

When someone first visits your website what is the first thing they are going to do? Is there a clear hierarchy of what to read or do first? What is the purpose of the site? These are all questions that you should have considered at the start of the project however now is a good time to go back and reflect on these decisions. Can you adjust the colours, size or position to achieve better results? Notice in the screenshot below that the call to action on the UKE website is the ‘Pick a Basket’ button which is placed conveniently after the main opening slogan.

Call to action

8. Colour Correction & Sharpening

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’, ‘Unsharp Masking ‘ and ‘Curves’ functions.

Levels Curves

9. Less Is More.

In web design, the old saying goes, “less is more” (in most cases). After completing your web site design, have a break and come back to it.

  • Is there anything that you can remove, fix, replace, move, change or edit?
  • Does one element take up to much space or draw too much attention?
  • Are there too many colours?
  • Does the site balance?
  • Is there consistency?
  • Can I make use of more white space?

10. Summary

Next time you set out to design your next website you can ask yourself these questions:

  • Have I got the basic fundamentals in place?
  • Can I improve my alignment or spacing?
  • Have I used the appropriate anti-aliasing?
  • Can I sharpen my images or text with strokes or borders?
  • Can I give more depth to the page by using gradients or drop shadows?
  • Is there a clear hierarchy with a call to action?
  • Are all of the images colours corrected, balanced and sharpened?
  • And last of all, ask yourself this: does the website pop?

11. Recommended Web Design Reading

and for lots more recommended web design reading, just search “web design” on Smashing Magazine or view the Interface section on PSD Tuts.

Pictures of Layers Magazine

This tutorial was originally written for Layer’s Magazine May / June edition. Below you can see a few quick snaps of the above article in Layers Magazine.

Layers Mag

Spread

Title

3rd Page

Have you got any other tips on how to make your next website design pop?

SUBSCRIBE: RSS, Email, Twitter, Facebook



Related Premium Imagery


76 JUST™ Creative Comments

  • Callum Chapman Reply

    Great tutorial, and congrats with getting published in layers magazine! I would buy a copy, but I can never find it in the shops near me!

  • Livia Reply

    Am I imagining things or did you post this before? about a month or so ago?

  • Jacob Cass Reply

    Callum,
    It is not in the shops here in Australia either, this got sent out to me due to my article. It’s a great mag though.

    Livia,
    You may be mixing this up with the UKE logo design process? I have linked to that article at the top of this article too.

  • Neil (from uni) Reply

    Hey Jacob,

    Really great design, just wondering what CMS you use for a site like this? As soon as I get this semester over I want to start my own blog yeehaa! :D

    Cheers
    Neil from uni

  • Jacob Cass Reply

    Livia,
    I actually remember what you are talking about now, I posted a shorter version of this article over on the Line25 blog a few weeks ago.

    Neil,
    The UKE site is based on HTML & CSS with a shopping cart system. This JCD website uses WordPress.

  • Abbas Reply

    Looks like a good concept Jacob. How did you get on translating this into a website?

    Did you use image headers or did you reproduce them using one of the basic web fonts. It would be a shame to loose the Rockwell (if it is Rockwell).

  • Jacob Cass Reply

    Abbas,
    The coding I outsourced (I prefer to focus on design + I am not a strong coder) and have got two versions, one with text and one with it as an image. The website isn’t online yet so we will see what the client chooses.

  • Catherine Cantieri, Sorted Reply

    This is awesome. It’s so helpful to see it step-by-step like this. Twittered it!

  • Nate Reply

    Hey Jacob! That’s great that you were published in Layers! Congratulations on an outstanding accomplishment.

  • Abbas Reply

    Good man Jacob. Outsourcing is the way to go. I think if you could add coding to your list of talents then the world would be your oyster!

  • James Reply

    Great article jacob, really like the solution you came up with.

  • Raph Reply

    Jacob,

    I have been following your site for a while and noticed that, like in this article, you have had articles in a one or two magazines. Can you share with everyone how you ended up in the magazines…did you approach them? did they approach you? What about the process? How different is writing for magazines versus writing for blogging?

    Keep up the great work.

    Cheers

    Raph

  • Livia Reply

    Jacob,

    I think I am even more confused now! I don’t think it was the Logo one. You could be right. It was probably your article on the Line25 blog. I remember the grid overlay part. Read too many blogs, getting confused.

    In any case I forgot to say great job. Useful article, and a nice looking website!

  • Mandy Reply

    Another great bit of advice – thank you. Before I even start designing I find it really helps to get inspired by performing a simple brainstorm and search for reference materials. Then before I jump onto the computer I start to sketch out some layouts, thinking about the content. Once my concept is secure in my mind I start in Photoshop to create a moodboard to establish a look and feel. Finally I artwork the final concept adding the ‘polish’ right at the end.

  • Jacob Cass Reply

    Nate,
    Check for another tutorial in next issue too, and the one after that.

    Abbas,
    I know the basics but I don’t really enjoy, so I guess that is one of the reasons I haven’t gone done that path.

    Raph,
    Good questions… in regards to the magazine articles, they approached me and after the first one, I asked if I could do another (and another). They have generous commissions too so that is another bonus. The process usually consists of you pitching a concept > them approving > you writing > you send article to them > they edit > then it is published about 2 months later (there is a huge lead time). For magazines, it is more about “you” (as in the reader) so you have to talk more directly to the audience.

    Livia,
    Yeah it does get a bit like that, anyway thanks for your praise.

  • Tec Z Reply

    Hi folks here we have got a great website which has really shared a great information regarding the web designing, I thank you for the information.

  • Luis Eduardo Reply

    I also read your article on LINE25 and I would like to read it on Layers Magazine, I love your UKE webdesign, but i couldn’t see it on line, why????.

    I already know these advices but I don’t use it as often as I’d like, sometimes i forgot something but this article come just on the best moment cause I am doing a webdesign.
    Thanks Jacob

  • Jacob Cass Reply

    Luis,
    The UKE Website isn’t online yet, no. I’ve supplied all of the files to them so it really is up to them now… I guess they will put it up when they are ready.

  • Rolam Shahin Designs Reply

    I remember reading something like this over at Line25, which was also written by you, but still, these are some very good points. Nice post mate, as always.

  • catherine Reply

    good article…nice concepts have been used

  • Michelle Reply

    Beautiful design for sure. The only thing that concerns me about this is that many designers don’t think about SEO for the client and embed text into the graphics, leaving nothing for the search engines to “read” on the site. With the usage of non-standard fonts, these graphics have to be made into images, thus the client is losing a good deal of potential hits because of this not being text based.

    Will be curious to see how the coder puts it together.

  • Andrew Tarex Reply

    I like the website simple and fast. I think this is very important, like google’s. However if it is only for the personal favorite, it could be colorful and strange.

  • Jacob Cass Reply

    Michelle,
    Text can also be incorporated into the page, even at the bottom of the page however in this particular case, both versions were given, one with images and one with standards compliant text. Thanks for your comment.

  • bebopdesigner Reply

    Great advice! Thanks for sharing. cheers!

  • Michel Reply

    Many of the tips i knew already. Did i had the all on one page? Now yes! thanx!

  • James Ballard Reply

    I have always liked simple and subtle. The 1 pt rule/border is awesome. Definitely the most useful technique that I have learned. I would have never thought to outline anything as it would be cheesy.

    Hmmmm…

  • Kanchan Rai Reply

    I’ve read it twice and find it very very useful & practical!!

    Though simple, these steps really make a bland website pop!!

    Cool Article!!
    Thanks a lot!

  • Patelligence Reply

    Wow, what a great example for laying down the fundamentals. Great eye for details, which is basically essential in website design.

    Thanks so much for posting this!!!

  • TND webdesign Reply

    Really interesting and nice way of describing the “polishing” process!

  • Sujit Reply

    Nice Posting!!
    Descriptive information on polishing with photographs!

  • FW Design Reply

    Some really good points here, definatly worth following, Thanks

  • bulduktrans Reply

    Great tutorial, and congrats with getting published in layers magazine! Bookmark now

  • hermes kelly bag Reply

    Wow, what a great example for laying down the fundamentals. Great eye for details, which is basically essential in website design.

    Thanks so much for posting this!!!

  • Matt Reply

    Great step-by-step guide to checking over a website in the final stages of design. Thanks for sharing the wealth of info!

  • Alec Reply

    These are some great tips. It took me a while but i’m starting to learn that it’s the little, subtle details that make all the difference in a design.

    Thanks!

  • Website laten maken Reply

    Nice tutorial! Thanks for sharing this!

  • GD Geddie Reply

    Practical, informative tutorial. Tips that can be put into practice immediately. Thank you for sharing.

  • Orangewood Reply

    Thanks for the usefull post!

  • Jason Reply

    some great info on here, really helpful, just what I needed

  • Web Design Reply

    Very nice design concept. Should be very helpful for new designers and also for experienced ones of course.

  • NANO WEB TECH LTD Reply

    Hey Jacob,

    I love the way you think…!!!

  • Plan Web Reply

    Very practical and informative, just need to put that into practise our end now! thanks

  • Web Design Portsmouth Reply

    Very useful information. Some good points on design and layout that usually get taken for granted. This will definitely help others, myself included. Thanks for sharing.

  • Web Find Reply

    We see so many localised businesses that have such awful looking websites and they really don’t understand why they aren’t succeeding online, truth is someone has created something that doesn’t work when really the basics of websites online are there for all to see.

  • Web Find Reply

    We see so many localised businesses that have such awful looking websites and they really don’t understand why they aren’t succeeding online, truth is someone has created something that doesn’t work when really the basics of websites online are there for all to see. Just to say Jacob, you have a brilliant blog here and great to see someone talking a little sense! all the best Adrian

  • Steve Reply

    Thanks for posting these instructions! Really helpful


Submit A Creative Comment

Your email address will not be published. Required fields are marked *
Please use your real name and do not use keywords. All comments are moderated by myself and I reserve the right to edit or not publish your comment. Thank you!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 


© Copyright JUST™ Creative 2007-2013. Designed by Jacob Cass. Powered by Wordpress using the Skeleton Framework. Fonts served by Typekit. Site hosted by (mt).