Now that you've built the wirefames, you'll need to add the images, color, and font styles to your design. In this video, we discuss how to add visual design to our wireframes in Sketch.
- [Narrator] In this section, we'll cover adding our color…and visual design elements to our wireframes…from the exercise files in 0304.…You'll note that in the 0304 file,…I went ahead and added more elements to our wireframes…so that we could fill out the complete wireframe.…Now before I move any further forward,…let's go ahead and go to our desktop screen…and make sure that it's selected…and you know it's selected with these anchor points…all around the sides of the art board.…
Now let's go to view, canvas, layout settings.…So this gives us the opportunity to go ahead…and set up a grid that we can design by.…Now the total width of this page is 1,024 pixels.…We're gonna use a 12-column grid…and then we're gonna make our gutter width 15 pixels.…And you'll note that Sketch…is automatically doing the math for us…so we don't have to do a bunch of math in our heads…to figure out what needs to sit where.…
Let's also make sure to center that.…And now if you want to,…you have a grid in order to design by.…Now let's move back over to our mobile page…
- 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
Q: This course was updated on 05/15/2018. What changed?
A: We updated a new number of videos about third-party resources, such as the Sketch App Sources website and plugins like Marketch and Craft, to reflect the most recent changes to those resources.
User Experience for Web Designerswith Chris Nodder1h 49m 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?
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.