articles on

UI Inspiration: Mobile Interactions

UI Inspiration: Mobile Interactions

In one of my previous articles, I mentioned that we will see more and more subtle interactions in the upcoming weeks and year. For this week's showcase, we had fun handpicking and looking at  Mobile Interactions. The thinking behind  Mobile First is not quite new but still strong enough for us to think about this perspective first in any of our projects. Figuring your user experience on smaller devices should always the primary thinking because when the screen size goes bigger, as we know things are just easier. Designed by Artem Borodynya Designed by Barthelemy Chalvet Designed by SFCD Designed by Sergey Valiukh Designed by Cuberto Designed by Farzad Ban (adsbygoogle = window.adsbygoogle || []).push({}); Designed by Ramotion Designed by adhrian Designed by Anna Gerasymenko Designed by Vitaly Rubtsov Designed by Sergey Valiukh Designed by adhrian

Fantastic UI Design by Gal Shir

Fantastic UI Design by Gal Shir

Nothing like an awesome set of Interface Design to close the week. There are some very talented designers out there doing sweet interfaces... one of them is Tel Aviv based designer Gal Shir! Gal comes up with some very stylish pieces of UI design. These are only a handful of his work! For more of it, please visit his portfolio at Dribbble! I hope you enjoy these as much as we did! Cheers. ;)

Holiday Card - Adobe Capture and Illustrator Tutorials

Holiday Card - Adobe Capture and Illustrator Tutorials

It's that time again, the most wonderful time of the year, at least that's what the old song says. I love the holidays, and Abduzeedo was born at this time back in 2006, which makes me even more nostalgic. But the reason of this post is not to talk about the past but to showcase a tutorial that illustrates the future at least in terms of how mobile tools can be incorporated in your design process replacing old things like scanners. This tutorial is a courtesy of Von Glitschka. He shows us how to create a Holiday Card using Adobe tools like Capture and the old classic Illustrator. Step 1 Even in a digital age, I like to begin with a pen and paper. This design started off as a rough sketch to work out the main art for our design’s theme. Step 2 Working from our rough sketch, I inked the final line work with a brush pen to imbue it with nice thick and thin lines. Step 3 Using Adobe Capture CC, I transformed my art from ink on paper to a digital vector image. I also used the slide control to adjust the exposure and add/subtract detail. Step 4 Once I’ve captured my artwork, I quickly removed the unwanted content, including the pen captured in this image, using the select/deselect slider. Step 5 Using Creative Cloud’s CreativeSync feature, I easily saved my captured assets into Creative Cloud Libraries. From there, I was able to access my vector artwork across Illustrator CC and Photoshop CC within seconds. Step 6 Since installing Adobe Capture CC, I take pictures of anything and everything for inspiration! I’m particularly fond of these anime manga patches, which I used to develop my color theme. The best part – all of these swatches can be easily saved to CC Libraries and acessed in Illustrator CC, InDesign CC and Photoshop CC. Step 7 Once I transferred my artwork from Adobe Capture CC into Illustrator CC, I began to add colors to my penguin. I wanted the color to loosely fit within the lines, so I used the Pen tool and loosely followed the shapes. Step 8 Seeing the colors captured with Adobe Capture CC helped me adjust my overall color scheme to improve my design. Instead of black, I shifted the line work to a darker blue. This kind of fluid workflow is facilitated by Adobe Capture CC because it allows me to easily experiment with a wide range of swatches at a moment’s notice and consider color themes I might not have thought of before. Step 9 Focusing on the background, I used my custom color theme to build out the background image and snow. Step 10 With Adobe Capture CC, you can leverage analog methods and easily integrate them into a digital workflow. For this design, I wanted authentic-looking brush strokes, so I used an actual paint brush and black acrylic paint to create the artwork. Step 11 I love making custom brushes with Adobe Capture CC. For this, I captured my hand-painted strokes, then cropped out what I didn't need. Using the filters, I adjusted and customized my brush stroke to transpose it into an asset. Adobe Capture CC allowed me to test drive the brush within the app so I could see how it would look once I accessed it in Photoshop CC or Illustrator CC via CC Libraries. Step 12 Once I saved my brushes to a CC Library, they automatically appeared in my CC Libraries panel in Illustrator CC. I drew a stroke and applied the new brush design to it. The process doesn’t get any easier, and the results look authentic and add a lot of organic flair to the overall aesthetic. Step 13 I could have used a font, but almost everything in this design was created by hand, so I decided handletter the type as well. I sketched the words on paper, scanned it in and used the Pen tool to complete.   The final type in place really added a nice level of fun to this design. Looking at my design, I realized I was missing an integral piece – SNOWFLAKES!   Instead of cluttering the design with ornate graphics of snowflakes, I decided to use a repeat pattern. I first created a Pattern swatch (shown on left) in black and white, then adjusted the opacity of the various white flakes as they’d appear on the background color. Once I was happy with the snow, I dragged the art into the Swatches panel and began using the pattern.   To adjust the pattern tiling, adjust the elements of the pattern, or recolor it, I just double-click on the Pattern swatch to enter Pattern Editing mode in Illustrator CC.   My initial color composition was blue, but creativity is all about exploration. I played around with the color themes to develop three separate color iterations. I settled on the green color scheme for my final holiday card design. The final card design is fun, as was the process to create it using Adobe Capture CC and Illustrator CC. In total, this project took me about 3 hours. For more information check out http://www.glitschkastudios.com/

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

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.

Steijer Mobile & Deskotp Web Design

Steijer Mobile & Desktop Web Design

I will be posting more and more about web and UI as I have been spending most of my spare time working on the new Abduzeedo design. I have been looking for clean and simple designs that focus on editorial grids. I don't know how easy it will be for me to implement here on Abduzeedo given the biggest constraint of advertising which is the only way we can keep the blog alive. Anyway, if you know any cool designs for reference be sure to share with us like the project by Ross West for Steijer. Ross West is art director and designer from London, UK. For more information check out http://rosswest.co.uk/ Steijer design, research and develop well crafted, affordable furnishings to endure passing trends and vigorous family use.

Android Wear Inspiration

Android Wear Inspiration

Smartphones have taken over and have become, for the majority of people, their first computer and singular vessel to access the internet. With the phones getting bigger and more powerful it seems that there's an opportunity for smaller devices to shine as a way to prevent having to take your phone out of the pocket so often. I am talking about the smartwatches. There are good options in the market with Pebble and Android Wear being the most famous. In this post I will share some Android Wear inspiration for those looking for some references for their new watch app.

Hospital App - Concept by Jurgen Ploeger

Hospital App - Concept by Jurgen Ploeger

Designing mobile application has become what designing websites were in the Web 2.0. There are many differences between these two medias, for websites context was more predictable, someone would have to be using his/her computer. With mobile phones the context plays a huge role and understanding where, when and how people will interact with your product will give you the insights you need to design a better product. Today we feature a really cool concept app design for nurses created by Jurgen Ploeger. This concept hospital app let's nurses monitor their patients, e.g. measuring their blood pressure (systolic and diastolic) multiple times a day, which will give them an overview of any progression Jurgen Ploeger is a Dutch UI/UX & Interaction Designer currently based in Amsterdam. At the moment he is freelancing in his spare time, alongside being part of FRONTISME where he pushes pixels as designer. He is still attending school as a multimedia design student. Via Behance

App Design: Spleat

App Design: Spleat

Product design has taken a whole different level with mobile phones and their apps. The idea of building a product has moved from the whole idea of line of production and big factories to just people with great ideas and effective execution. The importance of design has become one of the biggest differentiators in terms of products and that has foster a new generation of designers producing really good work. Spleat for iPhone is a good example of how to present your design in a rational way. Spleat is the mobile paymtent app for your social life, allowing restaurants, bars and clubs to offer customers a sleek and unique way to pay and split their bill via their mobile phones This project was created by Dima Shvedun, a talented senior manager & designer of user-experience and interaction design with the proven know-how to combine creative and usability viewpoints resulting in world-class Web and Mobile applications. For more information visit https://www.behance.net/dimashvedun

UI Design: Folding App

UI Design: Folding App

The time for a new post on UI Design has come and here it is, a fine example of a folding app design. This is a fresh idea for a cool app, which I'd love to see first hand. Check it out! This UI piece is the idea of American designer Brett Withjack. It's a mockup only for his portfolio, I'd definitely use it to check on news. It looks pretty nice with a mint design for sure. For more of Brett's design ideas check out his portfolio at Behance. Also, let us know what do you think about his folding app idea. Cheers! ;)

iOS 7 Visual Language Inspiration

iOS 7 Visual Language Inspiration

With previous versions of the iOS, Apple introduced and in some opinions, overused textures, especially the linen one. With the announcement of the new version of iOS, the iOS7, Apple brings back an old effect introduced by Microsoft Windows Vista, the blurred background images over UI transparencies. It can definitely create striking visual effects when used in the right way. In this post we will showcase some great examples of designers employing this texture effectively. Check below for some beautiful, hand selected iOS 7 UI explorations illustrating the background blur effects.

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/

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/

Beautiful Responsive Websites

Beautiful Responsive Websites

Smartphone usage has spiked since the iPhone release in 2007. Nowadays with Android, iOS and other smartphones out there it's impossible to not think about making web sites friendly to different screen sizes. We know that these phones are capable of a lot of cool things and you can always zoom in when checking regular sites, but if the technology allows us we must take advantage to provide the best user experience to our users. To illustrate this a little bit better we picked 10 responsive websites that were a source of inspiration for the new Abduzeedo design. Check out this websites and resize the browser to see how they behave in different screen sizes. It's always good to see how designers manage to adapt the navigation or big promo areas, especially for the mobile version. Microsoft Bigyouth Gareth Lawn Siyelo Build Coworchicago.com Fiafo Spark Box Google Chrome

Logo Design: Mobile Devices

We keep going through our weekly journey checking out great logos! We're thinking ahead and we want to find new topics, good ones, to share with you guys. Last week we had a great post aboutlogos with bolts, and today it's all about logos with mobile devices! Every week we search through our favorite galleries: Logopond and Dribbble. Both are a great communities for designers everywhere. Also, if you you'd like to suggest ideas for the next subjects, please, tell me by sending me sending me a tweet: @paulogabriel. Cheers! ;)

Watch Flash content on your mobile device...without Flash!

This could be a game changer, a way around that pesky nuisance of not being able to view Flash on your mobile device, and a big middle finger to the squabble between Apple & Adobe. Smokescreen is a new app (javascript code? or whatever) that will allow you to convert your Flash file into HTML5/Javascript content. That's right, no more Flash plugin needed and viewable on any device that supports HTML5 & Javascript (hello iPhones & iPads). Even better yet, Smokescreen will be open source and free! I can't wait to start using it. Check out this demo on the iPad: Smokescreen - iPad demo #1 from Chris @ RevShockAds on Vimeo. See more demos on their website smokescreen.us