Typography and Web and Desktop App design [WIP]
Typography is an essential component of the design for both desktop and mobile apps as it significantly impacts the user experience.
Good typography makes the content of the application easier to read while making it easier for users to use the app’s interface.
The user’s perceptions of the usefulness and professionalism of the app is likely to be significantly influenced by good design.
https://uxdesign.cc/design-principle-aesthetics-af926f8f86fe
The information of the app must be readable and available to all users, regardless of their device or screen size, which is another benefit of using proper typography.
In conclusion, typography is crucial to the design of desktop and mobile apps, and designers should carefully consider how to use it to make an app that is both appealing to users and easy to use.
Know thats all about importance of typography, lets embrace this with a example and how to achieve it .
Start with research and documenting your users
Understand your user base and create documentation of who is going to use your products, when they are going to use, and what is the situtaion in which they will be using it.
In our case, we have a generic app that can be used by customers of 18+ age group. People who order online.
[top be updated documentation]
Next with type sizing
Lets start with the definition
The process of choosing the right font size for text in a design, usually in proportion to other elements on the page or screen, is known as type sizing.
Type sizing is the process of choosing a font size that takes into account the overall design hierarchy and layout while remaining legible and aesthetically acceptable.
The intended audience, the device or media on which the design will be presented, the visual weight and style of the font, and the amount of text that has to be displayed are all things that designers take into account when sizing type.
Making a hierarchy of font sizes that directs user attention and enforces the app’s structure and organisation is an effective type sizing method.
Lets go about doing this with an example
Atakian’s people are working hard to give its software more layers of aesthetic appeal. So, font sizing ratios is the place to start.
Choose ratios that are effective for both desktop and mobile use. We selected a ratio of 1:1.618 since it seems readable and is suitable for desktop and mobile apps.
So we ran the ratio and got these results.
- Body Text: 16px
- Subheadings: 26px
- Headings: 42px
- Titles: 68px
For Desktop Apps:
- Body Text: 18px
- Subheadings: 29px
- Headings: 47px
- Titles: 76px
Lets get hands dirty
Start with Figma, XD, or any design tool of choice
A wireframe or basic layout of the page or screen you are building is a good place to start. After that, use a regular font to add placeholder text to the layout according to the type sizing advice you received. Pick a typeface that is readable and readable at the recommended sizes.
Focus on establishing the text hierarchy when constructing the mockup by using various font sizes and weights for headings, subheadings, and body text. Make sure that there is consistent and readable space between lines and paragraphs.
Use a monochromatic colour scheme with the primary colours black and white. This will prevent you from becoming sidetracked by colour choices and allow you to concentrate on the layout and typography.
Remember that the purpose of a black and white mockup is to establish the basic structure and layout of the design, so don’t worry too much about the details at this stage. Once you’ve established the basic design elements, you can begin to refine and add more visual detail to your design.
Test on different mobile sizes
to be continue, and updated.
