When you understand how individual journeys fit together in the bigger picture you can move into more defined UI design. Techniques described in this part are useful to define design in enough detail that it will resemble the end product. Even a sketchy version of the UI will be instantly recognised by users as a representation of the interface, which will allow you to ask for feedback early.
This dynamic of going from big picture thinking to details and back again is in itself a great illustration of the iterative nature of software design. With each cycle you get more confident that the overall concept makes sense (or if it does not, you can adjust the course as and when needed) and you can move into applying next layer of detail until all parts are in place.
Sketches, wireframes and mockups
To convey various UI ideas you can simply sketch on paper, or you can use one of the many available digital tools to draw a wireframe. Wireframes are low fidelity layouts of your applica- tion screens. They show where each element will be placed and how important it will be in relation to other objects on the page. Those basic compositions visualise how complex the layouts and interactions of your app’s screens will be.
Frequently updated wireframes are an excellent reference point for discussing details and next steps with everyone on the team. And if you work on your own, they help to organise your own workflow. If you need to identify UI pattern libraries at a later stage, those will be guided by repeatable elements from your sketches.
So how detailed should your wireframes be? Sketches are ideal at the early stage for quick ideas generation. The more
User Experience & User Interface Design
specialised wireframing applications come with libraries of ready-made widgets to quickly arrange on a screen. The advantage of using digital tools is that you have an editable version of your screens that can be then transformed into clickable prototypes. Although you can also use sketches to do that, once you get to more detailed problems a digital version is easier to update and maintain.
Mockups is a term commonly used for a wireframe with more visual design detail applied. Some mockups can look identical to the final implementation. The more refined visualisation of the final product can be useful for demos, sometimes a quick sketch is enough for a highly collaborative teams to agree on next steps. It is up to you to decide how much of the finished look you need on each step to make progress.
Messaging
As soon as you start using meaningful labels and titles, rather than the placeholder text, you start defining the way you communicate with your users. Depending on your application, the language will have a different role in guiding your users through the flows. But even if the use of words in your UI is minimal, do not leave it in a placeholder state too long.
The wording is something that you should put through user testing. A single misleading word might confuse your users or lead them to assumptions that might work against what you are trying to achieve.
Prototypes
An interactive prototype is the best way to visualise and evaluate your app’s interactions. It is usable enough to com- municate the design, so you do not need to provide as much documentation as you would need to annotate static images. Your prototype can have visual design applied and look exactly
User Experience & User Interface Design
as it will after the implementation, or you can stay on the wireframe level and focus on functionality and content.
It does not matter whether you have a big budget or are working on a personal project over the weekend, having a fairly complete prototype of your app is the best way to communi- cate your concept and discuss it with others. The non-linear narration of your apps should be self explanatory at this stage. Many prototyping tools allow you to experience your concept on an actual device. Take the advantage of it.
Prototypes are usually developed before you spend time on implementing code and pixel perfect design. An agreed clickable walkthrough is a useful reference that teams can work towards without risking going too much off track. It is also great to user test prototypes and get external feedback on.
In terms of putting a prototype together there is no single best solution. You can use whatever technique works for you. From paper prototyping to using one of the specialised tools or other applications that have the functionality to put clickable journeys together. If you have coding skills, building a HTML prototype is another good way to go. You can also rapidly prototype on the existing app, it all depends on what approach works for a specific project setup. In that sense everything can be seen as a prototype until it is released.
Prototyping & wire framing tools
Some available tools are free and most of the commercial ones offer trial version of have free account option for limited number of projects. Here is a list of few applications that you can try:
— Axure:axure.com
— Balsamiq mockups: balsamiq.com
User Experience & User Interface Design
— Mockingbird:gomockingbird.com
— OmniGraffle:www.omnigroup.com/omnigraffle
— Origami from Facebook:facebook.github.io/origami
— Penci:pencil.evolus.vn
— POP:popapp.in
— Principle:principleformac.com
— Proto.io:proto.io
— Sketch: sketchapp.com Interactions & animations
When you start working with a prototyping tool you can visu- alise the way users will interact with your app in a very direct way. By putting the prototype on a device you can actually experience how your app will feel. This experience is extremely valid not only in user testing, quite often you will be able to identify the missing elements for yourself.
The way your UI moves and respond to users actions will contribute to how usable your software is. Think about your layout and widget choices in the context of the platform on which your app will run. Each platform has their own styling conventions and specific methods for handling interactions. Following the recommended practices will make your app instantly easier to interact with for users that are already familiar with their device’s patterns. For more information and links to specific online resources see the platform - related chapters of this guide.
With an ever-changing mobile devices market you should also consider how your UI will look on different screen sizes. While it may be too early to get into too much detail before you have your concept refined, thinking about the layout scalability-to-usability ratio during the wireframing and visual design stage (so once you have some sort of graphic representation of your layouts) can save a lot of development
User Experience & User Interface Design
and testing time later. If this topic is completely new to you it is worth reading more about best practices in Responsive Web Design (RWD). Web designers have been solving the layout scaling problem for a while. Also check if the platform specific guidelines provide more information around this subject.
Visual design
Unless you are building an app that uses a non-visual input/ output, your app’s UI will rely on graphics. Taking care of visual design details will help improve your app’s experience and make it stand out among the masses.
You would have already applied a number of graphic design principles during wireframing stage. These include layout design elements like spacing and visual hierarchy. Polished visual design will not only improve your UI’s aesthetic appeal, a well-executed branding enhance your app’s functionality and reduces the learning curve for users by providing visual cues.
Style consistency through the flow helps users make sense of your UI and learn interactions faster. For example, if your main action button changes colour from screen to screen, consider the impact on the users. Will they be confused? Will they understand the reason behind the change? If the style alterations are intentional make sure you are doing them for usability reasons.
Similar to designing layouts and interactions on the prototyping level, certain styling decisions might be informed by specific platform guidelines. Your app can look very different depending on which platform it was defined for. Make sure that your design follows the recommended practices for font use, standard icons and layout conventions. Again, see the platform-related chapters of this guide to find more informa- tion and links to specific resources.
User Experience & User Interface Design
Company branding in the UI can be applied in a non- obstructive way so that users can concentrate on interacting with your app. Use the background, controls colour and maybe certain images or layout choices to achieve the brand's look and feel. A splash screen (if present) is a place where you can display some additional graphics.
Finally, the launch icon is the first impression visual element that your app will be identified by and judged on. Make it look good. If you are planning releasing on multiple platforms, check the design requirements early so you can come up with portable artwork.
Visual Design is a rich area and if you would like to understand more about specific techniques you can find more information and examples online - see below for some recom- mended websites.