Visit LEDU token page

How to design crypto exchange app

How to design crypto exchange app

  • English
  • Design
  • Mobile App DesignMobile App Design
  • (1305)
  • Project length: 4h 19m

This tutorial will go through the process of creating a crypto exchange app design using Sketch. The tutorial will focus on all major stages of app creating. First, we’ll look at how to use Sketch and it`s fundamentals, and then we will create wireframes as a 1 stage of app design. Once we’ve created our wireframes for all app screens, we’ll jump into user interface design stage and create app according to our style guide.

Overview

Introduction

This tutorial will go through the process of creating a crypto exchange app design using Sketch. The tutorial will focus on all major stages of app creating. First, we’ll look at how to use Sketch and it`s fundamentals, and then we will create wireframes as a 1 stage of app design. Once we’ve created our wireframes for all app screens, we’ll jump into user interface design stage and create app according to our style guide.

What are the requirements? To get the most out of the tutorial, viewers should have some basic knowledge or understanding of:

  • Design theory fundamentals
  • Installed Sketch (only for Mac)
  • General understanding of UX/UI design
  • And the most important is: desire to learn

What is the target audience? Anyone who wishes to learn more about:

  • App design creation
  • Crypto currency design
  • Sketch learning

Project Outline

Session 1: Sketch fundamentals & Wireframing

  • Creating Pages
  • Creating artboards
  • How to create and modify shapes
  • How to create and modify fonts
  • Adding fonts as a text style
  • Importing icons
  • Creating symbols
  • Making design changes
  • Drawing custom shape-based icons
  • Layouts adjustments for phone like iPhone
  • Exporting artboards and assets
  • Wireframing definition and usage
  • Low - fidelity wireframe
  • High - fidelity wireframe
  • How to make UI based on wireframes

Session 2: Wireframing (1 part)

  • Human Interface Guidelines in wireframes
  • Rulers and layout in wireframes
  • Header symbol
  • List symbol
  • Login screen wireframe
  • Home screen wireframe
  • Hover screen wireframe
  • Symbol edits & updates

Session 3: Wireframing (2 part)

  • Exchange screen
  • Exchange process screen
  • Symbol alignment
  • Symbols and layout
  • Symbol copy, edit and update
  • Symbol size during update
  • Dublicate tool

Session 4: UI (1 part)

  • Starting to work on UI design
  • Icons usage
  • Icon edition
  • Colors and gradients
  • Document colors
  • Text layer
  • Symbols update
  • Login screen design
  • Home screen design
  • Hover screen design

Session 5: UI (2 part)

  • Font priority
  • Complex symbol & edition
  • Symbol inside of symbol
  • List improvement
  • Information priority
  • Style & priority
  • Icon edition via edit mode
  • Exchange screen design
  • Exchange process screen design
  • Art boards grouping on 1 page
  • Art boards grouping on multiple pages

Session 6: Prototyping

  • What is prototype
  • Linking
  • Hotspots
  • Animation
  • Fixed elements
  • Prototype usage
  • Collaboration
  • Sketch native prototyping
  • Invision
  • Zeplin
  • Creating live prototype
  • Live preview

Tools:

  • Sketch

Reviews

Average rating

5(1305 Reviews)