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.

Cordova (Phonegap) first impression

I’ve recently found some time to have a play with Cordova (or Phonegap, if you prefer). Partially influenced by my recent purchase of a ZTE Open C, and my desire to experiment with FirefoxOS application development.

My first impressions are very positive, there wasn’t any discernible learning curve. It’s a very refreshing feeling being able to use my pre-existing front-end skills to build mobile applications. The one thing I have noticed, possibly just a lack of searching on my part, is that the plugins for dealing with standalone SQLite / Native storage integration (to bypass the 5mb database limit) seem to be a little lacking.

Other than that, I’ve been very impressed. I’ve got a few basic applications planned, which will let me get better acquainted with the technology and see how it behaves in a production scenario.

It’ll be interesting to see how this technology progresses in the future.

ZTE Open C (FirefoxOS)

I’ve wanted a device that runs FirefoxOS for as long as I can remember, I’m very intrigued about the whole ‘HTML5 based’ operating system. The specs of previous devices have been a little too lacklustre for me, but when I came across the ZTE Open C it was in my eyes a great spec for the low price of £69. So, I took the plunge and purchased one.

I could have just used the simulator, but I don’t think that would have been a fair comparison between it and my other devices.

I’m spending some time working with Cordova (Phonegap) at the moment, and will be releasing a few applications using it for FirefoxOS.

2014-05-14-14.27.00

Ziz.im rewritten in OOP PHP

I posted a few weeks ago, when I tidied up the Ziz.im codebase and put it live after a period of downtime. I’ve since taken the time to completely re-write the code using OOP PHP principles, and I have to say it was significantly more pleasant to build than the the original method. Utilising OOP makes a lot of sense, even in this fairly limited use case.

I’ve also re-engineered the front-end so that it’s making use of the Twitter Bootstrap. I’ve grown to really like the Twitter Bootstrap, and think it lends itself well (albeit in standard styles) to this project.

The core aspects of a public API have been built into this version, which will be released shortly. To be honest, you can probably work out how to use it at the moment, it’s not rocket science. There’s just some housework and small additions that need to be made to make the API “public”. I’ll be doing this over the next few weeks.

This re-engineered version of Zizim is also available on GitHub. There are areas it could be improved, but on the whole I’m very happy with the way it’s turned out.

http://ziz.im