Whether you are a seasoned Mobile app UI designer or you are new to the UI/UX Design, there will always be some nuances that makes both these platforms tricky. I have always followed Google material design for android and iOS, though most of the time I prefer to customize the designs so that a particular product has its own flavour and essence.
From my experience I follow few guidelines while designing for both the platform. For instance:
- First step towards mobile app designing is the screen size. It depends on which size you make the designs. I prefer to start the design on bigger screen that is 1080/1920 px. This particular size is perfect for both the platforms with a little bit of trick.
For android apps, you can take – 1080/1920 pixel, resolution- 480 dpi ( so that while cropping the images it is easy in Adobe Photoshop CC.
For Iphone you may take 1080/1920 pixel, resolution- 72 dpi (3X). - You need to have key information in hand before designing
Color swatches for material design
Typefaces
Writing
Navigation
Product guidelines
Gestures
Components - Wireframing- Just in Mind, Balsamiq and Invisionapp
These application can be used for wireframing before starting with any designs. - One must use best way to cut android and iOS designs. I always refer to Google’s product guidelines for Mobile App UI if there is any doubt, but as a rule of thumb, all assets which needs to be exported for Android and iOS should always be in PNG format.
Also Read: 5 Endless Wireframe Tools For Mobile Apps Design
FOR ANDROID:Android icons require five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline.
- mdpi:160 dpi
- hdpi: 240 dpi
- xhdpi: 320 dpi
- xxhdpi: 490 dpi
- xxxhdpi: 640 dpi
FOR iOS: - Spotlight search results: 40×40 and 80×80 (retina) pixels
- Settings icon: 29×29 and 58×58 (retina) pixels
- Other icons (customized) based on the screen size –
3X (1024/1080),
2X (640/1136),
1X (320/480)
Regarding material design- Dribbble and Behance is a great place to browse for inspiration. Plus, you can use the deconstruction trick to analyze why some examples of material design are leagues above others despite the strict guidelines.
