How To Make Your Next Website Design Pop
Published on Tuesday, May 19, 2009 – 4:00 pm
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.
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.
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.
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.
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.
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.
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.
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.
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
- How To Elevate Your Website Design Process & Results
- From PSD To HTML: Building a Set Of Website Designs Step By Step
- 10 Principles of Effective Web Design
- 5 More Principles of Effective Web Design
- 10 Web Design Usability Issues You Should Be Aware Of
- Applying Devine Proportion To Your Web Design
- 8 Useful Tips To Help Your Website Convert
- 10 SEO Rules for Designers
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.
Have you got any other tips on how to make your next website design pop?
Tweet
Related Articles:
Sponsors:
62 Responses
to “How To Make Your Next Website Design Pop”
25 Trackback(s)
- May 19, 2009: kushtee » Blog Archive » Making your next we design POP
- May 20, 2009: Digital Media Buzz - How To Make Your Next Website Design Pop | Digital Media Buzz
- May 20, 2009: Web in Review for May 19th, 2009 | Madyson Designs
- May 22, 2009: How To Make Your Next Website Design Pop | Design Newz
- May 23, 2009: The River Current - Polsihing Your Web Design
- May 24, 2009: Daily Digest for May 23rd | Didier LAHELY
- May 24, 2009: Baffle! inc. » Links of the Week 1
- May 25, 2009: mitshit = ??????????? » Blog Archive » Sunday Summary #004
- May 25, 2009: Arbenting's Weekly Inspiration and Best of the Web #6 | Arbenting
- May 25, 2009: Arbenting's Weekly Inspiration and Best of the Web #6 | Arbenting
- May 29, 2009: Article - How to make a popular web design | neonResources
- May 29, 2009: Weekly Links | Shaun Preston
- Jun 4, 2009: How To Make Your Next Website Design Pop: Web Design Tutorial
- Jun 6, 2009: Colorrage Blog » Blog Archive » Best of the Web - May 2009
- Jun 15, 2009: Best of the Web - May 2009 | rapid-DEV.net
- Jul 2, 2009: Best of the Web – June 2009 | Grumpy Git . org | Photoshop
- Jul 5, 2009: Best of the Web – June 2009 | Desinine
- Jul 12, 2009: How To Make Your Next Website Design Pop: Web Design Tutorial « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
- Jul 12, 2009: How To Make Your Next Website Design Pop: Web Design Tutorial | Squico
- Sep 12, 2009: 9 Things You Can't Forget When Designing a Blog - Barker Design | Graphic & Web Development
- Sep 15, 2009: Tudo sobre wordpress
- Sep 15, 2009: 9 Things You Can't Forget When Designing a Blog « Tudo sobre wordpress
- Nov 8, 2009: 9 Things You Can’t Forget When Designing a Blog | Tutorial9
- Mar 24, 2010: Arbenting's Weekly Inspiration and Best of the Web #6 » Arbenting - The Act of Being Creative
- Jul 22, 2010: Designers, why do you do what you do?
Callum Chapman on May 19, 2009 said:
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 on May 19, 2009 said:
Am I imagining things or did you post this before? about a month or so ago?
Edher on May 19, 2009 said:
Bookmark!!!
Jacob Cass on May 19, 2009 said:
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) on May 19, 2009 said:
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
Jacob Cass on May 19, 2009 said:
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 on May 19, 2009 said:
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 on May 20, 2009 said:
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 on May 20, 2009 said:
This is awesome. It’s so helpful to see it step-by-step like this. Twittered it!
Nate on May 20, 2009 said:
Hey Jacob! That’s great that you were published in Layers! Congratulations on an outstanding accomplishment.
Abbas on May 20, 2009 said:
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 on May 20, 2009 said:
Great article jacob, really like the solution you came up with.
Raph on May 20, 2009 said:
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 on May 20, 2009 said:
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 on May 20, 2009 said:
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 on May 20, 2009 said:
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 on May 20, 2009 said:
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 on May 21, 2009 said:
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 on May 21, 2009 said:
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 on May 21, 2009 said:
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 on May 21, 2009 said:
good article…nice concepts have been used
Michelle on May 24, 2009 said:
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 on May 25, 2009 said:
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 on May 25, 2009 said:
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 on May 25, 2009 said:
Great advice! Thanks for sharing. cheers!
Michel on May 28, 2009 said:
Many of the tips i knew already. Did i had the all on one page? Now yes! thanx!
James Ballard on Jul 2, 2009 said:
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 on Jul 3, 2009 said:
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 on Jul 9, 2009 said:
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 on Jul 9, 2009 said:
Really interesting and nice way of describing the “polishing” process!
Sujit on Jul 31, 2009 said:
Nice Posting!!
Descriptive information on polishing with photographs!
Mino BuG' on Mar 24, 2010 said:
Good tutorial,thanks
FW Design on Apr 3, 2010 said:
Some really good points here, definatly worth following, Thanks
Miracle Studios on May 6, 2010 said:
Nice tutorial,thanks
bulduktrans on Jun 1, 2010 said:
Great tutorial, and congrats with getting published in layers magazine! Bookmark now
hermes kelly bag on Jul 4, 2010 said:
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 on Aug 24, 2010 said:
Great step-by-step guide to checking over a website in the final stages of design. Thanks for sharing the wealth of info!