Website Redesign for SooperThemes.com premium Drupal Themes

Hi Jamie, I respect your opinion but I'm not really sure what you mean, personally I already get a good feel from the current layout. Can you explain what sort of spacing you mean, or maybe you know some cool reference articles?

I know that vertical rythm can mean lining up all your typography between columns in the design but the type is already lined up like that, except for in the blog.

I must say that in the past years I've only been doing coding and development work; outourcing the design work. I've picked up designing a few months ago so I'm still very impressionable and I'll take up any learning material I can get.

Jurriaan, I am not trying to criticize your design, I am trying to critique it. If as a developer you're not seeing what I see, as a designer, perhaps another way for me to communicate whats happening is to spend some of my own time working on your design. I couldn't spend an hour of my Saturday morning on this, but I will spend about 15 mins. to try and illustrate what "invisible" spacing issues are occurring.

I would appreciate credits awarded for my time spent on this, and I'd be happy to continue explaining if you appreciate the effort and knowledge I am trying to share with you.

I've attached a quick spacing adjustment idea; this is not a blue print for design, but a diagram to compare leading, spacing and positions. Its not a science, its an art.

I should also mention that the yellow blocks I added were to show you what I see when I look at your text layout. Choppy, evenly spaced, methodical. You need to use spacing and hierarchy to help a users eye move through the page and tell where it stop and act.

One more thing, Smashing Magazine is a pretty good resource for articles on things such as this. Here's an article on leading that you as a developer might be able to use:

http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

Have to say I didn't get what Jamie was on about until I had a look at the website in action. He is absolutely right. Somehow it looks pretty good on the screen shot above. But when you go to the website is fairly obvious that you need to work on the white space. Thanks for spending the time on the example Jamie I've learnt something here. I particularly like what you have done with the type sizes of the main font.

"binary logistic regression analysis" - pointless, a waste of time.

Hey Michael, actually I was doing this and similar analyses on my site for my master thesis research (Marketing) and I really enjoy coming up with cool stuff to test and then geek out in SPSS, and I like to randomly bring it up in conversations hahaha, so thats why I mentioned it. looks like you wrote an awesome review, I will read it completely 2morrow.

Well I guess if you're doing it for practice and knowledge purposes and for education then go ahead, no harm in it. But I think if you do do it, apply it more generally, it sounds a bit tedious just for buttons. I just think in a commercial environment I wouldn't recommend over analysing something :) - look forward to your comments.

"hilst we have this gigantic header telling us something we probably already" good call, I agree. It should communicate value instead of a generic description.

"The "steps". Again, this is pointless. You don't need to tell people visiting a themes website that they have to choose a theme and then pay for it. It's patronizing." But it does clearly delineate the next steps, removing any doubt. And there is also the power of suggestion :)

"Popular themes. Why only 4?" yes I'll definitely try different setups here. Current bounce rate is only 45% but there is room for improvement.

"Spacing" After reading all the comments I'm spent some time look at my own design and I agree that I definitely need to put the grid on again and steer this design back on the road.

"Search" - I only have 8 themes so search would be useless.

offtopic: Don't buy Drupal themes from templatemonster, they have a reputation for hardcoding stuff in the template and bypassing Drupal's systems - thus rendering the theme useless if you don't want the exact look you see on the screenshot.

Telling from the temaplatemonster downloads counts on the grid page I sell way more themes than they do. My shop is the #2 dealer (in sales/revenues) in Drupal themes after topnotchthemes.com.

Michael, with respect, I think you're wrong to advise against the testing. This is a website trying to sell something and the design is ultimately measured by its results not its beauty. I agree with the whitespace concerns and a ragged left edge is always a risk.

I have to say however I am not as upset as everyone else about this design. It is a significant improvement over its predecessor and looks way better than the other two drupal theme shops I have seen (fusionthemes and cmsquickstart). The themes look superior to the competitors. Good luck for the future.

Jesper, you're misinterpreting my comments. I'm not saying don't test at all. I am saying that going to extraordinary lengths such as "binary logistic regression analysis" to decide which colour to make the buttons is going way over the top.

You should test your web designs, but basic A/B testing is easily enough for a site like this and I certainly wouldn't conduct Binary Logistic Regression Analysis to decide which colour to make my buttons - it's ludicrous overkill.

Jurriaan, cheers for your comment. I do appreciate now search would be a fruitless task. As a side note, I don't use Drupal, I am a Wordpress guy, but I appreciate your comments regarding templatemonster.

Of course data doesn't mean anything if there isn't a professionally constructed design at the base. But form there on, stop relying on the hippo! If you don't know what that means I highly recommend this article as an introduction to statistical analysis: [pdf alert] http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.141.474&rep=rep1&type=pdf

Thanks for your comments guys, all of them are very useful and actionable, and I also enjoy the discussion of gut feeling vs data - and art vs science. I think it takes an artist to come up with creative ideas that engage and interest people but a scientific approach to see how well the idea works in the real world.

@Jesper thx for the best wishes

My point is obviously not getting across very well, so I shall just leave it, if you wish to conduct such intricate testing to decide whether a button should be blue or whether it should be green then feel free - but for me I would not bother for a site like this, it is to me a waste of time when time would be better spent on more important aspects of the design which are significantly weaker :o)

Thx Lisa,

" If they are likely to be people who use theme sites all the time then definitely it is. The stepped approach works for fairly novice users."

This is also a point, paid themes are kind of an emerging industry in Drupal and people are not so much used to it. Though a leading wordpress seller that I researched also uses this: http://www.woothemes.com/ so maybe it will still keep working through the power of suggestion even if people already know how the process works.

I will try removing it from the product page.

offtopic: I noticed some commented critized me using statistical analysis to judge which design setups work best but I think the data speaks for the customers and what works for the customers is more important than the opinion of professional (including myself), or more aptly said the HiPPO (Highest Paid Persons' Opinion). http://www.google.com/search?q=hippo+highest+paid+person+opinion

-Will try to redesign the slider buttons thanks

-

Just noticed your P.S. regarding the 960 grid system. All I can say is that if you're already using the 960 grid system in your Photoshop layout and you think that everything is lined up perfectly, then you aren't using the 960 grid system correctly.

Thanks, I kinda like what you did with wrapping the text abround he icons, it makes the benefits look more wholesome. The downside it that it breaks the flow of the text.

I don't like what you did to the next steps, now the numbers don't align with the the 4 or 3 column parts of the layout.

I think everyone uses the grid differently, some people more strictly and some more loosely. It's also never a bad thing to make something stand out by placing it off the grid, like the "next" word of the next steps bar in my original design. Though not appropriate for this design I am a fan of more stric grid designs, such as of course the homepage of Khoi Vinh: http://www.subtraction.com/

I can only give you my professional recommendation about website design balance and usability. I want to point out that reviewers have been consistently saying you need to improve your alignment and spacing with this design. I spent an hour this morning doing that for you. I can't force you to change the things that are off. You can take it or leave it. Good luck.

Yes, and I appreciate that! I'm definitely not going to "leave it" - I will take your advice to heart and I'm glad that you took the effort to go into photoshop and align things and I like many of the adjustments but please don't take it personal if I point out something that I don't initially like, maybe I just need to look at it better :)

I never take anything personally here. :) I look forward to seeing an update if you have time to post it here again.

For me their are also spacing issues on the Menu bar at the top.

Also the worst problem with the icons is the Drupal Expertise icon which sits too close to the text on either side. if you do nothing else change this icon so that it is the same size as the others. Also the Customer Says Photo sits too close to the text.

I really like the numbered steps but you do need to do some work on the way they are spaced currently (even if you reject the design above). I wonder if working on the font sizes as Jamie suggests above might help?

Si sono daccordo anche io , a parte il logo che è tutto da rifare io metterei un fondo a nuvole trapsarenti e per quanto riguarda txt e descrizioni inserirei nel CSS => text-shadow: -1px 1px 0px #000;

yep it's CSS3 text shadows, if you have any questions about the design feel free to ask but I don't speak italian. CSS text-shadow is not compatible with older browsers so you should only use it for progressive enhancement (meaning that without text-shadow it should at least look decent).