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

Multicolr

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:

My new Pluralsight course was just published which shows how to use the open source Polly library.

Polly is a great library by Michael Wolfenden for configuring the automatic retrying of operations if exceptions occur. Transient errors such as the network being slow/unavailable for a small amount of time can normally result in errors surfacing to the user and/or into log files that need looking at.

By using one of the exception handling strategies that Polly provides, these transient exceptions can automatically be retried, preventing user errors and/or log entries.

There are four strategies:

• Retry Forever
• Retry
• Wait and Retry
• Circuit Breaker

Polly is configured in a fluent way, for example to use the Wait and Retry strategy to retry 3 times waiting 2, 4, and 6 seconds between retries:

Policy.Handle<some exception>()
      .WaitAndRetry(new[]
          {
            TimeSpan.FromSeconds(2),
            TimeSpan.FromSeconds(4),
            TimeSpan.FromSeconds(6)
          })
      .Execute(some action);

Check out the Polly GitHub repo, the NuGet package or the “Better User Experiences and More Robust Applications with Polly” Pluralsight course.

You can start watching with a Pluralsight free trial.

SHARE:

My new Pluralsight course Making .NET Data Types More Human With Humanizer was recently released.

With Humanizer our application user experience can be improved. For example we’ve all seen (and probably written) applications that just add “(s)” to a list of things: “1 order(s)” rather that adding the “s” only when there is more than 1 order.

Another use case is the Humanization of DateTimes. For example in a logging application we’d probably want the log entry date and time right down to the millisecond. In a Twitter app for example, that level of detail is not essential to the user experience; in this instance Humanizer can give us a string such as “2 hours ago” which is a lot easier on the eye.

Check out the GitHub site, give a shout out to the creator Mehdi Khalili on Twitter, or watch the Pluralsight course here.

You can start watching with a Pluralsight free trial.

SHARE:

I found out about these units this week so I wanted to have a play with them.

The CSS units: vw, vh, vmin, and vmax allow sizes to be specified relative the the browser window size (or the “initial containing block”).

So 1 vw is equal to 1% of the viewport width and 1 vh is equal to 1% of the viewport height.

vmin and vmax return the smaller and larger respectively of vw or vh.

There is good support  for vw and vh in modern browsers with some partial support for vmax, overall about 55% of browsers offer full support, 20% partial support.

So for example to center a div vertically in the browser we could set its height to “50vh”  (50% of the viewport height) and set its top margin to be “25vh” (or a quarter of the viewport height), thus leaving a quarter below the div.

So here’s a screenshot of this in action in a tiny browser window (the white is the div):

And after resizing the browser:

More...

SHARE:

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.

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?

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:

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:

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:

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:

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:

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.

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:

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.

SHARE:

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.

More...

SHARE:

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

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:

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: