I'm not ui ux engineer. I just want to hear your opinion/help on where would you (designers) put this grey box or app links, what is your opinion about colors?

enter image description here

  • 1
    This question isn't really a question so much as "Please fix this design for me". A similar question was posted just this week: Professional looking websites Commented Jan 18, 2013 at 0:31

2 Answers 2


It looks like you started with a template and just slapped the gray box on top of it.

The gray box itself seems to contain regular unstyled blue/purple links. The rest of the page uses plain black text for the links. The visual inconsistency throws the page off balance. Also are those supposed to be buttons the links are on? If so, remove the underline and make sure you add appropriate hover states to the buttons.

The drop shadow on the gray box is also rather overwhelming, and I would suggest making it more subtle by changing it's color or making it smaller (or both). The gray box also uses rounded corner whereas the rest of the elements use sharp, pointed corners.

Keep in mind the yellow, black, and white are kind of the "theme" of the website. It's very minimalistic and clean - the gradient of the gray box really takes away from that.

I would also suggest reading through these questions:

  • Thank you very very much! Your answer is brilliant, just one more question, where would you put this navigation menu with arrows (the one under the portfolio) and gray box, in such a way that it would be easy to click on app and gray box will change content.
    – Vor
    Commented Jan 18, 2013 at 1:21
  • I'd tuck them in on the side of the gray box and have them peek out when you hover over them, or make them tabs at the top of the box, or have the "Portfolio" part of the menu expand to show a sub-menu. I would also recommend making your gray box white and maybe add a subtle texture.
    – Hanna
    Commented Jan 18, 2013 at 4:15

As mentioned above the gray box is out of place and I have some other notes to add in regards to the gray box.

  1. The gray box has round corners when your navigation is sharp, crisp and to the point
  2. The gray appears to have a gradient with a blur effect
  3. The gray box has a harsh shadow.
  4. Gray, black and purple look good but you throw in an overpowering yellow for a background.
  5. In your main navigation you show a harsh font layout. Might I suggest reading on kerning, leading and tracking. (This also applies to "Portfolio" and "software and Web Engineer").
  6. To touch more on the navigation: you have two completely different elements of direction. I do like the subtle look of the main, but the sub and arrows have no purpose. Pick one style and go with it.
  7. Lastly the background. Look into contrast and colors. You basically have a medium and no distint definition. Maybe a darker yellow or a pattern to help soften the extreme yellow. Might I also suggest to make the white pop ad a small black or gray stroke.
  • Awesome! That's exactly what I was looking to hear!
    – Vor
    Commented Jan 18, 2013 at 1:20

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