I am trying to redesign my site however I am a developer and have no real UX experience beyond a VT 1300 course. I have chosen a color from my logo and created a complementary color scheme using color.adobe.com however my site just doesn't look "right".

Here is a mockup done in Photoshop

enter image description here

I just don't think it is working but I can't place my finger on why. It might be something to do with the section above the footer's color?

If anyone could help point out what is wrong with this design (it may even be the whole thing) I would appreciate it.

  • I tend to see things differently, but for me this looks like a "smartphone app". I expect a website to not have that sort of ratio/layout. But that's me.
    – user29318
    Oct 27, 2014 at 18:11

2 Answers 2


I do feel there are some issues with this design- it's not terrible but could do with some work:

  • Get rid of the gradient at the top. Or if you do keep it, make it very subtle- I would also recommend making it a radial gradient rather than horizontal linear.
  • The brown shades may be based on the logo but they're a bit "mucky", especially with black text on top.
  • The logo in the top centre is too close to the navigation links and makes it feel a bit imbalanced (to the left). I also don't like how the centre of the logo is semi transparent. I'd make the background of the logo pure white. How would the logo look in different scenarios?
  • I feel each section needs to have more vertical padding, especially in the top "Eternal Reminder" section. I'd put a much bigger gap between it and the next section. I also don't think there should be a second section just for that one call to action button.
  • The colours should just generally be brighter and higher contrast. Try putting it into grayscale and see how much it "pops". It's often a good way of working out if you're using the right kinds of relative contrasts (between background shades and the text, mainly).
  • The bottom two sections feel a bit sparse to me, especially with the horizontal spacing between each "feature". I would make them three columns wide and try and get at least two rows (but this is maybe more of a content issue rather than a design one).
  • I don't think Helvetica is really interesting enough here- it usually works best for stark, B&W designs.

These are just a few main things at first glance. I think my general advice would be to try and make it a bit more cohesive and make it a bit more spaced vertically but try and get more stuff in horizontally. And definitely remove the brown.

Apologies if I'm being too critical- personal opinion and all that! Hope I can be of help :)

  • Ps, I would like to know if there's more content- but I don't reckon SSL and it being free are really features! (Also a typo in 'safetly') Oct 27, 2014 at 9:07

Just a quick suggestion - The next time you provide a mockup and it contains an actively changing element like a slideshow, gif (or in this case, a video), try to take the part of the video that is the most muted for the mockup. The rather bright yellow video section distracts viewers like me trying to provide suggestions about the color scheme.

Now this color scheme goes two ways -

  1. The color scheme you were intending to achieve may be the two colors in the gradient of the header. If this is the case, the colors don't look right because the background to the video is a brighter green. The problem is not with the section above the footer. Try changing the division of the page in which the video is to a lighter version of the color above the footer (the features section) to something like #C1B46B.

  2. If you wish to achieve a brighter color scheme, revolving more around the green in the video section and its shades, you'll have to redesign most of the elements of the website, including the gradient colors, the button color, etc.

Cheers ;)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.