Web Design Critique #27: Idea Arts
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is Idea Arts.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
About Idea Arts
Idea Arts is the personal portfolio Goran Ilic, a graphic designer with a lifelong passion for technology. His site showcases his recent work and the services offered by his company.
Here is a screenshot of the homepage:
First Impression
Idea Arts is, for the most part, an attractive site. There are some good ideas at work here that put the design off to a really strong start. The content is broken up into clearly defined sections and follows a logical progression. There are also some attractive graphical elements that effectively grab the user’s attention.
However, there is lots of opportunity for refinement. The design is solid enough that I don’t recommend starting over, but several aspects could use a little more attention to bring them up to par. Below we’ll take a look at a few of these.
Typography
The biggest problem that I see with this site is the typography. For starters, on the homepage alone we see around ten different variations of font size, width, style, etc. This is almost always a negative characteristic. It’s a good rule of thumb to keep your typefaces to around two to three variations per design.
Decide on typefaces that you can use on headers, sub-headers and body copy. Then make these consistent throughout your entire design rather than treating each section as an independent area that can have its own unique characteristics.
Also, really spend some time constructing the type to look attractive. This involves carefully planning options such as line-height, color and even your line breaks. All of these are pretty rough in the example below.
For starters, the light blue isn’t contrasting well with the background. This can easily be fixed by darkening up that color until it really separates from the light color behind it. Also, the smaller copy could use a little more breathing room. The line-height is simply too low and makes it difficult to read, bump this up a little here and the readability will increase greatly.
However, be careful because in other areas of the site the line-height seems awkwardly high. I recommend utilizing a free online tool such as Typograph – Scale & Rhythm (shown below) to help with the flow of your paragraphs.
Finally, watch your line breaks. Interestingly enough, not only do you have to watch for awkward breaks in the wording, you should be paying attention to the shape of the paragraph. The one above looks a little strange and could easily be re-flowed to something like the version below.
Whitespace
Another area of the design that could use some tweaking is the use of whitespace. As with typography, this can be tricky and is largely subjective. However, there are some basic principles that can guide you along the way.
For instance, any time you have a distributed collection of items, whether vertical or horizontal, try to first group the objects visually and then space them evenly. For instance, in the example below, the original version has disparate spacing between the icons and the text and the items that should be distinct are running into each other a bit. With a little bit of adjustment, we create a much clearer graphical statement.
The difference is subtle but very important. Notice how easy it is to tell which line of text goes with which icon. There are a few other areas throughout the design that could use a similar dose of spatial analysis. For instance, the text below nearly crashes into the end of its containment device. Always make sure to give plenty of space to elements like this.
As we saw with the previous issues, this goes both ways. The logo, for example, feels like it has too much whitespace built into the gap between the words.
Tweak, Tweak, Tweak
The moral of the story here is that even if you decide that you’ve created a great looking page, the devil is in the details. Never rush through the little stuff like typography and spacing. In fact, you might have to spend more time getting these right than hammering out your initial visual concept!
It’s definitely worth the time investment to finish off your site right. Consistently getting into this habit will make your designs feel much more refined and gives them greater resistance to scrutiny.
Your Turn!
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice devoid of any harsh insults.