abel 0

The question is very open-ended. So let me clarify.

I am a programmer primarily and feel that I lack design "sense".

I have a webapp, which I designed (not much of a design) in 2010. The app is currently in use, so I will not be able to link to it here(Company issues). However I will try to explain in words.The app is related to accounting.

Current "Design":

Header with a 2 color gradient image(repeated horizontally), gradient is vertical with the lower color occupying the bottom 3/4th of the image. Height 50px. The header has a sans font face and font size 1.6em.
This is followed by a 25px strip which contains the menu. There are 8-10 menu items(depending upon the app) aligned left and a search box aligned right on this strip. The menus pop up on rollover(using li and css, no javascript). The background is composed of a 2 color vertical gradient repeated horizontally. The 2 colors are the same that were used in the header background image, however the upper color occupies the upper 4/5th.The upper color is same as the lower color of the header background image.In simpler words, the dominant (major) color occupies majority of the gradient in both images. The second color is the "minor" color.
The menu titles' background color onmouseover changes to the minor color.
The menu(which pops up) has the background color set to the minor color, which changes to the major color onmouseover
This is followed by the body, which is by default white in color. Font color is by default black. There are no sidebars.
The footer is separated by a horizontal rule. The footer contains a AppName (c) (year) (version) aligned left and Client name aligned right.That comes in a single line. The footer text has a font size of 1em and is padded vertically with 0.5em.

div structure

<div id="container">
    <div id="header">
    </div>
    <div id="menu">
    </div>
    <div id="body">
    </div>
    <div id="footer">
    </div>
</div>

The container div is centered using

margin 0 auto;
width:some fixed value depending on screen resolution;

The fixed size is calculated by deducting 100 from horizontal scrren resolution (eg. 1024 has a 924px width container). The body uses a gray color for background.

Summary:
Font face: Sans
Font Size: Header: 1.6em. Rest: 1em
Major Color:Header and Menu "major part" background Minor Color: Header and menu "minor part" background and Pop up menu background
Font color 1:Used in header and Menu
Font color 2: Used elsewhere - Default Black

The 3 colors Major, minor and font color 1 can be changed by the user under "themes". When using custom themes, gradients are not generated and the major color is used as the background color of Header and Menu. (The user can wreck things by using the same color for major , minor and font color 1. But that can be controlled)

Question:

I am trying to upgrade the look of my app. The aim is to give it a more lively and fun feel, while still keeping the site professional. Are there any design tips that I should know in 2011?

I would appreciate links to articles or books too. I would also like a crtique of my current design(given the limited amount of data that I have provided)

I am not looking for hire a designer kind of answer.I understand that point.

1 answer

2
points

I think functionality and ease-of-use are going to be what's driving designs in 2011.

http://webdesignledger.com/tips/web-design-trends-in-2011

Answered over 8 years ago by Artistic Abode