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.
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.
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.
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 is an online tool that allows you to make and share multi-user collaborative mood boards.
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.
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.
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.
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.
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.
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 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.
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?
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?
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.
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.
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.
Move it Move
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.
Here are some examples of style guides:
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.
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.
- Why We Should Start Using CSS3 and HTML5 Today
- HTML5 and The Future of the Web
- HTML5 Tutorials and Techniques That Will Keep You Busy
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.
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.
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?
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.
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.
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.
Digital Visions uses a slight texture, vertical lines and a subtle background image very effectively.
The House Media
The House Media makes excellent use of color, beveled borders, and transparent borders around images.
The Wayward Irregular
The navigation menu at The Wayward Irregular has a nice hover effect that includes a sunburst in the background.
Mom & Popcorn
Mom & Popcorn has a retro/vintage style design with a lot of color and texture. The navigation menu is rather unique.
The design of Storenvy uses a nice illustrated background and quality design in the buttons, borders and details.
The right side of the Cube Scripts layout has a nice 3D effect.
Ride Four Ever
Ride Four Ever has a colorful, grunge-style design.
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.
Design Critique is full of details, from the header design to the 3D element of the featured post area.
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.