UI is user interface by the way, for those that were wondering. So what is a user interface? I could give you the robot or the human definition. Essentially it’s what a human presses to make something work. That could be a weapons console in a fighter jet (with physical buttons and switches) or a web application that sells you fruit better (with virtual buttons and switches). My article revolves around the last few web apps that I have worked on, and these are some of the themes that I loved to hate, or just discovered along the way.
1. Sometimes your wireframes just hypnotise me
Yes I ripped this from Notorious B.I.G. Wireframes are there as a blueprint for the designer, I never believe that they should be fully followed unless you want to just paint the wireframe in and call that a design.
Fair enough – it works, but I like to challenge the wireframe a bit. Without giving the Information Architect (IA) too much of a headache, I think it’s healthy and at times beneficial for a designer to challenge the wireframe, as when in the design phase things can be interpreted differently and ultimately if things can be improved then why not do it? That said, this is something I find a lot harder in a UI project, It feels like a boa constrictor has you tightly squeezed and won’t allow you to make those changes you normally could on an e-commerce website. Solution? Make you sure paint the design a different colour to the wireframe. Sorted.
2. Clean up on aisle 4
Being a senior designer I would like to think that my layer organisation reflects that of a senior designer i.e organised tightly like flat packed furniture at IKEA. Why is it then that when it comes to designing a UI my layers are scattered, randomly like pieces of a destroyed home after a hurricane? I put it down to getting carried away with your layers. Either that or UI projects breed laziness.
The best way I have found to combat this, is to do a quick clean up of your layers after each module is finished. Depending on how OCD you are that could mean after each table row or after the whole table. You get the gist.
3. Lines, more lines and oooh look a table
Don’t listen to the spiky haired kid from the Simpsons, you can design with lines just not all the time. What I have found is that when you are designing tables, lines are never too far away. As my wise boss once said ‘design is lining things up’, but that doesn’t mean to say you must use lines when lining things up (confused yet?). Things can be lined up without the lines being there to make the division. However the next time I design a UI, just for the thrill of giving my Creative Director a headache I’m gonna use triangles instead of lines.
4. Choose a pixel. Choose a fruit pastel background colour. Choose a style.
Nope, not talking about a lookbook of various UI elements strutting together on a catwalk, but the visual styles that you will create during the journey of your design. It helps to keep a PSD of visual elements that you have used/or are going to use on your UI design, primarily for the fact you can re-use them and not have to invent another style (result). Oh that table works with that button, but it also works well in that panel. Secondary, because it saves you a bit of time if you are handing over a stylesheet to the dev team or the client. Think of it as you taking a shortcut in the UI design journey. It’s not you being lazy, it’s you being smart.
5. Painting the town… pink?
It’s very easy to go crazy like a kid in a toy store (or a Manchester City chairman) whilst designing a UI. If you have decided to design your application for some bizarre reason in god forbid, electric Pink, then make sure you carry that style through. For me, good UI design has consistent themes running throughout, whilst not to say let’s make it the same on every page it needs to have elements that the user can relate to previously. i.e the same styles for a table. So basically what I am saying is.. check yo’ styles before you wreck yo’ UI.
6. Patience is not a virtue but necessary
Try, try and try again. I don’t think it’s possible to just get a UI design right the first time, same rule applies to any design, specifically with UI though, you can find yourself thinking something works, but then later on a unique template comes along and KO’s that thought. I guess it’s a good thing to be prepared for any eventuality, and in this case we are talking of multiple tabs, how that tab is going to work on that background, or how that colour is consistent with the ones you chose on the first page – also the one the client has signed off. Plenty to consider, but once you hit that perfect template all that praying to your buddhist monk would have been worth it.
7. Things fall into place
This one is not negative – Lucky number 7 indeed. The further you get into a UI design flow, you will notice that things fall into place like a jigsaw puzzle that you could never complete – it just happens. Modules become easy to shift here and there like tetris pieces to create a template. Don’t feel bad about re-using things either, you did after all make them to begin with. Re-using elements helps your design remain consistent, but without creating another style. Important: I am not saying we should re-use everything, because the time your designs all look like the same template, is the time to worry and hover your finger over the reset button.
Yeah but… I knew this already genius
You’re probably reading this thinking yeah it’s all obvious right? Right, a lot of it is but then again a lot of things you read are obvious it’s just that someone has said it and you all nod in agreement like little penguins.
I hope this has provided some insight into designing with user interfaces and if it hasn’t just nod anyway like a little penguin.