Enhancing Design Through Details

Details – they're said to either make or break a design. As it turns out this statement is all too common in the design industry for a good reason. A detail-savvy designer has the instinct to tell whether a design is close to being finished or not, and is critical in presenting work that really shines upon client presentation.

Enhancing Design Through Details


They’re able to see the foundation and feel of the design, but know that extra polishing is in store. But how does one go from 70% to 100% and still stay sane? After all, we’ve all been at 70% and wanted to call it a day. In this article I will present some considerations you show follow in the design process that will aid in cultivating that critical eye and make your designs client-ready faster than you’ve imagined.

Experiment

Has there ever been a time when you thought to yourself "I should have thought of that" or "I wish I had gone with that idea after all?" Chances are you can eliminate these thoughts in your head by taking the time to experiment. It's at this stage where you're able to think critically to communicate your client's message in a strategic way by simply creating as many options for the design as possible.

Draworkshop
Moodboard

You'll find through experimenting that the use of an element in one design actually works beautifully in another, and vice versa. This often leads to what we refer to as a "Happy Mistake" where a useable solution unintentionally presents itself by simply playing around. And don’t be afraid to shelve an idea you’ve had originally – in this stage refinement is essential so the more ideas you generate the more possibilities there are to work with.

Know What Your Clients Want

Before starting in a design program, it’s often best to have a firm understanding of the look and feel your client is going for. This can be achieved through the creation of Moodboards.

  • Clients love moodboards, because they let them see exactly what your planning and how their site is shaping up before you even start properly designing.
  • Moodboards help you gain a complete understanding of what you are trying to achieve design wise. They also keep you inspired, and you can create as many as you like for any one project.

Moodboarding is a quick, efficient and cheap way of furthering your design skills and keeping clients in the loop.

MoodShare
MoodShare is an online tool that allows you to make and share multi-user collaborative mood boards.

Moodshare

Choices

There are always constraints we have to work within for any project. Maybe minor, maybe not. Try to look at working within constraints as an opportunity to do something different and get out of your comfort zone. Let constraints stretch your creativity, not squelch it.

With you’re client’s constraints in hand, you’re now free to develop a visual toolkit complete with colors, type styles, photo and illustration styles. Get into the habit of keeping it simple, as a complicated solution will overwhelm the client. Once the visuals are established, move on to the prototype process as the visual details have been established.

Ways to Break Outside the Norm:

Break the Grid

N Design Studio
By extending a design element of illustration outside of a DIV, you add an unexpected point of interest. This dynamic concept is achieved on the website for N Design Studio, whose illustration extends up and into the menu.

N Design Studio

Emphasis

YessBMX
Direct users to content by making your headlines bigger. Your eye is immediately drawn to these bold typographic treatments. Such typography works on the website for YessBMX – which creates a sense of dynamism with 3-D typography in space.

BMX

Add Dimension

Pascal Altena
Make things pop by adding subtle gradients and contrasting lines. Gradients add a layer of dimension and take your design to a whole new level. In the website of Pascal Altena, dimension is achieved through the use of shadow to bring the paper forward.

Pascal

Other ways of achieving dimension include:

Using a 1px line: Placing a 1px line along the edge of another element makes it pop. Anytime you have a lighter color next to a dark color, the lighter one will appear closer giving the illusion that there is a raised edge.

Image Spark
The designer of Image Spark, used a 1 px line along the top of the nav bar and around the bottom of the search field to make the edges pop. Anytime you have a lighter color next to a dark color, the lighter one will appear closer giving the illusion that there is a raised edge.

Image Spark

Image Spark 2

Simple Gradients: Gradients are simple effects to create and can achieve varying results such as the illusion of a light source or depth. The key here is to keep it subtle and not have it overpower the design.

Shadows: By using drop shadows, you simulate depth on a flat, 2-dimensional medium and improve the way your site is experienced in powerful ways. The new capabilities of CSS3 allow you add these shadows with the text-shadow property.

Metalab
Metalab uses a drop shadow on their text, lifting it up and giving it some subtle dimension. The result is text that is more enjoyable to read.

Metalab

Navigation: Navigation plays a crucial role in guiding visitors from one page to the next. Why not spend a little more time finessing the details to enhance it’s overall usability?

Delibar
The navigation for Delibar uses a shadow to highlight the current-selected link. This reinforces where the user is on the site, and adds visual interest. Consider the same navigation but with the shadow taken away (as shown below). Does it have the same effect to you?

Delibar Navigation

Delibar Navigation 2

Best Practices

Placement

Placement of elements can play an important role in the usability of a website. By placing your social media channel buttons above the fold, and in some cases in the right sidebar - you’re instantly grabbing their attention more so than if you placed them in the footer. People tend to see items above the fold first, so this practice can contribute to the overall success of your social media strategy.

Another alternative is to add the GetSocial social media bar to the side of your blog or website. This floating social media box is compatible with leading web browsers and ensures your social networks are always visible and accessible even when the user scrolls down a page.

Social Networks

Make it Bleed

Curious Generation Group
This print design concept can be carried over to web design too. Simply extend an image to the side of the page or border. As you can see on this website for the curious generation group, shapes bleed off the side, adding visual interest.

Curious Generation Group

Background Image

Born in the Barn
Having a great background image for your site is something that will add visual interest, but not distract from the main content. Born in the Barn uses macro photography to give the viewer the sense their playing cards right on the hay.

Born in the Barn

Move it Move

Ecopop
Adding subtle animation to your site is another great way to add visual interest and engage users. There are several JavaScript libraries that make it easy to add simple animation to a website. Egopop's illustration shifts according to your mouse movement. This subtle aspect creates enough visual interest and doesn’t overwhelm the visitor.

Egopop

Stay Consistent

Once you’ve established a style guide that will form the basis of your design decisions, stick to it. If you choose to pad your paragraphs with 30px of space below, but use 20 pixels in larger text areas, make sure the comps reflect those decisions. If you decide to use different fonts, sizes, and styles online than in print, make a note of which set should use which guidelines. These decisions show the client your professionalism and attention to detail.

Style Guide

Here are some examples of style guides:

Detailed Development

Coding and development are an extremely important portion of the website building process. Design and development should work in harmony, where neither is taking a back seat to the other. Great development can take your design to a whole new level. Clean coding that pays attention to the smallest design details, while catering to the web aids in providing a dynamic user experience.

Developers can circumnavigate the difficulties of developing for the web by adding HTML5 and CSS3 to their coding languages. Both were designed to make things a bit more intuitive and consistent among different coding languages (i.e., javascript, php, etc)

HTML5 + CSS3

There are tons of articles about the pair of these and how they are really changing the way of development. Take a peak at some of these articles to help you out.

Rob Edwards
HTML5 tricks have been used on the website of Rob Edwards that took it from 0 to 60 in seconds. Coding is a central piece of this website, which pays extreme attention to detail.

Rob Edwards

Antoine Wette
Subtle movement on the website of Antoine Wette brings it to life. The site, made with HTML5, still remains simple and intuitive in the process.

Antoine Wette

Re-evaluate

Don’t hesitate in stepping away from the design to take a walk, eat lunch, or give yourself a 15-minute break. Once you get this much-needed fresh air, approach your design again. What are your first impressions? It’s here where you can make changes to the design based on those thoughts. That cool element makes your design look amazing, but does it really serve a purpose?

Magnify
Image credit: Enc Photography

Be Your Own Critic

When you’re close to done it’s time to step back and look at the design from the perspective of your client. Are there parts that would potentially provoke questions or concerns? Then have a solid answer for the decisions you’ve made.

Reflection
Image credit: ayoumali

If you have no consideration for the client's own brand or needs, you end up with a design that's all you and doesn't accurately represent or sell them, which was the primary goal. Besides, an unhappy client likely won't recommend you to anyone anytime soon. But don't forget that your style and skills are what make you the designer and what you were hired for too. Aim to create something both the client and you are equally madly in love with.

  • Remember you should be able to answer to yourself and to the client why you designed something that way rather than for the sake of it or making it look visually appealing. Above all, keep the User’s Experience in mind in explaining your answer.
  • Present the client with comps you feel best solve their issue. It’s your job as a graphic designer to separate the good from the bad, and to show your clients only those ideas that are strong enough to work for their businesses.

Does Perfect Exist?

Does a perfect web design even exist? It’s important to note that opinions differ and to one person something may be perfect, while to another it can be seen as mediocre. To be ‘perfect’ also implies there’s only one way to doing things, which is adverse to the way one approaches a web design. It’s a better idea to strive for the best possible solution. This is usually achieved through solid goals and devising a realistic plan to implement those goals. Don’t let your dreams of a perfect solution cloud your plan to devise the best possible solution for your client.

  • Often times, the goal of any given website isn’t to showcase pretty pictures and wonderful typography, but to convey a message to the user.
  • While producing a web design, it is important to remind yourself that taking a practical and logical approach to a problem is better than an overly creative and "artsy" approach.
  • Instead of blindly borrowing a hot technique or trend, ask yourself how the site users are going to benefit from your decisions.
  • Google is an example of a perfect design due to its simplicity. The search engine is one of the most used ubiquitous and most used sites in the world. Google never becomes about the design, but rather about the results and the places it can take you.

Showcase

Mutt Ink
Mutt Ink uses a rather unique design. It is well thought out with plenty of white space, a subtle hand-drawn look and some texture.

Muttink

Digital Visions
Digital Visions uses a slight texture, vertical lines and a subtle background image very effectively.

Digital Visions

The House Media
The House Media makes excellent use of color, beveled borders, and transparent borders around images.

The House Media

The Wayward Irregular
The navigation menu at The Wayward Irregular has a nice hover effect that includes a sunburst in the background.

Wayward Irregular

Mom & Popcorn
Mom & Popcorn has a retro/vintage style design with a lot of color and texture. The navigation menu is rather unique.

Mom and Popcorn

Storenvy
The design of Storenvy uses a nice illustrated background and quality design in the buttons, borders and details.

Store Envy

Cube Scripts
The right side of the Cube Scripts layout has a nice 3D effect.

Cube Script

Ride Four Ever
Ride Four Ever has a colorful, grunge-style design.

Ride Four Ever

Life's Not Fair But My Knickers Are
The design on Life’s Not Fair But My Knickers Are uses a drop shadow that gives it a subtle 3D feel.

Lifes not Fair

Design Critique
Design Critique is full of details, from the header design to the 3D element of the featured post area.

Design Critique

Summary

Detailed work takes time and effort on your part. Before committing pen to paper, give time for your imagination to run free – whether it’s making dinner or walking into the grocery store. The right details often appear at these quiet moments before you attempt design.

Of course you may be under a tight deadline and don’t have time to sit around and let a design percolate, but make sure during the process you step back and consider the design in terms of the client. Only after you’ve put all inspiration and influences into the design will everything fall into place.

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.