style-determination-icon-black-white
03. Product (UX Design)

Styling

Styling

Most clients will already have a style or even branding that they want to use on their new (or redesigned) product as well. We see variations from extensive branding guidelines to an existing website. Styling is a building block we use when the client is not looking for new branding.

This styling step is crucial, because it centralizes the discussion about style and ensures that changes in style later in the process are easily managed.

However, in our experience, with styling in place, we hardly ever see changes to the style later on in the process.

Why
  • Look & feel that fits with the product or brand
  • Clarity about which style to follow
Who
  • Lead Visual Design
Conditions
  • The clients needs to have an existing or new product that needs to be (re)designed.
  • There is an existing style. For instance a brand or another product that already used a style and that has to be followed.
  • The target group needs to be sufficiently clear.
  • The client has formulated their own requirements for the style.
Client effort
  • Setting requirements and determine target group(s)
  • Briefing the Lead Designer.
  • Reviewing first design versions.
  • Accept final version.
Skills involved
  • Recognise visual patterns from existing products.
  • Translate existing design decisions to a coherent style for a product.
  • Manage stakeholders.
Steps
01

Analyse

Receive and analyse the briefing from the client. Getting to know the product. Determine the components and screens that need to be designed. Discussions with the client.

02

Creating styleboards

Create 3 possible styles for the components in 3 styleboards and discuss these with the client.

03

Final styleboard

Create a final styleboard based on feedback from the client.

04

Finalise

Process feedback and create a final styleboard to be used by developers.

Deliverable

A styleboard that contains the styled components of the product. The styleboard can be delivered in multiple forms, depending on the client.
Currently Sketch, Figma, PNG, Zeplin are widely used.

Got a Question?

Check in with Iwan or Linda
Portret-iwan
overons_linda-300x300-2