How Long Until Christmas, Re-design

How Long Until Christmas is something I whipped together a few years ago, and I re-built the website using Node. I’ve always intended to spruce up the visuals, but it’s just one of those things that always slipped to the bottom of the list.

I’ve spent some time recently and come up with something that I feel is more pleasing to the eye, and unlike the current design actually has a Christmasy feel about it.

This time around, I’m also throwing together an iOS application which will be released at the same time as the website re-launch. It’s very simple, but I think it works.

I’m hoping to have the new site, and application, live before the end of September at the latest.

iOS V1 Website

Zizim – UI Re-design

TL;DR The design can be viewed on my Behance Profile.

Zizim is a project I originally started back in University. I rebuilt it using OOP principles a few weeks back, but the generic interface has been bugging me ever since. So I’ve spent some time working on a new interface, which I think works well.

The homepage is now, essentially, a full screen textfield. A URL is pasted into this field, and when the form is submitted it generates and returns your short URL. There’ll be the option to login using Twitter, which allows the saving of shortened URLs; tracking statistics and the option to add an alias to the URL.

From Zizim HQ, which is accessible when logged in, you’re given an overview of all of the shortened URL’s which have been generated and some basic information, including the number of times the link has been clicked.

Click on one of these rows will take you to a page with some more comprehensive usage metrics, and graphs, which I haven’t built yet. That’s next on the list. I’ll probably re-launch the service with the basic click tracking initially, and add the comprehensive metric later.

Now all I have to do is build this in the existing backend, which I’ll be doing over the weekend.

Designs visible on my Behance Profile, here.

Brakes? Where we’re going, we don’t need brakes.

Picture the scene, Twitter is a buzz with Google’s self-driving car that doesn’t have a brake pedal (or any pedals, for that matter). What could you do?

Well, I took the popular quote from the film ‘Back to the Future’, “Roads? Where we’re going, we don’t need roads.” and adapted it for this scenario by changing it to “Brakes? Where we’re going, we don’t need brakes.”.

Add in some crude photoshoppery of the scene from the film, where all three of them are in the car, and splice it into the image of Google’s self-driving car. Caption it with this quote, in a Back to the Future esque font.

And you get, this.

google_car_bttf

Personal Blog – UI Concept

TL;DR An initial UI concept for a personal blog. View here.

I had some free time this evening, so I thought I’d have a go at mocking up a concept I thought of this morning. This is an initial attempt at creating a clean, and simple, UI for a personal blog.

The focus is on the article titles, rather than clogging up the view with large snippets of each article. You could argue that this may affect the number of people clicking through to read the articles, if they can’t read a little about them first. However, if the focus is made on making article titles engaging and inviting, as they should already be, this shouldn’t be an issue. Mobile screen real estate isn’t as plentiful as their desktop counterparts, so it makes sense to focus on the important information, in this instance it’s the article titles.

As our eyes head for the top of the screen, why waste that space with the navigation bar. I think the navigation bar would not only look better, but logically it could serve a better function at the bottom of the page. People are fairly familiar with seeing things like tab bars on the bottom of the screen in mobile applications, so it’s a fairly safe bet they’ll be able to use it despite it’s relocation. When the ‘hamburger’ menu icon is activated, the full-height menu slides up from the bottom, taking the navigation bar with it.

At the bottom of the menu view, we have a search input. When this search field is targeted, the other menu items are hidden and the search input field takes pride of place at the top of the menu view. Live search results are shown as the user types, with the matched keyword emboldened in the results.

I’m personally a big fan of navigations at the bottom of the page, I think it works well and certainly breaks from the generic visual mould which a lot of the web seems to be pressed from these days. If only to collect some metrics, a variant on this design could be created with the navigation at the top of the screen. These two designs could then be A/B tested to see whether or not the navigation position does have a bearing on the level of user interaction.

This project is visible on my Behance profile, here.

MPG (Fuel Economy Tracking) App

UI Design isn’t something I’ve had a lot of experience with, but as I’m experimenting with Cordova it seemed like the perfect opportunity to practice some UI design.

The first app I intend to create is one for logging and tracking fuel economy in vehicles. The initial concepts for this app can be seen on my Behance profile.

My intention is to release the application on Android, iOS and Firefox OS. I will also be building an accompanying API to allow the syncing of data to the “cloud”, allowing the viewing of statistics via a website if desired.