## Notes [[Correct Refund]] asked me for resources on how to create a mobile design from an existing desktop design. ## Concepts and Ideas There are several overarching concepts and ideas to consider when designing for mobile. The screen is smaller, so certain best practice adjustments should be made: - There should be less words in descriptions - Text should appear larger to make it easier to read - Images can increase loading times, so it makes sense to cache different sized images for quicker loading - Tapping on the screen take up a larger area, so buttons, links, etc should have increased area to accommodate - Layout should be simplified (3 or more columns should probably be reduced to a single column) - Tables with many columns will not be appropriate. Consider reducing the number of columns or converting the displayed content to a list - Identify key features that make sense for mobile users to use (some features available on desktop might not be available on mobile devices) - Hide navigation in its own menu - Incorporate gestures (like swiping) to reduce clutter of buttons on the screen - Convert forms into a single column (similar to tables) or use a multi-step/multi-page form - Consider what would happen to UI components if the user rotates their phone to landscape ## References - [Designing a Consistent Experience Across Desktop and Mobile - Medium](https://medium.com/@pancakefeed/designing-a-consistent-experience-across-desktop-and-mobile-cb9319941630) (might be behind a paywall) - [Essential Tips for Converting a Desktop Site to Mobile - Medium](https://medium.com/@WebdesignerDepot/essential-tips-for-converting-a-desktop-site-to-mobile-3686c35a7364) (might be behind a paywall) - [How Designing for Mobile is Different from Designing for Desktop - Radiant](https://www.radiant.digital/article/how-designing-mobile-different-designing-desktop) - [Turning a Design from Desktop-only to Mobile-friendly - YouTube](https://www.youtube.com/watch?v=_kF3k0vDMNA) - The key moments/timestamps in the video go through some of the Concepts/Ideas above - [Converting Desktop Web Design to Mobile in Figma - YouTube](https://www.youtube.com/watch?v=26J6A5JXmTA) - Applies the Concepts/Ideas above - [Make Your Web Design Responsive in 10 Minutes | Figma Tutorial - YouTube](https://www.youtube.com/watch?v=gwiX0oASlEw) - Responsive design means the design is flexible and changes depending on screen width