Web Design Critique #24: Adminizio
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 Adminizio.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
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 Adminizio
“Adminizio is a set of universal XHTML/CSS templates to be used as a user interface of a content management system, e-shop, intranet and other on-line applications. Adminizio is intended for all smart programmers and web designers, who want to make their job easier.”
Here is a shot of the homepage:
First Impressions
At a glance, I really like the design of this page. The designer strongly adhered to clean, corporate design principals with a few touches of visual flair.
It’s definitely a fairly typical design that doesn’t break any molds, but as is often the case for sites like these, there’s simply no need to create something drastically revolutionary. Simple and familiar might be an offensive phrase to some designers, but real world businesses often desire just that.
The Layout
I often like to simplify a visual layout to its basic shapes so I can really get a feel for the spatial and size relationships without being distracted by the visuals. Here’s a basic attempt with this page:
From here we can see that, for the most part, the layout is quite strong and well executed. However, I do spot a few small potential problems that I would consider addressing.
The first of these is illustrated below. The trapped whitespace between the edge of the main content box and the vertical container is quite tiny (about 13 pixels) compared to the general spacing seen throughout the rest of the design. This makes this area feel a bit claustrophobic. Interestingly enough, taking the design right to the edge would be fine in my opinion, but bringing it so close to the edge without following through just makes it feel a bit awkward.
This next one is a much smaller issue but still very noticeable and was one of the first things that caught my eye. Notice how the spacing on the right side of the paragraph seems too heavy; the edge doesn’t line up with the clean line created by the objects above and below it.
Normally, I wouldn’t be too concerned about closely mirroring the space on each side of a ragged paragraph, but the design of the page is so strictly justified that this just feels like an unnecessary violation. Stretching out this paragraph a little shouldn’t be too hard. In fact, playing with it a bit in Safari I noticed that the block flows much nicer if you drop or increase the size of this text by 10%.
The final layout issue I spot is the line about the cross-browser template compatibility. Here the designer has set up two strong columns of content that adhere to a strict visual block. But then this line comes along and breaks the layout by stretching into the other column.
My suggestion is to simply resize this line or break it into two lines so that it doesn’t have to break the current layout of the columns.
Nitpicking?
These layout issues may seem small, but to me they convey a bad message about how the page was constructed. They make it feel like the page was designed by one person, and then filled with content by another who didn’t quite understand the layout. This instantly communicates the impression of a modified pre-fab template (interesting since that’s exactly what the site is selling). Templates are great, but breaking established layouts can and should be avoided.
Download Link
One thing that continually caught my eye in this design was the arrow in the bottom right corner of the page. One one hand this is a good thing, but I think this is a poor execution of a good intention.
The word “download” is so far away from the arrow that they almost don’t seem connected. Further, the image of the arrow isn’t a link to download something. I noticed that as I was examining the design, I kept looking under that arrow to see what it was pointing towards! The graphics are in fact directing my attention, but they do so off into nothingness, which can have the undesired effect of making users feel like they’re done with the page.
I suggest placing the arrow next to the word “Download” so that the message is reinforced by the graphics, and vice versa. You might also consider making the arrow, the word “download” or both a link. A call to action is a sacred thing in marketing and on the web the action word often makes the logical place for a user to click. So if a user wants to download something, they’ll likely want to click the word “download” (though the name of the object they’re downloading is also a strong point of action, especially for users scanning the page looking for it). Perhaps just extend the link so that it covers “Download Free Admin Template.”
Oh, and definitely fix the spelling on the word “Template!”
Things Done Well
The points made above are among the only problems I see with the design. Overall, it’s a near-perfect execution that requires very few changes. I’d like to finish off the critique by discussing the strong areas of the design that we can learn from.
First up is the visual hierarchy. The homepage uses graphics and color sparingly to draw your attention to a few key places. This way the user reads this page is actually a carefully constructed path created by the designer. Since this page is selling a product, the product is the main highlight and the primary points of interest are screenshots of the templates.
As a visual strong point, I love the use of the spectrum near the top. This makes for a brilliant graphic that really grabs your attention. See our article on 25 Brilliant Uses of Colorful Spectrums in Web Design for more examples of this technique.
Another great aspect about this graphic is that is was tastefully repeated throughout the rest of the site. The designer chopped off and reused the top portion of that rounded box and placed it on the other pages for continuity. As I mentioned in our last design critique, repetition is a powerful tool (especially for branding) when wielded properly and this is a perfect example.
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 void of any harsh insults.