Even small details like adding Icons or providing the right amount of Spacing, can make a great impact in our overall design and by doing so we can make a clean, coherent and attractive UI for our users.
The agenda for our series of articles is as follows:
- Part 1: Defining our Workflow and Toolkit
- Part 2: Working with Color and Typography
- Part 3: Iconography and Magic Numbers
- Part 4: Elevations and Dark Theme [🍿coming soon…]
- Part 5: Guiding our Users and Managing App States [🍿coming soon…]
Let’s Get Started!
Finding the right resources and assigning them the right sizes and spacings can sometimes feel like a big challenge but there is great resources and tips we can use to get the job done.
Iconography🎯
Icons play a big part in our mobile app since “A picture is worth a thousand words” by leveraging iconography we can further improve the UI/UX for our users, giving them great visual Cues on the actions and features available to them.
TIP’S AND TRICKS🔮🎩
- Choose an Iconography Style: Make sure to define what is the style you will use for your icons and stick with it, this helps our users identify our icons easier and give balance and consistency to our UI. (Some common styles are Outlined, Filled, Rounded, etc)
- Maintain consistent Icon size: Your icons should all keep a consistent size throughout their different use cases in our app good sizes are 24x24dp, 32x32dp
- Colors for your Icons should follow your app’s text color or Accent Colors.
- Use Vectors for your Icon resources, if your Icons are being used at a size bigger than 52dp you should generate image assets from the vector and use an Image instead.
TOOLS & RESOURCES🛠
Material Icons
Material Icons are delightful, beautifully crafted symbols for common actions and items, you can use in your projects. Each icon is available in five themes and a range of downloadable sizes and densities ready to be used in any of your Xamarin.Forms projects for Android, iOS, and web.
Icon Search Engines
Great search engines to find free and paid Icon packs, available to use in your projects by providing the appropriate attribution to their authors.
Icon packs
app ICON GENERATORs
- AppIcon.ico allows you to generate App Icon and image resource sets, and automatically scales them appropriately.
- AppIconMaker.co pretty similar to our previous tool but also generates the watch versions of your icon.
- Android Asset Studio – Launcher Icon Generator Really good tool, that allows you to create your App Launcher Icon from scratch following material design guidelines with different shapes, icons, and colors available.
Magic Numbers🎯
Now that we have all the essential pieces of our redesign toolbox :P, we can start playing around with design in our Adobe XD project. To allow your mind to play freely I always suggest defining your very one set of magic numbers that you default to when adding new elements to your screen, creating a sort of standard for your design will make it look balanced and coherent while you are experimenting.
TIP’S AND TRICKS🔮🎩
- Generate your numbers easier by Increments: Example 4, 8, 12, etc
- Stay away from Light Font Weight with small Font Sizes, keep of minimum 12sp.
- 16dp Padding all around in your pages gives the perfect amount of breathing space to your content from the edges of the screen.
- Default icon size to 24x24dp or 32x32dp. You can always break this rule but make sure everything looks balanced in the UI and the Icon size doesn’t cause visual noise to our users.
- User Avatar sizes that have worked great for me are 32x32dp, 52x52dp or 72x72dp
TOOLS & RESOURCES🛠
Material Understanding Layout Guidelines
Material Design layouts guidelines encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing throughout their UI.
Ce finito! 🥳
Source Code to the GitTrends Project can be found in our GitHub Repo
GitTrends UI/UX Redesign Proposal – Behance project: https://www.behance.net/gallery/100887309/GitTrends-Mobile-App-UIUX-Redesign#comments
Download and Try out GitTrends on:
AppStore – https://apps.apple.com/app/gittrends-github-insights/id1500300399…
PlayStore – https://play.google.com/store/apps/details?id=com.minnick.gittrends…
Credits for artwork components:
Icons for the banner of the post made by UnDraw
Made with ❤ by Pujolsluis
