Motion UI Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along with the source Sass files, which allow you to build your own. bower install motion-ui --save npm install motion-ui --save Motion UI includes a bundle of pre-made effects as CSS classes. But where it really gets fun is creating your own effects. Transitions The core function of Motion UI is to transition components in and out. Show a Thing The Motion UI package includes a small JavaScript library to trigger these transitions. MotionUI.animateIn('#element', 'fade-in'); MotionUI.animateOut('#element', 'fade-out', function() { console.log('Transition done!') Transitions are highly customizable. Animations
David Plunkert A brief history of user experience Think about the last time you ate at a restaurant. What cuisine did it serve? What made you to choose that particular restaurant? What was your first impression as you walked in? Were you asked to wait till you were ushered to an available seat? Your answers to these questions, including all the emotional highs and lows, encompass the restaurant’s user experience (UX). However, when people use the term UX, they’re usually referring to one’s experience with a digital or technological product or service. Today, UX has grown into an important design discipline that continues to grow and evolve. To think about where the much debated-practice of user experience design will take us next, it’ll help to take a look back at some of the key events in its meandering evolution. Circa 1430: Leonardo da Vinci’s “kitchen nightmare” Comically, however, the conveyer belts operated too erratically for the workers and—to make matters worse—the sprinkler system went off, ruining some of the food. References
200 Portfolio Sites for Web Design Inspiration Designers and developers are growing in numbers and plenty of these folks have outstanding portfolios. The common advantage of the Internet is that anybody from anywhere in the world can check out your projects during any time of the day! If you wish to land more freelance work then I would recommend taking a peek at your current portfolio to see if anything could be updated. And to help with building ideas for your own website, I have collected 200 various portfolios of graphics designers, developers, writers, and other digital creatives. If you like this post you might also like our post 35 mobile responsive portfolio layouts Mathew Helme Mat has one of the nicest portfolio sites I’ve seen. Aaron C-T Clean and lightweight is a great way to get started. Becky Murphy Becky is a writer and illustrator who has created some great pieces and her own book. Nidhi Chanani One of my favorite illustrators is Nidhi because of her style and context. Vitor Kirk Wallace Mary Fran Wiley Lilondra Ospina D.
Où trouver de l'inspiration pour vos animations ? Avez-vous déjà remarqué à quel point les animations sont devenues un composant essentiel au cœur des interfaces utilisateur ? Pour en tenir compte dans vos projets futurs et vous inspirer, découvrez quelques sites et outils de référence à connaître. Annonce Aujourd’hui, l’animation n’est plus réservée à des sites de jeux, pour des expériences interactives poussées ou simplement des applications mobiles. Les traditionnels blocs plats, sans vie et en 2D prennent vie avec des mouvements « réalistes » qui suivent les lois de la physique du monde réel. « Une animation bien réussie est celle que l’utilisateur ne va pas remarquer » La clé d’une animation réussie réside dans sa justesse. Pour avoir une animation qui fonctionne, pensez au réalisme de celle-ci avant tout. Des galeries pour trouver l’inspiration : Les bonnes pratiques sont dans la nature et encore plus dans de belles galeries à bookmarker sans plus attendre. UI Movement User Interfaces Use Your Interface Codepen Patterns Atomic Invsion
María Hergueta TETHR – The Most Beautiful iOS Design Kit Ever Made – by InVision Beautiful iOS templates at your fingertips. We're talking $80 worth of Photoshop, Sketch, and Craft Library templates... totally free. Source Files Templates UI Elements Make it minimal Clean, modern designs match the flat iOS interface. Mix + match Drag-and-drop elements make it easy to concept any iPhone app. Retina-ready So there’s no need to worry about optimizing your assets. Where should we send your kit? Get free UI kits, icon packs, mockups, and more Experimental Typography Effects for Card Stacks Tree vector designed by Freepik If you enjoyed this demo you might also like: Grundini Peter Grundy and Tilly Northedge met at the Royal College of Art in the late 70s where they became interested in a visual communication that explained rather than sold things. In 1980 they started a studio to do information design in a new and creative way which they called Grundy & Northedge Hugh Aldersey-Williams writing in Graphis in 1995 said of them; The humble basic communication of information has never had the glamour of other areas of design. The creation of a poster casts the designer as an artist. Peter Grundy and Tilly Northedge worked together for twenty-five years.
Outdated UX patterns and alternatives Meet North, design and development standards to align and guide your project. It's a comprehensive guide contributed to the open source community to encourage, "a mobile-first, in-browser, system based approach to design and development." Check out North on GitHub: The section of the guide that I found most interesting is, Outdated UX Patterns, a collection of examples of what not to do when building a website, which tries to steer designers from borrowing from ineffective practices to solve common problems. Just like how presentations deprecate, so do UX patterns. It may be ambitious to call some of these patterns "outdated" since many of them are still prevalent across the web. Carousels These are everywhere on the web, but largely inefficient when it comes to getting users to engage with content past the first slide. Carousels exist to keep people from beating the shit out of each other in meetings. — Brad Frost Alternative: Large Background Images Alternatives: Counterargument: Overlays