0

I'm currently in the process of making a design for a web application.

Although I'm very interested in design, I'm actually a programmer, and I don't have a lot of experience with design. That's why I came here.

I have the following set up: enter image description here
(click for original)

The menu on the left has a small hover effect, where the text turns white and gets a very light gray-ish background color.

I tried my best with the limited knowledge I have, but I just have the feeling something isn't right (and it feels too plain).. I paid special attention so that everything is in an "invisible grid" (e.g. there is a line flowing down from the logo to the left menu-bar).

I also tried my best to match the colors (the red and green are required by the customer). But I'm having trouble matching colors with the green..

Could you provide me with tips (any tips IMHO that would benefit the design)? I'm willing to upload the css and html if required!

Thanks for the help :)

UPDATE: This is what it looks like now:
enter image description here
(click for original)

Improve this question
4
  • 1
    That is a really awful green you have to work with. My condolences.
    – Lauren-Clear-Monica-Ipsum
    Mar 21, 2012 at 10:34
  • Agreed. Any chance you could talk to the powers that be about that as part of the design changes?
    – lawndartcatcher
    Mar 21, 2012 at 12:14
  • Not really .. it's part of their style, I'm building a new project (but it has to have the same type of style)
    – Team-JoKi
    Mar 21, 2012 at 12:19
  • I don't think the green is a problem per se, but I do know that red and green color-blindness is potentially going to be a problem here: for someone who sees green as a more of a grey tone the menu items may become invisible. I think the overall look here is respectable, and I tend to agree with Ryan's suggestion of right-aligning the menue headers to match the rest of the menu.
    – horatio
    Mar 21, 2012 at 15:20

1 Answer 1

Reset to default
1

First, this is obviously a critique which we allow but as a result the following are my opinions:

  1. The menu on the left should all be aligned right. Its strange to me that you aligned right all the points but then align left the headings and then indent the date. Align it all to the right.

  2. I think the Green and Red is actually nice. What doesn't work is that blue you chose for links and for whatever that rectangle in the middle is. I would find a different color than blue to use. Perhaps a really dark green almost black would be better.

  3. The kerning on your lettering in parts looks really tight. For example at the top the word 'Project' has the C and T touching. KPI in the middle has the P and I almost touching. I would really allow a little more space. The compactness is nice but I think you went a little too far with it.

  4. There's gray around the KPI on the left menu. I'm not sure why it is there but I would adjust it so whatever it is doesn't extend past the right alignment you have or add another element there showing the margin area. Right now it just sorta dangles over the invisible edge you've created with the text.

Improve this answer
7
  • I tend to agree with the points here. For #4, I read the grey as a highlight to indicate the currently selected menu item.
    – horatio
    Mar 21, 2012 at 15:16
  • Yeah, the gray indicates the active item. Anyways, I made the adjustments that you mentioned: see (i44.tinypic.com/2pts512.png) I agree it looks better, but it still doesnt have that.."nice"-feeling
    – Team-JoKi
    Mar 22, 2012 at 9:44
  • I think it looks a lot better. Now that you changed those things the only other thing that is sticking out to me now if that the IWT logo would probably look better if it was also right aligned with the menu instead of sorta centered with the left alignment of that middle area. Otherwise its just missing more content and stuff so it looks a little empty instead of nice. But if thats the required content then I think it looks fine.
    – Ryan
    Mar 22, 2012 at 11:45
  • After looking again I would move the logo to be aligned with the menu and then space the top stuff to be aligned better with the middle area. Title, Bob's Blog subtitle, and the buttons perhaps align left with the middle area. And then you could put the username/image either under or above the overzicht on the right side.
    – Ryan
    Mar 22, 2012 at 12:57
  • Allright, I think I've done almost everything I can :) i42.tinypic.com/2r5ua8j.png. I changed the location of the logo, changed the margin between the left and middle content, and I put the application-links under the account, so it "looks" like the page is bigger! What do you think?
    – Team-JoKi
    Mar 22, 2012 at 14:26

Your Answer

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

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