User Interface (UI)

Käyttöliittymäsuunnittelua verkkopalvelun käyttöliittymäsuunnittelu

Web service, which is pleasing to the eye, creates a positive feeling when used. The significance of the first impression is substantial in this case as well, and often enough, the user forms their first impression of the web service precisely on the basis of visuality.

A user interface (UI) is any interface that allows a user to interact with the web service they are using. Poorly functioning interface causes frustration and, at worst, even anger. In that case, the result is definitely a poor user experience.

Sometimes the user interface is mistakenly mixed as a synonym for the user experience. However, it is only one part of the user experience, although particularly essential.

The end product of this phase is a concrete, clickable prototype of what the future service will look and feel like.

The user interface phase is typically the most exciting work phase of a web service project – especially from our customer’s perspective. The end product of this phase is a concrete, clickable prototype of what the future service will look and feel like.

Wireframe frames the whole picture

The first step in user interface design is wireframe. It is a visually simple representation of the upcoming web service, its functionalities, and the relationship among the various user interface elements. The fruits of the service design and definition phase, i.e., the content structure, elements and page templates, functionalities, and the structure of the user interface, such as navigation and menus, are described in a simplified way in the wireframe. Our design philosophy is to build a clickable prototype of all of these. The prototype makes it easy to visualise and test the upcoming web service.

Käyttöliittymäsuunnittelu (UI)

The image and visual identity of the web service

The web service is the company’s most important single marketing communications tool. Its visual look should follow the company’s or organisation’s existing brand image. The brand image is most clearly implemented in the form of fonts, colours and logos used in the service. In addition to these basic brand elements, the visual identity is taken a degree further: what is the atmosphere of the service?

The atmosphere of the service can be easily approached with the help of mood boards, benchmarks or simply brainstorming adjectives. Does the result aim for a modern or timeless look? Round or angular? Cold or warm? Defining the identity verbally and using existing examples aid in setting a clear framework for the design process of a service.

These visual definitions, as well as the image and regulations of the graphic brand guideline, will then be implemented in the planned web service. At the heart of our design process is firstly drawing the layout of the front page, which we focus on for so long that a consensus emerges between the customer and us about the overall image of the service. Only after that we will start drawing all the views and functionalities of the web service. A clickable prototype of the user interface plans (layout) is also created.

However, it is important to remember that the web service is not created for ours nor our customer’s staff’s needs. It is created to meet the needs of the end customer and potential new customers.

Responsiveness and digital accessibility

When designing web services, there is a numerous amount of visual and technical constraints that must always be taken into account. To ensure a good user experience, the service functionalities must also be communicated visually. The content must be clearly perceptible and meet the general accessibility requirements, even if it is not specifically intended to be accessible. The contrast of the text should support good readability, the hierarchy of elements should unfold to the user at a glance, and the whole site should follow an easy-to-understand visual structure.

We all use digital services with the various devices which should be considered when designing the user interface of a web service. How will our designs behave with different screen widths for different display devices, will the selected font sizes grow out of control with smaller screen widths, and how will the amount of dynamic content affect the appearance of the elements we design?

Accessibility of a web service means the availability of the service to all people, regardless of their disability, or characteristics such as age, vision or hearing, and injury. Digital accessibility is the cornerstone of an excellent digital service and it communicates about the organisation’s values.

From sketch to production

Once the interface is designed, tested, and approved, software development begins. The following items are passed along from our UX/UI designers to the developers:

  • Layout prototype (desktop)
  • Layout prototype (mobile)
  • Necessary materials such as fonts and images
  • Zeplin production-prepared layout material

More about design

User experience (UX)

User experience is the feeling that arises while using a web service. It is the perceptions, feelings, thoughts, and reactions that arise from using a service.

Read more

Design process

In what order are actions performed and what type of material is produced during the design phase?

Read more

Shall we get to work?

"*" indicates required fields

Nimetön

All information is processed according to privacy policy statement.