Previously, did you know what UI or User Interface is? The user interface is the point of contact between humans and computers and communicates within a device, including display screens, keyboards, mice, and desktop displays. User interfaces allow users to effectively control the computers or devices they interact with. User interface is also one of the ways in which users can interact with an application or website. With more and more businesses relying on web applications and mobile applications, it has prompted many companies to place increased priority on User Interfaces in an effort to improve the overall experience.
Some info on making UI Design:
Software for creating UI designs
Photoshop
Sketch
Adobe XD
Canvas Size
Android App →360px * 640px
iOS App → 320px * 568px (iPhone 5), 375px * 667px (iPhone 6,7,8)
Website →1440px * 900px (It’s better if the canvas size is adjusted to the resolution of your laptop / computer screen so you can put your design in the browser and it looks right)
Text Size
Android →https://material.io/design/typography/the-type-system.html#applying-the-type-scale
iOS App → https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/
The website for this website is quite flexible, the important thing is that it is easy to read and clear between the title and description)
Distance between elements
iOS App → Haven’t found any official info from Apple regarding this. So far I use multiples of 5 to determine the distance between elements in iOS design.
Website → There is no standard spacing between elements on the website. I usually use multiples of 5 to determine the distance between elements on the website
Text Color
Android (Basically using 3 types of opacity 87%, 60%, 38% of the base color. And these 3 types of opacity you can use to create a text hierarchy)
iOS App → Haven’t found any official info from Apple regarding this. You can use the principles of Android (using 3 types of opacity) to create a text hierarchy.
Website → Flexible. You can use the principles of Android (using 3 types of opacity) to create a text hierarchy.
Icon Size
iOS, for the size of the icon used other than the tab bar I usually use the size 24 x 24)
Website → Flexible. use size 24 x 24.
UI-Bulary
Margin
Distance between elements (green color)
Padding
The distance between an element and the elements in it (purple color)
Kerning / Letter Spacing
Distance between letters in a text
Line Height
Generally the line height is known to set the line spacing in a paragraph.
The need for digital IT is needed in daily activities, Bead IT Consultant is the right choice as your partner, visit our website by clicking this link: www.beadgroup.com