Web Design Critique #58: Quote Roller
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 Quote Roller, a gorgeous web app for creating and sending professional proposals.
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 $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.
About Quote Roller
“Quote Roller helps to automate and streamline the proposal creation process. Forget routine text copy-pasting in Word. With Quote Roller, you can save and reuse general information about your company, terms of service and other things you used to manually put in proposals. Quote Roller also comes with a friendly and intuitive drag&drop interface which features unlimited customization capabilities.”
Here is a screenshot of the homepage:
Initial Impression
Right off the bat I can tell you that I really like this site. It exemplifies several trends in modern web design, which means it’s not exactly unique but it doesn’t really have to be. The point is to communicate that Quote Roller is an advanced, modern, quote-building utility and this design does exactly that.
It’s extremely important to keep goals like this in mind when creating a website. Far too many designers strike off in a direction that suits their mood on any given day, resulting in beautiful websites with muddy messages. The graphics on a site are a primary source of communication and you want to make sure they’re saying what you want them to!
Colors
The first thing I want to discuss is the color scheme because it uses a very popular technique that we’ve discussed on here before. The primary palette utilizes various blue shades, a go-to choice for a clean, professional look. Once that tight scope of colors is established, one emphasis color is brought in that really stands out on the page, in this case orange.
This works really well because it gives you a lot of power to direct the user’s eye. As you scroll down the page, you see lots of blue and white interrupted by very few bright spots of orange. Your eyes will naturally gravitate towards those bright spots, where you will see and read exactly what the designer wants you to. It’s a super simple technique with strong results.
Graphic Theme
The main content of the site is held in a rounded-corner rectangle. This is placed on top of a canvas textured background. This attractive but subtle texture adds a lot of dimension to the page and is really easy to build. We teach you a similar technique in this article.
The navigation area has a really nice ribbon wrapped around it. This serves to both help the navigation area stand out and give a three-dimensional effect to the page as a whole.
Another layer is added just above the footer where the customer quotes and recommendations reside. These types of effects just give the site a nice, polished feel. You can tell the designers actually spent some time refining the aesthetic quality.
Typography
Don’t have the budget for Typekit or a similar premium web font service? Google Web Fonts offers an amazing, free and simple to implement alternative. Quote Roller uses Google Web Fonts for the “Merriweather” headline, a unique and sophisticated serif.
Notice that the custom font implementation here is pretty conservative, only the headlines are using Merriweather, the rest is Arial. Using a custom font for the body copy is fine, but it’s not always the best option due to loading times. Further, it’s pretty easy to just go nuts with fancy fonts and have the ultimate result look like a mess. A safer route is to just find one custom font and let it be the unique design touch.
Messaging
The messaging on the site is very simple and clear: “Create, track and send proposals” is the very first thing you read. There’s no beating around the bush, you immediately understand what’s going on.
This is reinforced by plenty of screenshots. I absolutely hate finding a new web app and then searching for minutes on end to find a screenshot. Sometimes there aren’t any on the homepage or even the intro video! If you’re hiding your interface until a user actually signs up, then I’m going to assume that you’re ashamed of it.
Going further on the messaging front, I also like how the features were presented on this site. The bold headline with a tiny icon and solid underline set apart from the paragraph looks really sharp. This area is highly readable and uses plenty of whitespace to give each item breathing room.
Tour Page
If you’re looking for some solid product tour page inspiration, Quote Roller has a great one. I like the big screenshots alternating sides down the page. Scrolling through this page really gives you a quick but thorough look into what you’ll be getting by signing up for the app.
Conclusion
Quote Roller is a really great looking site that serves its purpose well. It’s clean, modern and professional, a perfect combination when you’re selling a web service to business professionals.
The messaging is very clear with plenty of reinforcement via icons and screenshots. The colors are perfect and there’s a lot of attention to detail.
Overall, I give it a huge thumbs up and can’t really think of anything negative to say about it!
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.