Screen Design

Style

There are many different template pages and more are being created. First of all the templates are customised to YOUR requirements.

Displaying the Application

The first thing that needs to be defined is whether the application should be displayed within a browser window (assuming you want the application to be displayed over the web) or as a full screen application.

Size for Full Screen Mode

At present, the most popular screen resolution is 1024 by 768 pixels. It is not a good idea to use the full screen resolution as some browsers will put a bar at the top of the screen.

Many applications that we provide have screen resolutions of 800 by 600 pixels. This will sit nicely within the 1024 by 768 screen.

We have also used a screen size of 970 by 700 pixels. This creates a bigger active area -the area where content can be added. The active area in the 970 by 700 screen when compared with the active area on the 800 by 600 screen is 45% larger.

Click on the image to see an enlarged version.

screen size
Screen design

Screen Style

The screen design will probably reflect the organisation’s corporate style. It will have the organisation’s logo and use the organisation's corporate colours. Sometimes it will incorporate screen designs used on the organisation's web site or in other packages.

The next stage is to consider the overall screen design. Would you like to have a screen with well defined banners at the top and bottom of the screen or would you like to have a different style. Normally the organisation’s logo would appear somewhere at the top of the screen.

Click on the graphic to see an enlarged version of two possible designs.

Menu Position

Sometimes the application will require a menu will allow the user to go to specific pages.

There are a number of ways that these can be incorporated. The simplest ways are to have a crumb line just below the top banner. The second is to have a menu list either to the left or right of the screen.

The latter method reduces the area available to add content by just over 10%. It makes the active area “squarer”.

Click on the image to see an enlarged version.

screen menu

Further Considerations for Screen or Page Design

• Back ground colour and colour of the text - The standard design uses a white or pale background with black lettering.

• What font should be used? Popular fonts are – Arial, Verdana, and Times Roman. Care needs to be taken when choosing the font, it should be a standard font or else it may not be available on the target computer.

• What functionality will be incorporated onto a standard screen or page? The standard functionality includes “next screen”, “previous screen” and “exit”. Sometimes a “help” facility or a “glossary” facility is required.

• The button “design” is an important aspect of the screen design

• Hyperlinks - The user can jump to other pages when text is clicked on or objects can be shown and hidden when mouse cursor is moved over text. Should this ‘Active’ text be bold, underlined and of a different colour to normal text.