Visit LEDU token page

How to design City Bike Service app in Sketch and InVision

Avatar

Intro: How to design City Bike Service app in Sketch and InVision

with dovhyi|7 years experience

11936views

Watch Full Video | +150 LEDU

How to design City Bike Service app in Sketch and InVision

  • English
  • Design
  • Mobile App DesignMobile App Design
  • (5929)
  • Project length: 6h 27m

The Google’s Play Store overflows with close to 4 million mobile apps while the Apple’s App Store bursts with about 2 million mobile apps. However, the apps that shine above the rest are those that are properly designed to offer the best experience to users. Therefore, learning how to make a mobile app that stands out in the crowd is critical. In this project tutorial, I’ll use the City Bike service app as an example of how you can design amazing apps that are loved by users.

Overview

In this tutorial, we will go through the entire process of creating a City Bike service app design using Sketch and the InVision prototyping tool. We’ll focus on all the major stages of creating an intriguing mobile app design. First, we’ll go through the ideation and research stage for the app. Thereafter, we’ll create the wireframes and prepare a sketch file and structure it for easier UI design and further improvements. After creating the wireframes and setting the visual style, we’ll start with the UI phase. After a couple of iterations, we’ll put together the prototype using InVision’s Craft plugin for Sketch. We’ll also figure out ways of testing out the new app design with real users. Consequently, based on the feedback, we’ll make improvements and prepare developer handoff.

What are the requirements?

Here are some important prerequisite skills that will accelerate your learning in this City Bike service app design project:

  • Basic knowledge of Sketch
  • Basic knowledge of InVision
  • Basic design skills

What will you learn after finishing this project?

  • Creating compelling mobile app designs from scratch
  • Creating intuitive wireframe designs for any application
  • Using Sketch to create creative and fulfilling designs
  • Creating amazing prototypes using InVision

Who is the target audience?

  • Anyone willing to learn how to create wonderful designs for mobile apps
  • Anyone willing to learn the best design techniques for building perfect apps
  • Anyone who wants to advance their design skills to the next level

Project Outline

Session 1: Ideation and research

  • Discussing project brief and goal identification. For example, a simple way to identify real user needs is by undertaking surveys and then completing the competitive analysis.
  • Writing job stories
  • Building user flow
  • Sketching rough ideas for interface

Session 2: Wireframing

  • Sign up and onboarding screens
  • Find a bike flow
  • Dashboard screens
  • Navigation screens
  • Statistics screen
  • Settings and user profile

Session 3: Setting up sketch file and structure

  • Creating pages & artboards
  • Symbols a layers organization
  • Text styles organization
  • Colors and icons
  • Buttons
  • Text fields and field groups

Session 4: UI Design

  • Choosing a color scheme + typography
  • Creating custom shapes in Sketch
  • Find a bike flow
  • Dashboard screens
  • Navigation screens
  • Statistics screen
  • Settings and user profile
  • Using real data for your app
  • Elements states and screens transactions

Session 5: Prototyping + developer handoff

  • Linking screens for Invision
  • Prototype usage
  • Sketch native prototyping
  • Assets preparation
  • Generating stylesheet
  • Invision Inspector vs. Zeplin

Session 6: User testing and improvements

  • Ways to do user testing for your prototype?
  • “Say it out loud while you use it” method
  • Gathering and analyzing feedback
  • UI round based on feedback

Reviews

Average rating

4(5929 Reviews)