WE CREATE BRANDS PEOPLE L♥VE
Share

5 Fundamentals of Mobile Site Design


Tegra - May 7, 2020 - 0 comments

Fundamentals of Mobile Site Design

⭐️ Fundamentals of Mobile Site Design

Courtesy of @ux.mars

Here is fundamentals:

💫 Mobile First!

💫 Low-fidelity Prototype

💫 High-fidelity Prototype

💫 Usability

💫 Mobile Site ❌ Mobile App

Mobile First!  Start designing web sites by designing for mobile devices.

Mobile First!

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 a very brief information about the subject. 
Menu: hamburger menu is the best way to making clean menu
Title: tell users what the image above is about. 
Button: highlight your Call to Action button, So users can be interact.

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.

High-fidelity Prototype  Give your design a real face.

High-fidelity Prototype

Give your design a real face.

Usability  * 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 user's location, if you want to take that information.

Usability

  • 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.

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.
Why mobile?  * Future in the hands of mobile devices. 
* in 2019, %64 of site visits were from mobile.

Why mobile?

  • 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.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.

Related posts

Leave a Reply