Getting started as a Designer

The HDS design kit contains all the resources you need to get started designing beautiful and accessible user experiences that follow the City of Helsinki brand.

The HDS design libraries are the single point of reference for your design. When you connect your design files with the design system libraries, you can have the components synced whenever the design system is updated.

Principles

Always keep these core principles in mind when making design decisions:

  • Modular and flexible: All components are designed to work as reusable, customisable building blocks to help people work smarter, better, and faster.
  • Consistent: All components are designed to fit together seamlessly to ensure a consistent and cohesive user experience.
  • Accessibility baked-in: Accessibility is part of the process from start to end. It is designed to be accessible to all, regardless of ability or situation.

Getting started

  1. Explore the City of Helsinki Visual Identity Guidelines to learn the design principles of the brand.
  2. Take a look at the Components documentation to see what is available and how you can incorporate those into your designs.
  3. The design assets are available either via direct design kit download or via the City of Helsinki Abstract. To use HDS libraries, you will need to install Sketch. See more on downloading and setting up the libraries below.
  4. If you have an idea for improvements or a component that could be a useful addition to the Design System, see the Contributing page for more information.

Setting up

Install the tools

The HDS design workflow is based on Sketch and Abstract (if you have access to Helsinki organisation):

  • Sketch is a vector graphics editor and is widely adopted by designers to create user interface designs for web and mobile services.
  • Abstract is a design collaboration and version and management tool that enables designers to share Sketch files and libraries easily. By leveraging and extending the technology of Git, Abstract provides design teams with a lightweight workflow and stable tools so designers can work together with confidence.

If you are a newcomer to Sketch or Abstract, they both offer some great tutorials and help

You do not necessarily need Abstract to use HDS design libraries. Abstract is a convenient way to access and update Sketch libraries, but we also offer a downloadable HDS design kit. Download the latest HDS Design kit from the HDS GitHub repository. Please note that if you use the design kit outside of Abstract, you need to manually download the kit again to gain access to the newest updates.

Install fonts

Make sure that you have the Helsinki Grotesk font installed.

Helsinki Grotesk font can be purchased from Camelot Typefaces website

Set up your Abstract project

To set up a project in Abstract, you will need to:

  1. Create a new Abstract project
  2. Add at least one design (Sketch) file to the project
  3. Link HDS libraries to your project
  4. Create a branch and start making design changes

If you are new to Abstract, please read HDS Getting started with Abstract tutorial for more information on how to set up and use Abstract.

Get familiar with HDS

Before you start designing, it is a good idea to get familiar with the HDS offering.

For designers, a good place to start is to browse through design collections in the HDS Abstract project.

Customising component symbols

The component symbols use smart layout for easy resizing. You can also configure the content and styling of symbol parts from the Overrides section of symbol properties.

When changing the colour or other styles of component symbols, be sure your custom design adheres to the design guidelines. Styles within components are carefully considered. We do not recommend detaching the symbol to change default styles.

Styling text elements

Linking the HDS Typography library to your project adds the possibility to give HDS text styles to your text elements. You can add text styles to your layout in two ways:

  1. You can add a new text element with appropriate text style from the Insert menu: Select the HDS Typography from the Text styles section, choose the desired text style, and click anywhere on your artboard. This creates a new text element with the chosen style.

  1. You can give text styles to existing text elements by selecting the text element and changing its style from the Appearance sidebar.