January 11, 2010 13

How to: Create Slick Designs with Detail

By in Web Design

Web design is about more than just making things look nice on screen — it’s about creating interfaces that are functional, easy to use, as well as aesthetically pleasing. There are a number of visual techniques that can be used in web design to create the correct hierarchy, tell the user where to click, and how to use an element of the page. Some of which include contrast, color, size, spacing, and more.

This is basic web design terminology, but it is only a good understanding of these techniques that can create beautiful design. While there are many different trends and styles in web design, one recent trend is the “slick and polished look.” In this article we’ll look over how accomplishing this look is all about the subtle details, and how to examine these extra bits of polish and use them in one’s own designs.

What is Web Design Polishing?

When creating a web design, designers will go through many phases: research, planning, wireframing, designing main elements, and also polishing the final details. Often times, the final and smallest details are what matter the most. Polishing is the last stage in web design where the designer works out the minutest details for the biggest impact.

An image from a popular post on web design polishing points out some areas where an example design had been polished for a better example:

Essentially, it’s all about those 1px strokes, subtle gradients, and focus on saturation, color, placement, and more.

Why Does the Polish Make the Biggest Difference?

We live in a 3D world with depth, texture, materials, variations in color, and so much more. Web interfaces that can provide 2D references to our 3D world can be easier to relate to, and therefore more attractive. Simple details that make a box appear to have a bit of realness too it via drop shadows, texture, reflection and more can do wonders and most certainly make a bigger impact than a solid color rectangle on a screen.

Below is an example of how adding a bit of polish to clarify and add depth to a single button can make a world of difference:

To the first button we’ve just added a 1px stroke in a darker blue. This is a bit of polish, but it really doesn’t make anything stand out. However, in the second, the stroke is darker (for more contrast/clarity), there is a drop shadow, a lighter inner-shadow for highlight, a subtle gradient, and the “About Us” also has its own shadow/inner-shadow for a letterpress effect.

How-to

There are a number of techniques for adding subtle details to a design that can make a huge difference. Many come from various designers and just simply reviewing those designer’s tips can help you pick up on them, and learn to create your own way of adding details. Here are some of the best articles, tutorials, and walkthroughs on the web for adding web design detail:

  • Crafting Subtle & Realistic User Interfaces
    “The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.”
  • Design Is In The Details
    “Want to take your website design from good to great? Sweet! (I thought so!) Now go grab a magnifying glass and take a close look at some of your favorite websites. Chances are the things that make a site great are all those little details that you might not notice at first glance. Use these 10 design tips help you take your site to the next level!”
  • Subtle Details: Taking Web Designs to Another Level
    “Have you ever looked at a web site and immediately been impressed with it’s design? Then you take a closer look and discover what really makes it amazing. It’s the subtle details. Some designers are great at including this in their designs. These types of designers are border line perfectionists and aren’t afraid to make full use of the zoom tool and 1px brush size in Photoshop. In this article, we will look at several ways subtle details are being used in web designs to take them from great…to amazing.”
  • 5 Must Know Web Design Polishing Techniques
    “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.”
  • Elements of Great Web Design: The Polish
    “When I put together designs, I usually do so in two phases – Layout and Polish. During the layout phase, I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage – the Polish – I go over the design and adjust colors, type treatments, shadows, layers, and generally clean it all up. In this first of a series of tutorials on web design, we’ll be looking at the Polish.”
  • How to Create Inset Typography in Photoshop
    “In this beginning-level design tutorial, I’ll show you how to apply a beautiful and super-easy text treatment in Photoshop: the inset text effect. It’s also often called the letterpress effect because it looks similar to text created by a Letterpress printer.”
About: Kayla Knight:
Hello, my name is Kayla Knight, and I am a web designer and developer based in Iowa, Usa. I focus on user-centric, beautiful, simple, and functional web design. You can check out my portfolio here: KaylaKnight.com.

Tags: , , , , , , ,

13 Responses to “How to: Create Slick Designs with Detail”

  1. Andrew says:

    I always wanted to know how to design the silky and shiny interface… It is easier than I thought, attention to detail is the key! thanks for sharing.

  2. Angus says:

    Wow, I often aim for the polished look and have realized that slight gradients help a lot, but I’ve never really gotten it down to an art. This is a really nice, simple tutorial that explains it very well.

  3. This is a great tutorial! It’s often the most subtle of things (gradients and drop shadows) that make elements appear real.

  4. WRC says:

    The site is just super, I will recommend to friends!

  5. Socco says:

    Not sure that this is true:), but thanks for a post.

  6. Ivan says:

    Hi,
    blog.mytemplatez.com – da best. Keep it going!

  7. and loans says:

    Saw your site bookmarked on Reddit.I love your site and marketing strategy.Your site is very useful for me .I bookmarked your site!

  8. Cool Sites! Maybe i will let my friends know about this!

  9. UpsereFef says:

    I enjoyed reading your blog. Keep it that way.

  10. core yarn says:

    How wonderfull. I’ll be back. Thank you!

  11. I like the writing relevancy of your website and it will a pretty decent job of presenting the info.