archive-com.com » COM » D » DESIGNCAFFEINE.COM

Total: 264

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Storyboarding iPad Transitions
    also used to accomplish the bait and switch in the Illusion principle Acceleration and Deceleration slow in and out Our brains know from experience that objects do not start running at top speed or stop on the dime To make the movement more life like the animation accelerates into the movement very slowly picking up pace in later screenshots as evidenced by the increasing smudginess of the icons in the first row Not surprisingly the bait and switch happens in the fastest moment of the transition to pull of the illusion that the homepage icons actually fly off screen The transition then slows down again in the last row to smoothly fade in the iTunes content elements deliberately giving the auxiliary page elements and pictures time to catch up and making the page load appear smoother Metaphors using real world analogies to convey complex digital events The most effective transitions use real life elements to provide a frame of reference which makes the animation more realistic In this case the icons on the home screen are moving to the sides creating an overall illusion of moving through space or deeper into the device itself to convey a digital event of opening an application inside the device Simplicity avoiding noise The overriding theme of this transition is its apparent simplicity During the transition iTunes is not doing anything particularly complicated or earth shattering The magic comes not from one particular element but through carefully blending and combining the lighting and movement to create a smooth cohesive digital dance perfectly orchestrated from beginning to the end Storyboarding iPad Transitions The key to successfully designing and storyboarding the transitions is understanding and applying the seven animation principles we discussed above To demonstrate how this can be done let s use a slightly more complex transition the iTunes opening album details shown in Figure 3 Figure 3 Opening iTunes Album Details Step by Step Here again we see the seven principles at work Component Relationship background foreground This entire transition can be viewed as bringing the selected album cover into the foreground while the rest of the iTunes application recedes slightly into the background Illusion motion perception and perceptual constancy The animation shows us the illusion of the album flying forward on the screen while flipping 180 degrees The most interesting part of the illusion is the switch from darker gray back of the album to a while loading screen midway through the second row This sleigh of hand changes the focus to the white cover to make the transition believable Exaggeration highlighting states actions and changes in state In this transition again the lighting effects are used to exaggerate the switch between the background and foreground Midway through the second row the album turns completely white against the slightly darker background Staging camera view lighting focus In the beginning the iTunes application darkens gradually and reaches its full saturation about half way through the second row to create the background against which the album will be staged The album on the other hand switches first from color to darker gray then to solid white to jump to the foreground Acceleration and Deceleration slow in and out The animation starts slowly and achieves top speed half way through the second row to quickly switch from the dark gray flipping rectangle to a solid white loading page Just as in the previously discussed opening iTunes transition this transition also slows down in the last row to smoothly fade in the iTunes album cover content elements Metaphors using real world analogies to convey complex digital events This transition invokes the magical feeling of opening picking the old LP album off the shelf and flipping it over to see the back cover by creating the illusion of the album jumping off the page and flipping 180 degrees horizontally around the middle Simplicity avoiding noise While a bit more complex than the opening iTunes application this transition can nevertheless be adequately described by looking at only 12 screenshots Once the transition design principles are understood the process of drawing the storyboard becomes fairly straightforward I use the same method that Galileo Galilei used four centuries ago when he first diagrammed the step by step movement of the sun spots in 1613 5 The basic transition storyboard for the Opening iTunes Details transition is shown in Figure 4 Figure 4 Storyboarding iPad Transitions Using Post it Notes See larger version Now Start Making Your Own Transitions As you try your own hand in transition storyboarding here are a few points to keep in mind Use appropriate materials To diagram transitions I prefer to use medium size post it notes that measure 3 inch square I draw each of the steps in the transition using a soft retractable pencil with a good eraser This allows me to quickly diagram portrait and landscape transitions and everything in between Because the iPad is a rectangle not a square I leave the extra space left on the right of the post it note on the bottom for landscape to write the additional explanation for each step or simply leave it blank Simplify shading As I said above on the iPad the lighting is foundation to expressing Component Relationship Exaggeration and Staging principles so it makes sense to take a disciplined approach to drawing various shades of light and dark in your storyboard I find that the easiest approach is to draw shading on top of the picture as light lines at a 45 degree angle As you can see in the last three post its I use tighter line spacing to indicate progressively darker shading Get the basics down first When I first approach the transition design I make only the post its necessary to convey the overall movement of the various elements and basic component relationship I sketch quickly using very rough strokes and use a ruler and templates whenever possible to make my job easier Stick to 6 8 post its

    Original URL path: http://www.designcaffeine.com/articles/storyboarding-ipad-mobile-transitions/ (2016-04-27)
    Open archived version from archive


  • tablets
    search to escape traditional limits and become the single best way to access information In context Real time Come hear practical tips for designing search with tap ahead geo location still image and video input voice and unprecedented personalization While juggling crushing constraints limited screen real estate fat fingers spotty connections multi tasking and shortened attention span From the author of Designing Search UX Strategies for eCommerce Success Wiley 2011

    Original URL path: http://www.designcaffeine.com/tag/tablets/ (2016-04-27)
    Open archived version from archive

  • iPad
    work Faster And with more confidence Start with questions and walk away with wireframes Filed Under Workshops Tagged With Agile android drawing iPad iPhone Kindle Fire Mobile and Tablet UX Design paper prototypes prototyping tablet Workshop GOLD SPONSOR DrawCamp October 23 2011 Milwaukee WI Oct 23rd 2011 by Greg Nudelman Agile Mobile Prototyping with Post It Notes In this intensive hands on session participants will learn how to use a pack of post it notes to successfully simulate a mobile device and re create and study key interactions transitions and touch screen control ergonomics cheaply quickly and accurately Participants will walk away with a set of completed paper prototype screens of their next app ready for testing Filed Under Speaking Tagged With drawing iPad iPhone Mobile and Tablet UX Design Articles paper prototypes Presentations prototyping sketching tabet Workshop Designing for Mobile Tablet Workshop October 21 2011 Milwaukee WI Oct 21st 2011 by Greg Nudelman Today mobile experiences are beginning to dominate our connection with technology Stories we read Places we go Stuff we buy Food we eat Who we interact with Mobile is increasingly becoming the platform the operating system on which we run our digital lives In this intensive hands on full day workshop you will learn to design authentic mobile and tablet websites and apps that deliver experiences your customers will love to come back to again and again And create a return on investment that will make your business people tremble with greed Filed Under Speaking Tagged With design interaction design iPad iPhone Mobile and Tablet UX Design Articles Presentation tablet UX Design Workshop Designing for Kindle Fire and iPad What you need to know now Oct 3rd 2011 by Greg Nudelman How would an experience on a 7 inch tablet like Amazon s Kindle Fire differ

    Original URL path: http://www.designcaffeine.com/tag/ipad/page/2/ (2016-04-27)
    Open archived version from archive

  • mobile_figure1-cut
    mobile figure1 cut Dec 28th 2013 by contributor Filed Under Popular Upcoming Events Case Studies 1 Prototype Material Design Featured 8 Mobile UX Trends You Can t Afford to Ignore

    Original URL path: http://www.designcaffeine.com/articles/a-definitive-guide-to-the-android-carousel-design-pattern/attachment/mobile_figure1-cut/ (2016-04-27)
    Open archived version from archive

  • mobile_figure2
    Articles mobile figure2 Dec 28th 2013 by contributor Filed Under Popular Upcoming Events Case Studies 1 Prototype Material Design Featured 8 Mobile UX Trends You Can t Afford to Ignore

    Original URL path: http://www.designcaffeine.com/articles/a-definitive-guide-to-the-android-carousel-design-pattern/attachment/mobile_figure2/ (2016-04-27)
    Open archived version from archive

  • mobile_amazon_paralax_treatment
    About Portfolio Perspective Training Articles mobile amazon paralax treatment Dec 28th 2013 by contributor Filed Under Popular Upcoming Events Case Studies 1 Prototype Material Design Featured 8 Mobile UX Trends You Can t Afford to Ignore in 2015 Search Copyright

    Original URL path: http://www.designcaffeine.com/articles/a-definitive-guide-to-the-android-carousel-design-pattern/attachment/mobile_amazon_paralax_treatment/ (2016-04-27)
    Open archived version from archive

  • best practices
    UX Design Workshop Mobile Websites Tablet Apps and Hybrids 7 Mobile Strategy Tips for 2012 Jan 3rd 2012 by Greg Nudelman Sites like YouTube and Facebook are already projecting mobile use to surpass desktop use as early as this year What s your mobile and tablet strategy Allow me to humbly present the wisdom I got from the experience of walking the last 365 miles Barefoot In the snow Uphill both ways Filed Under 56 Articles on Digital Strategy Mobile and Search Design Strategy Articles Featured UX Design Articles Mobile and Tablet UX Design Articles Tagged With best practices Design Strategy ecommerce Inspiration iPad iPhone Kindle Fire Mobile and Tablet UX Design Articles revenue tablet UX Design Top 5 Ways to Break Your Login Experience Nov 10th 2011 by Greg Nudelman l ve been a Deli cio us customer for many years and their browser plugin has been an indispensable tool for writing my book Designing Search UX Strategies for eCommerce Success The plugin is still as delicious as ever but the login experience has become a cloying putrid Durian mess that became enough to justify the pain of 2 hours of migrating to and learning another service Don t let your customers walk out on you Avoid these 5 key issues in your login process Filed Under 56 Articles on Digital Strategy Mobile and Search Design Strategy Articles Tagged With best practices delicious ecommerce login passwords Is Your UI Causing Zero Search Results Pages Aug 17th 2011 by contributor Designing from Zero how to analyze UI challenges that are often the hidden cause of zero results pages as a catalyst for creating powerful original design solutions that create customer delight and business revenue Filed Under 56 Articles on Digital Strategy Mobile and Search Design Strategy Articles Featured UX Design

    Original URL path: http://www.designcaffeine.com/tag/best-practices/page/2/ (2016-04-27)
    Open archived version from archive

  • figure1-300×252
    figure1 300 252 Dec 28th 2013 by contributor Filed Under Popular Upcoming Events Case Studies 1 Prototype Material Design Featured 8 Mobile UX Trends You Can t Afford to Ignore

    Original URL path: http://www.designcaffeine.com/articles/mobile-welcome-ux-antipattern-end-user-license-agreement-eula/attachment/figure1-300x252/ (2016-04-27)
    Open archived version from archive



  •