Wednesday, February 26, 2014

From idea to core prototype in hours.

http://williamnewton.co/blog/prototype-in-hours-not-weeks/
From idea to core prototype in hours, not weeks

From idea to core prototype in hours, not weeks

Note: Neila Rey is awesome, but I can’t use her copyright. The original graphics created with this post have been removed. The design principles described in this post still apply, even though the mock-ups provided no longer reflect Neila’s workouts.
I’ve been working out every day with these great at-home workout plans from Neila Rey.
One day between exercises, I found it annoying that I had to keep getting up and looking at my laptop to see the next step. This evolved into an idea to create a fitness app that takes you through your exercises step by step.
This is how I prototyped the core experience in a matter of hours:
Idea Dump: Spend some time sketching and brainstorming. Start over often. By my third time drawing out the app I had a strong sense of what it needed to be. Re-drawing your ideas helps you streamline what’s important, and omit what isn’t.
sketchbook-e
1. Choose Workout, 2. Do Workout.
Nothing more, nothing less.
Define the Mission: Define the ‘most important thing’ the product does. Make doing that one thing as simple as possible for the user. That’s what we’ll be prototyping here. (The main point of this app is to allow/help the user DO WORKOUTS)
User Flows: Map out the user flows in Sketch, Illustrator, or with detailed sketches, work out any obvious UX errors. Remember: make it easy for the user to do one thing. This simplifies your focus, creates clarity in your product, and most importantly allows you to finish the work that you start.
I used Sketch to map out the core interactions.
I used Sketch to map out the core interactions.
Visual Design: Open up Photoshop and create some high-fi mockups. Keep the visual design to a minimum. Focus on clarity. Use hierarchy (and perhaps some color!) to create a singular “do this next” feel for your screens. In my example, the user is supposed to *wait* and stretch until the timer runs out.
replace-hifi
Make Interactive & Share: Once you have your screens, open up InvisionAppFlinto, or POP, and upload your screenshots! Send it to friends, colleagues, your cat, anybody who can give you feedback.
That’s it! Is it perfect? No. But that’s not the point. Relish in the fact that you’ve put together something faster than you thought you could. Although it isn’t perfect, your product will improve through feedback from users. The purpose of working in this way is to make stuff. The purpose of making stuff is to get feedback and then make it better!
But wait— you’re not done yet. Building prototypes quickly doesn’t count for jack if you don’t take the time to actually listen, learn, and improve your product through the feedback process. The process for collecting, organizing, and integrating feedback is the topic for another post.

Tuesday, January 21, 2014

user interface design trends

7 user interface design trends you need to know about...


Minimalism After years of bells and whistles, user interface design is going back to basics – at least according to some big name companies, including Google and Microsoft to name a few. Glossy icons are replaced by simpler one-color versions or text-based buttons, rich gradients with simple solid color combinations. 




Minimalistic interfaces are definitely taking off. Top: Windows 8 uses monochromatic icons and simple solid colors for its new interface. Bottom: Pinterest user interface is the ultimate minimalism – apart from user content, very few things take up space on the screen. 

For majority of users, this lack of visual detail works astonishingly well – the interface is easy to digest and its elements don’t get in the way of the tasks they’re trying to accomplish. 

When to use it: minimalism is a great way to design a web application which focuses on user generated content – if done right, users will rarely complain about it. However, keep in mind that many clients will find this approach too simplistic for their taste, so you might want to check their preferences before starting your project.

Mobile UI Design Patterns

Mobile Patterns
http://www.mobile-patterns.com

UI Interaction Library

http://useyourinterface.com

UI Animation

http://ui-animations.tumblr.com

Kinetic Pattern Library

http://capptivate.co/page/2/

Mobile Design Pattern Gallery

http://www.mobiledesignpatterngallery.com/mobile-patterns.php

Android Patterns

http://www.androidpatterns.com

Inspired UI

http://inspired-ui.com

pttrns

http://pttrns.com

android pttrns

http://androidpttrns.com

lovelyUI

http://www.lovelyui.com

UI Parade
http://www.uiparade.com

Resources (kr)

https://sites.google.com/site/designpttrns/


UI: GIF Animation

UI: GIF Animation

 Left : http://dribbble.com/shots/1078102-Sidebar-animationRIght : http://dribbble.com/shots/1343162-Gif-Timeline-App
 Left : http://dribbble.com/shots/1239862-iPad-Mini-Showcase-TemplateRight : http://dribbble.com/shots/969876-Switch-gif
이런 디지털 손목시계 UI 컨셉 디자인들도 있습니다.
 Left : http://dribbble.com/shots/1280333-iWatch-Mock-UpRight : http://dribbble.com/shots/1323294-Sange-watch-02-GIF

Android UX & Patterns

Android UX
http://developer.android.com/design/get-started/ui-overview.html

Designing Interfaces: Patterns
http://designinginterfaces.com/patterns/


mobile patterns

http://www.mobile-patterns.com/
SCREENS