Motion UI Design Principles

This blog is a quick look at some simple Ui motion design principles.  There isn’t too much documented about this area of mobile ui design and I thought there would be some value in expressing my views.   From what is documented already I urge anyone interested in ui motion to check out Pasquale D’Silva http://psql.me/ and Johannes Tonollo’s meaningful transitions http://www.ui-transitions.com/#home.   Also make sure you bookmark http://littlebigdetails.com and http://capptivate.co.  (A special thank you to Capptivate.co who allowed me to use their captures below). These basic principles I’ve outlined focus more on the what and why, rather than the how to of motion / animation.  With the increasing emphasis on motion (largely thanks to the more paired back design of iOS 7) its important that it is implemented with the same integrity and purpose as all the other aspects of Ui design.  With the exclusion of skeuomorphic design there is now a freedom for content to behave in an unrestricted manner.  Gone are the awkward and sometimes absurd transitions that appeared to break all laws of their pre-defined physical environment.  Now the space has opened for there to be a much richer identity and defined language or landscape to mobile Ui and motion is very much an integral part of that.   Personality. The most obvious principle is that any motion or animation should be of the highest standard possible.  Apps should look at going beyond “out of the box” motion solutions and making something bespoke and truly engaging.  Within the app the motion should convey a distinct character, whilst keeping a clear consistency throughout. Behaving in an expected manner will help maintain a stable relationship with...

Spotify Sends Out Its Biggest Update Yet For iOS, Mac And The Web

Spotify, the music-streaming giant, has announced that it’s updating its iOS, Mac, and Web apps in order to provide users with a more unified experience across all three platforms. It’s the biggest update Spotify has ever published, and it draws more than a dose of inspiration from competitors like Rdio. You can download the updated Spotify Music app now on the App Store, and to emphasize the significance of the change, the version number listed has been reset to 1.0.0. Over in a recent blog post, the folks at Spotify explain that the app has been “painted black” with “a new darker theme, refreshed typography, and rounded iconography.” Take a look: If you can’t see the above video, please click this link. More significant, though, is the app’s new Rdio-inspired “Your Music” feature, which provides users with a collection of content which is shared between iOS, OS X, and the Web: We’re not only improving our looks though. We know how much you love playlists, but that you’ve been looking for more ways of managing your music. So today we’re introducing Your Music: helping you save, organise and browse your favourite music the way you want to. All in one place, and across all platforms. Spotify’s “Browse” has also been enhanced to offer users more relevant and localized content, and the app has received a boot-boost too, meaning it should load up much faster than before. In its blog post, Spotify explains: Content is king. Our new design makes accessing your favourite music smoother than ever before. The new dark theme and refined interface lets the content come forward and ‘pop’, just like in a...

UI vs UX: what’s the difference?

Usability, Web Design | Jun 4, 2012 UI is the saddle, the stirrups, and the reigns. UX is the feeling you get being able to ride the horse, and rope your cattle. At least that’s what they used to say in the olden days. Rather, that is what I wished they’d say. Despite how simple that may have sounded, there are many complications and misconceptions when it comes to the differences between UI and UX design, and they cause the design community to go into quite a stir whenever they are brought up. An interesting note to that is that I’ve found the people who work at jobs with titles such as Interaction Designer to get paid more simply because they know and act on the differences between those two fields (typically harnessing a little of both). And in fact, I think there are more differences in the people behind these roles than the ideas behind UI and UX design. Let’s jump right into a standardized definition that we will try to metaphorically elaborate on. Defined very simply a User Interface design is the part of the product that faces the user when he looks at the site, and the User Experience is how they feel when they look at the site, aka the broad scope. More pointedly, good user experience is the art of a drill going through wood, or a surfboard gliding through water effortlessly. The feelings those give you is unparalleled because they just work, simple as that. Though, in contrast, the shape of that board that helps it make those turns on the wave is good UI, and...

Fullscreen Overlay Effects

View demo Download source Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects for overlays. The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. But that does not mean that we can’t go crazy and use some fresh and interesting effects, like, for example, morphing SVG shapes. Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. You should, of course, provide some kind of fallback for older browsers. An example for a subtle, yet interesting effect is the first one which got inspired by the same effect on Huge. The idea is to fade in the overlay and to rotate what’s inside slightly in 3D: .overlay-hugeinc { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; } .overlay-hugeinc.open { opacity: 1; visibility: visible; transition: opacity 0.5s; } .overlay-hugeinc nav { perspective: 1200px; } .overlay-hugeinc nav ul { opacity: 0.4; transform: translateY(-25%) rotateX(35deg); transition: transform 0.5s, opacity 0.5s; } .overlay-hugeinc.open nav ul { opacity: 1; transform: rotateX(0deg); } .overlay-hugeinc.close nav ul { transform: translateY(25%) rotateX(-35deg); } We use the visibility trick to make the overlay disappear completely: we set a transition delay for the visibility property which allows the opacity to be transitioned first. For some of...

Future of Web Design 2014 Ticket Giveaway

In this giveaway you can win a free 2-day conference pass to the Future of Web Design London conference in April 2014 (conference days: 8 – 9 April, 2014), worth £595 (approx. $940). The 8th annual Future of Web Design conference is returning to the Brewery in London to bring you the very best in web design. This conference offers huge doses of inspiration from established and rising stars in the web design industry, as well as creative challenges, practical guidance, a rousing attendee party, relaxed networking opportunities, and delicious catered lunches, snacks, and coffee. Topics covered include responsive design, mobile, CSS3, HTML5, JavaScript, Interaction Design, UX, and more. The workshop day is on April 7 and the conference days are on April 8 and 9. Here are just a few of our sessions: The Zero Interface: Use Zero-Based Thinking To Maintain Simplicity By Stephen Hay Beautiful (& Responsive) Web Typography: Designing for Readability & Meaning on the Responsive Web By Jason Pamental UI, Animation and the Future of Interaction By Rachel Nabors Designing From the Ground Up: Approaching, Prioritizing, and Executing Design By Jon Setzen About Future of Web Design Future of Web Design has been producing web design conferences for nearly a decade. FOWD is intimately familiar with the trends, technologies, and stars that make the web beautiful. Our two-track events mean you always have a choice — you’re not locked into one room and one track. And we record every session for all attendees, so you’ll never miss a thing. As always, content is king. One of the two stages at FOWD London 2013 The UX...

SVG Icons FTW

A lot of great methodologies and principles arose making our CSS more and more modular, structured and flexible. But think about your icons. Using raster graphics for icons means that they are not manageable in CSS. What if we need to change a color of an icon for its hover/active/focus state? For each icon state we need to add one more icon image. What about size? For each icon size we need to add yet another icon image. What about a shape? A shadow? Yup, the same thing. Not very convenient, right? So we are ending up with bloated sprites and style sheets that are hard to maintain and scale. But fortunately we’ve had icon fonts coming to the rescue. They allow us to manage all these things more easily and we have the following benefits: It’s plain text, which means they can be gzipped to up to 95% It’s a vector graphic, which means it can be scaled to any size making it Retina ready It’s one source file, which means a minimum of HTTP requests It’s a font – you can easily change size, color, shape and add a shadow Browser support for older browsers possible (e.g. IE6) Unfortunately, icon fonts have some limitations like being monochrome (still) and we can only use styles for texts like e.g. a text shadow. We can’t, for example, use an inset text shadow or apply different colors to the details. So today we will explore the possibilities of using SVG icons instead. Using SVG icons The icon solution I want to share here with you is based on SVG (Scalable...