Search

Living in a Material World

Updated: Feb 11, 2020

Hello again folks! and welcome to another weekly update from Number Ten Towers. It's been a relatively quiet week in the real world of British politics for once, so this week's update is a good opportunity to focus on the app itself. So without further ado, let's get cracking.


*** Warning - Technical Speak ahead! Readers of a gentle disposition, beware!! ***


I'm now into what is effectively Week 8 of full-time focus on the game. In that time I've made big strides forward in a number of areas. There's still a huge amount of work to be done before the game can be released, but I'm much further along the development path than I was at the beginning of December.


Last week I reached the point where I'm confident there is sufficient detail in the design to return to the build, and started looking again at the prototype I have to base the build upon. At this point I realised that there is still a fair amount of work to do on the prototype before I start developing again. Keen as I am to "cut code", I'm going to have to rein in my enthusiasm to do so until the prototype is in better shape. A lot of the functions and designs I originally envisaged either no longer make sense, or I've seen a better way of implementing what I had before. So these past few days have seen me returning to one of my all-time favourite pieces of software - Figma.


Back in 2014, when I first had the idea of developing a management simulation game for iPhone based on UK politics, I spent a great deal of time looking into the various options for building a prototype. At the time the two main prototyping tools were Sketch and Photoshop. Sketch was only available for Mac, and I didn't have a Mac (yet!), and Photoshop's pricing was, to put it mildly, out of my reach. So my early designs were somewhat constrained by the limited free tools I could find for Windows. As you can see, some of those early designs look, well, worth every penny...


The very first screen design I had for Number Ten is below. I put it together using Pencil Project, a free GUI designer for Windows. While it captures the basic essence of the game I was hoping to create, it suffered from the fact that it was built using the only iPhone object kit available for Pencil, which was based upon iOS 6. While that might not mean a lot to you now, in 2014 Apple had just released iOS 7, and the jump between the look and feel of the two versions was huge.

Number Ten Homepage, 2014 version. Ahhh, dig those "realistic" buttons... sadly no-one did.

Back in 2007, when the iPhone came out, with its shiny new thumb-and-swipe interface, its faux-3D buttons, wooden bookshelves and green baize tables ("skeuomorphism", to give it its technical name), it was revolutionary. Here was a phone designed to be so intuitive you would instinctively know what everything did just by looking at it, and if you didn't know, well it didn't take long to pick up. But by 2014, buttons that looked like they could be clicked but actually couldn't were starting to appear tired. With iOS 7 in October 2014, Apple embraced Flat Design. Out went shadows and in came flat colours. Suddenly the old world looked very tired indeed, and my bright shiny prototype - well, it got one or two laughs.


Then in 2015 Figma launched, a new kid on the block in the world of interface design tools, aiming to steal the market share of the big dinosaurs Sketch and Photoshop by delivering full real-time design collaboration over the web. For me, Figma's big initial selling point was its price - absolutely free to use for individual designers. And with a whole host of free iOS 7 UI kits available, I was able to donate my original Number Ten prototype to the V&A and go all Flat.


That's how it's stayed for the past few years, as I've inched along the delivery path, like a man trying to build the Channel Tunnel with a teaspoon. And Figma is a joy to use - software as it should be, intuitive, powerful and always evolving. Its one weakness is in offline prototyping, but it does insist it's an online tool, and with such a lovely pricing structure I'll cut it some slack. Some of my Figma-produced handiwork is below (the design has improved, but I'm afraid puns remain as bad as ever...)

Number Ten Minister card in Material Design. Any resemblance to any persons living or dead is, erm... painful.

But as the Bunnymen sang, Nothing Lasts Forever, and now Flat Design - or to give it its Google name, "Material Design", is itself starting to look tired. Buttons of a single shade or hue now look dull. Flat Design v1.0 is out, and Flat Design v2.0 is in, with single colours replaced by subtle linear transitions - as long as they don't look like shadows.


As a result, I've invested some time in giving the prototype a lick of paint. I'll admit to being no UX expert, but hopefully the early efforts are an improvement (those of you who are UX experts, feel free to give me pointers / constructive criticism as you wish! It can't be worse than the original design received).

The author's attempt at Material Design v2.0. Readers will not be surprised to learn I only managed a D in O-Level art (to anyone under the age of 45, O-Levels were the forerunners to GCSEs).

Hopefully the results are a bit more appealing. For the week ahead, the plan is more prototyping in advance of feature development. Speak soon!


cheers


Richard





32 views0 comments

Recent Posts

See All