Workpackage 04
User Interface Design
Visual Design
UI Animations
Design System
Main focus

Design a user-friendly interface based on a consistent and scalable framework

We create entire visual identities for our clients. This includes the development of a coherent design system, that can be transformed into a UI component library for future use and guidance.

FAQ: What does User Interface Design (UI) mean?User Interface Design (UI)Defintion:
Visual and physical elements a user interacts with when using a device.

User Interface Design explained in Phase 1 to 4

Project setup

Understand and structure

First and foremost we’d like to understand the clients culture and company structure. Together, we establish a project governance and identify all repsonsible stakekholders. Based on that we build up a project team.

Phase 1

Create visual design mockups

You figured out what your clients want and how your prototype needs to work. What happens next?

The goal here is visual exploration. Let’s find a design concept.

After finalizing the wireframes and workflows for the core features we start working on the visual concept. Branding guidelines / design system come in handy, but are no must.

Read more about branding

Method

We create a set of visual design concepts accompanied by stylescapes to illustrate our vision for the future style of the product. Once a design is set we move to the production phase — applying the styling to all required pages.

Deliverables

Visual design concepts, moodboards, explorations

Ramus Services
Phase 2

Bring your design to life

In real life, the physical world has gravity. It has momentum. We cannot only see, but also feel, hear and touch things.

Computing has become much more physical, since the expectations of how things should repsond to you when taking actions on a screen have increased.
QuestionsSample qestionsHow should the reponse feel like?

What should the feedback be?

How quickly should it move?

How does a seemless transition between screens feel like?

What is the difference between a hard cut, a wipe or fade?

How does it change the emotional quality of a moment?

Method

We like to bring your prototype to life through purposfully designed UI interactions and animations that add delightful moments to the user experience and guide users along the way.

Deliverables

Videos and animation examples including specifications that are used by developers as a guide to implement these interactions into the final product.

Ramus Services
Phase 3

Designing your design system

Your brand needs to speak one language accross all mediums. Whether, it is your corporate website, or an application. This is easier said than done, especially because your brand is not a static structure but a living interface.

Method

We identify design patterns and create a design system.

A good design systemDesign SystemA design system enables design teams to build better products faster by making elements reusable.

Take this pop-up window you are currently viewing as an example. We only designed it once. How it works and looks is always the same. It is a reusable component.

This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Reusability makes scale possible.
is indispensible. It is a documentation of design-specifications that serve as a powerful toolkit for other product teams. Also, it makes design scalable and reusable.

Here is a public example we love:

Audi Renewed Brand

Deliverables

Basic branding fundamentals including a style guide that formalizes key design principles, describes visual identity, and sets ground rules for typography, colors, responsive behavior, products photos and visualizations style.

UI Components library is a collection of UI (components) that are reusable.

UX guidelines document to provide recommendations on navigation, describes used UX design patterns including instructions for use.

FAQ: Why scaling design is importantWhy scaling design is importantHere are the benefits explained by TechMagic

1. Increased velocity and time to market Having highly structured, organised components, UI kits and pattern libraries reduce the time spent on technical tasks. Combined with the agile process, you can do rapid prototyping, have faster releases without losing quality and doing quick iterations.

2. Better product value and user experience Reusable components, consistent design across all the platforms, marketing that match the product. All that result in a very consistent look and feel. Interaction with the product becomes intuitive due to the usage of same patterns across the product. There is less friction adaptation for new users. Brand awareness is rising. Overall user experience becomes much better. And so does the product value grows.

3. Less time and money spent As velocity grows, teams spend less time on creating new or developing what’s already done in the form of reusable solutions. Designers and developers don’t waste time on repetitive work, meetings or questions. They focus their time on delivering results faster and bringing more value.

4. Clean design, clean code Time invested in creating and maintaining the system pays off in a form of a clean code base and easy to manage design assets. The design system is not set in stone. It will have changes as the product scales. Maintaining and updating it should not be so intimidating. Structure of the system should allow your team to make changes to the product without negative impact.

5. Increased collaboration and knowledge sharing With all teams having access to the system, it is much easier to have everyone on the same page so they can collaborate and share knowledge quickly. Another benefit is that new team members will have a much easier onboarding process.


Read Full Article

FAQ: Why a bespoke design can be hard to scaleWhy a bespoke design can be hard to scaleWe realised that the biggest mistake companies tend to make is to ask design agencies for a rebranding of their website with a new design that is very bespoke.

The reality is that bespoke design simply does not scale. In fact, it is rather slow, inconsistent and increasingly difficult to maintain over time once the range of use expands from an inspiring website to multiple applications.

The rule of thumb: The more reusable your components are, the less you need to maintain, and the easier scale becomes.

FAQ: How do I make my design system accessible to everyone?Sesign system accessibilityHow can we make our design system accessible to everyone within your company? How can it serve as a corporate guideline?

Together, we build out a powerful brand appearance in a brand management software tool where all guidelines are documented. This is usually an all-in-one platform hosted on a domain that can be accessed by all your employees.

Here is a public example we love:


Audi Renewed Brand

Ramus Services
Phase 4

Hand over your pilot

The goal would be to hand over your pilot or minimum viable product to the engineering team to develop and commecialize. Besides the more general design system we will want to deliver also the specific design guidelines for the current prototype.

Method

Deliver all specifications through a versatile, interactive tool. That provides developers with a convenient way of getting developers what they need.

Deliverables

Provide access to tool (e.g. Zeplin) which provides sizes, margins, code snippets, with all assets to PNG or SVG formats, has а commenting system to support communication between development and design teams, and is easy to maintain throughout the project.

Ramus Services
Go to workpackage 01

Establish your brand appearance in a digital context