IAPMEI App
Project in partnership with the Ministry of Economy of Portugal with the aim of creating a Mobile App to provide national and international entrepreneurs with a solution for registering, managing and providing an electronic catalog with the profile of Portuguese SME companies and their products. The layout was developed for native IOS and Android, the client asked that the technical specifications of the development and design were in accordance with the guidelines of each of the operating systems.
Challenge
The biggest challenge presented was the need to design the same app for two different systems, IOS and Android. I present here visually the main points of difference between them based in the design system of each Operative System.
IOS
The design of the IOS version was entirely based on the Human Interface Guidance library and style guidelines. All components were taken from there, few elements were customized.
Spaces, vertical rhythm guidelines were respected
“Allow adequate space between lockups. A focused lockup expands in size, so leave enough room between lockups to avoid overlapping or displacing other lockups” Text taken from HIG
The information architecture respected the order of importance.
For ICONS the SF Symbols were used
“Because SF Symbols use equivalent weights, you can achieve precise weight matching between symbols and adjacent text, regardless of the size or style you choose.” Text taken from HIG
“In general, place principal items in the upper half of the screen or window, near the leading side.” Text taken from HIG
Thematic groups were created
“Create visual groupings to help people find the information they want.” Text taken from HIG
Style Guide
For the typographic scale, the standard SF Pro Display font was used for IOS with the suggested scale for the operating system in pt. And I used SF Symbols, the standard IOS icon library.
Screens I made
IOS guidelines
Android
All elements were designed based on Material Design 2 guidelines. The sizes, element choices, icons, and typography were all taken from the system developed for Android.
Style Guide
For the typographic scale, the standard Roboto font for Android was used. And I used Material Design icons, the standard icon library.
Screens made by me
Material design guides
