Open Night was a ball, in both the avenues of fun and nerves. I enjoyed it, and I hope that all those in attendance had fun as well. For those who missed it, here’s the essence of what I spoke about because face it we were there to learn and teach as well.
Design is a creative as well as a technical art. No one truly realises just how refined design can be. There are rules, guidelines and pixel counting believe it or not. So here are my tips for developers.
All links will be placed at the end of this post.
Colour
Colour has always been one of those thing that people consider to be a ‘mystical art’. Matching colours can be hard or easy regardless of whether or not you have a designer sitting behind you. Adobe has developed this wonderful tool called Kuler which anyone can use to determine which colours fit with what.
Colour in apps are used mostly to make the app look attractive, to direct the user through the app and to highlight the more important functionality.
Colour in any instance should not make your eyes hurt (literally) and gradient overlays should be used selectively to enhance icons or text rather than make the app look attractive (it usually makes it look the opposite).
So, if we are looking at the first screen above, the biggest flaw on the first screen is the lack of contrast between the two shades of purple. The text indicating what the text field requires from the user is illegible.
On the second screen the floating action button is the same colour as the header which leaves the user in a situation where they are trying to find the feature associated with the action button.
Another tip that is not visualized above is that selected and deselected states use colour to help the user know where they are in an app and therefore helps with seamless navigation. If the colour used to differentiate between the two states don’t contrast enough then the user will not know where they are in the app.
The best way to make 100% sure that this does not happen? Use bright colours to help navigate the user to where you want them to go in app (or to indicate which icon is selected), and use toned down colours (greys, soft blues and, if push comes to shove, drop the opacity on the icon colour) to contrast against your bright colour.
Also stick to one bright colour; more than one bright colour usually starts to hurt one’s eye.
The above colour combinations above are pretty much perfect!
Fonts
The next topic I touched on was fonts. Now fonts are rather difficult to select so when in doubt, always use the font created for the unique ecosystem (iOS, Android, UWP etc.) for which you are developing.
However, if you ever need to divert from the road most taken then here’s a basic tip to help you to select the fonts needed.
Above I have the two different font entities, Serif and Sans Serif. What you are reading right now is a Sans Serif font.
Serif fonts are decorative, sometimes hand drawn and are generally pretty. They are used for large bodies of text, articles and may make the first few lines (the only lines anyone ever reads!) of your Ts and Cs.
Sans Serif do not have little flourishes. They are legible and down to business, works better for short sentences and headers.
In an app, always make sure your text is legible, scalable on all devices and try not make each screen look like your Ts and Cs.
Icons
My only words on icons is don’t reinvent the wheel; use the resources out there. Google’s Material Design has a set of awesome icons which are recognisable and won’t confuse the user. Lastly, make sure your icons are scalable which means more shapes than intricacy.
UI and UX
Left and right. As simple as how our brains work (sure!). User Interface (UI) and User Experience (UX) are the logical versus creative. User Interface will come from a designer (who would have thought out finer functionality details for you!) and user expierence is all you! Make sure your user has a great time using your app and that’s half the battle won.
So that was it from me, Melissa. Hope this was all helpful, useful and didn’t damage your eyes or brain too much.
Resources: