This video reviews the solution to the challenge and explains how to create a recipe details screen in a wireframe for a mobile app, using the basic shape tools and text layers in Sketch.
- [Instructor] If you haven't had a chance…to try out the challenge yet,…then I recommend stopping this video here…and taking a few minutes to give it a shot…before you continue.…If you're ready though,…then lets walk through the solution.…Now this is just one possible way…to build this recipe detail screen.…There's no right or wrong here.…But I'll show you how I put the screen together…and you can compare it with your own.…Starting at the top,…I added a simple rectangle for an image placeholder…and a text layer for the recipe title.…I made this text pretty big,…because it's the primary heading here,…and we'll probably be using this heading style…in other places in the app.…
So I also created a text style for it…and named it heading Heading 1.…Next, we've got the star rating.…Click cmd 2 to zoom in on it.…To create these stars,…I clicked Insert, Shape, Star,…and then held down the Shift key…while I was dragging…to make sure that the width…and the height of the stars would stay the same.…Now I could have held down the option key…
- Navigating the canvas
- Creating wireframes
- Working with shapes, text, images, and masks
- Managing layers
- Creating and nesting symbols
- Using the Vector tool
- Extending Sketch with design plugins
- Creating, sharing, and managing libraries
- Collaborating with Sketch Cloud
- Exporting assets
- Creating style guides and design systems
Skill Level Beginner
Creating a Design System with Sketchwith Anne Grundhoefer1h 21m Intermediate
1. Getting Started
Navigating the canvas2m 51s
2. Creating Wireframes
3. Visual Design and Symbols
Creating a library6m 44s
5. Prototyping and Collaboration
6. Exporting and Asset Management
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.