A take on Design Token definition, organization, and specificity.

A Design System’s strength comes from knowing how and when to apply options (like purple-40 or color-warning) correctly to contexts (like backgrounds or typography). This grounds the option as a design decision or what is known as a Design Token in System Design.

Design Token (noun): Design v̶a̶r̶i̶a̶b̶l̶e̶s̶ decisions applied to a specific context.

Variables ≠ Design Tokens

Variables take the mystery out of obscure values but they don’t bridge the gap between naming and use. They answer “What options do I have?” yet leave “What choice do I make?” unclear.

Design Tokens are used in place of hard-coded values and variables in…

Pablo Stanley recently made a brilliant post about how a Designer schedule looks like now that most of us work from home. Then I looked at a typical day in my calendar, and it seems very familiar… 🤔

Pre-working from home, the fact that you had to find a room, made scheduling meetings feel a bit of a formal process. However, now it is as easy as sending a Zoom link to anyone. …

Ava and Caleb from the film ex machina having a conversation
Ava and Caleb from the film ex machina having a conversation

A take on how to Design for conversations and not screens. We’ll draw the parallels of spoken conversations and Interface Design, as well as the importance of establishing the right Context, Message types, picking the right Channels, and providing great Feedback.

“Design is really an act of communication.” — Donald A. Norman. The Design of Everyday Things.

Look at the Interface below and try to articulate what this System is trying to tell you.

Because most digital interfaces lay in two-dimensional surfaces, when we think about navigation, we usually think of two-dimensional transitions — where the user travels between paths along a single plane or level. However, a user can also navigate or transition in three-dimensional space. Each level or plane is an environment in which the user normally has to complete a task, and as they are elevated to a new level, fewer actions and distractions are available.

… More specifically a Design Guide and a React Component Library with a very unique SASS architecture.

UPDATE: I am working on the 2.0 version with accessibility in mind and lots of improvements. I am putting the code up in codesanbox so you can take a look at the work in progress.

This is a continuation of a series of posts I made last year about Design Systems. Because the best product is the one created by its user, and because I like to talk the talk and walk the walk. In this post, I will be walking you through the process of creation and maintenance of OSKRHQ.DS, my own Design System crafted from those earlier postings.

Photo by ray rui on Unsplash

I am all about branding. I think it is one of those things we don’t talk enough about in product design. I see a lot of talk about creating delightful experiences for users and how to invoke positive feelings throughout user journeys, but not enough talk about how delight is part of a good brand. A user’s experience is an extension of your Brand. Products themselves are extensions of a brand. Just like a logo is or the messaging we use in our marketing.

A brand is not what you say you are but what your users say you are…

Part III. Composing a UI Kit

On Part II we covered how to build a common Design Language. On this one, we will cover how to construct a dictionary for your language. In Part IV (Bonus), we will cover how to share the dictionary and how to get your team adopting it.

A dictionary is a collection of words that make up a language. In the design world this is called a UI Kit (although some people call it a toolbox). To compose a dictionary, you have to know what “words” you want to define. So, start by making a list of all the UI elements…

Part II. A deep dive into building a Design System from scratch.

This post is Part II of a series of blogs about Design Systems they importance for UI Design and Development. Check out Part I and Part III.

A Design System is simply a Language. A tool for communication. Just like English or Spanish, these spoken languages have rules and guidelines that allow one human to communicate with another. A Design System is just that… A language that allows designers and developers to communicate with one another, amongst each other, and it allows your brand to communicate with your users through carefully crafted and hopefully cohesive experiences.

Since a…

Part I. A quick overview of how all digital things you interact with are constructed.

This post is Part I of a series of post I am writing about Design Systems. Check out Part II and Part III.

Anatomy simply describes the dissection and the separation of parts, particularly, of living organisms. User Interfaces are just like living organisms. They are born from inception, they grow as Designers learn more about users, and they die to give room for more contemporary patterns. Therefore, if UI is a living organism, we should be able to dissect its major parts.

Every digital screen you see is essentially composed of the same 3 parts: Color, Typography, Space

Oscar Gonzalez

I design and code. Sometimes write. oskrhq.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store