Transitional Interfaces and Design UX

Ease-in and ease-out illustration

Ease-in and ease-out illustrationBy Pasquale D’Silva from Medium.com

Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don’t stop you guys.

…but there’s little consideration about how it all fits together outside of a static comp. You tap a button and the form just …appears? You swipe to delete an item and it just vanishes? That’s super weird and un-natural. Nearly nothing in the real world does anything as jarringly as just swapping states. It would feel like a glitch.

Oh, ok sweet. You made some notes — it just “slides in.”

How? Quickly? Does it bounce back? Cushion in? Static design doesn’t provide context between states.

Folks keep throwing around the word “delight” when referring to animation and cute interactions. Cool and great for those guys. Guess what though? Animation can be used functionally too. It’s not just an embellished detail.

Animation leverages an overlooked dimension — time! An invisible fabric which stitches space together. You don’t have to be a math dork to understand this.

[Full article]

The best resources for learning bleeding-edge web, UI and UX design

"Finally, an awsome UX tutorial."

Great ideas for web, UI and UX design from Colm Tuite, a great authority, on Quora.com, a great site.

Here’s a pretty good resource for learning UX/UI design, if I do say so myself. There is a difference between UI design and UX design. There is a lot of overlap though, so I’ll try to bundle them together. Here it is, in ten simple steps.

#1 Discover the problem
Far too many designers sit down to work on a new project without doing any research at all. [more]

#2 Get to know your users
It’s much easier to solve problems when you first figure out who is experiencing them. Find out as much as you can about your users before you start. [more]

#3 Learn to wireframe properly
So, now that we know who our users are and what problems they are experiencing, we can start redesigning our homepage, right?

Wrong. [more]

#4 Communicate effectively
It is your job to communicate the information your users want in the quickest, most effective way possible. [more]

UX-bad Too long winded.

UX-better Better.

UX-best Bleeding edge.

#5 Guide your users
When a user lands in your app and doesn’t immediately see how it can benefit them, chances are they’re gonna leave and won’t be coming back anytime soon. [more]

#6 Encourage your users
When a user makes a mistake, don’t just inform them in a cold manner and leave them to figure out the solution. [more]

#7 Reward your users
Likewise, when your users do something right, reward them. Don’t just inform them of their success like any robot would. [more]

#8 Learn the basic fundamentals (HTML, CSS, JS, Ruby, Python etc.). [more]

#9 Learn visual design
Lots of UX designers think they don’t need to know about color or typography. Others say it’s a complete waste of time. It’s not.  [more]

#10 Study. Study. Study.
There are countless resources out there for learning about design. Here are just a few to get you started:

Resources
Smashing Magazine
Aarron Walter (aarron) on Twitter
Paul Irish (paul_irish) on Twitter
Responsive Design
Ryan Singer (rjs) on Twitter
Chris Coyier (chriscoyier) on Twitter
www.designskool.com
CSS-Tricks
AaronRobbs (AaronRobbs) on Twitter
Designing for Emotion
Welcome | Voice and Tone
Dribbble – Popular
iOS Mobile Patterns
The Main Tap › PatternTap
Google
Designer News

Awesome Sites
http://mailchimp.com
https://yourkarma.com/
http://facebook.com
http://layervault.com/


Read the full article!