user experience http://design.org/tags/user-experience en Logbook: A Digital StampBook App for Recording Experiences http://design.org/blog/logbook-digital-stampbook-app-recording-experiences <p>Students <a href="http://www.chrispie.com/" target="Christopher Pietsch">Christopher Pietsch</a>, <a href="http://www.florianschulz.info/" target="Florian Schulz">Florian Schulz</a> and <a href="https://vimeo.com/user2619766" target="Wenke Kramp">Wenke Kramp</a> created Logbook as part of their "Connect to Science" class at the University of Applied Sciences, Potsdam. </p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_image" width="620" height="529" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_14_0.jpg?1342212875" /> </div> </div> </div> <div class="field field-type-filefield field-field-images"> <div class="field-label">Images:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="348" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_00.jpg?1342212147" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="348" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_01.jpg?1342212148" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="348" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_02.jpg?1342212148" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="348" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_03.jpg?1342212148" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="424" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_18.jpg?1342212149" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="413" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_06.jpg?1342212148" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="413" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_07.jpg?1342212148" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="440" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_13.jpg?1342212148" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="413" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_08.jpg?1342212148" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="413" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_19.jpg?1342212271" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="838" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_24.jpg?1342212149" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="451" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_11.jpg?1342212148" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="416" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_22.jpg?1342212149" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="465" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_23.jpg?1342212149" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="318" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_20_0.jpg?1342212900" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="930" title="Design, logbook, app" alt="" src="http://design.org/sites/default/files/blog/2012/07/13/logbook_21.jpg?1342212294" /> </div> </div> </div> <div class="field field-type-number-integer field-field-featured"> <div class="field-label">Featured:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> Not Featured </div> </div> </div> <p><a href="http://design.org/blog/logbook-digital-stampbook-app-recording-experiences" target="_blank">read more</a></p> http://design.org/blog/logbook-digital-stampbook-app-recording-experiences#comments app concept design germany interface student user experience Fri, 13 Jul 2012 20:52:28 +0000 jessicapatterson 4273 at http://design.org Successful UI Design: Enjoyable Across Species http://design.org/blog/successful-ui-design-enjoyable-across-species <p>What could better demonstrate the joy brought forth by intuitive user <a href="http://design.org/interface-design" target="interface design">interface design</a> than a cross-species interaction? It's exciting and fun for us as humans to see discovery and reaction in others, especially Peter the Elephant and his Samsung Galaxy Note. He's either a very intelligent elephant or that's a super-successful user experience—I'm guessing there's a bit of both in the mix.</p> <p><iframe width="619" height="315" src="http://www.youtube.com/embed/KBrmaE82uY4" frameborder="0" allowfullscreen></iframe></p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_image" width="620" height="344" title="Design, peter, samsung" alt="" src="http://design.org/sites/default/files/blog/2012/04/16/ux_ui_peter-elephant.jpg?1334564604" /> </div> </div> </div> <div class="field field-type-number-integer field-field-featured"> <div class="field-label">Featured:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> Not Featured </div> </div> </div> <p><a href="http://design.org/blog/successful-ui-design-enjoyable-across-species" target="_blank">read more</a></p> http://design.org/blog/successful-ui-design-enjoyable-across-species#comments animal design interface user experience video Mon, 16 Apr 2012 08:24:56 +0000 jessicapatterson 4204 at http://design.org A Media-Focussed Interface Concept for IMDB by Vladimir Kudinov http://design.org/blog/media-focussed-interface-concept-imdb-vladimir-kudinov <p>As we all know, many sites we interact with on the internet could use facelifts. Sometimes, when something works it can be difficult to see how much the user experience could improve. <a href="http://vladimirkudinov.com/" target="Vladimir Kudinov">Vladimir Kudinov</a> is on a mission to make the internet a better place. The Russian designer says "We can make the Internet better, I believe in it... We can show the world community and the way in terms of design and usability, and together we will change the usual apathy and make our lives better." </p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_image" width="620" height="465" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_01.jpg?1334359805" /> </div> </div> </div> <div class="field field-type-filefield field-field-images"> <div class="field-label">Images:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="902" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_00.jpg?1334359933" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="465" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_02.jpg?1334359936" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="465" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_07.jpg?1334359940" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="465" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_05.jpg?1334359937" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="902" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_03.jpg?1334359943" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="902" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_04.jpg?1334359945" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="328" title="Design, imdb, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/imdb_concept_10.jpg?1334359972" /> </div> </div> </div> <div class="field field-type-number-integer field-field-featured"> <div class="field-label">Featured:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> Not Featured </div> </div> </div> <p><a href="http://design.org/blog/media-focussed-interface-concept-imdb-vladimir-kudinov" target="_blank">read more</a></p> http://design.org/blog/media-focussed-interface-concept-imdb-vladimir-kudinov#comments concept design interface Movie russia user experience web Sun, 15 Apr 2012 06:27:03 +0000 jessicapatterson 4203 at http://design.org The Difference Between UX and UI: Subtleties Explained in Cereal http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal <p>Ever met someone who uses UX and UI interchangeably? <a href="http://edlea.com/blog/" target="Ed Lea">Ed Lea</a> created this photographic infographic to visually define the differences between user experience and user <a href="http://design.org/interface-design" target="interface design">interface design</a> and how they relate to a product.</p> <p><img src="http://design.org/sites/default/files/imagecache/blog-full-scale/blog/2012/04/13/webproduct.gif" alt="Design, experience, interface" title="Design, experience, interface" class="imagecache-blog-full-scale" /></p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_image" width="620" height="385" title="Design, experience, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/ux-ui_cereal.jpg?1334343522" /> </div> </div> </div> <div class="field field-type-filefield field-field-images"> <div class="field-label">Images:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="600" height="2264" title="Design, experience, interface" alt="" src="http://design.org/sites/default/files/blog/2012/04/13/webproduct.gif?1334343330" /> </div> </div> </div> <div class="field field-type-number-integer field-field-featured"> <div class="field-label">Featured:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> Not Featured </div> </div> </div> <p><a href="http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal" target="_blank">read more</a></p> http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal#comments design infographic interface user experience Fri, 13 Apr 2012 18:36:50 +0000 wardandrews 4202 at http://design.org Odosketch: A Digital Canvas App with Artistic Results http://design.org/blog/odosketch-digital-canvas-app-artistic-results <p><a href="http://sketch.odopod.com" target="Odosketch">Odosketch</a> by <a href="http://odopod.com/" target="Odopod">Odopod</a>, a creative agency in San Francisco, recently celebrated 100,000 members. They designed the digital drawing interface when Adobe asked them to create a work to be featured in the Adobe Design Gallery. </p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_image" width="620" height="440" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_12.jpg?1321384666" /> </div> </div> </div> <div class="field field-type-filefield field-field-images"> <div class="field-label">Images:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="797" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_01.jpg?1321384364" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="422" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_02.jpg?1321384365" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="401" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_03.jpg?1321384365" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="401" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_10.jpg?1321384367" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="349" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_04.jpg?1321384365" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="349" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_05.jpg?1321384365" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="349" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_06.jpg?1321384366" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="349" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_08.jpg?1321384366" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="349" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_09.jpg?1321384366" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="349" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_07.jpg?1321384366" /> </div> <div class="field-item odd"> <img class="imagefield imagefield-field_images" width="620" height="418" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_13.jpg?1321384658" /> </div> <div class="field-item even"> <img class="imagefield imagefield-field_images" width="620" height="291" title="Design, odosketch, app" alt="" src="http://design.org/sites/default/files/blog/2011/11/15/odosketch_11.jpg?1321384367" /> </div> </div> </div> <div class="field field-type-number-integer field-field-featured"> <div class="field-label">Featured:&nbsp;</div> <div class="field-items"> <div class="field-item odd"> Not Featured </div> </div> </div> <p><a href="http://design.org/blog/odosketch-digital-canvas-app-artistic-results" target="_blank">read more</a></p> http://design.org/blog/odosketch-digital-canvas-app-artistic-results#comments app design illustration paint user experience web Tue, 15 Nov 2011 23:08:23 +0000 wardandrews 3837 at http://design.org Large Sticky Note Templates for Web and Mobile UI Design http://design.org/blog/large-sticky-note-templates-web-and-mobile-ui-design <p><img src="http://design.org/sites/default/files/imagecache/blog-full-scale/blog/2011/04/21/uxstickynotes_1.jpg" alt="Design, uxstickynotes, wireframe" title="Design, uxstickynotes, wireframe" class="imagecache-blog-full-scale" /></p> <p>These sticky notes from <a href="http://www.uxstickynotes.com/" target="UX Stickynotes">UX Stickynotes</a> are a pretty excellent idea. They're ideal for UI sketching in wireframes for web browser and iPhone, and they create a storyboard-like experience for designers. Ideas can be sketched, rearranged, removed or replaced quickly and easily.</p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_image" width="620" height="340" title="Design, uxstickynotes, wireframe" alt="Design, uxstickynotes, wireframe" src="http://design.org/sites/default/files/blog/2011/04/21/uxstickynotes_1.jpg?1303421972" /> </div> </div> </div> <p><a href="http://design.org/blog/large-sticky-note-templates-web-and-mobile-ui-design" target="_blank">read more</a></p> http://design.org/blog/large-sticky-note-templates-web-and-mobile-ui-design#comments design office supplies tools ui design user experience web wireframe Thu, 21 Apr 2011 21:36:04 +0000 jessicapatterson 2800 at http://design.org The Meaning and Design Behind "On" and "Off" http://design.org/blog/meaning-and-design-behind-and <p><img src="http://design.org/sites/default/files/imagecache/blog-full-scale/blog/2011/04/19/Power_yum9me.jpg" alt="Design, power, symbol" title="Design, power, symbol" class="imagecache-blog-full-scale" /></p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <img class="imagefield imagefield-field_image" width="640" height="480" title="Design, power, symbol" alt="Design, power, symbol" src="http://design.org/sites/default/files/blog/2011/04/19/Power_yum9me.jpg?1303232066" /> </div> </div> </div> <p><a href="http://design.org/blog/meaning-and-design-behind-and" target="_blank">read more</a></p> http://design.org/blog/meaning-and-design-behind-and#comments design explained icon industrial technology user experience Tue, 19 Apr 2011 16:32:17 +0000 jessicapatterson 2796 at http://design.org