Category

Advice

Create a Unique Design Language

By | Advice, UI Design
01. Design Research

What are our competitors doing well?

First thing we do is design research and see what our competitors are doing. I’ve just finished working on this project that hosts a range of afro inspired clothing created by Africans based in all different locations around the globe. Whenever you think of African fashions you will think of bright colours, exciting prints and just these beautiful array of colours.
So when you want to put that content into a website you need to think how can I do these images justice without the UI overshadowing the imagery.

I researched a few fashion retailers to see what they were doing and how they were portraying their products and they all followed a very similar pattern. Navigation up top, large and striking imagery with a clear call to action (CTA). This was consistent through out all the pages.

02. Create a mood board

Or an image library.

Next up I worked with my client and had him help me make a mood board. Having an image library helps the direction of the project. If the product you're trying to create has strong imagery this is easy, if it is a more abstract concept i.e. services the best way to find imagery is to find images that would represent your brand, these will be abstract by nature. Using evocative stock imagery as a place holder it will give you a strong sense for the tone of your brand. There are plenty of free stock resource libraries out there for example www.unsplash.com

This is an image library I put together with my client on pinterest.

03. Pick accessible colours

Picking accessible colours based on best visual representation of the brand. If the brand is colourful then I generally pick a desaturated colour, when the brand is monotone I pick a bright and impactful colour. I try to limit the amount of colours to around 3.

Market fashion is a very vibrant project however the UI I've designed for it is very tame and saturated to allow the imagery on the site to sell it.

What happens if I use inaccessible colours?

Over 90% of the population can see the full colour spectrum including red and green. However 4.5% of the UK’s population is colour blind, and see things differently. The most popular types is Protanopia & Deuteranopia – where they can’t see red or green. If we run our chosen colours through a filter that simulates what the most common type of colour blindness see they will get something like this. If you’re having to use these types of colours for positive and negative connotations then I’d recommend using an icon library like thenounproject or google material library.

Tools

ColorZilla

So let me talk to you about some super handy tools I use to make sure my colours that I have chosen are accessible! If I see a colour I like whilst browsing the net I pick it up using colorzilla which automatically saves the code to my clip board and keeps a history of the colours I’ve picked. So there shouldn’t be a need to go through MS Paint to get the hex code you need.

Colorzilla
Tools

Colllor

This tool allows me to ramp the colours I have chosen, create gradients and give complimentary choices.

Colllor
Tools

Contrast Checker

This tool ensures that the colours have chosen are accessible by the majority of people. I can not tell you how many times this has saved me!

Contrast Checker
Tools

Stylifyme

This site is a bit different to the rest. It creates you a style guide based on a site that already exists. The outputs include colours, typography, type hierarchy and image size.

Stylifyme

04. Typography

Typography and information hierarchy play an important part in every design. Whenever picking fonts always go for a google font if you can. They’ve been tried and tested work great on multiple patterns and come in various styles and weights.

Roboto Slab

Raleway regular Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl magna, congue quis lacus in, elementum pellentesque justo. In accumsan varius lectus et mollis.

Montserrat Bold

Montserrat Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl magna, congue quis lacus in, elementum pellentesque justo. In accumsan varius lectus et mollis.

Tips

When considring typography you need to think about the sizes of the font.

Small fonts aren’t legible

Minimum font size should be 16pts and they can be in any weight and STYLING

Big fonts are easier to read.

However, make sure to think about the information hierarchy when deciding on font sizes and weight.

05. Information Hierarchy

Information hierarchy is one of the most important parts about design. It can sets the tone and mood of the entire site. It is also one of the most overlooked areas as it is the last thing people think of. Content can come after I've built my product.

This thinking is fundamentally wrong, what if the areas you've designed aren't built dynamically handle the amount of content you've created or lack of. Lorem ipsum only works if you know you're going to amend the content afterwards and how it is to be stacked agains the rest of the content.

Design with no Information Hierarchy

Egyptian temples

Egyptian temples were built for the official worship of the gods and in commemoration of the pharaohs in ancient Egypt and regions under Egyptian control.

CTA
Design with Information Hierarchy

Egyptian Temple

Montserrat Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisl magna, congue quis lacus in, elementum pellentesque justo. In accumsan varius lectus et mollis.

Call to Action

First example has no hierarchy in place for the design. Everything about the design just looks like it was plonked on the page without any thought about how it sits with the rest of the elements. Your eyes jump from point to point with no central anchor. The main thing you will notice on this is that the button has the most weight on the page as it is the brightest followed by the imagery.

The second design where the information hierarchy has been thought about has more impact and makes it a lot easier to skim the content to see what is going on. The title and button have equal weights on the page.

This is a very simple example information hierarchy but it still gets across how much of an impact using styling can impact how the hierarchy can work on a design.

When in doubt. Ask.

 

Feel free to get in touch with me if you’re having an issue with a design problem. I’ll be happy to help. You can reach out to me on twitter @shazdabaz or by email, shazjubeen@gmail.com

Simple Design Principles for Devs

By | Advice, UI Design, Uncategorized

The other day I sat down at my machine and googled what design principles are out there and honestly the results that I got back where so abstract that they confused me. If a UI designer like myself can’t completely decipher these principles within a few minutes then what chance does someone have from a non design background?

Design principles

design principles
design principles
design principles
design principles

We’ve all probably heard about google material design and that it isn’t the only design language out there. We have apple design principles, GDS desing principles, Microsoft design principles and many many more.

Google design materials is a very popular system and is a great starting point for foundations however it shouldn’t be the end goal. There are a few examples of what apps look like side by side, they’re very similar in look and feel.

This is an example of google not following their own principles. Any of their iconography should be easily treatable as paper craft. I’m sure it’s doable if you have enough spare time and a knack for using a craft knife.

Even google ignore their own guidelines.

They’re guidelines, not law. Rules are meant to be challenged in design.

Centre aligned text and rounded search input
Smaller icon
Icons are more to the right
Left aligned text
Slightly rounded border
Icons are more center aligned

Swarm app is a great example that you can create a consistent experience across multiple platforms. Notice any differences? Apart from a few minor differences this application remains true to itself and identity.

Consistent visual language across a product makes a huge difference on both platforms. You know you’re in this app despite the platform. It uses principles from both design guides and merges them together into this beautiful and usable app.

How to Create a Unique Design Language

Using 5 simple rules

Read Article