User Experience DesignAssessing how users feel about a system (a website, application, software etc.) evaluating elements like ease of use, perception of the value, efficiency, function and how design can help meet the needs of said user.

The Tools of the Trade

Sitemaps A roadmap for the site’s general navigation and content placement

Why use them?Sitemaps act asa guiding structure forall system builds,helping to keep theme, organization and ease ofnavigation top of mind.

Sitemap Example

The Tools of the Trade

WireframesA skeletal layout that helps in the organization of content. In advanced forms, they can have clickable links, display movement and demonstrate the overall user experience.

Wireframing is a MustDo we really need a wireframe?Wireframes help you to get a clear picture of what your system will most likely become before going through the arduous and expensive task of actually building it.Wireframes allow you to play without getting dirty by:

• Providing focus on basic layouts• Creating parameters for designers/developers ahead of time easing transition into construction • Allowing for iteration in an environment more accepting of change (aka SAVE MONEY)• Safeguarding against wasting time/doing rework• Getting the client more involved on the front-end

Dynamic vs StaticStatic Wireframes Will give you basic layout and illustrate overall system organization, only detailing functionality through words

Dynamic Wireframes Allow you to interact with the wireframe mimicking the live site, visually providing an understanding of functionality and movement

Keeping it SimpleThe Benefits of Static Wireframes Still wireframes can help with:

• Time• Money• Client adoption

Static wireframes keep things basic and rely on vernacular to explain functionality.

Useful Programs: Balsamiq, MockFlow, OmniGraffle, Cacoo, Pencil Project

Change the GameLookie-lou + Click-thruFor the tactile learners in the room, understanding functionality is better met with dynamic prototypes that will inevitably make it easier to build in the long run.

Useful Programs: Axure, Protoshare, HotGloo

Move It and Use It

Making the Jump SafelyPrior Proper Planning Prevents Piss Poor PerformanceOnce the navigation is cemented, the general layouts understood and functionality realized, it’s time to move into UI design – putting “meat on the bones”.

User Interface DesignCreating a design for websites, mobile apps, software etc., that pays strict attention to overall user experience by making interaction with the system as efficient and enjoyable as possible.

Always Meeting a NeedSolve for XUI design has the task of translating UX information in an aesthetically pleasing functional entity. Using large imagery because it’s more engaging, varied typefaces because users get bored, fixed headers and visual indication of how to get from point A to point B (while being super obvious about it) are all matters to consider.

This vs That and Why

Sophie’s ChoicePicking toggles over pressed and depressed, tabs over buttons, borders over whitespace all comes down to what the end user will find most appealing and useful in relation to what they are trying to attain from your system.

That’s so 2013

Trends in UI TodayPatterns form based on the content being craved by the masses and how the most popular systems go about doing it. UI design is often a game of follow the leader. What’s hot right now:

• Fixed headers • Large photo or video backgrounds• Minimalism• Complex illustrations • Infinite scrolling• Dynamic sliding panels

• Typography takeovers • Vertical navigation• Fixed heights • Flat and simplistic • Simplified navigation• Responsive

Beautiful UI

Clear – Mobile To-Do List

Beautiful UI

Saucony – Product Detail UI

Beautiful UI

FK Agency – Business Detail

Beautiful UI

Jan Ploch – Online Portfolio

Beautiful UI

Weather App – Daily Detail

Beautiful UI

Agence De Communication – Company Home

Inception to Elaboration Strategy is key to quality design and only through tactile implementation can a user experience be enriched through an appealing user interface.

Clemens, D. (2012, May 30). Design process in the responsive age. Retrieved from http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/

Gube, J. (2010, October 5). What is user experience design? overview, tools and resources. Retrieved from http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

Hess, W. (2009, January 09). 10 common misconceptions about user experience design [Web log message]. Retrieved from http://mashable.com/2009/01/09/user-experience-design/

HotGloo (2013, January). WHY SHOULD I WIREFRAME?. Retrieved from http://www.hotgloo.com/wireframe

Jovanovic, J. (2010). Designing user interfaces for business. In Retrieved from http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-business-web-applications/

Rocheleau, J. (n.d.). Hongkiat.com. Retrieved from http://www.hongkiat.com/blog/web-design-trend-2013/

SonicSEO (2011, December 12). 4 Reasons Why You Need a Site Map. Retrieved from http://www.sonicseo.com/why-sitemap/

The Meme (2013, January 30). Eight UX Design Trends for 2013. Retrieved from http://uxmag.com/articles/eight-ux-design-trends-for-2013

Image Cites:http://www.1stwebdesigner.com/freebies/45-free-web-user-interface-elements-psd-files/tp://www.nike.com/us/en_us/c/nikeidhttp://abduzeedo.com/design-trends-2013-flat-and-minimalhttps://andrewl14.wordpress.com/category/wallpapers/#jp-carousel-753http://www.axure.com/sample-prototypeshttp://captaindash.comhttp://community.saucony.com/kinvara3/http://www.condenaststore.com/-sp/Seeing-eye-dog-eludes-blind-owner-he-is-wearing-the-sunglasses-which-the-New-Yorker-Cartoon-Prints_i8473412_.htmhttp://www.realmacsoftware.com/clear/http://www.xprimegroupe.com/#

Out of Cite