3 Tools for Choosing and Working with Color in Apps, Websites, and Print

When developing apps, websites, or even presentations for your team or management it can be difficult to come up with a working color scheme.

Below are three useful tools that can be of help.

Adobe Color CC (formerly Adobe Kuler)

Adobe Color CC Screenshot showing color wheel

Adobe Color CC is a classic color scheme designer based around the concept of the color wheel. You can choose a starting color and then one of the standard color schemes from color theory (complimentary, triadic, etc). This then gives you you the related colors based on the chosen color scheme.

For each color you can get the RGB, HEX, CMYK, LAB, and HSB values to use in whatever application your working on.

You can also explore a range of pre-built palettes created and shared by other users.

Paletton

paletton screenshot

Paletton is another tool based around the concept of the color wheel that offers a choice of color schemes. You can also use its “vision simulator” to simulate what the colors might look like to users with some kind of vision impairment.

The following image shows the same color sheme with no vision simulator (left) and protanopia – a form of color blindness (right).

paletton screenshot simulating color blindness

 

Multicolr

multicolr screenshot

Multicolr is an interesting tool that can help find images that match one or more colors. If you need to find images matching a set of colors this can be useful. To use Multicolr you start by selecting from one to five colors, in the preceding screenshot I have a chose a purple and white. The images come from flickr and you can select and image from the search results and view the original.

SHARE:

Design Principals in Practice: Source Code Formatting

(This article is part of the Design Principals in Practice series)

We often take for granted, design principles that are in use in the real world; even in source code these principles affect out ability to comprehend the meaning.

I’m not talking specifically about clean code ideas such as well-named Booleans but rather source code at a higher, more visual level.

Let’s take a look at some design principles and how we can (mis)use them.

Proximity

The Gestalt principle of Proximity states that things that are closer to each other seem more related.

Take the following code, there is an automatic sense that method A and B feel related to each other:

public class Class1
{
    public void A()
    {
        //
    }

    public void B()
    {
        //
    }




    public void C()
    {
        //
    }
}

This is because they are in closer proximity to each other, method C feels more distant and unrelated.

The principle of Proximity can be used when declaring varaibles:

public void SomeMethod()
{
    bool isVipCustomer;
    int years;

    string x;

    decimal y;
}

Here,we get a sense that isVipCustomer and years are related, though years should be renamed to something like yearsAtVipStatus rather than relying on Proximity.

Proximity also applies to where variable are declared, for example the traditional approach of declaring them all at the top of the method (low proximity), versus declaring them throughout the method when the are needed (high proximity).

Similarity

Things that are similar in some way seem more related, this similarity could be in shape, size, color, texture, etc.

IDEs such as Visual Studio use similarity of color to help us perceive what a piece of code is; blue for keywords, green for comments etc.

Naming conventions in source code can increase or decrease the level of similarity to other pieces of code. For example, take the following code:

_firstName = "Sarah";
_lastName = "Smith";            
fullName = _firstName + " " + _lastName;

Here we get a sense that _firstName and _lastName are similar somehow (they are fields in the containing class) Also notice here that I’ve deliberately removed whitespace, if we add some whitespace in we also get the principle of Proximity activated:

_firstName = "Sarah";
_lastName = "Smith";       
     
fullName = _firstName + " " + _lastName;

Uniform Connectedness

We can strongly increase the feeling of relatedness using Uniform Connectedness. For example:

image

In this image the dots enclosed inside the line feel strongly related.

In C#, code blocks contain groups of (hopefully) functionally cohesive code. So lines of code are contained inside sets of braces {}.

So, whilst this may be stretching the comparison a little, in some sense the braces are containing and increase the feeling of relatedness. Take the following example:

bool a;
bool b;
bool c;
bool d;

These Booleans feel related due to their proximity, but if we contain them in some additional braces:

{
    bool a;
    bool b;
}
{
    bool c;
    bool d;
}

We now see two strongly distinct groups.

In the age-old argument about one line code blocks in if statements:

if (true) Console.Write("true");

if (true)
    Console.Write("true");

if (true)
{
    Console.Write("true");
}

Whilst people have different opinions on the style here (I currently favour the explicit bottom approach), the bottom example exhibits strong demarcation of the logical condition and the code that gets executed. Though it’s also interesting to note the principle of Proximity in effect in the first example.

Symmetry

Humans tend to like the appearance of symmetry. One style of C# code that always appears jarring to my eyes is the use of unbalanced (asymmetrical) braces. In the code below the first if statement feels less symmetrical than the second:

if (true) {
    Console.Write("true");
}

if (true)
{
    Console.Write("true");
}

If you glance at these two versions (try to ignore the actual code) the bottom example feels more natural, more symmetrical; feel how your eyes are naturally drawn to the centre of the braces. There may of course be an aspect of conditioning here, if you read mostly C# code in the first style (you of course have my condolences) your mind may have become accustomed to it.

Conclusion

Out of all these principles, probably the easiest one to use is that of Proximity. Simply use whitespace to increase or decrease the relatedness of code. It’s amazing sometimes what a simple empty line can do to improve the readability of source code.

SHARE:

UX Observations: TED Xbox One App

This is the first in a new series of articles I want to start, noting user experience things I use/see and observing how they could potentially be improved. The articles in this series aren’t meant to be mean or critical, merely observational.

In this article we’ll be looking at the TED app for the Xbox One. (If you haven’t heard of TED before, they are videos of talks on technology, design, art, etc. some of which are deeply moving and inspiring).

Here’s a screenshot of the main menu.

image

Overall I love this app, clean and simple, it’s also nice that it’s themed white as a change from the other darkly themed Xbox apps such as the Video app.

The groupings on the main menu are nicely grouped and intuitive and follow the basic Xbox One UI patterns.

There are however a couple of specific user experience things I struggle with in this app.

What Video is Currently Selected?

The first is when selecting a video to watch. Take a look at the screenshot below: which video is currently selected? It’s hard to tell right?

image

The currently selected and not-selected items are too similar, we need the currently selected video to stand out, or to put it another way: there is not enough contrast between selected and unselected.

Below is a mock up of what simply adding the TED red brand color to the selected video border could look like:

image

Now we’ve increased the contrast/decreased the similarity between selected and unselected videos.

Alternatively we could make the background description color a pale red:

image

Again these are just lo-fi mock ups but they show some ways we could start to think about making the the currently selected video more easily distinguishable.

Playlist Play

Here is a screenshot of a playlist with one of the videos selected:

image

Hitting A on the controller unfortunately doesn’t just go and play the video. You have to go across to the “Play talk” button and then hit A. Every time, I make this mistake, and there’s a “cognitive pause” while I wonder why the video isn’t playing.

Moving across to the play button:

image

To fix this we could simply make pressing A on a selected video in the playlist (as in the first screenshot) a “shortcut” to playing the video by hitting A.

 

Feel free to comment if you have other observations or ideas for improvement or you think this is a good idea for a series.

SHARE:

Find a Designer for your Open Source Project

Are you running an open source project? Need some help with your project CSS, perhaps a NuGet logo, or help with your GUI?

It’s hard to find designers, so I made OS Designer Finder.

OS Designer Finder screenshot

If your open source project needs some design help, simply create a GitHub issue (CodePlex support coming soon).

You just need to entitle your issue “designer wanted” followed by the type of work, so for a logo you’d use a title of “designer wanted logo”. For CSS help: “designer wanted css”.

To see how to structure an issue, see this example issue.

It’s currently in a working beta. Please help spread the word to both open source developers and also any designers you know.

SHARE:

Universal Windows App Paper Prototype

In honour of the announcement of universal Windows apps, I though I’d create a simple one page paper prototyping template to visualise what an app would look like on both a PC/tablet and a Windows Phone. This template compliments my previous Windows 8 paper prototypes.

Universal Windows Apps Paper Protoype template

SHARE:

Paper Prototyping Templates for Windows 8.1 Store Apps

These are updated paper prototyping templates for Windows 8.1 Store apps.

The changes from the previous 8.0 versions are mostly to do with the removal of snapped and filled modes in Windows 8.1 Store apps; there are new versions for the new default minimum width of 500px and also for the optional minimum width of 320px.

fullscreen

More...

SHARE:

Design Principals in Practice: Typography in a Grocery Store Window

I recently saw this notice in a local grocery store window:

grocerystorenotice

So it’s pretty ugly from a purely aesthetic point of view.

But more than that, I don’t feel that it effectively communicates the message.

Rather than just making it look prettier (which would be pretty easy given it’s current state) it’s good to first think about the problem it’s trying to solve.

More...

SHARE:

Design Principals in Practice: Affordance in Doors and Car Controls

Affordance is a design property of a physical thing that suggests how it should be used. A ball affords rolling. A door handle affords pulling.

Whilst you can roll a cube, the physical properties of a cube less afford rolling than a ball. A ball better affords rolling than a cube.

You can push a door handle, but a door handle better affords pulling than pushing.

More...

SHARE: