Visit LEDU token page

How to design TO-DO app UI/UX using Sketch and prototype with Invision app

How to design TO-DO app UI/UX using Sketch and prototype with Invision app

  • English
  • Design
  • Mobile App DesignMobile App Design
  • (1405)
  • Project length: 6h 02m

This project is a process of designing a to-do app from research to prototype. This project is for you if you want to learn more about the process of designing a mobile app, doing a simple research, creating wireframes and visual design and creating a high-fidelity prototype. As a result, you'll learn how to collect and process research data, create customizable symbols for wireframes in Sketch for easier and quicker iterations, create a stunning visual design and connect screens into a prototype. The deliverables will be a Sketch file with Invision prototype along with the research files.

Overview

In this tutorial, we will go through the process of creating a To-Do app research, wireframing and design using Sketch and prototype in InvisionApp. We will focus on all major stages of app design creating. First, we’ll go through ideation and research, then move to the wireframes and will prepare a sketch file and structure it for easier UI design and further improvements. Once we’ve created the wireframes and set the visual style we will start with the UI phase. After a couple of iterations, we gonna put together the prototype using Invision's CRAFT plugin for Sketch.

Target Audience

  • Sketch Users
  • UI/UX Designers
  • InVision Users

Project Outline

Session 1: App idea and research

  • Making a survey to get to know our users
  • Questions to ask in the survey for efficient research
  • Analysing the feedback from the survey
  • Doing the competitive analysis

Session 2: Wireflows

  • Figuring out solutions for to-do app problems
  • Creating wireflows for My tasks and a Single Task
  • Creating wireflows for Projects and Teams
  • Connecting wireflows together using native Sketch prototyping

Session 3: Wireframes (part 1)

  • Building customizable Tabbar using nested symbols
  • Building customizable Topbar using nested symbols
  • Creating Topbar for different types of screens (My tasks, Projects, Teams, Search)
  • Creating custom icons with customizable colors

Session 4: Wireframes (part 2)

  • Building symbols system for My tasks list
  • Creating an Add task button and screens
  • Customizing Assign task and Due date
  • More custom icons for Add task screens

Session 5: Wireframes (part 3)

  • Wireframing Single task screens
  • Creating Timer screen and icons
  • Creating symbols for Subtasks view
  • Commenting system and Profile screen

Session 6: Wireframes (part 4)

  • Wireframing Search, Projects and Teams screens
  • Building Add a project and Add team screens
  • More custom icons for Team and Project screens
  • Testing the flow using Sketch native prototyping

Session 7: UI Design

  • Creating moodboard using Invision Boards
  • Converting wireframe symbols into UI elements
  • Filling an app with real content
  • Testing the flow using Sketch native prototyping

Session 8: Prototyping in Invision

  • Using CRAFT for Sketch to connect screens
  • Adding animated transactions
  • Solving Invision’s transparent background problem
  • Adding custom hotspots on top of the symbols in Sketch

Reviews

Average rating

5(1405 Reviews)