Jurriaan RoelofsPremium Concept

Website Redesign for SooperThemes.com premium Drupal Themes

By Jurriaan Roelofs

   on Oct 19, 2010
13 Reviews0 Votes0 Favorites1605 Views
new

A New Version of the Concept has been posted. View New Version

Concept Reviews

  • Nate Hamilton

    Nate Hamilton

    Rank: 1 Elite

    CF Verified professional

    12217

    • Design: 2
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    3 Votes
    This review has been awarded.
    Alignment

    Posted on Oct 20, 2010 at 11:18 AM

    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.

    1. Make the logo more readable. Currently the logo is very small and almost unreadable. I would either create a new logo that is more legible or increase the size of the logo.
    2. 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:

      • http://www.amazeelabs.com/
      • http://www.motocms.com/
      • http://www.aaronrudd.co.uk/
      • http://www.bottlerocketcreative.com/

    Consistency In general I think that your design could be a bit more consistant as well.

    1. The animation at the top doesn't match the animation at the bottom. The animation at the bottom is much more sparse and sterile and even less realistic. I think you need some rolling hills, more trees and a consistant animation style. The trees do not match the bush with the bird on it. I think vimeo.com is great place to gleam some inspiration from. You can also type "landscape" into iStockPhoto.com and it will return a lot of great results.
    2. Your alignment isn't consistent. Your buttons below the header are aligned to the center, the text to the left, view all themes button aligned right and your twitter and facebook links are centered. For the most part, you need to keep your alignement consistent throughout unless you really want something to stand out.
    3. Lastly your layout within each page and then from page to page is hard to follow. Sometime you are following a 70/30 layout and other times it's more of a 50/50 layout. You need to make sure that you are using some sort of grid system. By doing this all your elements will line up and allow the visitors eye to follow your design more easily. Take a look at the 960 grid system, pretty easy to use and very popular: http://960.gs/.

    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!

    Notes Added to Images   View

    • stv3-home.png
      • 1Logo

        This logo needs to be more readable. Either make it larger, or redo the logo to make it more legible.

      • 2Transparent Bar

        This transparent bar could be thinner. Seems to be a bit wide and over-accentuated.

      • 3Navigation

        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.

      • 4Login

        The login button should stand out more, not quite sure I would see this right away.

      • 5Heading

        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.

      • 6Featured Item

        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.

      • 7Buttons

        Buttons could stand to be a little larger. They also need to be aligned to the left with all the other content.

      • 8Heading

        I would bold these heading to make them stand out a little more.

      • 9Customer reviews

        Separate this out more from the content. Maybe on top of a different color container.

      • 10Popular themes

        These need to go more towards the top. They are far too important to be nestled at the bottom.

      • 11Button

        I would rethink this button. I think a text link might work just as well and wouldn't be as distracting.

      • 12Twitter/facebook

        This feels really out of place. I would put it into the footer.

      • 13Animated 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.

      • 14Footer typography

        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.

      • 15Footer Logo

        Either make this logo larger or get rid of it. Not really necessary, look more like a sponsor logo.

    Notes Added to Images   View

    • stv3-product.png
      • 1Theme Page?

        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.

      • 2buttons

        These are nice buttons, just increase the padding and size of the button.

      • 3Why Choose...

        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.

      • 4Buttons

        There too many buttons here and not enough explanation of the different options. You need to be a lot more detailed here.

    Notes Added to Images   View

    • stv3-blog.png
      • 1Blog

        Not sure this is really necessary, who is your audience for this? Seems to be adding noise to an already complicated site.

      • 2Numbers

        Right align the numbers so there isn't so much space between the numbers and the text.

      • 3Author info

        I would definitely miss this info. Find a better way of displaying the info.

    Notes Added to Images   View

    • stv3-pricing.png
      • 1Heading

        The heading and subheading is really hard to read here. Also, the subheading needs to be aligned to the left, not indented.

      • 2Nav bar

        Make the nav bar smaller

      • 3Nice feature chart

        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.

      • 4Red writing

        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.

      • 5Buttons

        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.

      • 6Popular themes

        I wouldn't keep this on inner pages, just the home page is good enough.

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 22, 2010 at 4:09 AM

      Thx for your inbelievable awesome feedback! All the image comments are really helpful.

      -I've taken your feedback on the headings to heart and in the revision that I will post soon it looks much more decent, thx for the links -Yeah I was planning to improve the animation over time, this takes a lot of work but isn't so important so I saved it for a dull moment. Though I agree that the mixing of image styles seemed incongruent and I tried to fix this in the revision- -Regarding my strange alignment, allthough all content is strictly positioned on a 12 column 960grid, I tried to be more playful by using diffierent layouts for different content. I was inspired by the iphone4 site, which does something similar but of course they do it better: http://www.apple.com/iphone/features/

      --To fix the navigation I've removed some menu items and made the menu text much larger, now it's clear for everyone I hope. To be frank I wasn't having any trouble reading it but maybe that's because my monitor is huge, I will look everything it on my 15" full-hd laptop screen as a QA test from here on !

    • Nate Hamilton
      Nate Hamilton commented:
      Posted: on Oct 22, 2010 at 8:33 AM

      No problem, glad I could help! Let me know when the new version is up and I'll give you some more thoughts. I do like playful layouts but for some reason your's doesn't seem to line up quite right. I think it is mostly in the top of the design, just below the header that seems the most disorganized. Maybe try placing those two paragraphs within your header instead of putting it below. Also, try some different treatments for the steps.

      Looking forward to seeing the next steps on this piece!

  • Vitor Marques

    Vitor Marques

    Rank: 1 Elite

    649

    • Design: 4
    • Purpose: 4
    • Originality: 4
    • Engagement: 4
    2 Votes
    This review has been awarded.
    Usability and User experience

    Posted on Oct 21, 2010 at 9:10 AM

    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.

    Homepage

    (Note: Be careful of your layout.. I'm on a Mac on Firefox and I see your header like in picture Picture3.png)

    Header

    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.

    Content Area

    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.

    Popular Themes

    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.

    Twitter or Facebook area

    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.

    Theme

    Header

    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.

    Content Area

    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.

    These are our Drupal themes

    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

    Blog

    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.

    Pricing

    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

    • picture3.png

    Notes Added to Images   View

    • stv3-home.png
      • 1Login

        Login should be a stronger and more viewable button

      • 2Call to Action

        Buttons with a stronger presence. Blue Button should be Green

      • 3Title design

        Bolder and perhaps with a different color

      • 4Bigger button

      • 5Social Network

        This should be very noticeable

      • 6Great Footer

    Notes Added to Images   View

    • stv3-product.png
      • 1Stronger Buttons

      • 22 Column Layout

        Separate Features from Checkout information: price and the steps from checkout.

      • 3This area should disappear

      • 4This should be more visible

    Notes Added to Images   View

    • stv3-blog.png
      • 1Delete this section

      • 2Search Area

        In your website you have a search box.. and i think you should keep it.

      • 3Numbers not working

        You should use something simple.

      • 4Titles with the same layout as the others titles from other pages

      • 5White Title

        Again... careful with the readibility of this text

    Notes Added to Images   View

    • stv3-pricing.png
      • 1Breadcrumbs

        Another layout: a link should look like one (another color) and the current page should be different from links.

      • 2Design more Out of the Box

        Make this area really stand out!

      • 3White Text

        Be careful of this white text in this light background

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 22, 2010 at 4:21 AM

      Your feedback is incredible useful and well written, thx! Heres some feedback on your feedback:

      -Home

      Currently the header has the F-layout which I think is recommended by many experts. I was also playing with the Z layout before but chose the F, however this is easy to test so I'm definitely going to split test some F layouts against Z layouts.

      -I changed many of my headings (like Marketing Design) to bold and it does look much better now, it improves the sense of direction and next-steps throughout the site, you will see the improvement in the revision that I will post.

      • I'm not sure what to do about the Customers Say box, it's important but if I put it in a colored box it stands out too much and if I make it lighter it looks out of place. For now I've just un-bolded it which is a temporary solution.

      -Twitter/Facebook

      It already has its own area as there is a lot of white-space around it, I'll experiment with different layouts and texts to see if I can improve conversion rate on this part. (conversion= follow/like here)

      -Content Area I put in the Why Choose ST box from the homepage because I noticed theres a bunch of people skipping the frontpage, when they arrive from deeplinks on other sites or from stuff like the Popular themes box. After consideration I do agree that it is less important than the features part below it so maybe I should change the order of content. This sounds like something else I should just analyze, I can split test it or do a binary logistic regression and test it in conjuntion with the Z/F layouts and other button styles.

      -Gallery -I agree it is not clear what everything means like the numbers and the tundra part but there is not much space so what can I do besides use icons? Also regarding numbers, I still have no idea what the numbers in the author box on this site mean, or even what the ranks mean (experience, number of comments? )

      -The blog redesign was kind of a side though, I will give it a harder look when I have some free time, thanks for your comments I will use when the time comes

      -Pricing -This page was very difficult for me, I'm going to try and make it look less crappy but it's rather difficult to make the colors and typographical hierarchy rhyme with the rest of the site.

    • Vitor Marques
      Vitor Marques commented:
      Posted: on Oct 22, 2010 at 4:43 AM

      Hi Jurrian.

      I have to admit that I've completly forgot about F-Layout. I think you should test Z and F layout and see what fits better. If you choose F layout consider my tips about those call to action buttons.

      Costumers Say section would work better you could have a sidebar or something. Since you don't have maybe the answer is not on this section but in Why Choose ST... maybe you can improve this section by giving it another look that could make this area stand out.

      About the Gallery I have to agree with you.. not always this kind of fields, like reputation, version, etc are very straighforward. Well this could be one of those features that you can think in the future if you see any problem on them.

      Your Pricing page is not crappy at all! What I would improve is the Best Deal box.. making it more "agressive".. it really needs to stand out from all the rest and I think an Out of the Box layout could do wonders on this.

  • Jamie Linder

    Jamie Linder

    Rank: 1 Elite

    3776

    • Design: 3
    • Purpose: 2
    • Originality: 2
    • Engagement: 3
    2 Votes
    This review has been awarded.
    Spacing dynamics and colors

    Posted on Oct 19, 2010 at 7:10 PM

    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.

    Notes Added to Images   View

    • stv3-home.png
      • 1Logo

        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.

      • 2Color

        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.

      • 3triangle element

        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.

      • 4Very tweetable

        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.

      • 5Spacing

        Watch out for spacing issues such as this text hitting the cloud element.

      • 6Calls to action

        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.

      • 7placement

        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.

      • 8Move section up

        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.

      • 9Waste of space

        This is taking up WAY too much space. Its a side thought, so probably should be "set to the side" visually.

      • 10Footer

        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.

      • 11feels floating

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 22, 2010 at 4:00 AM

      Thanks for the great comments and insights! Definitely going to take some of your tips into the revision. Though some things just don't fit my schedule, like updating the damned logo that seems to be working against the layout instead of with it.

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 22, 2010 at 7:27 AM

      hahaha, i hear ya! Lets see what you can do with still working that in then, can't wait to see Rnd. 2

  • Curtiss Prickett

    Curtiss Prickett

    Rank: 1 Elite

    579

    • Design: 3
    • Purpose: 2
    • Originality: 2
    • Engagement: 3
    2 Votes
    This review has been awarded.
    A stronger color pallet and more focus on readability.

    Posted on Oct 20, 2010 at 10:17 AM

    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:

    1. 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.

    2. 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.

    Notes Added to Images   View

    • stv3-home.png
      • 1Background Color & Texture

        I talked a lot about your color choices but I like the texture. Just make sure you maximize your readability here.

      • 2This feels out of place...

        This content may be better served in the footer. Concentrate on "features" here. Or maybe more info about pricing options here?

    Notes Added to Images   View

    • stv3-product.png
      • 1I would like to see more of this font!

        I like the font here. It would be cool to see it used more throughout the website!

      • 2There is something awkward about this.

        The angled stack of screens and then the flat graphic below it seem to clash a bit here. Maybe it's the overlap in the middle.

    Notes Added to Images   View

    • stv3-pricing.png
      • 1Example of readability issue.

        Since this type execution with the drop-shadow may not work in all browsers, I would be wary of readability here.

      • 2Not crazy about this execution.

        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.

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 22, 2010 at 4:03 AM

      Thx for your time, theres some good stuff in your review! The fonts in my design are the beautifully paired Calibri and Cambria that come with windows and office, both designed by the same (Dutch) designer. I'll try to bring Cambria more into the design allthough it is difficult because it draws so much attention in my design.

      Will think about the colors, colors are not my strong point and I have some difficulty improving them, my efforts usually seem to worsen things.

  • Omprakash N

    Omprakash N

    Rank: 3 Superior

    929

    • Design: 3
    • Purpose: 3
    • Originality: 2
    • Engagement: 3
    1 Vote
    Logo Placement

    Posted on Oct 19, 2010 at 5:52 AM

    Negative: 1. Need some unique thought to place the logo in the header. 2. Too much of space b/w content and footer 3. Need some balance in color scheme b/w header and footer.

    Positive: 1. Likes footer part.

    All the best

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 19, 2010 at 7:08 AM

      Thx. For other Reviewers, please also focus on the product page. This was the most difficult for me because as the developer I have so much to tell about the product in terms of benefits/features/technology that it was hard for me to make a selection and a hierarchy. Do you think the right information is on the product page? if not: what's missing? (check the staging site to view the product page properly e.g. here: http://www.soopertheme.com/drupal-themes/synopsis )

  • Nick Glavin

    Nick Glavin

    Rank: 2 Titan

    CF Verified professional

    980

    • Design: 4
    • Purpose: 3
    • Originality: 3
    • Engagement: 4
    1 Vote
    Really think about the grid

    Posted on Oct 21, 2010 at 7:23 PM

    Hi Jurriaan,

    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.

    Here’s the quick list


    • Grid Grid Grid :D – Implementation
    • Vertical Rhythm
    • Logo Size – Could be larger
    • Drop Shadow on Navigation - wrong angle should be
    • 120degrees consistent with text below
    • Icons Sizes and feel- icons lack consistency ( see below)
    • No hover/active states on buttons
    • Button in slider lacks contrast and is often lost
    • Blue 2006…. Is this a link ? separate from link style
    • Rethink the Hues of the Reds and Greens


    Lack of grid and Vertical Rhythm

    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:

    1. http://www.blueprintcss.org/ -- has a baseline grid
    2. http://thesquaregrid.com/
    3. http://960.gs/

    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)

    Colour Scheme

    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.

    Icons used

    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

    Overall

    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

    Cheers Nick

    Notes Added to Images   View

    • stv3-home.png
      • 1Drop shadow

        Change Angle of the drop shadow the lower right

      • 2Change Arrow direction on open

        When the login is open change the arrow to an up direction

      • 2Change Arrow direction on open

        When the login is open change the arrow to an up direction

      • 3Alignment Issue

        Try making them a little larger so they fill the space or left align these

      • 4Icon Style Gloss

      • 5Icon Style Satin

        Difference between icons try and get a set where they are consistent

      • 6More Padding here

        Needs more padding between themes and line see padding above

      • 7Hover and Active states

      • 8Too much space here every thing gets a little lost bellow

      • 9Too Small

        Logo is too small and barley noticable

      • 10Colours / Contrast

        Maybe a little too much contrast between logo and background here

    Notes Added to Images   View

    • stv3-product.png
      • 1Don't know if this is needed 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

      • 2Lacks Contrast of a strong CTA

        Maybe try green here blue is to similar to above

      • 3This gets lost on some of your other templates

        Try increasing the shadow ring behind it just to really make it stand out

      • 4Alignment Issue

        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

      • 5Work on the padding between elements

        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

      • 6Mixed Message here

        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

    Notes Added to Images   View

    • stv3-blog.png
      • 1Alignment Issue

      • 2More Padding here

        this page is quite tight try and loosen it up a little more

      • 3Not needed as whole coloumn

        Pushes the body over too much

      • 4Try and add more levels to this eg H3 / Strong / em

        It looks very dense and currently is not very scan-able

      • 5Could do with a little more treatment

        Looks as though its just floating there at the moment try some kind of border

      • 6A bit grey and un exciting

        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

    Notes Added to Images   View

    • stv3-pricing.png
      • 1Padding has Changed here

      • 2Not enough Contrast on current state

        The colours sort of wash together and shadow blurs text slightly

      • 3Icons used

        Now icons have become very flat again try and find another icon set

      • 4just looks like and "x"

        not the same style as the tick

      • 5Can you keep the texture going through here ?

        Maybe try and keep the texture from the header in these sections as they are quite flat

      • 6The green looks a little odd here

        again try and work with the colour pallet to bring these colours together a little more

      • 7Alignment Looks a little off between these to just looks a little od

      • 8Try another colour for this button as it is you primary CTA

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 22, 2010 at 4:34 AM

      Thx for your awesome feedback!

      Did you try put put a 960gs overlay on the designs? Everything is lined up against the grid, but maybe I've taken too much liberty with the different page layouts, even though they are on the grid. This design pattern was inspired by the iphone4 subsite: http://www.apple.com/iphone/features/ But of course I cannot expect to get the same pay-off as Apple because they actually know what they're doing.

      -I agree about the vertical rythm, I need to really sit down and measure this stuff, but I'm saving this for last because it's a lot of work and I should do it when there is a feature-freeze and a content-freeze, so that I won't have to do it twice.

      -The colors are definitely a problem I guess, since it has been mentioned several times. I hope I can improve this but it is a difficult mission for me as my previous effort seem to worsen rather than improve things.

      -Icons, very important but not very easy. The best would be for me to have a custom icons set for my site, something I will put on my todo list but it will be challenging as I have little experience here. I think I can also try to reduce the gloss on some of the icons, should be doable with some levels and curves adjustments, thx.

      -Am also working on more consistent button and hover styles, the buttons are my primary Call-To-Actions so I will be working on them a lot, and split testing different colors and styles.

  • Abhishek Kumar

    Abhishek Kumar

    Rank: 1 Elite

    4997

    • Design: 3
    • Purpose: 3
    • Originality: 2
    • Engagement: 3
    1 Vote
    a few things..

    Posted on Oct 19, 2010 at 2:38 PM

    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.

  • Gemma-Lea Goodyer

    Gemma-Lea Goodyer

    Rank: 1 Elite

    CF Verified professional

    832

    • Design: 4
    • Purpose: 3
    • Originality: 4
    • Engagement: 4
    1 Vote
    Nice but a few issues..

    Posted on Oct 22, 2010 at 2:41 PM

    Hi there,

    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.

    960.gs

    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.

    Notes Added to Images   View

    • stv3-home.png
      • 1Logo

        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.

      • 2Thin blue bar at top

        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.

      • 3Tab alignment

        The right of this tab feels a little ragged. Try to line it up a little better to the right margin.

      • 4Preview box

        Bring down slightly (possibly resize) to align it with the headline opposite. This will make it feel a little more organised.

      • 5Lovely text

        This text is working well, alignment and spacing seem fine.

      • 6Unsure about the red..

        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 ;)

      • 7Button placement

        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).

      • 8Odd one out.

        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.

      • 9Alignment

        Left alignment of customers and image below aren't quite inline.

      • 10Little more white space

        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)

      • 11Little more space here

        It is a little to closed at the moment.

      • 12Layout of columns

        Having four columns here and three columns of text directly above feels a little unbalanced to me.

      • 13This text is floating.

        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).

      • 14Overall I love this section of the website..

        .. Just nudge all the text down ever so slightly so it is more central and balanced.

      • 15Lost

        This logo is totally lost down here.

    Notes Added to Images   View

    • stv3-product.png
      • 1This information should not be in the header area.

        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.

      • 2To much space

        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.

      • 3I like the rotated next..

        ... cute and compliments theme well.

      • 4Angled pages working well..

        .. a nice touch. Adds some variety and dimension.

      • 5Alignment..

        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.

      • 6Out of place.

        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!

    Notes Added to Images   View

    • stv3-blog.png
      • 1Align to the left

        As noted on previous pages

      • 2Remove the 10!

        Removing number ten will looks so much more consistant. Then you can move the left margin of the popular post titles over slightly. Nice typography once again.

      • 3Ragged

        The left margins should be inline.

    Notes Added to Images   View

    • stv3-pricing.png
      • 1Alignment

        Align this to the left margin.

      • 2This text is working nicely.

      • 3Red..

        Still not feeling the red, see previous comments.

      • 4Table is working well

        Table is simple, works well and works well, the green and red combination could use some consideration.

  • J V

    J V

    Rank: 2 Titan

    856

    • Design: 4
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    0 Votes
    Draft

    Posted on Oct 22, 2010 at 2:59 AM

    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.

  • Shawn Johnston

    Shawn Johnston

    Rank: 1 Elite

    CF Verified professional

    711

    • Design: 4
    • Purpose: 3
    • Originality: 2
    • Engagement: 3
    0 Votes
    Clearer Communication of Value/Action

    Posted on Oct 22, 2010 at 10:19 AM

    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.

  • Sharmista Acharya

    Sharmista Acharya

    Rank: 2 Titan

    529

    • Design: 2
    • Purpose: 2
    • Originality: 1
    • Engagement: 3
    0 Votes
    Body part

    Posted on Oct 19, 2010 at 12:50 PM

    Good efforts. but you can make text area more cleaner.

  • Cliff S.

    Cliff S.

    Rank: 7 Student

    28

    • Design: 4
    • Purpose: 4
    • Originality: 2
    • Engagement: 3
    0 Votes
    The logo

    Posted on Oct 21, 2010 at 2:27 PM

    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.

    Notes Added to Images   View

    • stv3-home.png
      • 1This logo needs work

        Doesn't inspire confidence - detracts from the "great design" message

      • 2More prominent than Pricing Details ...

        ... is that a good thing? If you want potential customers to view your showcase first, then yes. Otherwise ...

      • 3Too much text

        Need to prune the prose here

      • 4Too much text

        Need to cut down on it here.

      • 5Whitespace a bit odd

        Makes it look like the second paragraph is divorced from the first, since the photo is so close to the first para.

      • 6May need a border...

        ... to separate these images from your content in the middle of the page. Otherwise it's competing and seems a little scattered visually.

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 22, 2010 at 4:22 AM

      Thanks for your feedback, defintely some useful and actionable tips in here. Regarding the logo, yeah it has been made abundantly clear haha, know a good logo designer?

  • James Hind

    James Hind

    Rank: 2 Titan

    224

    • Design: 5
    • Purpose: 4
    • Originality: 3
    • Engagement: 4
    0 Votes
    Very nice

    Posted on Oct 21, 2010 at 3:49 PM

    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.

    Good job!

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 22, 2010 at 4:24 AM

      Thanks for your feedback but you're being too nice, I'd like to see some more criticism, can you be more of an asshole for a minute? :P I agree about the white-space. Will fix this in the revision. And yes the footer needs some work, but it's not mission-critical so I will just add some things over time :)