My Work Methodology:
Solving challenges in The early stage

My approach to user interface design for websites is to create a range of components that, similar to lego bricks, can be stacked and arranged in countless configurations. This allows a team to build pages and content independently from designers and developers. If a new use-case needs the creation a new component, then that is built with reusability in mind.

Components are then categorized with Brad Frost's Atomic Design mental model. Atomic design organizes based on complexity, borrowing Chemistry's atomic model as a metaphor. 

 
 
placeholder.jpeg

Designing systems, not pages

User interface components are created to coexist with each other so they can be reused, and assembled, in countless configurations. Abstract and flexible components take meaning when filled with content. Reusability helps businesses release new features more quickly, and created independence for non-coders to focus on content creation.


Scalability

Borrowed from computer science, scalability is the potential of growth based on the existing model. If user interfaces are designed to scale, components will be higher quality over time and able to handle the growth of a business.

placeholder.jpeg

placeholder.jpeg

The best way to create a successful style guide is to create it in a way that cannot be abandoned or circumvented, and that does not create any extra effort once set up.

Style guide

The cornerstone of a design system is a style guide: a user interface library in which all components can be seen at a glance (both in isolation and in varied configurations). A style guide helps is a self-documenting communication tool that allows the entire team to view the existing system and configuration possibilities. 


placeholder.jpeg

One of the most simple ways to increase accessibility in design is to use a high-contrast color palette for content. 

Accessibility:
Making products that everyone can use

When products are made with accessibility in mind from the start, a higher portion of people can become its users. Accessibility also has usability and SEO benefits, and is increasingly becoming the law (and already is in some countries). 

 

 
 

Enhancing team collaboration with UX

Ultimately, design systems help businesses save time and money, and they also help teams maintain their sanity. When we reduce the cognitive load of teamwork by working with a system, everyone can complete their tasks more effectively. 

 
 
placeholder.jpeg

Is it a card? Is it a tile? Deciding together helps avoid costly mistakes in later stages of development.

Speaking the same language.

Naming components can difficult, however using a nomenclature that the whole company embraces and actively uses (design, technical specifications, content creation, customer service, etc..) can save time and money by avoiding costly mistakes.

I've found the best results when a team works together to name components, but do propose names already in the design phase. My nomenclature is influenced by semantic HTML and Google’s material design.


placeholder.jpeg

Using the right software is just the start. Designing with technique that guarantees consistency saves time and money.

Modern technique

Staying up-to-date with software and technique is as important as establishing clear communication within a team. Using modern component-based design software (e.g. Sketch) allows for design teams to work efficiently and consistently. Communication and handover tools that allow for a single source of truth (e.g. InVision) help keep everyone on the same page.
 

 
 

Interested in working with me?
Let's Talk.