Learn how to use Sketch to quickly lay out a mobile playlist screen for a UX multidevice project. In this video, Diane Cronenwett shows you how to quickly layout a mobile playlist screen for a UX multidevice project.
- [Narrator] In this movie,…we'll create the playlist screen for a music app.…We'll start by creating a new art board,…and inserting a navigation bar with the left arrow on top.…I'm using the navigation bar with the left arrow,…to indicate that someone has tapped into the playlist,…and is seeing the view of songs,…associated with that playlist.…Like I did previously, I'm going to make,…this art board background gray.…
Select the "r" key and draw a rectangle that is,…375 pixels in width, and 200 pixels in height,…and place that below the navigation bar.…I'm now going to add an image to this rectangle.…I now want to create a list of the songs below.…I'm going to draw a rectangle with…the width of 375 pixels, and the height of 60 pixels.…
We'll give this a dark-gray background and border,…and place it below the image.…In this rectangle, let's add a 36 pixel by 36 pixel square,…with a corner radius of three.…
The small square will represent an image,…of the artist's albums,…so we will update this shape with an image.…
- Principles for multidevice design
- Responsive design in action
- Designing for multiple devices using native paradigms
- Designing mobile or tablet interfaces
- Designing for a watch, a TV, or for voice
- Creating an information architecture diagram
- Using Sketch to design your mobile experience
- Prototyping with InVision
- Exploring Bootstrap and Foundation
Skill Level Beginner
1. Overview of Multidevice Strategies
2. Multidevice Design Considerations
3. Planning a Multidevice Experience
4. Designing Your Mobile Experience in Sketch
5. Designing for Additional Devices in Sketch
6. Frameworks and Guidelines
- 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.