A multi-disciplinary designer from Pakistan. More at www.zainadeel.com
Image for post
Image for post

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. …


Image for post
Image for post

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

Image for post
Image for post

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.

Image for post
Image for post
An example based on true events.

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. …


Image for post
Image for post

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.

Image for post
Image for post

Iconography

I Based the icons on 4px wide rounded lines in a 80x80px canvas, inside a 120x120px circle.

Image for post
Image for post
Uniform Iconography

I designed the feature icons around the OE Color Palette.

Image for post
Image for post
The 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. …


Image for post
Image for post

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. …


Image for post
Image for post
A Zoetrope

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., …


Image for post
Image for post

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. …

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