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:

When designing an app or website it can be hard to come up with inspiration for colour ideas. One place to look is the local hardware/DIY store.

These stores usually have colour sample cards from the different paint manufacturers that are sometimes helpfully grouped into related/complimenting shades.

This image shows some cards from my local hardware store showing some purple and pink hues.

While it’s a low tech approach, it’s cool to see a whole load of colours “in the flesh” when these cards are laid out on the display stands.

If you’d like to learn more about colour choice and other design related topics such as Typography, check out my Pluralsight Introduction to Design course.

SHARE:

A Desire Line (or Desire Path) is the shortest or easiest way to get from where you are to where you want to be.

In the physical world we can see these in parks or grassed areas as paths worn away by people’s feet.

Take this photo:

This was taken not long after the opening of a new building. The photo shows part of an entrance area to an office building and mall entrance.

More...

SHARE:

One way of thinking or planning colour is to think in terms of relative expansiveness, that is, the proportion of the use of different colours.

One way to describe this proportionality is to think in 3 groups:

• The Dominant Colour: proportionally the largest expanse of colour, e.g. the ground
• The Subdominant (or subordinate) Colour : the second largest expanse of colour after the dominant
• The Accent Colour: the colour with the smallest relative area

This doesn’t mean that we can only ever use just three colours, but it’s a nice conceptual model. We could, for example, have a single dominant colour and a single accent colour; but we might have 3 shades of a subdominant to create a greater range of visual possibilities.

A simple way to visualise this is to use a subdivided coloured square.

More...

SHARE:

The Gestalt Principals help us to understand human perception. The application of these principals can help us create better user interfaces and improve the overall user experience.

The Problem

Peregrine is a great free Twitter client for Windows Phone, although I love Rowi as well the last time I changed my Windows Phone handset I decided to give Peregrine a go and haven’t looked back.

I was using it this morning and noticed someone had mentioned that they were watching my new Pluralsight course. It also looked like this was a retweet.

Look at this screenshot:

I thought the Tweet that I was mentioned in was a retweet from tomwarren.

It’s not; the retweet indicator belongs to the tweet below: “Just updated YouTube…”.

So what are some of the ways we can solve this design problem?

More...

SHARE:

My newest Pluralsight course has just been released.

It’s about learning the fundamentals of design and applying them to your own work.

It covers topics such as: typography, colour meaning and choice, fundamental Gestalt Principles, and some other important and useful principles.

From the description:

“Design is all around us but most of us don't notice it. By the end of this course you'll start to notice design elements in everyday life. By understanding the fundamentals of design, you can start to apply them to your software UI & UX, marketing materials, emails, web design and pretty much anything else you produce.”

You can check it out here.

SHARE: