Aesthetics...

[chris128]

OK so I suck at designing things and I figured I might be able to get some other people's opinions on the visual elements in my app here :)
Please dont just post comments like "I dont like it" or whatever, I'm looking for constructive criticism.

Also bear in mind that the app is no where near finished (and I know people will say forget about the visual parts until its finished but I would like to try and keep the visual elements up to scratch AS I develop the code, not just leave it all until the end).
I would like to keep a similar colour theme going throughout my app but the main problem is finding a colour that actually looks ok! I always thought a light blue colour could never really look that bad but according to some people (DeanMC you know I'm referring to you!) it doesnt look great in my app :)

So yeah, here's a few different layouts/colours, just tell me which you like best (if any) and if you have any suggestions on how it could be improved then feel free to post them :)

Original

http://i135.photobucket.com/albums/q160/chriswright128/Exloading.jpg

http://i135.photobucket.com/albums/q160/chriswright128/Exdashboard.jpg

Dark Blue + Smaller Windows

http://i135.photobucket.com/albums/q160/chriswright128/blue3.jpg

http://i135.photobucket.com/albums/q160/chriswright128/blue1.jpg

http://i135.photobucket.com/albums/q160/chriswright128/blue2.jpg

(also note that the panels slide forward when the mouse moves over them, so there needs to be that extra space at the bottom of the dashboard form)
Like so:
http://i135.photobucket.com/albums/q160/chriswright128/slideforward.jpg

Any suggestions/comments? :)

[mendhak]

Too many reflections.

I like #5 a lot, it's straightforward and simple and to the point.

With that in mind, the dark blue theme looks better than the light blue theme... so yeah, you're probably wrong about the light blue being better. :)

[chris128]

by #5 you mean the import data screen yeah (with the grid view on it)?

As for too many reflections, I only have 3! :( You think I should remove the reflection from the Dashboard title bit and just leave it on the 2 panels?

[mendhak]

Yeah, the Import Data screen.

It is, in the end, your application, but when I look at it, the reflections that stand out don't server any purpose to me. I suppose the ones with subtle reflections are better. It is, after all, some sort of a data processing app, rather than a graphics-oriented app. I don't do reflections, so I don't know how it's done, but is there a way to reduce them? Try that out, play with it, post more screenshots.

And I'm also waiting to hear from DeanMc, who as you say, is vehemently against certain aspects of your layout.

[chris128]

haha well we will see what Dean thinks of the new colours :P

Yeah you can alter pretty much any aspect of the reflections so I can certainly play about with them.
When you say it is a data processing app and not graphics oriented, I suppose I should explain exactly what this app is for. As the name may imply, it is for generating reports from Microsoft's email system "Exchange Server". There has to be the Import Data section to actually get the data that the reports will be generated from, but that is the only 'data processing' like part really. The rest of it will be based around generating pretty reports so it is kind of graphics oriented :)

[DeanMc]

Eh hem... Ok so first off I agree with Mendhak, Dark Blue much better but the blue bottom and white top is to much of a contrast. Second I probably wouldn't have the reflection as noticeable either. It needs to be noticeable but in a very subtle way. and third, as I have said over and over, get it to work first and then pretty it up :)

[chris128]

haha nooo it has to be pretty while I'm making it ;)
Well either way, I am still going to have the same problem when its finished and I come to do the UI parts so any suggestions now will be handy even if I do decide to leave the UI til the end.
What colour can I use instead of the dark blue then if you think the blue/white is too much of a contrast? I dont want to use gray :(

[DeanMc]

keep the dark blue but use it in that same way you used the color in the import data screen it looks less gearish.

[chris128]

Alreet I'll give that a go and see how it looks :)

[vbNeo]

In my experience, a linear gradient going from 255*3 white to color x is never a good idea - unless you're going for some sort of shade with a low opacity.

White will almost always be pretty hard on the eyes, especially if seen next to a darker colour.

If you really want to use a blue gradient for the background I'd suggest going from a lightblue to a darker one(but not as dark as what you have there). You might also consider just having a solid color background(Light blue, light gray) and spruce the application up in some other way - maybe a gradient panel in the top to serve as a container for the headline.

I really like the idea of a rotating panel with a reflection you have on the last image. It gives you the opportunity to make an otherwise very small UI element large and very "click friendly"(think Mac;)) without it being awkard - although I do agree with the others that you shouldn't be putting reflections on everything :).

My two cents, it may seem like a mess, but it's the end of the day and I've just had my sixth cup of coffee, so I really can't be held responsible for my actions.

[vbNeo]

Also - the icons should be much more clear and colorful, it looks like they're being rendered at low opacity.

[chris128]

Also - the icons should be much more clear and colorful, it looks like they're being rendered at low opacity.
Yeah the icons are just there as a temporary placeholder until I get some better ones ;)

Thanks for your comments though, I think what you said about just having a gradient in the header/title section might be a good idea so I will try that

[chris128]

What do we think?


http://i135.photobucket.com/albums/q160/chriswright128/light1.jpg

http://i135.photobucket.com/albums/q160/chriswright128/light2.jpg

http://i135.photobucket.com/albums/q160/chriswright128/light3.jpg

yay or nay?

[DeanMc]

Getting better, remove the blue gradient from pic 1 though!

[chris128]

but, but . . . I like it :(

[mendhak]

Looking better. Remove the blue gradient from pic 1 though! :afrog:

[chris128]

Damn you two ganging up on me..
So just have the first screen completely white you mean? That looks pap!

[mendhak]

The key being simplicity. Try it out and compare them. See which one you like. If you like the blue gradient bit more then keep it! At least try it out first.

[vbNeo]

Keep the blue gradient! (Don't listen to them damn kids, thinking they're gang bangers and what not ;). I have to agree though, it doesn't look that good, but the window shouldn't be all white either. Make it a bit smaller and try adding an icon or something to spruce it up... Maybe use the gradient you're using at the top of the other windows.

The other two look much better now, seems like there's a little to much space from the top of the window to the actual content in image 2, but that might just be me :).

[DeanMc]

Tell me you didn't keep the blue gradient!

[chris128]

All will be revealed soon... ;)

[Atheist]

I feel that if you keep the blue portion in pic1, you'd need something like it on the others too. To keep it consistent.

Bottom line...
Looking better. Remove the blue gradient from pic 1 though! :afrog:

[Negative0]

I don't think gradients are a bad thing, you just need to be more subtle with them. Go from dark blue to a lighter blue over the course of the entire form, instead of going from 0 to full in less than 100 pixels.

[Pac_741]

You should extend the Aero frame, that way it will look way better than it looks now. :) good luck

[DeanMc]

Looks good!

[DeanMc]

Lole!

[mendhak]

Where are the changes?

[DeanMc]

There are none, nor will there ever be, this is a non runner, all your base belong to use, you can't handle the changes, good bye.

[chris128]

what the hell happened to this thread! I leave you guys alone for 2 minutes...
I'll make some changes tomorrow when I get back from work and post em up :)

[vbNeo]

The cake is a lie.

[chris128]

OK forget that other app for a moment, I've started a new one (well a re-write of a project I am half way through developing in winforms).

What do we think of this as the first screen the user sees, the logon screen:

http://i135.photobucket.com/albums/q160/chriswright128/new.jpg

It seems too crowded for my liking but whenever I look at other apps I always notice that the controls are much more tightly packed than in my apps so I figure I will try not spreading things out so much... but I dunno, what are your thoughts on the colour scheme and layout etc?
Dont worry im not going to be posting asking for opinions on every single form but like in the other app I want to keep a continuous theme throughout so getting one form right means I can get the rest right (hopefully!) :)

[Hamish]

Can you get rid of the status and title bars? Then it would be just fine for me.

[chris128]

I'm not keen on the statusbar either but I need somewhere for a progress bar and label to show when the login request is being processed :(
Also, when you say title bar, do you mean the bit that says "Login" or the actual window title bar with the X etc in?

[Hamish]

I meant the actual window title bar. The "Login" bit I like.
Can you make the status bar the same color as the "Login" banner, that would make it better too, I think.

[DeanMc]

You could always have the progress bar just appear, you could also just remove th top bar and have login written in a nice white text like calibri.

[chris128]

How about this then, no title bar and rounded top corners :)
http://i135.photobucket.com/albums/q160/chriswright128/rounded.jpg

[chris128]

You could always have the progress bar just appear, you could also just remove th top bar and have login written in a nice white text like calibri.

Yeah but where would the progress bar appear? There's no room on the form to stick it! Or did you mean in a new window or something?

[Hamish]

How about this then, no title bar and rounded top corners :)


Much better, now all I would like is to have the color of the status bar the same as the Login banner.

[chris128]

I just tried that but it doesnt look great. just playing about with some slightly darker colours for that bit now :)

[Hamish]

I think colors are very nice, but I'm a 2-color scheme kind of guy I guess. How about making it the same as the rest of the window then? With white text and progress bar.

[chris128]

OK, here's both, I prefer the second one but what do you guys think?

http://i135.photobucket.com/albums/q160/chriswright128/again.jpg

http://i135.photobucket.com/albums/q160/chriswright128/onemoretime.jpg

[DeanMc]

Leave the space for it where the status bar is.

[DeanMc]

Thats what I ment.

[chris128]

Ah I see, well personally I quite like the look of the status bar now after making it the same colour as the rest of the form as Hammish suggested so I might leave it on there.

Oh and I just ordered those 60,000 icons or however many it is so I'll be getting some of them on there soon too :)

[dee-u]

Just wondering how long does the process of logging in takes? Why does it need a progress bar?

[chris128]

Well if the database settings are incorrect then it can take up to 15 seconds or so for the connection to timeout. Even if its correct, logging in is done via a user/password table in an SQL server on the network so if its a slow network (or slow server/PC) then the login could take a few seconds.

[Pac_741]

If you need help, in designing i can help check out my web page.

[DeanMc]

I believe its now 83,000 Chris!

[chris128]

644606 unique icons in 208 icon collections & counting
Looks like its quite a lot more than we thought :)

[DeanMc]

ah ha!