GETTING STARTED W/MATERIAL DESIGNfor non designers

OVERVIEW

● MATERIAL DESIGN

● SKETCH TEMPLATES

● FREE STOCK IMAGES & PLUGINS

● SKETCH INTRO

● ANDROID ASSET GENERATOR

● PROTOTYPING

VALUE

● WORKING ON YOUR OWN IDEAS

● DESIGN + PROTOTYPE IS QUICKER THAN

CODE

● COLLABORATING WITH DESIGNERS

● MORE CONTROL WITH ASSETS

● LOOKING AT DESIGN THROUGH A DIFFERENT

LENS

● ABILITY TO TWEAK DESIGNS

READ ABOUT MATERIAL DESIGN

The Google material design spec includes insane detail - go read it.

A design language created to unify and scale experience across all platforms and devices - with a focus on mobile first.

● Motion

● Bold

● Graphic

● Intentional

Download and use apps with material design.Pushbullet, IFTTT Do Button, Inbox,

Calendar, Youtube and more.

DOWNLOAD SKETCH 3

Sketch is Photoshop mixed with Illustrator - created specifically for mobile/web designers with a focus on streamlining design workflow.

Why we use it: More efficient, better for iterative design, easier to focus on the big picture and experience instead of visual details that may never make it to the app. Plus you design in scalable vectors w/easy exportable assets.

Free Trial + $99 one time fee (Mac only)

MATERIAL DESIGN TEMPLATES

*Google Sticker Sheet - http://bit.ly/10LXGRHSketch App Resources - http://bit.ly/1FQ7RGRTemplates on Dribbble - http://bit.ly/1EJFZ3EMD Icons on Github - http://bit.ly/1pwhwqf

CONTENT

Free HQ Stock Images - unsplash.comContent Generator Plugin - http://bit.ly/1mLVrXp (gif link)GitHub Sketch Plugins - http://bit.ly/1k9LkJt

SKETCH INTRO

● Artboard

○ I typically design for a Nexus 6 (1440 x 2560 pixels)

● Linking

○ I don’t use it b/c it’s buggy and kills memory (unless its a simple white label app,

see example).

● Copy & Paste assets from template

● Recreate list view + details page

● Shortcodes (R, A, Command + Click, Option hover)

○ less features than PS/Ai equals better shortcuts.

● Open Material Design Icon Template

● Exporting Assets

ANDROID ASSET GENERATOR

We use to use cut and slice me on Photoshop, but it couldn’t do Patch 9 images - so we started using Android Asset Studio and have stuck with it.

● Android Asset Studio - http://bit.ly/1DlCfW4

○ Upload a generic icon at full size & click export.

● Sketch Plugin - http://bit.ly/1DlC7WF

ANDROID ASSETS

By default Android maintains folders for the images with different resolution. The reason behind it is the use or the resolution of the Android Device on which the application will execute. Pre-loaded images over scalable graphics.

● HDPI image folder maintain images for the Android Broad Screen set or Android Phones

with the Higher resolution.

● LDPI image folder for Lower images quality

● MDPI image folder for medium images support

● XHDPI image folder for devices with large resolution.

● XXHDPI image folder for devices extra large devices/ maximum resolution

● Patch 9 image is what we provide for scalable buttons or graphics.

PROTOTYPING IS KEY

We rapidly prototype every feature or product we work on - Marvel App makes it easy.

● Marvel App- https://marvelapp.com/

○ Export Screens

○ Upload & Sync with Dropbox

○ Assign actions

○ Share

DONE. QUESTIONS?thanks!