Improving my visual UI skills

If you’re an Experience Designer, sometimes you may get caught up for a few weeks (even months!) just working on the research phase of a project to define requirements using various qualitative and quantitative methods, you won’t even begin thinking about the conceptualisation stage. I think it is important to spend an hour a day outside your 9-5 to work on a personal side project as it is a great way to improve and sharpen our skills. One way I find is through concept projects.

Concept projects

Concept projects are solutions to problems you’ve personally encountered and have taken the efficiency to solve the issue(s). Whether this is sketching wireframes, designing states or development work, you can gain some valuable skills without being constraint to time/budget. If you’re fresh out of school without any ‘real-world’ experience, it is a great way to attract potential clients and businesses, by adding value to your portfolio, as stressed by Mike Locke.

It (concept projects) is a great way to attract potential clients and businesses, by adding value to your portfolio.

BlackBerry Messenger

Back in 2014, I was doing a bit of freelance work focusing primarily on responsive large web projects. At the time iOS7 was on the market, which featured a completely redesigned user interface from the previous generation. I decided I wanted develop my iOS7 visual skills so took it upon myself to look for an app that I used but lacked the user experience compared to its competitors. BlackBerry had launched their iOS variation of their BBM app onto the platform. It was basically a replica of what was on offer on Blackberry ecosystem without following any iOS guidelines or principles in terms of both, usability and visually.

Figure 2: BBM iOS screen states in 2014 (left), my concept work (right)

BlackBerry Messenger for iOS7 was a small redesign of the core screens following Apple’s design principals. It was not a reinvention, but merely a clean and achievable redesign of a popular messaging application. Chat Lists was improved by removing the unnecessary clutter of glyphs and notifications. Instead, everything is aligned correctly. The layout and placement of virtual buttons is the same, almost all of the assets had been flattened or tweaked. The new visuals permeate through the navigation bar at the bottom of the screen, with all of the icons changed to a minimalist, flat combo. The Contacts screen was trimmed to bring the contacts profile photos to the forefront. Further, the mess of boxes and lines was thankfully cleared from user profiles giving an all round, a lighter and more beautiful design. Additional features from arbitrary actions such as swiping from right to left on a contact allowed for an enriched experience while meeting user’s expectations with touch-based interactions. Applying this gesture consistently makes the app feel familiar to what users already know.

Take home points

What I learnt from the months work gave me an insight into applying branding on top of core human interface guidelines. Primarily, the work invloved visiting Dribbble and Behance as a source of inspiration, before copying visuals that fitted my sketch ideas into Photoshop. With the transparency of this layer reduced, I began imitating numerous elements from different mockups. This allowed for me to value the importance of:

  • spacing to bring focus to key elements through visual cues
  • san-serif typography: line-height and kerning to make text readable
  • colour to give a well-balanced emphasises to varies signifiers
Figure 3: Give your designs context using device mockups.

Hope this helps you to get thinking and working on concept projects. Please leave your comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *