Introducing Microsoft’s Fluent Design System
Design & UXGiannis Konstantinidis,
Animation — SitePoint
Featured
Advertise with usRecent
Introducing Microsoft’s Fluent Design System
Design & UX
By Giannis Konstantinidis,
Giannis introduces us to Microsoft's new design language — Fluent Design System — and explains how to implement its design concepts into Windows UWP apps.
7 Astonishing Artists and Designers to Follow on Behance
Design & UX
By Gabrielle Gosha,
Our #1 design writer, Gabrielle, talks about the most astonishing artists and designers to follow on Behance when you need an inspiring creativity boost.
12 of the Best Dribbble Designers to Follow
Design & UX
By Gabrielle Gosha,
Despite being invite-only, Dribbble is crawling with talented designers. Gabrielle narrows it down to the 12 best Dribbble designers to follow.
Inspirational UI Design Ideas for Your Next Website Project
Design & UX
By Simon Codrington,
Simon Codrington illustrates some stunning UI design ideas using CSS animation and gradients to inspire your creativity for your next website project.
Killer GIFs: How Can an Animated GIF Become a Weapon?
Design & UX
By Alex Walker,
GIFs are the jokers of the web image formats – usually funny and playful. But can they be turned into a dangerous weapon in the right situation?
10 Web Design & UX Trends for 2017 That Can Boost Conversions
Design & UX
By Claudia Elliott,
Trends are interesting, but more important is how these 2017 web design and UX trends boost conversions.
Achieve 60 FPS Mobile Animations with CSS3
HTML & CSS
By Jose Rosario,
Animating elements in your mobile application is easy. And doing it the right way is easy, too... if you follow our tips here.
Dark UX: Dirty Tricks and Tactics to Avoid in 2017
Design & UX
By Aja Frost,
Often our goals and those of our user are in alignment – but not always. Sometimes you have a devil on one shoulder and an angel on the other.
5 Ways to Delight with UX Details Combining GIFs and CSS
Design & UX
By Tim Brown,
The GIF format has been around for so long that sometimes it's easy to overlook its usefulness. Tim wants you to reconsider the power of GIFs and CSS.
UI Motion : Can You Tell a Story with Movement?
Design & UX
By Alex Walker,
We all think carefully about choosing a color, but – as Heider and Simmel show – the way an object moves can have a profound impact on how we feel about it.
Animations: Using Easings to Craft Smarter Interactions
Design & UX
By Daniel Schwarz,
Modern user interfaces move. But as Fun Boy Three and Bananarama once said, "T'aint what you do, it's the way that you do it!". Let's talk about easings.
How to Hack Brains with Cinemagraphs
Design & UX
By Alex Walker,
Cinemagraphs are like the snow globes of the web – simple yet strangely mesmerizing. Here's how to use them in your web design.
The Best Way to Create Fantastic ‘Invisible Pen’ Effects in SVG
Design & UX
By Ivaylo Gerchev,
Watching an SVG image drawn onto screen is powerful effect. Ivaylo shows you how to create the 'Invisible Pen' Effect in SVG using Vivus.js
How to Lift Your UX Out of the Ordinary with Micro-Interactions
Design & UX
By Daniel Schwarz,
Micro-interactions are subtle “moments” centered around accomplishing a single task. Daniel shows how they count for UI designers.
The Movement Towards Motion in Website Backgrounds
Design & UX
By Stephen Moyers,
While the background video trend might not be an automatic usability fail, that doesn't mean you can't get it wrong. Stephen looks at the wins and pitfalls.
Why SVG Image Hosting is Hard (… and How to Do It)
Design & UX
By Alex Walker,
SVG is powerful, but finding a place to put your image is harder than it should be. Here's a scalable, reliable, free SVG image hosting method.
Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen
Design & UX
By Sarah Landrum,
Codepen has become a vast repository of some of the best in front-end UI thinking. Sarah has put together a short list of handy snippets from Codepen.io
Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor
Design & UX
By Alex Walker,
SVG is hot but easily corrupted. Boxy SVG is a free editor that helps you make the most of what the SVG format is good at.
Design 2016: The Year of Illustration?
Design & UX
By Gabrielle Gosha,
How many gigantic-background-photo sites do we really need? Illustration is a sure-fire way to give your designs a 100% authentic, bespoke finish.
Parallax Burns: Converting Photographs from 2D to 3D with SVG
Design & UX
By Alex Walker,
There's a nice video effect I'm going to call 'Parallax Ken Burns' you see on a lot of documentaries. Can we mimic it in a single SVG file? Maybe.
7 Trends That Will Define Web Design in 2016
Design & UX
By Zack Rutherford,
As 2016 starts to ramp up, we're starting to see strong trends emerging. Zack is on point with a list of the defining styles of the year.
How to Make Your Users Enjoy Waiting
Design & UX
By Aja Frost,
Perhaps one day we'll be able to deliver pages instantly - until then, we need to manage the times users do wait. Aja has some great strategies.
5 Fancy (But Useless) Web Components You Should Avoid
Design & UX
By Daniel Schwarz,
Like great music, good web design shouldn’t be all about flashy tricks and visual theatrics. It must actually perform.
The 7 Best Resources for Web and Mobile App Animations
Mobile
By Dennis Williams,
Dennis Williams looks at 7 of the best resources for creating animations to bring dazzle and delight to your mobile web and native apps.
4 Tips for Using Animation in Design
Design & UX
By Gabrielle Gosha,
Good web animation is often a paradox - the better it gets, the harder it is to notice. Gabrielle has 4 tips for using animation in your projects.
How to Handle Complex Animations with Ease in Atomic.io
Design & UX
By Daniel Schwarz,
Animation is as important to our modern UIs as buttons and menus. Daniel shows us how to prototype complex animations with Atomic.io
Animation Advice from a CSS Master
HTML & CSS
By Angela Molina, Tiffany Brown,
Last week Tiffany Brown, author of CSS Master, joined us on the forums for a Q&A session discussing CSS Animations. Read the highlights of her conversation.
Origami: How to Build Terrific Prototypes in Minutes
Design & UX
By Mateo Prifti,
Prototyping apps is hard. The easier they are to use, the more control you lose. Mateo shows you how to create rich prototypes with Origami without coding.
Watch: Refactoring a Slow Animation
HTML & CSS
By Tim Evko,
In this screencast I'm going to show you how to refactor your CSS to improve and smoothen your animations.
7 Simple Rules for Creating Elegant UI Interactions
Design & UX
By Petras Baukys,
In 2015 it's no longer enough for interface elements to instantly switch between two static states. Petras has 7 tips for making your interactions sing!