How To Make Your Next Website Design Pop

How To Make Your Next Website Design Pop

by

We independently research, test, review, and recommend the best products—learn more about our process. If you buy something through our links, we may earn a commission.

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.

sponsored message

Adobe Creative Cloud Discount

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


sponsored message



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.

sponsored message


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?

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

sponsored message


Spread

Title

3rd Page

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

About Jacob Cass

Jacob Cass is a brand designer & strategist, educator, podcaster, business coach and the founder of JUST Creative, an award-winning branding & design consultancy that doubles as an industry-leading blog. Get in touch.

Meet our expert writers and contributors

On JUST Creative, you’ll find advice and insights from design & tech experts to help guide your creative journey. Meet our team & contributors.

78 thoughts on “How To Make Your Next Website Design Pop”

  3. 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.

  4. 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! 😀

    Cheers
    Neil from uni

  5. 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.

  6. 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).

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

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

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

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

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

  13. 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.

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

  15. 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

  16. 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.

  17. 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.

  18. 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.

  19. 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

  20. 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.

  22. 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.

  23. 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.

  25. 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.

  27. 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…

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

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

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

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

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

  46. 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.

  47. 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.

  48. 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

Comments are closed.