Story: Boundary of web designer
Web/graphic designer needs to cover many areas nowadays, including print, presentation deck, web, eCommerce, SaaS interface and APP. I feel that APP UI is a little different, but a BtoB client asks me to make it even though I suggested hiring someone on Upwork. Because it is the cheaper and the faster.
I basically keep a can-do attitude anytime, but I personally laptop first person. I don’t use many mobile APPs. So, I am ineligible.
Anyway, I need to do a wireframe for the mobile APP at first. I searched for it.
Mobile UI Software
I feel that Figma is popular in the summer of 2022. XD is following Figma. Many agencies may be convenient for XD. Because agencies are using Adobe Creative Cloud. XD is naturally included. Sketch APP is the pioneer in prototyping software. I started to learn Sketch in 2018. Then, I moved XD. Now I am using Figma.
Some takeaways:
– Improve your product design in iterations
There is a development process. We don’t start prototype or development at the beginning. Research, persona, user flow, wireframe, prototype, brand guideline and UI guideline at the same time. Then pass the Figma file to the developer.
– Uniformity is key
To keep consistent, we need brand and UI guidelines. I think UI designer has a template and they adjust it for each APP. We may be able to find free resources on the internet.
– Make sure your splash screen is flawless
Tiny user experience, but I think this is the standard.
– Remember about mobile accessibility
Accessibility is inevitable. We, as a web/graphic designer, need to learn and update consistently.
– Follow the UI design principles
I pick up some principles from the website below.
– Your goal: Make your user interface design invisible
It means a user does not feel any weirdness. They naturally use your app as same as FB, IG, Twitter, etc.
– Include user feedback in the UI
We cannot be perfect. Gather feedback, segregate and implement it. The design process is teamwork.
Best 20 Example UI/UX Design For Mobile App | UI/UX Animation Design
©NAM Design
The video is not the latest(2022) trend, but I can see many interactions, and looks liquid. Just felt that it is a mobile UI. The best practice may be to download APP and test it yourself. Test from launch, create an account, and test a feature as a user.
Medium: Best App Review Sites List
IDEA TO APPSTORE – Design Process UX/UI Remote Design Sprints
©AJ&Smart
– Reach out to the client(I don’t know what’s the criteria, get done seed-round?)
– Kickoff call, interview(online note at the same time and share)
– Design sprint
– Client preference, subjectivity
– Hand drawing concept
– Pinterest board
– Storyboard
– Feedback
– Low-fidelity prototype by Figma
– High-fidelity prototype by Figma
– Development
*Used Basecamp for project management
AJ&Smart is a professional in product design. They are also the design sprint facilitation professionals, workshopper.
Basics of UI Design for Mobile Apps – Artboard Size, Screen Density and Resolution for Beginners
©Design Pilot
– Smallest frame: 360 x 640/Android
– Smallest frame: 375 x 667/iPhone 8
There is a constraints function. So, the smallest frame may be easier to scale up. The video explains only the frame size for 30 mins. A beginner, like me, cannot say that I can do mobile UI. It is very different.
Food Ordering Mobile App Design in Figma (2020)
©Building Amazing Things
If you develop a mobile UI for iPhone, please find iPhone mobile UI kit on the Figma community. It has a basic iPhone UI, notch, clock, nav bar, etc. It will be a better client impression. The video does not explain what’s the standard for column, gutter and margin. My knowledge is 16px for margin, but the article mentions 24px. Please find the latest standard.
Medium: Figma – How to build responsive and scalable grids for web-design
If you are familiar with components or assets for website prototypes on Figma, this is good to watch as a beginner for mobile UI.
Free Figma UX Design UI Essentials Course
©Bring Your Own Laptop
– Plugins in Figma: 1:44:39
– How to use Pages: 1:52:59
*Microsoft team UI looks masterpiece
– Testing on your phone: 2:22:08
– Sharing with others : 2:49:36
Sharping Design by Editor X: Font size guidelines for responsive websites
In 2022, developing from scratch is not efficient. Develop once and utilize it repeatedly, or copy from somewhere. Don’t forget appreciation. You can donate to the creator as well.
Conclusion: Can do attitude
I think many freelancers respond yes if a client asks them something out of capability. I basically do, but I also think about the risk. I had a project which requires mobile UI. A client is an NFT startup. I considered whether I should take it or not. A client has an in-house developer. So, they need only Figma file. I could not say yes. If it’s an only visual interface, I might to it. However, I had no idea how much details I need to set up for the developer. On Behance or Figma kits, I can see so many components. I also understand how expensive to develop APP.
So, I am just learning without taking a project. There is no answer here. You can say yes without experience. You will learn mobile UI quickly. Just you need to take full responsibility as well.
Reference:
Mockplus: 20 Fresh Inspirational Mobile UI Design Examples/Templates on Dribbble
designshack: 35+ Best Mobile App UI Design Examples + Templates
Nielsen Norman Group: Mobile UX: Study Guide
