Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Quick, UsefulUI Sketches
Lane Halleylane@carbonfive.com@thinknow
What’s a sketch?“A sketch is a rapidly executed freehanddrawing that is not usually intended asa finished work.”— Wikipedia
• Record what you see• Explore ideas quickly• Demonstrate ideas to othersWhy sketch?
Sketches are “sketchy”
Sketching is acore design skill.
Many kinds of sketches• Visual recording• Sketchnotes• Storyboards• Concept sketches• UI sketches
http://leanuxnyc.co/nyc/a-visual-recording-of-leanuxnyc/Visual Recording
SketchnoteSketch by C Todd Lombardo @iamctodd
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpgStoryboard
http://farm4.staticflickr.com/3224/3634514075_ce82b9eedc_o.jpgConcept sketches
UI sketchSketch by Ray DeLaPena @rayraydel
UI sketching is acore skill forproduct teams.
“When a designer and PM are out ofsync, it’s because one of them hasgotten ahead of the other in someway. ...The way to fi...
Sketching helpseveryone get onthe same page.
UI sketches help teams• Explore options quickly• Externalize thinking• Share understanding• Feel ownership
Everyone can draw.Be fearless!
Your supplies• Pencil (eraser & sharpener)• Paper (plain or grid)• Timer (for the exercises)
Basic concepts• The pencil is powerful!• Primitives• Container and grid• Functional groupings• Your personal visual shorth...
The pencil has great dynamicrange. Your lines can be faintor strong. Thick or thin.
You can draw almostanything using basic shapeprimitives (circle, square,line, squiggle)
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
functional groupingshttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displa...
Visual shorthandSketch by Chris Risdon @chrisrisdon
Reverse wireframing• Quickly sketch an existing interface• See and understand UIs better• Develop sketching skills in isol...
Warm-up time.Let’s draw some shapes.
• Draw a page of squares• Draw a page of circles• Draw a page of short parallel linesGet your pencils ready!
Practice:Reverse wireframe sketches30-seconds each.
Tip: Work from the outside in• Draw the outside box first• Create guides or a grid• Place large elements first• Add detail...
Ready?Here’s exercise #1
Tip: Plan your sketch• Aspect ratio• Grid or columns• Functional groupings
Basic vocabularyHow will you quickly draw• Headings (big, medium, small)• Body copy• Images• Buttons and links
Use your new vocabularyto sketch exercise #2
Now you’re warmed upDo three in a row!
Extended vocabularyHow will you quickly draw• Text input & label• Combo box• Checkboxes & radio buttons• Scrollbar
Let’s practice formelements. Here are threemore screens.
Title TextExtra Line
The next one’s tricky, butyou’re ready for it!
Here’s the last one.Focus on the structure.
Congratulations!Keep sketching and you’llcontinue to improve.
Further vocabulary• Accordion• Carousel• Media player• And ...?
Here are some of theways I use sketching.
Talking sketch
Show and discuss alternatives
Designer / developer pairing
Wireframe walkthrough
How do you use UI sketches?Share your photos with us!#uisketch
A few books that haveinspired me.
Thank you!Carbon FiveLean UX & AgileDevelopment for Weband mobile productswww.carbonfive.com
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/
Nächste SlideShare
Wird geladen in …5
×

12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/ Quick, Useful UI Sketches

46.794 Aufrufe

Veröffentlicht am

12 column gridhttp://twitter.github.io/bootstrap/examples/hero.htmlhttp://alefeuvre.github.io/foundation-grid-displayer/

Veröffentlicht in: Design, Technologie, Business
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

×