Mobile App Design in Sketch From Scratch: Design 3 Top Apps

Learn Complete Sketch 3 & 4 From Scratch, Design Tinder app, Snapchat app and Periscope app from Scratch

Created byKayes Mahmud

Last updated 5/2017

English

What you'll learn

Learn Sketch 4 From Scratch
Design any kind of App you want by Sketch
Become an Expert on Sketch App
Become an UI/UX designer

Course content

8 sections • 54 lectures • 9h 1m total length

Sketch Download and Install On Mac and PC2:31
Use Sketch as a macOS native vector design tool to design icons and logos, with a 30-day free trial or $99 purchase, while Windows users must run macOS via virtualization.
Sketch App overview9:12
Explore Sketch's lightweight, web and mobile design toolkit, from artboards and layers to vector tools and styles, and learn to customize toolbars, presets, and device preview for app design.
Artboard and Pages of Sketch10:20
Master artboards in sketch on an infinite canvas, assign iPhone 7 and iPhone 8 presets, duplicate and rename boards, and organize screens across multiple pages with custom presets.
Editing The Shape of Sketch9:22
Edit vector shapes in Sketch by manipulating path points, adding and deleting points, and adjusting corner radii. Craft straight, mirrored, curves, and asymmetric shapes with the pen tool and handles.
Layer of Sketch7:47
Explore how sketch treats every object as a layer on the canvas, including text, images, and shapes, and learn to rename, group, duplicate, and delete layers in the layer panel.
Layer Style of Sketch14:18
Learn to apply layer styles in Sketch, including solid colors, gradients, patterns, image fills, borders, shadows, inner shadows, and gaussian blur variations like motion and zoom blur.
Shapes of Sketch8:17
Explore creating and editing shapes in sketch, including rectangle, oval, round rectangle, polygon, line, star, and triangle; use shift for proportional shapes and the inspector for radius and points.
Selection, Transform And Scissors of Sketch14:30
Select and transform shapes in sketch with and without auto select, using the layer panel and lock controls. Rotate, resize, scale proportionally, and cut paths with the scissors tool.
Boolean, Vector Path and Pencil of Sketch6:21
Explore Sketch boolean operations—combine, subtract, intersect, and use difference to craft complex icons and logos. Master the vector and pencil tools for precise paths and freehand drawing.
Ruler, Guide, Smart Guide of Sketch6:24
Use rulers, guides, and smart guides in Sketch to measure layers, distribute them evenly, and snap elements precisely on an unlimited canvas, with keyboard nudges and quick show/hide.
Text, Text Style and Text Curve of Sketch10:45
Explore typing and styling text in sketch, adjusting typeface, weight, color, size, alignment, and line height; create text on path, bullets, and reusable text styles.
Image Editing, Mask, Rotate Copies of Sketch9:35
Apply color adjustments, masks, and clipping in Sketch; create masks with shapes, and use rotate copies and symbols to reuse elements across artboards.
Plugins Of Sketch. (Installing and work with Plugin)8:44
Explore sketch plug ins to speed up design work, install and manage tools like the content generator to replace images and text, and automate colors and layers.
Mirror OF Sketch (Using iOS Devise and Browser to Preview the Design)4:52
Preview Sketch designs live on an iPhone or iPad with Sketch Mirror via USB or Wi-Fi. Connect, view artboards in a browser, and update colors and text as you edit.
Saving and Exporting Assets of Sketch8:33
Learn how to export artboards and assets from Sketch, choose formats such as PDF, PNG, JPEG, and SVG, and export at retina sizes with slices for precise handoffs.

Topbar and Searching Ray of Search Screen For Tinder15:18
Design the Tinder search screen by building a top bar with Tinder logo and icons, adding a material design status bar, centering the screen, and creating a circular profile area.
Refresh, Nope, Like and Super Like Icon of Search Screen For Tinder15:12
Design Tinder search screen icons in Sketch from scratch, including refresh, like, and super like icons for the bottom bar, with precise shapes, colors, shadows, and alignment.
Browse Screen of Tinder13:31
Design the Tinder browse screen in Sketch from scratch, creating the status bar, top and bottom bars, a centered profile image with name, age, and description, and like/dislike interactions.
Like Screen Of Tinder11:24
Learn to design a tinder-like swiping card in Sketch, including swiping right for like, left for nope, duplicating screens, replacing images, applying drop shadows, and crafting like and nope icons.
Nope or Dislike Screen of Tinder8:06
Designs the nope screen for Tinder browse, replacing images, renaming cards, organizing layers, and applying a consistent color with the global color panel and hex codes.
Challenge of Tinder Design For You1:16
Design a Tinder-style pop-up message in Sketch, test a translucent background by lowering opacity, and share your solution in the discussion forum. Follow along by posting to the Facebook page.
Solution of Tinder Challenge7:33
Learn to design a Tinder like pop-up in Sketch, featuring a translucent overlay and a white rounded dialog. Implement like and cancel actions with a heart indicator and Rubik font.
Navigation bar, Message Shape and Text of Message Screen For Tinder16:23
Design the Tinder message screen UI in sketch from scratch by building the navigation bar, top bar, and message bubble with rounded corners, avatar image, and text input.
Send Message bar, Message Text and Keyboard of Message Screen For Tinder16:41
Design a Tinder chat screen in Sketch from scratch, including the send message bar, message text, profile image, and on-screen keyboard with consistent typography and colors.

Placing Statusbar, Topbar Icon of Profile Screen For Snapchat10:21
Design a snap chat app profile screen in sketch by setting up iphone 6 artboard, adding a status bar and a top bar with icons, and applying colors and guides.
Snapchat Logo, Profile Image and User name of Profile Screen For Snapchat8:52
Create a Snapchat profile screen in Sketch by placing the Snapchat icon and profile image, locking layers, and styling the user name with Avner Wallys medium.
Profile Menu with Icon and Camera Icon of Profile Screen For Snapchat11:31
Design a snapchat-style profile screen in Sketch by placing icons and text, aligning with guidelines, and organizing layers into groups for top bar and profile pic.
Navigation and Six Rectangle Shape of Discover Screen For Snapchat9:31
Design the discover screen for snap chat in sketch, using an iPhone 6 canvas, a black status bar, Helvetica Neue title, and a grid of news-coverage rectangles.
Placing Image, Text and Color on First 3 Shapes of Discover Screen For Snapchat11:24
Place and mask the first three images inside the three rectangles on the Snapchat discover screen; resize with shift and alt, fill with dark blue, and set opacity.
Placing Image, Text and Color on Last 3 Shapes of Discover Screen For Snapchat13:40
Place images, text, and colors on the last three shapes of the Snapchat discover screen, using masks, hex codes, and typography to craft Mashable, Refinery29, and BuzzFeed headlines.
Topbar, Resize and placing 4 News Stream of Stories Screen For Snapchat15:24
Design the stories screen for Snapchat in Sketch, add a top bar, place four news channels CNN, MTV, Mashable, and BuzzFeed, with five-pixel radii, aligned to guides.
Recent Updates Text and Shape of Stories Screen For Snapchat14:43
Design the recent updates text and shapes on the Snapchat stories screen in Sketch, aligning guidelines and lines, styling text in Avner medium, and including a snap image with timing.
More Updates, Scrolling Opacity and Few Icons of Stories Screen For Snapchat19:52
Learn to design a Snapchat stories screen in Sketch, using masking, image placement, grouping, and the scrolling opacity technique with gradient overlays and icons.

Color Theory5:07
Explore additive and subtractive color theories, the rgb color wheel, and how warm and cool colors shape palettes through monochromatic, analogous, complementary, and triadic schemes.
10 Websites to create color scheme and color combination for web and mobile app0:09
The Art of Color Scheme Combination for UI/UX design9:09
Design a cohesive blue color scheme for top and bottom bars, adjust saturation and brightness for sign-up and sign-in text, and explore palette tools from Adobe Color and Material Design.

Topbar, Live Stream video, Button and Text for Live Feed Screen Of Periscope17:14
Design a periscope-style iOS live feed screen in sketch, featuring a top bar, masked live video, a center live label, and bottom icons for feed, camera, and profile.
More Live Stream video, Icon, Button and Text for Live Feed Screen Of Periscope14:03
Create a periscope-style live feed screen in Sketch by grouping profile images, live thumbnails, and bottom bar icons, replacing images, and aligning elements with precise spacing and guides.
Camera Card, Blur Image, Round Image of Camera Screen For Periscope.17:02
Design the Periscope camera screen in sketch, adding a translucent black overlay, a white rounded card, a blur image area, and masked round icons with shadows.
Enable Camera, Mic, Location Button and Text of Camera Screen For Periscope16:23
Design a Periscope camera screen in Sketch by enabling camera, mic, and location options, adding concise text, icons, color accents, and a balanced layout.
Profile card, Image and text description of Profile Screen For Periscope10:37
Design the periscope profile screen in sketch by centering an oval avatar with a white border and adding a name, like count, and caption in Muzio Sans.
Following, Follower, Blocked and Broadcast stats of Profile Screen of Periscope15:39
Design a Periscope profile screen in Sketch, detailing following, follower, blocked, and broadcast stats with precise layout, typography, colors, and alignment.

Learn to Design Icon2:54
Learn to design a location icon in sketch by creating two circles with the shift key, aligning to the grid, subtracting one from the other, and adjusting border and color.
Back Icon2:20
Create a back icon by combining rotated rounded shapes in sketch, using 45- and 135-degree rotations, then duplicate and union the layers, applying a 5-pixel stroke with no fill.
Love or Heart Icon2:53
Learn to build a heart icon in Sketch by combining rounded shapes and a rectangle, duplicating, rotating, and uniting them, then colorizing with a gradient.
E-mail Icon3:25
Create a mail icon from scratch in Sketch by drawing a rounded rectangle, adding a vector, inset circles, adjusting color and border thickness, and masking elements into a grouped icon.
Search Icon1:45
Create a search icon by combining an oval and a line, turn off fill, use shift for a perfect shape, union them, and apply a 10-pixel border with shadow.
Design 3 App Store Icon13:33
Design iOS App Store icons from scratch in Sketch, using templates, exploring backgrounds, gradients, borders, and shadows, and exporting all required sizes for submission.
Music App Icon by Sketch App6:51
Design a music app icon in Sketch using radial gradients, borders, and shadows with careful saturation to craft a compelling icon for the App Store.
Design (GUI) Graphic User Interface7:47
Design a graphical user interface in Sketch by creating three colored circles, duplicating and resizing shapes, trimming with scissors, rounding ends, adding an oval, and placing the word activity.
Dashboard Analytics of Mobile App in Sketch35:07
Design dashboard analytics for a mobile app in Sketch, building daily, weekly, and monthly charts with lines, gradients, and rounded corners to convey clear data insights.

Requirements

No pre-knowledge required - I'll teach you everything you need to know
A Mac laptop, iMac or Windows PC with installed MAC OSX
Get a Sketch 4 App as a trial for 30 days

Description

Do you want to learn Sketch 3 and Sketch 4 App most easiest way?

Then this course is for you. You will learn everything about Sketch 3 and Sketch 4. This course has clear explanation of every feature of Sketch. You will learn everything from scratch, so it doesn't matter you are a newbie or beginner.

According to Statica, Worldwide mobile app revenue was 88.3 billion dollar this year. By 2020, mobile apps are forecast to generate around 189 billion U.S. dollars in revenues. According to applause,90% Of Companies Will Increase Mobile App Investment. The huge market of app development increasing so fast. So does increasing mobile app UI/UX design with it and creating hundreds of thousand of jobs and business.

Sketch App tools adapted by UI/UX designer very much for its simplistic feature and vector based graphic. In this course you will learn infinite artboard, Layer, Layer style, Shapes, Editing Shapes, Boolean, Type tool and much more.

You will learn to design Tinder App, Snapchat app, Periscope app from Scratch. You will learn color theory and typography. You will learn how to earn money by freelancing. So, don't wait, enroll now, see you in the course. Thanks

Who this course is for:

Anyone wanting to learn Mobile App UI/UX design
Anyone wanting to learn Sketch App

Mobile App Design in Sketch From Scratch: Design 3 Top Apps

What you'll learn

Explore related topics

Course content

Learn Complete Sketch 4 App From Scratch15 lectures • 2hr 12min

Design Tinder App for Android Metirial Design9 lectures • 1hr 45min

Design Snapchat App for iOS By Sketch App9 lectures • 1hr 55min

The Color Theory3 lectures • 14min

Learn Typography2 lectures • 7min

Bonus Lecture: Become a Complete UI/UX Designer to Earn $1000001 lecture • 1min

Design Periscope App for Android Mobile By Sketch App 40+6 lectures • 1hr 31min

Learn to Design Icon, App Store Icon and GUI by Sketch App 49 lectures • 1hr 17min

Requirements

Description

Who this course is for: