Web Design Critique #84: RoyalSlider
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.
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.
Shopify, Tumblr & More
Icons, Vectors & More
Logos, Print & Mockups
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 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.
“Meet the new version of most popular slider on CodeCanyon. Since July 2011, there were 4637 licenses sold. We have received, 5 of 5 stars rating based on 378 reviews.”
“Every slider template is responsive. Take a look at it in your mobile device or try to resize your browser to see the effect.”
Here is a screenshot of the homepage:
I love diving into websites that are really focused like this because we can develop a clear set of goals and the weigh the success of the design against those goals.
So what’s this site all about? It’s sole purpose is to sell a product: the “RoyalSlider,” which is actually an extremely popular item on CodeCanyon. With this mini site, the developer can really go into great details about how awesome the slider is and what it does.
As you can see in the screenshot above, he’s done exactly that. The site itself is very attractive, so from a purely aesthetic standpoint, I won’t have much to say other than “great work!” However, from a content organization standpoint, I think we could see some improvement.
Given that educating visitors about this product is a primary goal, I think we can restructure some of the information to better suit our needs.
Let’s zoom in and take a look at a few specific areas to see how we can make some improvements.
The header is definitely the best part of the page. The designer used this area to show off his product, which is perfect, especially given that it’s so gorgeous and highly functional!
The design here and elsewhere is super minimal. White, gray and black are the primary colors that fill the page with a bold, eye-catching red used for areas that merit special attention.
The navigation is easy to use, the logo is simple but attractive, and there’s an obvious link to purchase the item on CodeCanyon. There’s honestly not much I would change here.
The one thing that I would consider is throwing a bold headline on top of the two paragraphs on the right. Right now the slider draws so much of your attention (a good thing) that your eyes stay anchored to it without necessarily making the journey to the small text on the right.
Seeing a chunk of big, bold text, almost no matter what it said, would help pull the user’s attention over to the important information in that chunk of content. Here’s a quick and dirty mockup of what I mean:
The entire rest of the page is occupied with pure text: over twenty paragraphs! Each of these is brief, nicely formatted and contains a header, which makes the page fairly easy to browse through.
Despite the fact that the text is nicely formatted, I think this area could use a major facelift. The main goal with this step would be to break up all of this text content so that it’s easier to sift through and more attractive to view. This can be accomplished with a combination of two different techniques.
Add Supporting Imagery
The first thing that I’d like to see in this area is some images. Any time you have large chunks of text content, it’s a good idea to work in some sort of visuals to help carry that content and add some visual interest to the page.
Twenty-one paragraphs is a lot of content and without some visual aid you’re going to lose your readers. Always remember that people browsing the web have ADD, we rarely focus our attention closely on one thing.
Your visitors are reading through Twitter, checking their email and updating Facebook, all while looking at your site! If you’re going to compete for attention in that environment, you have to bring more to the table than a few paragraphs.
One easy solution would be to partner some of the paragraphs with thumbnails. The headlines here, such as “Touch-friendly” and “Video support,” lend themselves perfectly to thumbnail previews so this shouldn’t be too difficult.
Create Clear Sections
The next strategy that I’d like to see here is to take all of this text content and divide it up more clearly into distinct sections. Right now there are two sections, but they’re not really visually distinct in any way.
I’d recommend dividing the content into at least three or four sections, creating larger, more prominent headlines, and possibly varying the background color of each section slightly to help them stand apart (alternate between white and gray).
One site that I think pulls off the advice that I’m giving here quite well is Squarespace. Aesthetically, this site is very similar to that of RoyalSlider, but the way they’ve presented their features is much more engaging and impressive.
Notice the rich imagery, large headlines and varying background color. As you scroll down the page, the sections are clearly distinct and so attractive that the information isn’t overwhelming.
I’m not suggesting that anyone should rip-off the Squarespace design, but you can learn some valuable lessons by analyzing what they’ve done and why.
The number of responsive sites on the web is steadily increasing. I’m thrilled to see web developers from all over, from large corporations to one man operations, making responsiveness a top priority in their designs.
This site is a shining example of this trend. Not only is the RoyalSlider site fully responsive, the slider itself is responsive. This is no small feat and I commend the developer here for his dedication to making the web a little more of a device agnostic experience.
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.