Renate Leitner
Graphic Art and Media Design
You are here: Home > Blog > Your Website – The First Impression Counts

Your Website – The First Impression Counts

just 50 milliseconds decide

… 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!

Inquire now!

Share this post
Web/Screen Design
7. February 2022
Share this post
go to Blog-Overview

More posts

The Logo – Core of the Brand!

One of the most essential pillars of Corporate Design – herewith Corporate Identity, too – is the logo. Have you ever thought about the meaning and ramifications of your logo design? What makes a logo good? ... More
Corporate Design
14. December 2022
Share this post

Business Cards – Tips and Trends

Yes, business cards are still necessary! Find out why and how your cards can be custom designed! Here are the latest tipps and trends ... More
Corporate Design
4. November 2022
Share this post

How Video Animation & animated HTML5-Assets are produced

Animated advertising materials are booming – you can be a part of it with advertising videos resp. animated advertising banners (HTML-Assets for Google). What is required in order to produce an animation? ... More
Digital Ads
29. October 2022
Share this post