A New Version of the Concept has been posted. View New Version
Rank: 1 Elite
There are a number of great aspects to this design, but there are also a few areas that could be improved.
Branding In general, when you come to a website the design should clearly and obviously point to the purpose. I don't know if I get the sense right away that this is a theme template website. If you look at http://themeforest.net/, I really get a sense within 2-3 seconds that it is a theme development website. Here is how you could improve your branding on this site.
Have a stronger heading/tagline in your header. Not neccesarily talking about the wording here, but even the typography of the heading could use a little help. I would decrease the amount of line-height and somehow make it more of a focal point. The sites below have a really strong headings that work well:
Consistency In general I think that your design could be a bit more consistant as well.
Conclusion I think you are on a great path here, but there is a lot of detail work to take care of. Make sure you are keeping the goal of your site in mind when working on this. Everybody going to this site should have no doubt that it is a theme site, make sure of that. Good work so far, keep it up!
This logo needs to be more readable. Either make it larger, or redo the logo to make it more legible.
This transparent bar could be thinner. Seems to be a bit wide and over-accentuated.
The navigation is har to see. You need to make the colors darker and the font more legible. Also, I wonder if there is anyway to decrease the amount of navigation options.
The login button should stand out more, not quite sure I would see this right away.
The heading needs to be bolder and stand out more. Maybe less line height and a different font? You'll need to play around with this.
The featured item looks too much like a portfolio. Try putting pages behind it, to make it look like you have lots of themes. http://postmarkapp.com/ is kind of what I am talking about.
Buttons could stand to be a little larger. They also need to be aligned to the left with all the other content.
I would bold these heading to make them stand out a little more.
Separate this out more from the content. Maybe on top of a different color container.
These need to go more towards the top. They are far too important to be nestled at the bottom.
I would rethink this button. I think a text link might work just as well and wouldn't be as distracting.
This feels really out of place. I would put it into the footer.
The animated footer feels too plain and simple. I would try to liven it up a bit and make it more consistent with the header. You also have two different illustrative styles, keep it to one style.
The typography in the footer here is pretty hard to read. I would make it a little bit larger and decrease the amount of space you have between columns.
Either make this logo larger or get rid of it. Not really necessary, look more like a sponsor logo.
I'm assuming that this a template page, showing more detail? These pages need to look much different then the home page...they are currently too simular.
These are nice buttons, just increase the padding and size of the button.
This theme doesn't really belong. They should know why they should choose super themes before they get to this page. It's too late to try to sell to them.
There too many buttons here and not enough explanation of the different options. You need to be a lot more detailed here.
Not sure this is really necessary, who is your audience for this? Seems to be adding noise to an already complicated site.
Right align the numbers so there isn't so much space between the numbers and the text.
I would definitely miss this info. Find a better way of displaying the info.
The heading and subheading is really hard to read here. Also, the subheading needs to be aligned to the left, not indented.
Make the nav bar smaller
I like your feature chart here, just make the grays within the chart rows just a little darker. You gray tones are far too subtle to notice them.
The red writing within your chart here seems negative. You have red writing, red x's and red checkmarks. Use the red color for the features that are missing only.
You need two buttons down here, even if they are the same. It is a bit confusing. Also, there should really be a shopping cart on all of the buttons or none of them, stay consistent.
I wouldn't keep this on inner pages, just the home page is good enough.
Rank: 1 Elite
Hi Jurriaan First of all let me say this redesign is looking very good and some of your goals are being achieved. In this new design I can perceive more information about the company and products comparing to the current wed site design. Even though I have some tips for you and I will explain them page by page.
(Note: Be careful of your layout.. I'm on a Mac on Firefox and I see your header like in picture Picture3.png)
What stands out the most in this page is the header where you have the description of the website and a slideshow with some screenshots. The fact that this area stands out is a very good sign... but it could work better with the other elements, such as logo, menu and call to action buttons. What you need in this area is a Z-Layout. As you can see in this page Z-Layout is a great way to promote your brand and call to action. Your main goal in this area is to users click in "Check Theme", "Pricing Details" or "View All Themes" so you should improve this buttons. With the help of Z-Layout we should arrange this layout by doing the same: 01. Slideshow on the left 02. Description on the right 03. Call to action button on the right Also "View All Themes" and "Pricing Details" should have a bigger impact.. maybe you could make them bigger and change that blue button for a green one. Also had some hover effect on those buttons to improve usability for the user. In the header area I would also like to talk about another matter: the login button. This button should have a better presence and avoid users trying to look for this area. I love the fact that you saved space by hiding the login form, but the size of the button is making this great feature look like a bad thing.
Let's move on to "Why Choose Sooperthemes?" area. This is a very important area to tell users what your website is all about. First the title "Why Choose Sooperthemes?" should stand out more... perhaps with a bolder look and a different color... this way you are guiding users through all of your homepage structure, showing what's more important. I love those icons but titles like "Marketing Design" should also differ from the rest of the text.. you have to think about hierarchy and this is achieved not only by size of the text, but also with the use of stronger colors and/or bolder text, etc. "Costumers Say:" should differ a lot from the previous area. Costumer reviews are very important but they should come after user know about what the website have to offer... so why don't you increase the space between this two areas and give a lighter look to this review's area.
Really love this area... the only thing you should improve is the "View All Themes" button by making it with the same layout as the same button on the header: bigger and with a hover effect.
This area should have a bigger impact to help you develop your branding. This is a design tip, but why don't design a specific area for social network with some icons or bolder and bigger text.
First this header should follow the Z-Layout that I talked about earlier. Then the buttons for "Purchase" and "Join the Club" should stand out more... really stand out! These are the most important buttons of all and you have to give them your most attention.
You have a great content that shows all features and possibilities of this theme, but the location of all these elements is not the best. I think you should have a area only for theme's features where users could know what this theme is capable of. At the same time users should always (as possible) know the price and checkout process. So why don't you try a 2 column layout? The left side with features and the right side with price and other important information about the process of getting the theme. Don't forget to give that stand out look to price buttons... users should always know where to click if they want a template and it's your job to make them notice that. Another thing.. I think it's great that users could always know about the website services, but you don't need to have "Why Choose SooperThemes?" and "Customers Say:" areas. You should focus all the content area with template related information... that way your page would be smaller and filled with the right stuff. Just a little note: on this page, titles like "Sooper Startkit" are a lot better than the ones on homepage.
I like very much this gallery... very simple and straightforward. The only thing I could say is to improve that breadcrumbs.. maybe using something with a stronger presence: another color to suggest a link and another color for the current page. Also on a template, for example "Gently", I had a hard time figuring out what "6,7" meant... it should be more informative. Overall this one is a great page... very well designed and structured
This page needs a lot of work. First you should increase the space between the right column and left column and give a different layout to this areas to let users know about these two distinctive areas. The post title should have a design that suits the rest of the website... try something like those titles that I've talked about earlier on the other pages. Also "Popular Posts" should be improved... those numbers aren't working very much and are increasing the size of this element, making the search area unnoticeable . Perhaps you should put Search before "Popular Posts" since this element is a very important feature on all websites. Another thing... I don't think "Best Seller" is the right element to be on Blog section since you have "Popular Themes" on the bottom of the page. The left section for "author", "datum" and "tags" don't stand out much. I know it's an area that complements post entry but it should have it's own space and design... Tags, for example, don't seem like links to pages for those tags. You should really have a style for links different than content text. In terms of usability this Blog is good... what you should improve is the layout and structure of the page.
I really like this page... very simple and understandable! What I would change is the "Standard Club" column. Please see this examples: - http://basecamphq.com/signup - https://typekit.com/plans See how these elements really stand out from the rest? Yours have a stronger presence too but I think it should be more Out of the Box just like in BaseCamp page. I have this very interesting article that covers pricing in webpages and they have very good examples of pages of this kind: pricing in web design. Also consider using a centered aligned text in that table.
In conclusion I think this is a good improvement comparing to the previous layout. Is shows more of what the website is all about and is very user-friendly. I will also add some notes on these images. i'm looking forward to see the final layout of this site and I hope I can help you with this review. Cheers. Vitor Marques
Rank: 1 Elite
I've added some notes to the first page. I think the main things you need to consider are the way too even and consistent spacing of text and the use of colors.
So, this Logo could withstand a redesign, but be that as it is, its hard to feel any connection from the logo colors, style, etc. to the site's style, colors etc. I am pointing this out because of the two, the site design is more solid than the logo design for your objectives, and for the a typical user, looking for dependable online markets.
This selected color is very difficult to read. I would suggest using a darker color on this background, or reconsidering the general lightness of the background. Except for the green grass footer, this seems to be only one of a few elements to connect with the logo, and its not readible.
This element is typically used to indicate an expand / collapse feature. If that's what you have happening here, great, if not I do not see a need for this.
The whole background image conveys social marketing to a fault. Is this what Drupal Themes is about? If so, spot on. If not, please reconsider.
Watch out for spacing issues such as this text hitting the cloud element.
These seem to be floating between two parts of the page, instead of attached to an idea. These calls to action should flow from the attention grabbing elements and connect with your marketing efforts in the banner. Think about eye movement and placement. The white text on the light blue button, again, is difficult to read. These should be exceptionally clear.
Consider removing this part from this section. The format of this content is too close to the "Why choose..." icons + paragraphs. Pull this out, put it somewhere else like the footer, header, or just below.
This is a great way to pull users in, is giving them eye candy immediately. These thumbnails are more important than the informative text above. Swap these two sections, and your calls to action might make more sense and add more value.
This is taking up WAY too much space. Its a side thought, so probably should be "set to the side" visually.
The footer is kind of fun and refreshing..... spacing could be tightened up, but overall is pretty solid. I like the "classically" rendered illustrations and patterning. The bottom of the footer can also use some spacing adjustments. Everything is so.... even! Spice it up a little, do a 3/4 space to a 1/4 space or something, everything is 50/50 and there's little visual excitement in that.
Rank: 1 Elite
I feel like you have a strong start here, Jurriaan, and I like where a lot of this is going. I feel like there are some general things that can take this quickly from good to great. I'll start with some general comments:
Color Choices - I would play around with some different pallets to see if there is something less "cartoony" (for lack of a better term) that will work here. I like the use of white space, but the bright blues and greens could be richer overall. Color can be considered a personal preference, but I think color choices often say way more than we think about the final product. This is a "premium" themes website. Is your color choice reflecting that? I know that the themes vary a lot in color so there is that to consider. Do some testing to see what color variations will work behind the wide range of colors used in the themes.
Readability - There is some issues with the navigation, but this can be addressed in the color choice. Mainly I feel like the main headlines and smaller subheadlines just don't pop enough. I like the spacing and the text line-heights look good for the overall white space feel you are going for. Your graphics and use of grid are pretty strong, but there just isn't anything pulling my eye to the next place to read. There was an earlier reviewer that pointed out that the design was floating too much. I think some simple adjustments to padding, some color in the headlines and maybe a bolder headline font would make a big difference. I like the use of the serif font in the "Steps 1-4" in the grey bar. This would make a nice contrast as an H1 or H2 headline I think.
You have a really nice look to this design. I feels a little "formula" in it's execution. I have made a few notes on specific items, so I hope these help.
Since this type execution with the drop-shadow may not work in all browsers, I would be wary of readability here.
This is something we have seen before on a lot of websites with these pricing models. I'd like to see something new. Or at least clean this up a bit.
Over all I think you have a nice web 2.0 look going on but there are a few small tweaks that could be made to really make this baby pop.
The overall site design lacks a strong sense of cohesion as the grid changes several times through out the site eg: header, body, footer. A strong grid layout is often subliminal and brings all the elements together with out being immediately obvious
Some great resource for grids are:
These can also really enhance your productivity in the development stage as well
You home page in particular lacks vertical rhythm. The padding between elements seems inconsistent. Consistent vertical spacing between elements will help bring the site together more. (Most apparent on popular themes and that big negative space for you twitter and facebook)
I have noticed a few variations of red and green that clash a little with the rest of the layout. I would recommend trying some slight variations of these and bringing them closer to the logo. Also the logo colours clash a little with the blues used in the header.
on the home page, Marketing design has a gloss on it and best-in-class and features have a satin finish while the durpal badge has another feel again. Also the x height of these icons changes significantly.
The on the internal pricing page you ticks and crosses are really flat colour I would try and look for another icon set has all the elements you require always difficult I know
This is a more than solid start to a great website and once the gird is further developed I think it will have a very strong and cohesive web 2.0 feel and a very usable site. Great work
Change Angle of the drop shadow the lower right
When the login is open change the arrow to an up direction
When the login is open change the arrow to an up direction
Try making them a little larger so they fill the space or left align these
Difference between icons try and get a set where they are consistent
Needs more padding between themes and line see padding above
Logo is too small and barley noticable
Maybe a little too much contrast between logo and background here
Looks quite lost as it is at the moment increase size and if kept also try and apply a baseline grid to this text
Maybe try green here blue is to similar to above
Try increasing the shadow ring behind it just to really make it stand out
This section looks a little of and lacks purpose needs to be made stronger and really made to look like you can click it looks quite passive at the moment
This page probably flows the best however some elements feel quite tight while other elements are much more open try and make this consistent down the page
Theses colours remind me of a hospital / pill the second buttons send a mixed message to the uses on directing them on what you actually want to do
this page is quite tight try and loosen it up a little more
Pushes the body over too much
It looks very dense and currently is not very scan-able
Looks as though its just floating there at the moment try some kind of border
The rest of the site is very cheerful this section is a bit drab and for information that is "popular" lacks the excitement of the rest of the site
The colours sort of wash together and shadow blurs text slightly
Now icons have become very flat again try and find another icon set
not the same style as the tick
Maybe try and keep the texture from the header in these sections as they are quite flat
again try and work with the colour pallet to bring these colours together a little more
nice design- however:
the logo- the logo theme is not matching your website theme.. i would say, see if you could redesign the logo- this one is looking to target kids aged 8-15.
i am not sure why 'view all themes' should be in red especially when the 'pricing details' button is in blue.
i like the overall color scheme, the top navigation and mostly, the footer.
you should consider adding a vertical line between your two sections- 'why choose sooperthemes?' and 'customers say'
the customer say text could wrap with the image.
I'll be focusing on the design only in my review.
Overall I'm liking what you are going for with this website. You have a nice approach to your typography and the ideas are good.
I know that another reviewer has already mentioned 960 Grid System but it really is a fantastic tool in designing your website. You don't need to apply their push/pull coding but the set grid gives you consistent knowledge of dimensions.
Extra points about logo not mentioned in notes
When I look at the logo I tend to think fun, loud, young, cartoonish and child-like (which I do understand, considering the company name. However, when I look at the design of the overall website I feel like it is a balance between fun and professional.
I understand that there may not be an option to redesign the logo but I really feel that this style of logo is not suitable if you want to create an upmarket and respected image for your business.
On the other hand perhaps you want the company to feel a little less serious and a little more fun. In that case I would still recommend changing the colours but I will come back to that at a later point.
I look forward to seeing the end result of this site.
The tone of the logo and the tone of the website design do not match. The logo also does not have enough impact but I will highlight this under heirachy.
I think this bar of color should be removed, it's cluttering up the top bar which isn't necessary. The tab can bleed off the top without the bar as an anchor and this freshen the style up a little.
The right of this tab feels a little ragged. Try to line it up a little better to the right margin.
Bring down slightly (possibly resize) to align it with the headline opposite. This will make it feel a little more organised.
This text is working well, alignment and spacing seem fine.
Try blurring your eyes and looking at the page (this is my special squinty test). What stand out most for you? It's that red button for me. I don't think it compliments the theme very well and therefore highlights this button far to much and disrupts the heirachy considerably. Perhaps consider the green? ** I see on the live theme it seems to be light blue, i prefer the light blue but I would consider not having quite such a strong action upon hover. Subtle is sexier ;)
The size of these buttons are fine but I feel they are a little loose in their placement. Are you working on a grid? Try to align the bottom of the buttons with the bottom of the preview box (and the top of the preview box aligned with the top ascenders of the header).
This icon is to large and to different. I love the other icons and I would like to see something here that makes them a consistently lovely set. The typography in this area is working well.
Left alignment of customers and image below aren't quite inline.
I'd like a little more white space here to open the design up a little. Negative space is a nice break for the eyes as well as framing the different sections and creating a sense of balance. (Match it with the negative space between the columns of text and Popular themes title)
It is a little to closed at the moment.
Having four columns here and three columns of text directly above feels a little unbalanced to me.
There's no anchor, it feels a little lost. I'd consider placing this somewhere else BUT do get what you are trying to do and think it is a nice idea but needs something more (or less).
.. Just nudge all the text down ever so slightly so it is more central and balanced.
This logo is totally lost down here.
It throws the heirarchy off. Try to keep all header consistent throughout all pages of the website. The layout of the home page header was really great so stick to that and relocate the other information.
To much space between the number and the text. Also consider centering the text to the grey bar, but make sure all the baselines are exactly the same for consistency.
... cute and compliments theme well.
.. a nice touch. Adds some variety and dimension.
Alignment does not seem quite right from the top of the title characters to the the top of the image boxes. Tighten this up a little and this section will be lovely.
I'm not sure about this button, it seems a little out of place for me and you know how I feel about the red!
Beautiful design overall. The blue and green concept is really good. Only the red is distracting. You know that users dont love to read text so I am not sure about the text is read by users under "Why Sooper Themes?"
Logo looks cartoony. Logo needs to be re designed. The navigation menu is not standing out. Make them dark blue. Two colors red and blue for buttons not justifying any reason. Does it mean something else if the button is in red? The font for captions need to be thought over. The color of the text under the caption need to be darker. Or either of the big caption or small caption should be darker.
Keep the Customer say aligned to right extreme. Try to bring the Popular Themes a bit top since this is the most important thing for users.
I love the footer.
Creatively I agree with many of the other reviewers, the design is clean and inviting though a bit empty and even a tad generic. There is also a general lack of the little details that makes good great.
First off for me, the logo is in a different perspective from the rest of the site which is a little unbalancing. Good design is proven to build credibility and right now, with that logo uncomfortably hemmed in up there in that bar, it feels a lot like a logo dropped on a template. Like you bought a website and tossed your logo on it. I'd work a bit harder to integrate your logo, which is your brand's cornerstone, into the larger brand of the site. Let it break the plane of that box, and tweak it's perspective to match the rest of the site to help it mesh better and make this whole design feel more integrated. As well, your menu is lost up there and quite crowded. You need to add some pop up here and make it easier for your users to get around.
Second, when I first land here, I can see I get Drupal Themes. What is not clear is whether or not these are custom for my business, or if I'm shopping a gallery? Also not clear is do you do the work of installation, or do I do that? These are critical messages to get across straight away. A confused client is going to bounce. Obviously you clear it up a bit on the pricing page but that may be too late.
"Premium Drupal Themes for all your projects" does not have the clarity it needs. It needs to be more specific, ie for your website. The experience statement below does not provide the needed sense of urgency and expectancy a user will need to click on to learn more. As well, think about moving the Pricing and Themes buttons back into the blue to be with the text. Right now with that division you're getting in the way of user connecting the text with those call to action items. I'd also consider placing the emphasis on the Pricing details where details about the service are more easily clarified.
At the end of the day, this site is about selling pre-designed Drupal themes to different kinds of users to implement on their website and will have access to your support while doing so. Right now the home page message is a bit more watered down than it should be. You need a clear 1, 2, 3 message that lays out what, how and why and provides easy access and encouragement to click into the site and eventually sign on.
The individual theme pages need to be re-thought. The left/right layout is very hard to follow and makes for an uncomfortable experience. Keep it simple. The header works well but the content area should be a linear list of the theme's features with thumbnails and examples to the right. Most users are going to scan these pages, not read them from top to bottom. Nice and easy to follow will carry the day here. Also you're completely missing any sub navigation that would make it easy for your users to review other themes before purchasing. I'm also noticing the lack of a catalogue page design? This would be a grid based gallery layout of all the themes you offer with their thumbnails. This is a must if you haven't designed this already.
The blog design is quite blah. Where area all the colors? H1 to H4 styles? Links, images, lists? I urge you to bring some creativity to this page, boring blogs are unread blogs.
Pricing page is solid, though the button spanning two columns is confusing. I'd simply repeat them in their own columns.
Overall a good effort, but the brand message needs some work for sure. What am I buying here, How do I do it, and Why should I? These 3 questions need to be answered very quickly on your home page and right now the only message I'm getting is that you have Drupal themes. OK, so now what? You answer those questions and this site will convert like crazy.
See my comments. Initially attractive, except for the logo. I want to get away from seeing that logo somehow ... even if it's looking for a competitor.
Doesn't inspire confidence - detracts from the "great design" message
... is that a good thing? If you want potential customers to view your showcase first, then yes. Otherwise ...
Need to prune the prose here
Need to cut down on it here.
Makes it look like the second paragraph is divorced from the first, since the photo is so close to the first para.
... to separate these images from your content in the middle of the page. Otherwise it's competing and seems a little scattered visually.
Not the most original design, but I think it looks great!
Very inviting and usable looking website.
Easy to see pricing and quick to understand what it is you do.
Only slight query is the large white space about 3/4s down, below those 4 examples.
Also, think the footer could do with a bit more stuff, looks a little bare.