Getting started with mobile designing
When I began my journey in design, I initially felt lost about where to start. The abundance of content available was both a blessing and a challenge, leading me to watch numerous videos but gain minimal insight. Navigating through this vast sea of information was quite overwhelming at first.
Being a Teaching Assistant (LinkedIn post), I’m taking this opportunity to help my fellow students transition into designing for mobile interfaces a bit easier.
Major Things To Note:
I felt the following points to start with mobile designing would be helpful. Keeping these in mind, let’s start designing:
- Margins for mobile
- Layout / Structure for the page (Wire-framing)
- Navigation
- KISS — Keep It Simple, Stupid!
- Touch Interface
MARGINS FOR MOBILE
Similar to margins on paper, it’s best practice to establish margins or grids when designing for mobile screens. Given the smaller size compared to desktops, it’s crucial to consider the Safe Area. The common units of measurement in this context are ‘dp’ (density-independent pixel) and ‘px’ (pixels).
While incorporating margins is a good practice in design, there is no universally standard margin size. The margin minimum requirement is 16px.
Margins are usually dependent on multiple factors : content you’re designing for, interface you’re designing for (Phone screen, watch screen, desktop screen), brand guidelines you may have to follow and so on.
RULERS
Another option is to use rulers available in Figma. To enable rulers, go to Figma option (Top left) → View → Select Rulers. There you can drag and drop rulers, from top and left side. Below is a depiction of how it looks :
LAYOUT / STRUCTURE OF THE PAGE
Understanding the specific content you are designing for is crucial to structuring it effectively. Different screens, such as a login, product details, or payment screen, each require a tailored layout. Our goal is to avoid a crowded appearance, facilitate easy information retrieval, and enable users to make informed decisions.
Another good place to remember that you are designing for the user
Wire-framing will be highly useful while figuring out the layout.
NAVIGATION
Understanding the layout of your screen is just the beginning; it’s equally important to consider how users will navigate through your pages. Not every interface requires a bottom navigation bar.
The key is to customize the navigation experience to be as intuitive and user-friendly as possible, accommodating the limited space without compromising on usability.
KEEP IT SIMPLE, STUPID!
Though its a general advice, it’s highly applicable while designing UI for any screen. Avoiding jargon and keeping it simple for user to understand, is our objective. Here is a great example from https://growth.design/case-studies/landing-page-ux-psychology, aimed at Desktop Design.
TOUCH INTERFACE
There’s one important term to learn here : The Thumb Zone. Thumb Zone in mobile design context refers to the area of a smartphone screen that can be comfortably reached and navigated using one’s thumb.
We need to use the thumb zone as a guideline to place the most frequently used interactive elements (like navigation buttons, action items, or key features) within this easy-to-reach area.
While there are numerous steps in mobile design, I’ve found these basic guidelines particularly helpful when starting out. I hope you’ll find them useful as well.
I’d love to hear your thoughts and any feedback you might have! Reach out to me to talk more about design :)
https://www.linkedin.com/in/nikethana-nn/ — My LinkedIn
https://nikethana.framer.website/ — My Portfolio
