articles on

YouTube Kids!

YouTube Kids!

Hello Monday and YouTube got together, and in the beginning of 2015 announced the birth of their love child, YouTube Kids! A safe place for kids to play. I don't have kids but I decided to take a look and I have to say, I love it. It's just amazing to experience a new, more simplified way to browse videos. I just wish Youtube would apply some of the learnings from this app to the one for adults. We were asked to help create a safe video environment that parents can trust, where kids can find amazing content that’s perfect for them, and where both groups can have a blast, together. We designed the entire brand identity, including the product interface. The kid-friendly UI uses icons and tips that any young mind can easily understand. Inspired by our own childhood best friends, invisible pals, and favorite toys, we created an animated character sidekick that guides each child through the app, and grows along with them. The visual identity draws from the original aesthetics of YouTube, the mother brand. It’s fun, quirky and embodies the YouTube Kids brand. Design & Art Direction Johanne Bruun Rasmussen & Steffen Christiansen UI/UX Emil Bjerregaard Juul & Steffen Christiansen Animation Evan B. Anthony & Josh Parker Project management Megan Potter

Mono App Design

Mono App Design

Mono is a lightweight, gesture-based mobile app. We created it with a single purpose: to get one thing - no matter what happens - done each day. There are cool things about this project, bur for me it's more about how mobile has changed the way we design. Motion design, transitions, gestures now are part of our jargon and nobody can design any user experience without thinking about that. This project was created by Kickflip, Max Pirsky and Martin Bonov. For more information check out https://www.behance.net/gallery/24752787/Mono Things happen, people cancel, events change. Mono helps you pick the single most important task and set urgency. You get reminded, until it is marked as complete. By gathering stats, Mono consistently shows you how well you're doing with prioritisation. Do you have the coding skills required to make it a reality? contact us at hi@kickflipx.com

Deezer Material Design

Deezer Material Design

Following our Material Design Monday tradition, we bring a really cool project shared by Rico Monteiro from Campinas, Brazil. It's the redesign of Deezer applying Material Design. Some elements that I'm loving about Rico's design - the dark theme aligned with a beautiful color palette, the condensed font for the title on the action bar and the simplicity. I definitely will employ some of these insights for the Abduzeedo app. "Deezer is the largest music catalogue in the world at your fingertips, with over 35 million songs. Deezer is the best way to listen to music on your mobile, tablet or computer". For more information check out Rico's portfolio at https://www.behance.net/ricomonteiro

Nike. New Look & Concept

Nike. New Look & Concept

This weekend I started working on a simple prototype for the Abduzeedo Android App and will likely be able to share something with you next week. Meanwhile, I would like to share a reference that proved useful as I set out to design my app, it's the mobile app concept for the Nike+ app by Maximin Erionov. Some of the elements that I like in his concept include the article screens, some full bleed screens like the one with David Beckham and the News page.

Abduzeedo Material Design - App Navigation

Abduzeedo Material Design - App Navigation

Last weekend I started the process to design the Abduzeedo mobile app and web for Android. The goal is to apply Google's Material Design style to the new app, but in order to do that we have to rethink quite a few things. The first thing we did last week was to get used to the spec, get files, assets and resources ready to start exploring. This past weekend, I spent more time thinking about how the navigation would be and then designing the look of the app. In this post I will walk you through some of the basic concepts I have in my head for the navigation of the app. Navigation One of the apps that I think has a great navigation is Newstand and the Play Store. There are a few things that I like about them: Gestures for navigation Seamless transition for different verticalsl The experience feels natural This model is not new, I remember some of the first iPad apps, was Wired Magazine, if I am not mistaken, used the same style. Actually magazines on tablets still use the same model. Vertical scrolling for the content about that topic and horizontal for different verticals. Some things bother me a little bit: The horizontal navigation limits the interactions for the specific vertical, we wouldn't be able to have another horizontal navigation Discoverability: It gets complicated for users to see all categories, either horizontal or vertical. If users scroll 3 panels to the right, it would take them another 3 screens to expose the navigation. Simple prototype in Keynote Keynote is a great tool for simple motion studies. You can simply create slides and use Magic Move to animate the objects from one slide to the other. Below you can see the simple prototype I put together to see how this idea would look. Based on the blog's stats, we know that users pretty much pass the second pagination. We also know that they don't click on the navigation very often either. The site is pretty much what they see. Because of that I think making the app more browsable will make a big difference. The cost of gesture seems to be much cheaper than the burden on clicks and page requests. The top navigation still bothers me. I would love to have just the content, and not navigation at all. One of the apps that does that really well is Facebook Paper. I like the way they handle the navigation by using real content. There are a few ideas to consider: Expose the navigation when user scrolls, both vertically or horizontally Use the pull to refresh style to expose the navigation Based on simple keynote animations I think a mix of both cases might do the job. The simple wireframes gave me an overview of how the navigation might work. In terms of UX/navigation, the app is quite straightforward and it won't have more than 2 levels of hierarchy. Users see an article teaser and then the full view. The full view might have some related articles, but the idea is that every article details would be a modal, by clicking on related articles, users would leave the modal. By clicking on a different article, users would go back to a modal again. Next week my goal is to prototype this model with HTML and Javascript to test on my phone. Nothing fancy, I just want to see how it feels on hand. After that we can go back to visual and motion design. It's important now to see the big picture, before getting too immersed in the details.

Mobile Design - Article Pages

Mobile Design - Article Pages

Yesterday I posted some navigation examples for the new Abduzeedo Android App. We will be following the Material Design style guide provided by Google but of course we will try to add our brand and character. Today I will share some references for content layout. This is my mood-board in a way and will definitely prove useful in the next step of the design process.

Mobile App Navigation References

Mobile App Navigation References

Last weekend I started the design process for the first Abduzeedo Android app following Google's Material Design spec. If you follow the post you will remember that I ended with a big question mark: how to create a simple yet discoverable and effective navigation without bloating the UI? It's indeed a tough problem to overcome and I have been thinking a lot about that. In this post I list some references in terms of navigation that I like. Some are aesthetics, others function but I think there are some good ideas. Also if you have any examples of effective navigation please share with us here on Abduzeedo.

Abduzeedo Material Design

Abduzeedo Material Design

This weekend I started working on an Android mobile version of the site using the Material Design spec. The style-guide is super complete and covers a lot of basic visual design needs like grid system, typography and color palettes. Besides that Google was awesome to provide sticker sheets in Photoshop, Illustrator and Sketch. So for the next couple of weeks I will be exploring some new designs for Abduzeedo and will be sharing with you here. In this first post I will share my first steps, downloading fonts, files and basic layouts. I would love to hear your feedback and also if you want to join the redesign of Abduzeedo please do share and we can definitely apply your design tips and give all the credits to you. Getting started The first thing to do is head over to Google Design (http://google.com/design/) and check out the spec, communities and everything available. After that focus on the spec because there are so many cool things already done for you so you can spend time trying to solve your design problems and improving your product. Typography My idea is to design an Android app, so I will first try to stick with Roboto for the font, but later on I might try to bring back some of our current design which used Varela Rounded. So again, download the font and install it so we can get started. Resources Besides downloading Roboto, make sure you get other resources available on the site as well, including layout templates, sticker sheets and icons. I downloaded the Components sticker sheet for Sketch for my project. Example of the sticker sheet in Sketch. All components I need to start designing my mobile app. References Another important thing is to know where to look for some references. Of course there are much more than just digital references but it's good to see what others have been doing with the Material Design spec. That said, Materialup is a great website with tons of amazing examples from visual to motion design. Designing the app Abduzeedo is a website that is all about images, we started it as a way to share images and other things that inspired us and because we decided to write it in english we were always trying to be short because of the limits of our english skills but also because we knew that there was a universal language commonly understood by all and images do an amazing job of speaking to that. That said for the mobile app, based on stats, we believe there are some things we could explore: Horizontal navigation for different categories (tabs) Full screen images for the featured content like Flipboard Simple yet elegant grid for verticals. Questions we always ask ourselves: Do we need description text besides the title? What metadata do we need to display? Could we not show title at all, just the image? How will we handle ads? Those questions are extremely important for us to set some constraints. Advertising is always the most complicated, at least on desktop, due to the format sizes that usually are fixed and not responsive. For mobile, at least for the first part, I won't bother with ads. I know it's wrong but I want to focus on creating a super compelling visual experience. The first thing I did was to get one layout template. The dark theme looks interesting, but it's quite different from the desktop experience. I won't scratch it off my list but I decided to try a light theme using the tabs navigation. As you can see below, it definitely looks very coherent with our current experience. One version I also explored with the Abduzeedo symbol in the center of the app bar. I know that it's not in the spec, but as I said, I want to explore ways to apply the style but not get limited to it. Another thing that you can see in the mocks, is that I tried to use cards. I am not a fan of cards, but it's important to explore all possibilities. Explorations The navigation with tabs feels good to me, especially in apps like Newstand and Flipboard. There are a couple of issues I encountered: The navigation tends to take a lot of real state. Is there a smarter way to solve that? Facebook Paper does a great job with gesture navigation and pretty much a transparent UI. How discoverable will it be for the users and also how many tabs should the app have? Below you can see some explorations with the Featured screen which would have 1-3 articles using full screen images with big and bold text. Swiping to the left we would have the Recent tabs, which is the current stream of our website. For this session my idea is to have full width content with 8dps space between content inspired by the Inbox. For the vertical areas I explored a grid with just images. The idea sounded good in my head, but the first exploration looked a bit too overwhelming for the users, especially due to the lack of text. It's hard to understand what's going on. These explorations gave me some clear understanding of the direction to follow and that I had to simplify the design even more. Simplifying By removing the navigation the design gets to a level of simplicity that really pleases me. The featured screen really makes the image shine. The grid seems a bit weird, I tried to keep the 72dps left alignment for the title, it works for that screen, but for the Recent screen it was a bit to much, so I moved back to 16dps. To increase contrast, I decided to put the text over the images on a overlay block using a color extracted from the image. The first one you can see has a green color. To make it more subtle I changed the opacity to 70%, that way we can see the photo but still read the text quite well. The logo on the top right works really well, but I have to think about the navigation, that will be a much longer conversation To be continued... This is just the beginning of this process. I will try to keep this going for the next couple of weekends, going through the whole process and ending with dynamic prototypes. As I said, I would love to see you guys trying as well. I am curious to see what you guys would come up with for the Abduzeedo mobile design. So feel free to share with me via comments or via email at abduzeedo@gmail.com. Thanks so much and till next Sunday.

Android L Player Concept

Android L Player Concept

Since Google introduced Material Design almost a year ago it's amazing to see more and more designers adopting the framework. Enter a project that Anatoly Nesterov created for a music player employing this new visual language. It's awesome to see that the design patterns translate really well into his experiment and I must say I am now inspired to experiment on a version of Abduzeedo Material Design for the mobile web. For more information check out Anatoly's portfolio at http://snazzis.com/

Frame - Prototyping tool for desktop and mobile

Framer - Prototyping tool for desktop and mobile

Prototyping is a vital part in designing great products, from a simple poster to a car, it's extremely important to test designs in situations that resemble the real usage environment. My background is in Industrial Design and we used to prototype everything. Then I moved to graphic design and again I was always printing and checking to see how my designs felt. Now in the digital world, and with mobile taking over it's really important to be able to simulate the products in the handsets. There are quite a few frameworks out there but I would like to share one called Framer. Frame can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote. I started using it a few days ago, recommended by Noah Levin, a fellow Googler and the amazing designer behind the Google App for iOS with Google Now.? Framer is a prototyping tool for animation and interaction on desktop and mobile. Features Photoshop: Framer integrated with Photoshop to quickly export assets and set up a project. Animation: Animate any view in full 3D space with spring physics and bezier curves. Performance: Hardware accelerated for high frame rates. Based on CSS keyframes. Flexible: Works well for desktop, mobile and tablets. Plays well with the rest of the browser. Video preview Framer Photoshop from Koen Bok on Vimeo. For more information, to check out some demos visit http://www.framerjs.com/

Mobile Usability - Book Suggestion

Mobile Usability - Book Suggestion

The book suggestion of this week is about designing for mobile devices, more specifically about how to create better and more usable experiences for small screens. The book we are talking about is titled Mobile Usability by Jakob Nielsen and Raluca Budiu. Book description How do we create a satisfactory user experience when limited to a small device? This new guide focuses on usability for mobile devices, primarily smartphones and touchphones, and covers such topics as developing a mobile strategy, designing for small screens, writing for mobile, usability comparisons, and looking toward the future. The book includes 228-full color illustrations to demonstrate the points. Based on expert reviews and international studies with participants ranging from students to early technology adopters and business people using websites on a variety of mobile devices, this guide offers a complete look at the landscape for a mobile world. Author Jakob Nielsen is considered one of the world's leading experts on Web usability. He is the author of numerous best-selling books, including Prioritizing Web Usability and the groundbreaking Designing Web Usability, which has sold more than 250,000 copies and has been translated in 22 languages. Buy Now

UI Design: Swing for iPhone

UI Design: Swing for iPhone

It's been some time since our last UI Design post, but I was saving some great looking applications for you guys! There are some crazy good looking apps with fantastic design being made right now. One of these apps is the Swing, a free music app for the iPhone. The designer responsible for this is Enes Danış, from Turkey. He's got an awesome portfolio which you should check! I hope you enjoy these, and if you got your own UI Designs, drop a comment! Cheers. ;)

The Mobile Book by Smashing Magazine - Book Suggestion

The Mobile Book by Smashing Magazine - Book Suggestion

The book suggestion of this week is about mobile design and development. I started reading the book but haven't finished yet, however I can say that the parts I read were really good, not only because some of my favorite authors wrote them but they are easy to read, very motivating and provide us some great insights from professionals with deep knowledge of the field. So the book I am talking about is the new Smashing Magazine Book titled The Mobile Book. Our brand new printed Mobile Book features the most important things that you need to know as a designer, developer or mobile strategist for your websites. You’ll dive deep into the peculiarities of the mobile industry, explore responsive design strategy, design patterns and optimization techniques, learn about wireframing and prototyping for mobile as well as the guidelines for designing with gestures and touch... - Smashing Magazine Full Product Description The future is mobile. As more and more people are turning to mobile devices, designers and developers are facing new challenges and opportunities. Web design has to adapt. But before it can do so, we have to do our homework — understand the new medium and discover the right techniques and tools to design for it. Our brand new Mobile Book serves exactly this purpose. When it comes to mobile, there are more open questions than definitive answers. Due to its fragmentation, it's not so easy to understand how mobile market looks and works in general. How to pick the right mobile strategy and select the right approach for your website? What design patterns and what UX techniques can assist you to design quicker and better for mobile devices? What design patterns do you need to be aware when building responsive websites and to optimize the performance for mobile? When you design with mobile in mind, how exactly should your design process be different from traditional design workflow? Our new book attempts to answer these questions. Well-known experts such as Peter-Paul Koch, Stephanie Rieger, Trent Walton, Brad Frost, Dave Olsen, Josh Clark and Remy Sharp have contributed to the book to present the most relevant and valuable insights. - Smashing Magazine Authors Jeremy Keith Peter-Paul Koch Stephanie Rieger Trent Walton Brad Frost Dave Olsen Dennis Kardys Josh Clark Books are always a great gift to give to our friends and to ourselves. Besides that, books, like the Smashing Magazine, help the design community to strive and evolve. We here over at Abduzeedo support not only Smashing Magazine but all designers and enthusiasts that help us to move forward For more information and to buy the book visit http://www.the-mobile-book.com/