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 myRepono, a website backup service.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $34 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 myRepono
“One website is being hacked every 5 seconds, don’t put off backing up your website data! myRepono is an automated website backup solution. In five easy steps you could be protecting your data and ensuring your web site’s stability.”
Here is a screenshot of the homepage:
Though there is definitely room for improvement, there’s a lot that this website gets right. The designers have done a great job and have given us some good content to learn from. Let’s chop up the site piece by piece to see how each section fares.
Fluid Layout
I think the layout is one of the things that they’ve really done a great job with. It’s nice and clean, with the content distributed in a logical fashion. Most everything has a strong alignment and plenty of whitespace has been used to prevent clutter.
Also, I like that the layout adapts to the browser window size. There are definitely specific widths where it seems to be at an optimum, but overall it’s good to accommodate as many users as possible and that’s what they’re trying to do here.
Header
The header isn’t a bad piece of work. The alignment is strong with the content below, and I kind of like how they split up the navigation into a primary and secondary menu. This clearly sets the most important content apart and prevents a huge navigation menu.
I’m not crazy about the orange on top of the gray, but I asked around and a few people seemed to really like it, so it really just comes down to a matter of opinion.
I will say that the contrast could definitely be improved by either making the gray color lighter or darker. The current lightness values of the two colors are too similar in their current state. Here’s an example of two alternatives that would perform better in the area of contrast.
As you can see, both a darkening and a lightening of the gray helped immensely. If you’re having trouble understanding what I mean by contrast, lightness, etc., try taking your work to grayscale to see how much contrast you have between your different areas of color. This will really help you see what I mean when I say that the two colors simply aren’t different enough to contrast properly.
Header Font
Another thing that I think could be improved is the font used for “myRepono.” On it’s own, it might be fine but on this page filled with bold text, the single extremely thin font feels out of place. Repetition is the key to working in a random element like this. If you want to use this font in your header, you need to work in some equally thin typefaces elsewhere on the page. Otherwise, switch to something a little bolder.
Slider
The slider works well here. You have three big chunks of information that need to be shown but are done so in a compact and clean fashion.
I also really like that the slider has a pause button. This is a vital function that’s often entirely looked over by most developers (including me). It’s really nice to be able to take this moving information and stop it to read at your own rate and move it along only when you’re ready. This small feature gets you a big bump in usability.
For some reason, I’m not crazy about the transition and to be honest I’m not exactly sure why. Maybe the easing on the animation is a little awkward (too much stutter up front), maybe the animation is simply too long or the area is too wide, or maybe it’s all of the above.
Sometimes when you have such a wide area, the slider is better when it goes up and down rather than side to side. This can be seen in action on this page that we saw in last week’s critique. Bottom line, it works as it currently is but could feel smoother.
Content Area
I’m not sure that I have any complaints whatsoever about this portion of the page. There’s a lot of information here but it has been presented very well with minimal but attractive icons and a clearly delineated layout. I like the sidebar boxes on the right and how there are only two. Designers often get carried away with sidebars and cram them with content until they cease being helpful in the least.
It’s a lot more difficult to put something like this together successfully than it seems and I think the designers deserve a lot of credit for pulling it off nicely.
Footer
I have two thoughts about the footer. First, I think they may have gotten a little carried away with the whitespace here. The footer simply feels huge and empty. I wouldn’t shave off tons of height but a little bit off the top and bottom would go a long way.
Secondly, those are some tiny tiny social icons. I stared at this site, made notes, took screenshots; all without even noticing that these were present. If I can look at your page for twenty minutes and not notice something, then a typical user who will browse for maybe ten seconds surely has no hope of seeing them.
If these are in any way important, bump up the size a little. If they aren’t important, lose them and leave this information for the contact page.
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.
Comments & Discussion
8 Comments