⭐️ Fundamentals of Mobile Site Design
Courtesy of @ux.mars
Here is fundamentals:
💫 Mobile First!
💫 Low-fidelity Prototype
💫 High-fidelity Prototype
💫 Mobile Site ❌ Mobile App
Start designing web sites by designing for mobile devices.
Low fidelity Prototype
Why these elements are there?
Logo: users are used to seeing the logo in the top left corner.
Image: the best way to tell users something is visuals.
Description Area: give very brief information about the subject.
Menu: hamburger menu is the best way to making a clean menu.
Title: tell users what the image above is about.
Button: highlight your Call to Action button, So users can interact.
Give your design a real face.
- Optimize your entire site for mobile phones.
- Don’t make users pinch-to-zoom.
- Make product images expandable.
- Tell users which screen orientation works best.
- Keep your user in a single browser window.
- Avoid “Go to Full Site” labeling.
- Be clear why you need the user’s location, if you want to take that information.
Mobile Site not equal Mobile App
- Mobile sites and app’s are not the same thing.
- Mobile sites displayed with browsers.
- Mobile apps are displayed by downloading the application to the phone.
- Future in the hands of mobile devices.
- in 2019, %64 of site visits were from mobile.
Bonus — tools that may be useful in your designer way:
Designmodo — a timesaving tool that helps create websites and email builders designed for developers, designers, marketers, and non-tech users.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Leadpages — lets you build beautiful, high-converting websites, unlimited landing pages, pop-up forms you can add to your other websites.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
LPgenerator — professional landing page platform for your business to generate new leads and increase sales.