I'm working on a simple one-page calculator, heavy with JavaScript and form elements. A snapshot of the page is attached.

Obviously it's very plain and I haven't put much emphasis on the layout of it yet. But this prototype is about to be shown to the client. There is the understanding that it is a mockup prototype, so the client is not expecting anything design-wise, but I wouldn't mind if it looked a bit nicer.

What are some quick and easy tweaks I can make so that the page looks a little better? I'm terrible with colors and design but I know CSS quite well (like an English major who knows correct spelling and grammar but is terrible at writing a story).

Also, I am using jQuery in the form, so anything involving jQuery is great.

3 answers


I agree with changing the font to sans-serif and making it a dark gray. One other thing I would do is give the body a set width and center it all up to make the fieldset borders not expand all the way across the page. All you would need to do is add this to the CSS:

body {width: 500px; margin: 2em auto; font-family: arial, verdana, sans-seirf; color: #555;}

One last thing to really finish it off would be adding a heading above the entire form stating what it is.

<h1>Light Savings Calculator</h1>
Answered about 6 years ago by Artistic Abode

Although design is entirely subjective, I wouldn't mind throwing in my 2 cents.

If you're truly looking for some quick tweaks, I think I have a few good ideas. First, set your type font to anything-sans-serif; I'm willing to bet the client would cringe if they saw Times. Next, change your font color to anything between #666 & #888 (keep it gray though); it'll help make it crisp and easy to read on a white background.

I would toy around with the fieldsets and legends and probably go as far as removing the borders, then applying a background-color of a very very subtle gray or yellow. Naturally, your legends should have some kind of presence, so make the text size a little bigger (or on the contrary, smaller, bold, and all-caps) than the rest of the programs text.

...You know, as I write this, I'm coming up with way too many ideas. Just work on the little things and make these changes minor. I really don't know what else to say before I start charging for a consultancy fee lol.

Answered about 6 years ago by Vinny Burgh

there's a few things you can do with the input fields that make a form stand out. A small background image repeating-x inside the field to make it look like its shaded looks pretty good. Have a look at how Wufoo does it. Just use firebug and inspect their fields. They do a lot of cool stuff that makes their forms look awesome. Another one I like is a small font short descriptor text under a set of fields.

Bumping up font sizes can also work well with forms, depending on the rest of your design.

Answered about 6 years ago by Moin Zaman