When starting to build a design, it's important to work out the overall experience in wireframes. In this video, we discuss how to create responsive wireframes in Sketch.
- [Instructor] In this video, we'll cover wire framing.…While Sketch has been around since 2008,…it's only been within the last couple of years…that it's really gained steam with designers everywhere,…especially those of us who like to work fast…and do both the wire framing and visual design.…Keep in mind that you could use a plethora of templates…out there that are available for you at Sketch App Sources…and elsewhere on the web.…However, for the purposes of putting Sketch to the test…and learning how to create our own wire frames,…we're gonna build everything right here in Sketch ourselves.…
Per a best practice, let's go ahead and start…with the mobile version for this responsive site.…So you press space bar down and see how you get the hand…and that'll move us over to the mobile version.…Now that we're looking at mobile,…let's go ahead and start adding our elements.…Go to Insert, Shape, Rectangle.…We're gonna have a big banner image up at the top,…much like their splash, so let's go ahead…and create a nice big, almost square here at the top…
- Extending Sketch
- Building a style guide
- Using styles and symbols
- Working with artboards
- Making responsive wireframes
- Using responsive design plugins: Artboard Zoom, Sketch Focus, Craft, and more
- Exporting your design
- Building a mobile app for iOS, Android, or watchOS
- Integrating other tools in your Sketch workflow
Skill Level Intermediate
UX Design Tools: Flinto for Macwith Nathan Manousos52m 49s Beginner
1. Using Outside Resources
2. Beyond the Basics
3. Responsive Design
4. Mobile Design
5. Extending beyond Sketch
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
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.