Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Sketch 3 - New Guide To iOS 8 Mobile App Design (2015)

Name: Sketch 3 - New Guide To iOS 8 Mobile App Design (2015)
Rating: 4.5 (21 reviews)

From zero to PRO: UI UX MASTERCLASS to learn DESIGN by DOING! Create the YouTube Mobile App & 20+ icons with Sketch 3

Created byUKILLIT Design

Last updated 8/2015

English

English [Auto],

What you'll learn

Build an application like a PRO
Draw UI icons from scratch
Set up your files like a professional
Properly export assets for all iPhone models

Course content

11 sections • 66 lectures • 5h 17m total length

Link to download Sketch files0:07

Introduction to colours0:31
Create a monochromatic colour palette in Sketch2:04
Create a colour palette with analogous colours in Sketch1:56
Create a neutral colour palette in Sketch1:39
Create a colour palette online4:22
Create color palettes online with Adobe Color CC, starting from a base color and using analogous, monochromatic, and complementary schemes; save palettes, copy color codes, and import into Sketch.
Get inspired by real life photos2:05

Set up background and guides4:22
Create profile section6:52
Create a reusable navigation menu item2:35
Create a reusable section header item2:44
TIP > Build an archive3:16
Build the side menu structure Part 12:47
Build a side menu structure with reusable elements, arranging six rows in one column, and rename items like what to watch to tidy the layer list.
Build the side menu structure Part 27:14
Implement icons8:35
iOS 8 blur effect and set up icon color shared style4:27
Highlight menu selection4:56
Notification alerts8:56

Status and navigation bar5:59
Cover and profile photos2:10
Upload section6:37
Tab menu section9:44
Create a reusable content block Part 14:42
Create a reusable content block by building a white base rectangle with a subtle shadow and margins, and define a shared style for reuse across screens.
Create a reusable content block Part 23:48
Add graphic elements5:05
Learn to add and style profile and cover graphics, integrate an icon and logos with placeholders and symbols, use shared styles, and apply color, radius, and shadows to finalize screen.
Reusable content block implementation3:08
Finalize the screen: add icons4:09

Set up the player3:56
Video info section Part 13:59
Video info section Part 24:51
Design the video info section by adding a divider line, thumbs up and down placeholders, and a numeric vote display; align, color, and position elements for a clean user interface.
Channel info section9:14
Create a channel info section that displays the channel name and subscriber count with a subscribe button, using a structured layout, photo placeholder, spacing, and share style.
Set up the suggestions header section5:06
Create a reusable suggestions block10:28
Finalize and implement suggestions block10:12
Add icons5:28
Add icons walks through placing and styling icons—thumbs up/down, more, and subscribe—within the player UI, adjusting colors and placeholders to finalize the iOS 8 app design.
Finalize the player9:45

Introduction and resources1:14
Pause & Play ( Basic shapes )1:25
Create a play figure on 64 by 64 boards with a 16 by 56 rectangle offset from guideline, duplicate and union, then rotate a 50 by 50 square and triangle.
Side Menu ( Basic shapes )0:58
Playlist (Basic shapes )1:13
Explore constructing precise basic shapes by aligning with guidelines, margins, and a full-width rectangle; duplicate elements, stack top and bottom shapes, apply boolean operations, and finalize at 100 percent.
Upload ( Basic shapes )1:12
Search ( Basic shapes )1:39
Create and arrange basic shapes with borders and guidelines to design a vector icon. Duplicate, color, and size elements, then use union, subtraction, and rounding for a polished result.
What To Watch ( Basic shapes )1:12
Minimize ( Flat shapes )1:41
Watch Later ( Shape rotation point )3:04
Settings ( Rotate copies )5:18
Recreate the settings by building a 46 by 46 placeholder board, aligning eight gears and circles with central guides, and testing pixel-perfect scaling down to 1x.
My Subscriptions ( Vector points )2:13
Design a vector icon on a 40 by 40 artboard by building side rectangles with four-pixel margins, adding a central rectangle and a white triangle, then union and subtract shapes.
Notifications ( Vector points )2:27
History ( Vector points )3:56
Master vector point editing in Sketch 3 by creating guidelines, shaping rectangles and circles, aligning to pixel grids, and using boolean operations like subtract and union for clean designs.
My Channel ( Vector points & Bezier curve )14:35
Thumb Up ( Vector points & Bezier curve )12:00
Create a thumb up contour using a vector tool to place points and adjust bezier curves, refining contours for a precise, smooth shape.
CHALLENGE: Create Thumb Down0:09

Requirements

A Mac
Sketch 3 or Sketch 3 Beta or Sketch 3 Free Trial
We included a short introduction to those features/shortcuts that are used the most in the course, but having a basic understanding of Sketch 3 will help. Check out our Sketch 3 basic course "Sketch 3 App Design. Switch from Adobe Photoshop Illustrator", Sketch 3 official manual or YouTube resources

Description

Last Updates

Jan 20 : Added 6 New Lessons On Colours & Colour Schemes

Jan 19 : Added 16 New Video Lessons About Icons

Launched on January 2015

Learn to Design Mobile iOS 8 Apps Like a PRO

TRY IT NOW! No risk thanks to Udemy's 30 days money back guarantee

100% PRACTICE - NO FRILLS

This masterclass focuses on teaching you high value and relevant content that will help you to design a mobile app.

HIGH VALUE FOR MONEY

- 30 detailed video lessons

- 30 icon design video tutorials

- All Sketch files available for download

MAKE YOUR APP IDEA COME TRUE and EVEN START FREELANCING

You already saw tons of great videos about the basics of Sketch 3. You downloaded lots of great freebies. You also found videos about how to create a super basic app.

We decided to bring you something more valuable:

1. Recreate a real-word PRO app

2. Keep your layers and groups well organised

3. Properly use Shared Styles, Text Styles and Symbols

4. Design all the icons needed in the project

5. Learn the most effectively way to deploy your assets and guidelines to your developer

WHY SKETCH 3 and not ADOBE PHOTOSHOP or ILLUSTRATOR?

Sketch 3 is a modern and hyper successful vectorial app used by top designers at Google, Dropbox, Twitter, Facebook and many other famous tech companies and small startups. Sketch 3 has an high quality fast growing community of talented designers and as of now it is considered the best choice from top designers worldwide. While Photoshop and Illustrator are amazing tools, they was created for other purposes, and then used for UI and UX design. This makes them more complicated to learn and sometimes less effective (e.g. when exporting assets or when managing projects with lots of screens and assets). Whether you are completely new to app design or just want to switch from Adobe, Sketch 3 is probably the best app to learn at the moment. Check out bohemiancoding website for more info

Who this course is for:

Created for BEGINNERS/INTERMEDIATES who want to GO A STEP FORWARD in UI DESIGN
100% LEARN BY DOING
You should take this course if you want to learn HOW TO WORK LIKE A PRO

Sketch 3 - New Guide To iOS 8 Mobile App Design (2015)

What you'll learn

Explore related topics

Course content

Download Area1 lecture • 1min

Introduction3 lectures • 2min

Understand Resolutions4 lectures • 17min

Introduction To Standard Dimensions2 lectures • 30min

Colours & Colour Schemes6 lectures • 13min

Design The YouTube Side Menu11 lectures • 57min

Design The YouTube Channel Screen9 lectures • 45min

Design The YouTube Player Screen9 lectures • 1hr 3min

Learn How To Create Your Own Icons For This Project16 lectures • 54min

Learn How To Export Your Assets For Development4 lectures • 36min

Requirements

Description

Who this course is for: