Tag: UI

Figma: the collaborative interface design tool

Posted on

I was recently discussing/bemoaning the lack of a Windows version of Bohemian’s Sketch on Twitter, and @ryanAmurphy suggested I check out something called Figma. At first glance Figma appears to be essentially a clone of Sketch, and it certainly seems to sport a very similar UI and set of base tools. But Figma boasts a couple of key elements you won’t find in Sketch.

Firstly, not only does Figma run on Mac AND Windows, but because it can run in modern web browsers (it was built using the dynamic WebGL API) it can be used on a whole range of operating systems and devices. There are also native apps available to download for MacOS and Windows, although a quick look around in the desktop app suggests this is a product that was developed first and foremost for web browsers.

figma-2

The second feature that gives Figma an edge over similar tools is something its creators call multiplayer editing – real-time collaborative editing for multiple designers. For this, Figma’s creators apparently took inspiration from multiplayer gaming, but looking at how it’s been implemented they seem to have also taken cues from existing collaborative apps like Google Docs and Hackpad. I’m not currently in a role where this type of functionality could really be used but based on past experience, I think multiplayer editing is something that could potentially be very useful in the right situation.

So far the pricing structure for the service (it’s definitely shaped more like a service than just an app) has yet to be announced, but up until the end of 2016 it’s completely free to use.

figma.com

 

 

INKS

Posted on

INKS by State of Play Games

INKS is the brand new iOS game from State of Play, the team behind (amongst other things) the award-winning Lumino City.

INKS is essentially a pinball game (ask your parents) but with the novel twist of using your balls (oo-er Missus) to burst blocks of colour, thus creating works of art across the tables. In gameplay terms, the aim of each level is to burst all of the colour blocks. When all blocks have been burst the level is complete, however the way different colour bursts can be created on the same tables means the urge to replay levels can be pretty strong. It’s without doubt the prettiest game I’ve played in quite a while; even the progress screen is pure eye candy.

screenshots from INKS iOS game

INKS is available for the ridiculously reasonable sum of £1.49 for iOS devices now.

Rapid Prototyping with Atomic Design

Posted on

Atomic Design is a methodology developed by Brad Frost which, in Brad’s words, is used to construct web design systems. With the increasing movement in front-end/UI development towards building libraries of components, rather than pages, Atomic Design provides a very robust and flexible means of establishing a pattern library that serves as both a front-end framework and a comprehensive style guide for the web.

This is by no means a technical guide (I’m really not very good at writing techie stuff), just an overview of how we’ve been using this approach, and how it’s helped us.

Establishing colours, typefaces etc for the pattern library (or Pattern Lab) was done with a variety of tools and is part of a wider branding project, but when it comes to prototyping, we work primarily in the browser. We find it’s the quickest way of getting something tangible that we can show to others (Show The Thing™), and having a Pattern Lab in place means we can quickly and easily put prototypes together that have a consistent look and feel.

Using Handlebars.js together with Assemble, we built up a library of components that can be combined to form any number of different layouts. This approach really comes into its own when iterating over layouts, with variations of modules or organisms. Finding out, for example, which version of your header prototypes works best with a particular template can be as simple as changing a version number in your template file.

Our Pattern Lab is definitely a work in progress, and going forward it will most likely change shape significantly as we encounter real world design/development problems that we didn’t encounter when creating the components in isolation. But in these early stages, being able to prototype different combinations of ideas so quickly and easily has been a great way of getting things off the ground.

 

This post was originally written for Co-op Digital: http://digital.blogs.coop/2015/11/06/rapid-prototyping-with-atomic-design/

 

Creating a watch face for Android Wear

Posted on

I recently picked up a Motorola 360 smartwatch, and after I worked out how to get a full day out of the battery (basically try not to use it much) the next thing I wanted to do was create my own watch face for it. One of the things I like most about Android is how you can tinker with the UI to your heart’s content (if you’re into that kind of thing), and Android Wear is no different.

A quick look on Google will tell you there are plenty of ways of creating your own faces for Android Wear, but the method I opted for was using an app called WearFaces. If you visit the app’s website you can download template images to get you started (square or round, depending on the watch you’re creating for) – although these are just for the face itself; separate image files need to be created for the dial and the hands. Once you’ve created your custom watch face (as a massive geek I had to go for a Star Wars theme) you need to load your images into the app – on your phone rather than the watch itself. Once you’ve added your images, hit the ‘Send to Wear’ button to send your custom watch face via bluetooth to your device.

wearfaces app on Android

If you happen to have an Android Wear watch with a round face and would like a Star Wars themed face for it, you can download my custom WearFaces pack here.