This article is an echo from a recent talk I gave at a Facebook Developer Circles conference in Islamabad, Pakistan.
Ever felt misunderstood? As if you are the only person that can truly realize your own perspective? As if it’s impossible to be completely objective about anything? It is impossible.
A designer working on the most insignificant problem approaches that very problem from a unique, intellectual, and emotional point of view. This frame of reference forces any design process to be subjective in nature, illustrating how design solutions are embedded in the designer’s culture itself.
Framing is the ability to switch roles and think of problems from someone else’s perspective. Although not possible in its entirety, a healthy design process depends on it. …
Building an accessible color system from scratch.
In part I of this article, I talked about the need for a color system for digital products foreseeing growth. I declared a good color system to be: accessible, systematic, and scalable.
Let’s recap these essentials.
Accessible
It is essential to follow the Web Content Accessibility Guidelines (WCAG) 2.0 and target Level AA for section 1.4.3 so that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
This will allow the system to be used with confidence and in turn improve the general usability of the product.
Systematic
In order to reduce subjectivity it is important to utilize a standard for tone generation, such as the HSL color model. In the previous article I illustrated a breakdown of the natural hue wheel into 12 brackets to be used in conjunction with the numeric weight system to name tones. …
Demystifying colors for accessible digital experiences
Color as an instrument
Today, we spend most of our time drowsed in digital experiences. All products we come across today utilize color as a primary instrument.
As a designer, building products everyday helped me realize how problematic colors are without a system. Their value diminshes if their application results in constant headaches and confusion. This slows down product development as it directly impacts design efforts. It also reduces the product’s consistency across different mediums for the intended user.
A typical symptom of a disorganized design system is finding multiple tones of your product’s primary color.
Think about it, count the number of times you were not sure about the exact tone to use for text to satisfy accessiblity on a screen. Now, think of all the times you needed a lighter tone for a color but lacked knowledge to make the addition. Or those times, you needed a new wash to differentiate between components on the screen. …
A Visual Showcase
Initiation
The Marketing Website for Shopistan OE starts to engage with the user using a single Call-to-Action.
Hick’s Law: The time it takes to make a decision increases with the number and complexity of choices.
The first investment is very important. It gives the user the power to steer the experience. It gives them control. With only one actionable element on the website, they can make that investment faster.
Iconography
I Based the icons on 4px wide rounded lines in a 80x80px canvas, inside a 120x120px circle.
I designed the feature icons around the OE Color Palette.
Business Intelligence
For any business to progress and grow, insights are essential. OE collects, interprets and visually represents this data. The visualization for this feature was a play on the“idea cloud”, connecting data from the “digital cloud”, the internet. …
Color & Contrast in Digital Experiences
Every year, my outlook of design in digital experiences evolves. This year a part of my curiosity went back to study color and contrast. While this article does not focus on color alone, it does break down a few apps into their actual displayed palette. It focuses on my top 15 most used apps on Android.
I sport a Nexus 5x running Android 8.1 at the time of writing.
Should a seamless experience call attention to its aesthetic? Is it bad to actively notice interface elements? I ask myself these questions every day.
With a subjective take on it, I want to find answers to my questions. I want to find a connection between contrast and visual load. I don’t have a way to calculate or measure visual load, which will restrict me to draw any useful conclusions. Till then, this is just an experiment. …
What is a Zoetrope?
It is a pre-film animation device. It displays a sequence of images in a cylinder that when viewed from a thin slit, give the illusion of motion.
The name Zoetrope comes from the combination of two Greek words zoe, “life” and tropos, “turning”. It transliterates to “wheel of life”.
Illusion of Motion
My fascination with this grew because of it’s use in icon animation. Most recently, Twitter’s “like” button caught my attention.
With my experience in design as opposed to programming, the idea of controlling the animation of an element from within the toolset I am used to, i.e., …
When it’s better to refine than to reinvent the wheel
Branding
It’s all about the P! Printing, in this context.
Focus group for a Logo Mark? Who needs them? If it makes you feel good and welcome, I believe it has done its job. Every eye sees it uniquely.
Printickle is an upcoming E-commerce experience. It allows users to browse, create, and edit a variety of designs which they can then send off for printing.
I wanted the Logo to be:
- Bold
- Imaginative
- Colorful
A slabbed “P” cut out of a circle fit the bill perfectly. …
