… or, why Screen Design is so important!
A well-known expression is: »The first impression counts.« Indeed the timespan for this is shorter than one would assume. According to a study executed by psychologists under the leadership of Gitte Lindgaard, published in the magazine »Behaviour and Information Technology« (V. 25, Number 2/March-April 2006, pp. 115-126), users recorded lasting impressions of the visual website appearance after already 50 milliseconds.
This first perception determines the time of stay on a website and, further, whether other links will be clicked. Therefore, it is decisive how a page looks, which elements »are eye-catching« and subsequently how the user can find her/his way around on the site. In short: The design, also called »Screen Design« is essential.
What is Screen Design?
The construction of the graphic user surface of a website is part of the machine-human-communication, »User-Interface-Designs« and graphic design.
Central themes defined in Screen Design:
- the (individual!) layout, hence the arrangement of the contents
- the use and design of graphic elements according to the Corporate Design (read more about »Corporate Design«)
- the optimal presentation on various screen formats
Following issues to be considered in Screen Design:
- Goal(s) of the website (e.g. web presence, shop or sales of services; B2B or B2C)
- »Usability« – Involvement of the user´s perspective / (offer orientation)
- Expectations of specific user groups, as well as the »user experience«
- Implementation of all elements in HTML and CSS
Results of this process are (static) images of the website(s) for different screen resolutions, as well as the definition of graphic elements and styles (»style guide«), which are crucial for programming.
From Screen Design to the Finished Website
- Step 1: Guidelines for optimal screen designs are clear positioning of the company (Corporate Identity, USP), as well as defined marketing targets and Corporate Design. The resulting contents should also be already defined.
- Step 2: In close coordination, I construct the various »screens« as static images for you. We adjust and optimise them in several proofing rounds. Graphic elements are designed and the implementation of materials is clarified. Should your own photos be insufficient, it is possible to fall back on »stock photos« from image platforms. You already see before programming how the new pages will appear. This visualisation also enables the consideration of usability.
- Step 3: After approval, I file the styles composed in a »style guide«. Afterward, the delivery of all »templates« (screens, style guide) including images/photos that I have optimised for web for an IT expert (»web developer « or »programmer«), who implements the website. Ideally, few adjustments are necessary between screen designer/graphic designer and IT.
- Completed: The new website is online and looks very similar to the Screen Design »template«.
As experienced graphic- and screen designer, I am pleased to accompany you on the journey to your individual online presence. Should the necessary Corporate Design (e.g. logo, color harmony, typography, visual imagery) still be missing, I can gladly assist you!