Learn how to use Sketch to quickly lay out a mobile music player screen for a UX multidevice project. In this video, Diane Cronenwett shows you how to quickly lay out a mobile music player screen for a UX multidevice project.
- In this movie we're creating the music player screen…which allows the user various actions related to the song.…To get started on this screen…we'll create another artboard…using the same left arrow navigation bar.…In our earlier brainstorm around our music app…we noted to include some actions.…The actions will be share, create playlist, and like.…I'll add a dark gray rectangle that is 64 pixels in height.…
I'll insert an icon for share using the insert menu…and selecting the share icon from symbols.…After inserting the share icon…I'll add some stats below in 14-point light font.…To save time I've already made a symbol for this.…So I'll delete what I just created…and insert the completed action bar now.…
Next let's add an area…for the image of the song that's currently selected.…I'll create a rectangle that is 375 pixels wide…by 362 pixels high and update that with an image.…We'll add the artist information below this.…I've already made a symbol for this area also.…So I'll insert it now.…
The last area below will be for the music controls.…
- 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.