Building user interfaces with colour blind users in mind
Door Maarten Arts / mrt 2015 / 1 Min
Door Kevin Tai / / 2 min
This is the second and final part of this blog series. Have you already read part 1?
Creating a good user experience with consistent user interfaces is an essential part of successful software. We are aiming to boost consistency on our user interfaces by using Atomic Design and a toolkit. The main reason for using a toolkit is to bridge the communication between designers and developers.
With a toolkit we provide useful documentation for designers and developers with pre-built components. The pre-built components can be used to prototype applications; the designers can use Sketch components to mockup while developers can reproduce codes from the toolkit we supply.
Atomic design is a methodology with five distinct stages working together to create interface design systems. The five stages of atomic design are Atoms, Molecules, Organisms, Templates and Pages. Atomic Design is a design model helping us to see our interfaces as both a cohesive whole and a collection of parts/components at the same time.
To maintain an iterative process, we were challenged to make Atomic Design easy to use across the whole company. That’s why we started developing a toolkit. This toolkit enables us to maintain (pre-built) components. Developers can copy/paste toolkit codes, and designers can produce their mockups with pre-designed components (in Sketch). To keep our toolkit alive, we constantly review, version and maintain components with a team of designers and developers.
We are distributing our toolkit internally with Atlassian Bitbucket. In Bitbucket we are able to keep track of the latest changes with a single minified CSS as output. By uploading this single css file into a project, you are up-to-date with all the components and automatically use the correct HTML structure and snippets.
With this way of working, we can bridge the communication between designers and developers even more, which eventually makes Avisi more efficient in building consistent user interfaces.
We are currently developing a separate website as documentation with DevCards. With DevCards, designers and developers can preview components and copy/paste specific HTML structures and/or snippets. In the near future, we will be posting a new blog about using DevCards for this project. Stay tuned!
Door Kevin Tai / jun 2023
Dan denken we dat dit ook wat voor jou is.
Door Kevin Tai / jul 2018 / 1 Min