articles on

Motion Design: Nickelodeon Kids Pick The President

Motion Design: Nickelodeon Kids Pick The President

Nickelodeon Kids pick The President is a motion design and illustrations project shared by M A D E B Y R A D I O. As the name suggest, its a series of illustrations and motion design work for the 2016 presidential election in the USA. There's just too many things to love about this motion design project. Starting for the amazing sketches, that by themselves, would have been enough for us to feature the project. The translation to 3D is for lack of better word, stunning. It is fun and really smooth. The inflatable White House is one of my favorite pieces.    We worked with Nickelodeon to create a bunch of animated spots for the 2016 Presidential Election. Nickelodeon stages their own child based national election and has correctly predicted the winner every single time - except for once. M A D E B Y R A D I O is a creative studio based in London and Cape Town specialising in illustration, iconography, lettering & motion design. For more information please check out their website at: http://www.madebyradio.com/ Motion design process Sketches Final renders Nickelodeon is an American basic cable and satellite television network launched on December 1, 1977, and is owned by Viacom through Viacom Media Networks and based in New York City.

Motion Design/Typography - Skatepark

Motion Design/Typography - Skatepark

Skatepark font as the name suggest is a typography but also motion design project shared by Keisuke Terashima. Throughout these 10 years of Abduzeedo we have seen many very creative projects where the designer explores different ideas for a family face, however, this one that Keisuke put together has to be one of the coolest. Perhaps, because I am a fan of skateboarding, but the idea of mixing skateboarding and its beautiful tricks with letters reproducing obstacles is nothing less than amazing. The animations are top notch as well and aligned with a cartoonish style it reminds me of a video-game. Anyways, enough said, check it out the full alphabet with tons of flips, grinds and other rad tricks. Keisuke Terashima is a graphic designer, motion designer and art director at PARTY in Tokyo, Japan. For more information make sure to check out his website at http://www.keisuketerashima.com/ - there are more incredible projects on his portfolio. Motion Design and Typography

Motion Design: FS-II by Nicola Lopardo

Motion Design: FS-II by Nicola Lopardo

FS-II is a motion design project shared by Nicolas Lopard on his Behance profile. As a fan of abstract designs, especially futuristic patterns that remind of Tron, I could not let this pass. The work that Nicolas put together for this motion project is exquisite. The dark theme and the glowing blue colors definitely caught my attention. It would be something I would love to do in Photoshop, of course Nicolas went above and beyond by creating a beautiful animation, transitioning through different patterns. Nicolas Lopardo is a designer from Toronto, Canada. His skills go beyond static graphic design rippling through the motion design realm. For more information about his work check out http://liift.ca/ Motion Design FS-II from Nicolas Lopardo on Vimeo. Motion Still

Beautiful Motion Design for Auto UI

Beautiful Motion Design for Auto UI

Gleb Kuznetsov shared some quite beautiful motion design projects for Automotive UI. on his Dribbble page. They seem to be for the new Fantasy Auto Lab project done by the amazing people over at Fantasy, a Human-centered UI & UX studio based in New York and Silicon Valley. One of the reasons I thought it would be cool to share this projects is because it has a Tron look, quite different from what we have been seeing since flat design, if that is even a style, became popular. There's much more to love than just the style. The animations and details are top notch and make me want to see the full project. Auto UI - Motion Design Gleb Kuznetsov is a design director with 15+ years of experience in product design, User interfaces, Usability area including automotive, mobile OS, Apps, Web, TV, Ecosystems, more than 500 B2C projects. For more information check out http://fantasy.co/

Visual and Motion Design Work of Ben Mingo

Visual and Motion Design Work of Ben Mingo

Ben Mingo is a visual designer currently working at UENO and he has a beautiful portfolio full of motion design work as well. Most of his projects are motion vignettes which gives us a great idea of how things should work. Smooth transitions combined with killer visuals is always a recipe for success. I selected a few of his works to share here with you today and inspire you to start prototyping your work. Some of the projects I selected illustrate scrolling events, transition from list view to details view and of course beautiful visual and motion design. For more information about Ben, make sure to visit his website at http://www.benmingo.com/ visual and motion design

Motion design by Radio

Motion design by Radio

Motion design is taking over and my prediction is that in a short period of time it will be a required skill for any visual designer or perhaps any product designer. I feel that understanding the principles of animation and the power that it has in driving user's attention can help designers to create simple and more effective interfaces. It also can give that feeling of friendly and playful, or just a beautiful eye candy moment. The folks over Radio are really good at creating this moments. We selected some super clever and awesome examples for you. Radio is a design driven production company housing a diverse team of creative talent specialising in animation and illustration. Founded in 2011, with studios situated in London and Cape Town, our goal is to offer design based solutions for clients big and small. - Radio Our bold and iconic work has given us the opportunity to work with leading brands and agencies across the world. - Radio Motion Design For more information about Radio check out their website at http://www.madebyradio.com/work/

OLYMPIA Animation

OLYMPIA Animation

Another summer Olympic games will start today, this time taking place in Rio de Janeiro, Brazil. There's always an excitement behind any Olympic games, from the announcement of the logo and identity, to the mascot a few years prior. The opening ceremony is probably one of the highlights of the show, it's always kept in secret what will be shown. We here at Abduzeedo are getting into the spirit and looking forward to 17 days of sports and of course Olympic related posts. The OLYMPIA one from Behance had to be the first because it's just beautiful. OLYMPIA is an homage to the Games and especially the athletes and their amazing moves. I love how stylish the animation is, there's a lot of dynamic and everything feels super fluid. The project was done by Henrique Barone, Rafael Mayani and Conor Whelan from Vancouver, Canada and CypherAudio from Toronto, Canada. Animation Design process Credits creative direction: Henrique Barone, Rafael Mayani and Conor Whelan art direction: Rafael Mayani storyboard and animatic: Henrique Barone animation and line clean-up: Henrique Barone and Conor Whelan color clean-up: Rafael Mayani and Henrique Barone compositing: Conor Whelan music and sound design: John Black

UI design in motion

UI design in motion

Motion design has become a huge part of the process behind any product design project. It's impossible to design interfaces without thinking about the different states of the UI. Clicking here will do this and that, the types of transitions and curves. All of these variables are crucial part of the design process. Motion sometimes help visual designers in reducing elements and driving user's attention to an specific part of the UI. Because of the importance of motion I have been paying much more attention to projects that showcase that. Dribbble is a great place to get inspired. For this post I selected a few examples of motion design applied to UI. They are simple but inspiring. Of course there's also the need of validation, but for now let's just focus on the inspiration. UI examples

Incredible Animations by James Curran

Incredible Animations by James Curran

I have a Chrome extension that loads Dribbble posts on a grid on every new tab I open, it's a great way to take a break from whatever I am doing and find some inspiration, or make the experience of opening a new tab more exciting than just a blank page. The best thing about that though is that I get to discover some incredible work from UI to motion and the work of James Curran is on top of my list of favorites. James Curran is an animaiton director that likes to make gifs and he does that incredibly well. The animations are full of character, super smooth and the most amazing thing for me is that he creates these perfect loops that almost melt my brain. I selected some for this post for you to check it out. For more information about James, make sure you check out his website at http://www.slimjimstudios.com/

Smooth UI Motion Design

Smooth UI Motion Design

Fantasy is a human-centered UI & UX lab working with in-house teams since 1999 they are based in San Francisco and New York City. If you are like me and visit Dribbble on a daily basis for some visual inspiration you probably saw their work because they put together some incredible work that of course gets featured and promoted to the front-page. I love the quality of their visual design but especially their motion design work. To showcase a bit of that I will share here with you some of my favorite shots from the Fantasy team. For more information about Fantasy make sure to check out their website at http://www.fantasy.co/

Herman Miller Redesign Concept

Herman Miller Redesign Concept

It's awesome to see web design moving towards the editorial design and also how motion design has huge impact in todays design in general. The Herman Miller redesign concept is an awesome example of beautiful typography, imagery and of course subtle animations to create an elegant and engaging experience. About the project Herman Miller redesign concept, providing a highly immersive experience to the user from beginning to end by use of big imagery, quality content, bold typography, clean navigation and slick interactions. This direction could help evolve their eCommerce experience in an effort to drive better conversions. Motion Study This project was created by Rahul Bhosale and Jekin Gala. For more information check out https://www.behance.net/gallery/35756911/Herman-Miller

Dots Motion Design

The importance of personal projects can never be overstated. I started ABDZ almost 10 years ago and I have learned so much since then. The project that Mark Pearson shared on his Behance page is a good example of exercising skills to improve and learn more about our craft. He played with dots and clever motion design to create super cool animations. I am sure those will be useful for him in the future. Personal project exploring relationships in form, color, and motion. I've been trying to post one a week on http://dribbble.com/markpear over the last several months. Below is a collection of some of the more popular ones along with a compilation video featuring music by http://pogomix.net/. Enjoy! Mark is a Graphic Designer, Animator, Interaction Designer, and 3D Modeling/Rendering enthusiast. He specializes in unifying these mediums within the software development process to create experiences that empower, inspire and delight. For more information check out https://dribbble.com/markpear Video

D-D Play - App Design

D-D Play - App Design

If you think about it, there might be an app for that. It's crazy to think that it hasn't been 10 years since mobile apps really took off and today they are part of our digital lives. With a plethora of apps it's hard to differentiate yours from the rest, but sometimes neat illustrations and good design can help. D-D Play is an app that mixes low poly 3D illustrations with a modern UI to offer info about the weather. D-D Play app was designed by 灰 昼, a designer from Beijing, China. He focus his work on motion design, UI and UX. For more information check out https://www.behance.net/NoirChen Video

UI Motion Design

UI Motion Design

I have been working on the Abduzeedo app for Android as a side project with an end goal of learning how to create Android apps from scratch. Admittedly, this has proven to be quite challenging for someone with subpar coding skills. I am at the phase of adding some animations, or trying to, so I decided to create a simple mood board. This feature is a summary of some of the designs I collected for inspiration. This post is a collection of motion designs found on Dribbble created by various talented designers. Make sure to click on the images to find out more about the designers behind these beautiful works.

Typography in Motion

Typography in Motion

I am always amazed to see the evolution of the design community and the adoption to new styles and techniques. Motion design seems to be taking over, not only in the design industry, but everywhere. Apps like Snapchat are proof to this evolution and it gives a glimpse of a day where no more static images will be seen. Until then I hope we find a better format than GIF. That said, for this post I want to share some beautiful examples of typography in motion created by Starov Evgeniy and Dubnichenko Alexey. The main idea of this collection is to show new vision of using lettering logos combining animation and calligraphy. Each of these works have their own style and animation details so they can be placed in any kind of media space and become a part of the branding. For more information check out https://www.behance.net/Starov

Playful Motion Design

Playful Motion Design

It is amazing to see how much the design community changes and with great sites to follow like Dribbble, Behance and many others we can compare the various shifts. Around 5 years ago, skeuomorphism was huge, then some ornamental typography. After that everything went vector and flat. Little by little things started getting more bold strokes, sometimes even with some depth. Now I feel that motion design is the new cool thing and in my opinion it's awesome. There are so many cool examples of little moments of delight that can be added with simple, yet playful animations. Gal Shir a product designer and art director from Tel Aviv is exploring and pushing this trend in an inspiring way. His animations are very smooth, stylish and super fun. In this post I wanted to feature some of them with you guys. For more information make sure that you visit his Dribbble profile to check out his full portfolio.

UI Motion Design References

UI Motion Design References

There are quite a few things I like to do before opening my computer and using a design tool like Sketch of Photoshop. One of the first things I do is a competitive analysis and right after some simple mood boards with references for things like animation, typography, colors, simplicity. I feel that this step gives me a broader view of possible solutions done by other designers. The process is simple, I just collect as many images as possible and the those that I think are the best fit for each case. For this post I want to share some simple images of UI animations. They are from Pinterest and Dribbble. I used them as references for some personal projects I am working on. The cool thing about this images is that they are pure visual and motion references. I don't pay attention about technical feasibility or anything.