[ProjectComplete] Due March 16th - PSD Only - Web Interface - $375

[trevorh]

Admin code added by Abby - 4CG65747936518716 , 22B21609S3721245E

Hello all, our latest contest is to design one page of the web interface for our web-based app called Facilities Manager. This description is long but it should be pretty easy work. You’re strictly coming up with the graphics and layout for it. No html coding is required.

Header bar

Refer to any of the attached screenshot for a rough and ugly concept of how the interface should be laid out. Note the blue and gray bar on top of the screen. This bar can be kept similar to how it is now but the white space above the green row should be eliminated and blended into the menu below in some cool way. To clarify, you can keep the gray line, but it should go straight across the screen instead of being angled with the white space below it.

The header bar can be given a more 3Dish look, rather than the flat look it has now, in order to better match the menus and buttons you will be creating.

Menus

The site’s interface will be driven by 3 menus which are pictured in green, yellow and white in the screenshots. You should come up with a cool new look that for these menus and colors that better match the top bar and the rest of the site. Different shades of blue, gray, green and yellow may look good. The different items on the menu should be made button-like with a 3D-ish look to them. The menus should be positioned roughly as shown in the screen. They should run horizontal below the top header graphic.

The primary menu is shown in green on the attached screenshots. I would like to have little icons beside the different items in this menu. For example Reporting could have a little icon of a graph or chart beside it. The view a user is in should be indicated in the menu. For example if someone clicks on ‘Administration’ that button should change color to indicate that they are in the Administration view. You may want to use tab style buttons for this menu. I do not have the icons picked out yet as I’d like to find some that match the style of buttons that you create. You don’t have to find the icons. You can use any 16x16 icons as placeholders for now. White icons would probably look best if you’re using dark colors.

The following items should go on the primary menu:

• Dashboard
• Reporting
• Alerts and Costs
• Administration
• Server Settings

The secondary menu (currently yellow) will change based on what’s selected in the primary menu and the options it displays will change frequently -- therefore the buttons on it should not have icons.

Secondary menu items:

• My Profile
• My Dashboard Views
• Users
• Customers

The following should be put on the right side of the secondary navigation:

• Help
• Logout

The tertiary menu (currently white) will be a toolbar. This can be separate from the other menus and can look similar to a gray toolbar that you would see in Microsoft Word or other programs. The items on the toolbar should be text only and button-style on some kind of a cool background. You are not required to put icons on this menu.

Tertiary menu (toolbar) items:

• Expand All
• Collapse All
• Edit this view
• Delete this view

Page title

If you look at the top of the screenshot you will see the page title, Facilities Manager – Device Details. You should come up with a better look for the title and a better position, probably somewhere below the menus. Also, you can remove the words Facilities Manager from it.

Page content

This page will display information about various photocopiers. You should come up with a better overall look for this page. The basic layout is fine but the tabs on top of the table in the middle of the page should be replaced with nicer tabs that match the menus you are creating.

The tabs should be as follows:

• Counts
• Costs
• Supplies
• History
• Alerts

On the right of the screen there’s a picture of the photocopier. I would like to come up with a cooler way to integrate that picture into the page. Keep in mind that the picture will change based on the model of photocopier that the user is viewing information about, so your design should make it easy for us to swap in a new photo. The copier will always be on a white background. The picture can be made a little bigger.

Other hints

We would prefer if the background of the pages weren’t white. So you can perhaps use a light gray or blue.

The page footer graphic should be replaced with something that matches the new header you’re making.

Here are some links to our web site and marketing materials to give you a better idea of colors and styles that you can use.

http://www.printaudit.com

http://printaudit.com/downloads/pdf/Facilities_Manager_Brochure.pdf

http://printaudit.com/downloads/pdf/Rapid_Assessment_Key_Brochure.pdf

The site should be styled similarly to the above brochures but you can freshen up the look and add some additional colors such as green and yellow if necessary.

Deadline: March 16.

Thanks!

[trevorh]

I have raised the prize to $375 and shortened the deadline to March 12. I would like to wrap it out as soon as possible so please do not delay. Thanks!

[abby]

Project Update: The project amount has been raised to $375 and the deadline has been updated to March 12th.

[Lori]

Here is my idea for your application (I think the bottom logo should also be white FYI):

*removed for revisions*

Let me know your thoughts :)

[trevorh]

Lori, you have the right idea with the overall layout and menus. I like the style of your buttons, however the screen looks a little busy. I think lightening some of your colors could help with that. The green statistics bar isn’t really needed. I would like to see the primary menu in a different color as I'm not sure that orange compliments the other colors very well. Also, can you think of a way to better integrate the header and logo into the primary menu?

Thanks!

[trevorh]

Here's an .eps of the Facilities Manager logo:

http://www.printaudit.com/images/Facilities_Manager_Logo.eps

Here's the .eps version of our company logo, in case you would like to use it in the footer or something:

http://www.printaudit.com/images/Print_Audit_logo_white.eps

[trevorh]

Is anyone working on this?

[Zoe]

Hi Trevor,

I will try to put something together in the next day or two. :)

Zoe

[Zoe]

Hello Trevor,

Here is my idea. Please note that the icons have been taken from a comp set - if chosen I will tidy these up. :)

I look forward to your feedback.

Zoe


* removed attachment *

[Fabian]

Hi,

I have a design that im working on,but won't have it finished for a day or two.If you need to move forward on this project I'll understand.

Thanks
Fabian

[trevorh]

Fabian, no problem, I will probably be extending the deadline a bit.

Zoe, I like the style of your menus, but I would arrange them more like they are in the screenshot I provided. For example, the help and login should be kept on the right side of the secondary menu. Also I would prefer that you used the blue from our brochures as main the color for the header and footer graphics. Green can be used but more sparingly. Also I'd prefer that the headers be kept square, rather than rounding them or using the wave effect you have by the logo.

Thanks.

[Fabian]

Finally manage to get this finished, hope you like this user friendly and clean take for your interface design.

The idea a had was to keep the colours down to a minium and use colour to highlight the sections that is in use otherwise the colours are somewhat muted, the reasoning for this is at a glance the user will know were there are and the section they are currently adjusting.

Cheers
Fabian

[trevorh]

Fabian, I like the cleanness of it and your colors are nice but I think they are a little too muted. I would make bottom footer darker, like you have the top one and I would have the gradient in the footer and header fade from left to right instead of how you have it now.

Thanks.

[trevorh]

I am extending the deadline to March 16.

[abby]

Project Update: The project deadline has been extended to March 16th.

[Fabian]

Brian...:confused:

Are you talking to me,my name is Fabian ;)

I'll make those changes,that I think you asked me for :D

[trevorh]

Yes, sorry Fabian. I'm not sure where Brian came from :)

[Zoe]

Hello Trevor,

Thank you for the feedback. I will make the changes when I get back from work this evening.

Thanks

Zoe

[Zoe]

Hello Trevor,

I managed to make the small changes before leaving for work.

I look forward to your feedback.

Thanks

Zoe


* removed attachment *

[Fabian]

LOL, I do that all the time...

Added a bit more colour and darkened the overall colour toned a little. If you would like to see even darker tones, feel free to let me know.

Cheers
Fabian

[Lori]

Sorry for the delay Trevor - I have been super busy!

Here are some changes:

*removed for revisions*

[trevorh]

Lori, that's better. Here are a few more suggestions: I would increase the height of the blue header graphic, so that the logo doesn't look as crowded. Can you try making the footer bar blue like the header? The bar Device Details heading can be more subtle. I would remove the green bar its on to give the interface a cleaner look. I would prefer that the page title (Device Details) was above the 3rd level menu.

Zoe, that's better but I would prefer a cleaner look. There's still a bit too much going on it yours. You can try removing the white/light blue part of your header graphic and just have the blue run straight across? The bottom footer can be straight too. I would remove the yellow Device Details graphic and do something simpler with that, similar to what Fabian has done.

Fabian, your layout is probably the best so far, but the colors are still a little too muted and the others menus look a little sharper than yours. Can you brighten things up somehow? Also, the FM logo looks pretty faded on top of that gradient. I would move it to the right side or darken the fade.

Thanks!

[Zoe]

Hello Trevor,

Thank you for the feedback.

I have removed some of the detail. If I have removed too much, just let me know. :)

I look forward to your feedback.


* removed attachment *

[trevorh]

Zoe, that's much better. Here are a few other things:

Can you make the FM logo and Print Audit logos a little smaller. I would make the slant beside "log out" straight to much the rest of the site. I would prefer that the 'Counts, costs, etc' tabs were integrated into the table below. I would prefer that the color of the secondary menu wasn't so close to that of the primary menu. Maybe it can be a grayish color, or the blue you used for the background of logout and help menu. Thanks.

[Zoe]

Hello Trevor,

Here are the requested changes.

Thanks

Zoe


* removed attachment *

[trevorh]

Thanks Zoe, that is better, but I actually meant to only make the logos smaller, not the blue bars. Can you increase the height of the blue bars by about 20% but leave the logos the same size they are now?

[Lori]

Thank you for the feedback Trevor :)

I have some other ideas for my layout that will incorporate the requested revisons.

I will work on that later tonight.

[Fabian]

Thanks Trevor,I'll be back tonight with a revised version.

[Zoe]

Hello Trevor,

thicker blue bars. :)


* removed attachment *

[Fabian]

Hi Trevor,Here is the revised version.

I've darkened the colours for the header & footer also the buttons.

Cheers
Fabian

[Lori]

Hi Trevor,

I have made several changes... Let me know your thoughts:

*removed for revisions*

[trevorh]

Lori, can you try changing the page background color to a light blue or gray or something? The table backgrounds are ok. I'm just mean the page background. Is there a color we can use instead of yellow? Is their a bit of a fancier way you can do the 3rd level menu?

Demex, is there a fancier way to do the 3rd level menu and the table tabs at the bottom that's similar to your primary and secondary menus?

Fabian, that's better but I think your dark buttons are little too dark now. Also, is there a fancier way for you to do the secondary menu? I think your header and footer would look better if they were a solid color.

Thanks all. I hope to narrow this down after this round.

[Lori]

Changes:

http://www.zenfulcreations.com/client-files/do/pas/gui4.jpg

[Fabian]

Hi Trevor,

Made some changes,hope you like it.

Cheers
Fabian

[trevorh]

Lori, better but I'm not crazy about the new shade of green. Could you try a different blue or gray or something? Also the 3rd level menu should look different from the fouth.

Fabian, that is better. Let me give it some thought.

[Zoe]

Hello Trevor,

Here are the requested changes.


* removed attachment *

[Lori]

Here you go Trevor :)

http://www.zenfulcreations.com/client-files/do/pas/gui5.jpg

[trevorh]

Sorry all, I haven't forgotten about you. I've been extremely busy with some other projects. I will post more feedback shortly.

[trevorh]

Lori, can you reduce the dark shadow that's in the middle of your buttons so that it's a bit more subtle, particularly in the 3rd menu. I'm not crazy about the gray in your fourth menu. Can you make it a little shinier?

Demex, can you try a little brighter shade of blue for you header and footer to make things a little warmer. The interface looks a little cold.

Fabian, I like the clean look of your design but it may be a little too plain. Can you try adding icons like the others have?

Thanks. Sorry for the delay.

[trevorh]

Some other points:

Lori, I'm not sure that the blue you're using for the fourth menu compiments the other blues very well. It's a bit too purple-ish.

Demex, I like the help/logout buttons better in blue. I do like the idea of adding other colors though so it's not all blue, but I'm not crazy about the shade of yellow you used there or the red font.

Thanks.

[trevorh]

Lori, can you also lighten the line under the 3rd menu a bit so it's not so dark. Thanks.

[Fabian]

Hi Trevor,here's some icons and a button style change.

[trevorh]

Fabian, that's a lot better. Can you move the first level buttons right into the header, like the others have done to save space. Also can you make the fourth level tabs round to match the others?

You should give the header, footer and fourth level tabs a slightly 3Dish look to be consistent with the menus. Thanks.

[Fabian]

Great,here you go :)

[Zoe]

Hello Trevor,

Here are some changes.

Thanks

Zoe


* removed attachment *

[trevorh]

Sorry all, I have been out of town. I will post more feedback soon and try to get this wrapped up this week.

[Fabian]

Hi Trevor,

I felt like sprucing mine up a little,what you think?

[trevorh]

Fabian, I'm not crazy about the spruced up banner :) I prefer the previous one, however, in the header and footer, can you remove the dark sections on the left side and the light patches on the right side. The gradient should be the same all the way through them.

The tabs in the lower table are better but I would like them to look more like tabs and not have spaces between them or below. Also the text is a little hard to read now. Can you make them a little higher contrast?

Thanks.

[Fabian]

:)

[trevorh]

I think you misunderstand with the header and footer graphic. You should keep them as they are in this revision:

http://www.designoutpost.com/forums/attachment.php?attachmentid=78439&stc=1

But I don't like the bright spot on the right side of the footer or the dark spot on the left of it. Same with the header.

The text on lighter tabs is better now, but it looks kind of fuzzy now. Can you make it more crisp? The dark tab is still a little hard to read.

The tabs look a little weird right on the table. Can you put them on a line instead of on the table. Like you had in this design:

http://www.designoutpost.com/forums/attachment.php?attachmentid=78399&stc=1

Thanks!

[Fabian]

Sorry for the delay in my revision,I'll get to it tonight after work:)

[Fabian]

version 9 :)

[trevorh]

You should keep the tabs together, they look better without the spaces between. Also you could try putting a thick line between the tabs and the tables, for example as lori did it. The selected (blue) tab is still a little hard to read.

Thanks.

[Lori]

Here are my revisions:

* Lightened tabs on 3rd menu slightly
* Changed hue of blue used on 4th menu
* Added gradient/shadows to inactive state tabs on 4th menu

http://www.zenfulcreations.com/client-files/do/pas/gui7.jpg

[Fabian]

Is this what you mean?

[Zoe]

Hello Trevor,

Do you require any further revisions from me or have you decided upon a winner at this stage?

Thank you

Zoe

[trevorh]

Demex, you can try one more revision. I haven't decided on a winner. I think I'll put it to a vote with my co-workers on Monday and decide the winner that way. Try the following:

The 3rd and 4th level tab menu's should be on the left of the page instead of the right. I would remove the yellow tint from the middle of the page and leave it light gray as you had it before. Give the yellow menu more of a orangey tint and make the logout and help buttons orange as well, instead of blue.

Lori and Fabian, you can keep your designs as is for now. I will hopefully pick a winner on Monday.

Thanks.

[Zoe]

Hello Trevor,

Here are my changes.

Thanks

Zoe

------------------------------


* removed attachment *

[Lori]

Hi Trevor,

Could you check in with an update please.

Thanks so much.

[trevorh]

Sorry for the delay all! I will post an update shortly.

[trevorh]

Hi all, I would like to have you all do one more revision before I decide on a winner. Their are elements from all them that I like so I'm having a hard time deciding.

I want you all to change the third level menu (expand all, collapse all, etc) so that the items look like buttons instead of tabs. You can use icons on the buttons if you like. Fabian that applies to you to, I would prefer you changed your 3rd level menu to buttons instead of just text and also i'd prefer it was on the right side so it's more visible.

I will try to pick a winner on Monday and this time I mean it. :)

Thanks.

[Zoe]

Hi Trevor,

Unfortunately at this stage I will not be able to make any further changes. I will of course be happy to work with you further should you select my design.

Thanks

Zoe

[Fabian]

version 11

[trevorh]

Lori are you trying a revision too? Thanks.

[trevorh]

Thanks for your hard work everyone. Fabian wins. I will follow up in awhile and let you know how I want the files split up. Thanks.

[Lori]

Sorry I did not have the free time to work on another revision. Congratulations Fab.

I have moved this thread to the revisions forum where you can finish up. Just let me know when you receive your files.

[Zoe]

well done Fab. :)

[Fabian]

Thank you for choosing mine.Could you please private message me your email address and I'll get those files to you.

Thanks Lori and Zoe :)

[trevorh]

Fabian, can you make some last revisions for me:

- In your last design the footer has a bit of gradient effect but the header is flat. Can you make the header match the footer?

- In the blue menu buttons on the first menu can you darken the white fade that's behind the white writing to make it easier to read?

Thanks!

[Fabian]

Hello Trevor,here are your requested changes.

[trevorh]

Looks good! Can you send me the final .psd file? Also would you be able to send me the buttons seperately (as jpg's) at twice their current width, without the icons or text on them? Our web developer needs them this way, he wants to make the buttons scalable. You only have to send one of each button, for example one blue button in primary menu and one orange for the mouse over. You do not have to send the 2nd level menu items seperately (My Profile, Dashboard Setup, etc) since we can recreate that one as text in a table. You should send the 3rd level and 4th level buttons though.

Thanks.

[Fabian]

Sorry but the buttons aren't scaleable,they are raster images.

[trevorh]

You don't have to worry about the scaling, we'll figure it out on our end. Can you still send them at twice the current width though?

[Fabian]

Trevor,this project is for a finished layered PSD file only.Your designer will have to take care of the slicing of the design.

[Fabian]

Trevor,I have sent all your files including the extras:)

[trevorh]

Files received, thanks!