This example is a crucial step, and probably shouldn't be merged with another step. Nor am I looking to add unneeded content, since it'll only clutter the UI.. Resizing the fixed area isn't a viable option either, at least not sufficiently enough (prefarably not at all).

I'm sure I can't be the only one who encounter this problem, but what do you do when you find yourself in it? The mockup is as said only an example, but feel free to re-use it to demonstrate a solution.

Is this a web application or a native application?
–
Charles WesleyDec 18 '12 at 22:06

@Charles This is a native application which will run in full-screen. If the window-size isn't big enough, this fixed-size box will be centered on a background which does fill the whole screen.
–
ZarDec 18 '12 at 22:08

When you say that the application has a fixed size of 800x600, what do you mean by that? Can you explain that constraint in more detail?
–
Charles WesleyDec 18 '12 at 22:25

3 Answers
3

Firstly, it looks to me that you could probably get away with increasing the size of your UI components and copy. Text really needs to be 14px or above to be well-readable anyway, so there are practical benefits to doing this beyond just aesthetics.

Secondly, if you feel a page seems 'orphaned', and the form is an action relating to some other table or group of elements on another page, you might get away with showing the form as a lightbox. It's not great practice to choose UI elements just because they look 'nicer', but if it's appropriate from a UX perspective then it's something you should look at.

Thirdly, you can add secondary content to the page if it helps promote the activity, or provides help or advice. This is what Twitter does on its login pages (below), but be careful not to steal attention from the form itself. In Twitter's case, the bright white UI elements and subtle highlighting around them keep the form the centre of attention.

Finally, you can make the whitespace more interesting. A common technique on login and 'gateway' pages is to show a blurred stock photo background, as in the following example:

Web-savvy audiences (i.e. other designers) might find this a little clichéd, though. Another technique is a simple colour or gradient for a background. Using something darker than the page body again helps draw the eye to the form.

Whitespace is a design element. You should use whitespace well and spread your content out to what makes the content the most readable and usable, rather than trying to cram it together. You could also have bigger text - most sites have their text too small, especially for forms.

Overall the if it's usable for your customers, then the rest of it is an aesthetic design decision where as long as you aren't making it less usable, you can make it more pleasing to look at.