Once we got the whole app or website structure in place, it's time to use some color, photos, icons, illustrations and beautiful typography (sorry Roboto and SF fonts!).
If you don't know at the moment what these elements are, meaning there is no branding for the app or website, you need to define the whole visual identity before digging into UI design details.
Through UI design, our task is to:
- make the user experience easy, enjoyable and delightful
- make the app recognizable and stand out from other apps
- make the app communicate the same brand values as the company does
- achieve consistency throughout the features and mobile platforms
Client provided fonts
- The client must provide fonts and licenses in case they use licensed fonts. You should store licenses in the Fonts folder inside the project folder (except for non-commercial fonts).
- If the client does not have a license for using the font, they must sign a new contract in which they agree that they take full legal responsibility if any issues occur.
- There is a possibility that the font is custom-made by the client, or the client has full ownership of the font. Then, in theory, there is nothing to be done, but it would be good to create a mini-contract where the client confirms that the font is his and takes full responsibility for all the possible legal issues.
- When the font is forwarded to us, we store in the corresponding project folder on Google Drive.
Iterating on the UI
Before you dig into UI design of every screen, make as many versions as possible to find the right visual fit. Here, the collaborative design approach might help if you get stuck. Consider to ping-pong a few screens with a colleague from the design team.
Present only the 2-3 most polished versions to the client. You don't want to confuse them with too many ideas and variations. You are the expert, and you need to show your skills and expertise in the best light.
Testing the UI with users
If you're working on a project highly influenced by user opinion, you can use the desirability testing method to ask the users which version of the UI design is better.
Desirability testing helps us get objective feedback from users. We usually show them 2-3 versions of the UI and ask them to choose terms from the list of adjectives that describe the version best. The proposal which overlaps the most with the objectives we have set for UI design wins.
Here you can find more information about this method.
Finalizing the UI design
While approaching the end of the design phase, make sure you have:
- a styleguide with colors, typography, brand elements and components
- all the screens set in color and typography styles organized in components
- screens organized in flows separated in different pages
- archive page or duplicated file with old iterations and unused versions
- exportable elements for developers
- comments with specific behaviour and flow descriptions for developers
- Favicons and open graph images for web apps and websites
- App Store and Play Store icons, screenshots and featured graphics for mobile apps
- Complete UI stack (↓) of the screens and components
📚 Recommended reading
- Handbook: Learning materials/UI Patterns + Inspiration
- How to fix a bad user interface
- Visibility of System Status
- Type Foundry Index
- Fonts by Hoefler&Co.
- Type Network
- Klim Type Foundry
- Darden Studio
- Colophon Foundry