In which Riki talks about design, life, and cupcakes

Freebie: Flat UI PSD 2 (Blog)

Here’s another UI “starter kit” freebie for you. It’s once again a flat style UI, this time with a ‘blog’ theme. If you’re a fan of ‘The Count of Monte Cristo’ (the book, of course), you might understand the fake content. Grab the PSD from my dribbble page!

An obsession for perfection

Here’s an insight into the nightmares that wake me up at night.

While looking over the login screen for Knowmedge’s mobile design, I noticed that I had used a typical “user” icon for the form field. This is common practice, and I put this element in like it was a routine. At most, I thought about whether I should use a silhouette of our mascot, or if I should use a generic person. As you can see below (left image), I chose a generic person. Likewise, I didn’t put much thought into the “log in” button beyond the way it looked: whether it should be flat or have a gradient, what color it should be, etc.

There’s nothing about these two elements that will hinder a user from a usability point. The “problem” that I had was that I think they can be improved. If you look on the image at the right, you’ll notice two things:

1. I changed the user icon to an image of an envelope. This is because this field has always been for an email address, so having a user icon didn’t really make sense.

2. I felt that a login screen is so common that there’s no need for a button to say “log in”. I want users to get used to seeing an icon represent something that means “you’re going in”. This is similar to the way that when you see a button with a magnifying glass, you know what it is without even thinking. Your mind sees the “search” button so often that you probably don’t even realize you’re hitting that button. I want users to get used to a login button in the same way, so I used an icon of a key.

Changing the user icon to an envelope is a no-brainer. That’s a UX issue that I should’ve seen from the beginning. The button edit is slightly different. People aren’t used to seeing an icon on a button for logging in, but I expect that it won’t hinder them, and it’s my hope that more and more people start using an icon as a login button. Perhaps a key is not the best representation of a login button, and if not, then use something else! Perhaps what you use will catch on. Whatever it is, it’ll be better than simply writing out “log in”.

Why is this important? Because thousands of years of human and language evolution beginning with cuneiform taught us that a visual cue is so much more powerful than text. Okay, that last sentence was bullshit I just made up, but c’mon, it sounded damn convincing. The truth is, I like visual cues because they’re instantly recognizable. Yes, you can read “log in” quickly, but it’ll never be as quick as recognizing a universal symbol. It may be that this will only speed the process up by a mere 0.00000000000001 second faster. So what? Right?

Wrong.

It’s not these exact changes that matter, it’s the peek into the inner workings of my mind that should tell you: here’s a guy that cares about every element that goes on the page. The examples presented here may make virtually no difference to an end-user, and yet I care about it. Imagine how much I care about the bigger problems. This level of detail is what separates a passionate designer with everyone else.

Here’s another thing. I didn’t spend hours and hours trying to come up with this idea. It just came to me, and I felt it made sense. I’m not saying that as if to say that it’s a brilliant idea that I’ve discovered. There’s probably someone out there that’s already done this. Heck, it may not even be an improvement, but a detriment! But that’s not the point. The point is there was no cost for it on a client’s part. If you don’t care that your users are 0.00000000000001 second less hindered in getting to that next screen where they might give their money to you, if you can’t appreciate that level of detail at no cost to you, look somewhere else for a designer.

Everyone else, send me your proposals and cupcakes, please.

Freebie: Flat UI PSD

Here’s a UI “starter kit” freebie for you. It’s a flat style UI which I’ve been working on as warm-up sessions prior to client work, or as cool-down sessions afterwards. Grab the PSD from my dribbble page!

Knowmedge Mobile

With the Knowmedge project about a month away from official launch, I’ve mostly wrapped up the web graphics and moved on to mobile design. Here’s a little sneak peek at what I’ve been doing.

FastGrade redesign WIP

I’ve been doing so many freelance projects that I haven’t spent enough time on this blog. This is my attempt to change that!

All recent client work has NDAs, but I’m glad that I’ve been given the green light to show what I’ve been working on for the FastGrade website. This is a really exciting and fun project, partly because it wasn’t at all what I was expecting.

FastGrade deals with the banking/finance sector, so my initial thought was that the design should evoke a corporate feel. I was so surprised (and cautiously happy) when I was told that they were looking to inject some levity into what’s generally a very stuffy industry.

Here are a few of the designs I’ve done so far. Nothing is finalized, so I haven’t dropped these into my portfolio yet (I’ve got enough WIPs in there as it is) but I was really pleased with these and wanted to show them!

Be sure to scroll way below for a screenshot of the original homepage.

 

Homepage:

 

About page:

 

Blog page:

 

Original homepage:

Freebie: Keyboard PSD

I created a free mini keyboard UI for PixelsDaily recently. Check them out and download all sorts of other goodies from them!