UI Inspiration: This week's selections from Virgil Pana, UI8, Tubik and more

UI Inspiration: This week's selections from Virgil Pana, UI8, Tubik and more

It's the weekly moment for our collection of UI/UX interactions to boost your UI inspiration. We will focus on cool animations, layout designs, UX thinking and more. We will mix it all from static, dynamic and even live prototypes, this might be a great article to bookmark! For this week, we have two "error" animated prototypes from UI8, a smooth interactive mobile design of a watering tracker app and a lot more. Hope you will enjoy! In this collection we are featuring the work from Virgil Pana, UI8, Tubik, Divan Raj and more. More Links For more, check out Dribbble Follow my tweets @aoirostudio Follow my pictures on Instagram via Dribbble Design by Virgil Pana Design by UI8 Design by Tubik Design by Virgil Pana Design by Divan Raj Design by Divan Raj Design by Aurélien Salomon Design by Tubik Design by UI8 Design by Aurélien Salomon Design by Suthan S. Design by Divan Raj Design by tubik Design by Outcrowd

Interaction Design & UI/UX: A closer look at the Tesla Model 3 touchscreen

Interaction Design & UI/UX: A closer look at the Tesla Model 3 touchscreen

I am a great fan of Tesla and also of Elon Musk, the care of his level of thinking for the user experience and vision simply changed the game of the entire car industry. Earlier this year, they have introduced the Tesla Model 3; the mid-size all-electric four-door luxury sedan starting at a very affordable price. As a designer, what struck me the most was the removal of the "conventional" interior car interface replaced by a 15-inch touchscreen. So many thoughts went through my mind regarding how the driving will be effective with such a large screen in the center console. We are taking a look at the work of Michael Cherkashin, a Los Angeles-based creative director at HUG. He is walking us through the original concept and also all the challenges they have encountered for designing the interface of the Model 3. Enjoy the read! Michael Cherkashin is a creative director over HUG. A branding agency on a mission to rely on for beautiful design and impactful outcomes. Based in Los Angeles, CA, USA, Michael is also Director of photography at Inhale Films. Our vision for any user interface is simple: efficiency should be as close a possible to 100%, in other words, a user should be able to perform the desired task with as little effort and distraction as possible. This would be especially pertinent to vehicles as safety is such a priority. We want to share this philosophy with drivers, fellow engineers at Tesla and other car manufacturers. We've designed intuitive multi-touch gestures and a responsive grid that can be customized to suit both driver and passenger needs. More Links Learn more about Michael Cherkashin at hugagency.com Follow Michael Cherkashin's work on Behance UI/UX & Interaction Design (In His Words) Challenges Model 3 has been released with a new 15-inch touchscreen, which is wider than previous screens on Model’s S and X. Whilst it looks great, some areas of the screen and functionality have become harder to reach. This may seem like a minor difference, however, when operating a vehicle it could become significant, as every moment is crucial. And, although the Model 3 was designed to be autonomous, in some countries, with heavy winters for example, the necessary infrastructure and support is yet to be in place, so the need for a driver in an autonomous vehicle is still required. Another challenge arises from the lack of physical buttons. In other vehicles your tactile sense can be used to find the button or adjustor without taking your eyes off the road. However, navigating a touchscreen requires the driver taking their eyes off the road; when encountering bumpy roads, it would be even more challenging holding a steady hand on the right area of the screen. To combat this we came up with two solutions. The first is an adjustable grid where users can move panels of the dashboard to best fit their needs. For instance, the media player can be moved to the passenger's side so they can enjoy playing DJ, whilst the map can be moved in closer view to the driver and expanded or hidden in case of autonomous driving. The second solution introduces multi-touch gestures that can be applied to any area of the screen, and don’t require a driver to be distracted by looking away from the road to navigate functions. These gestures would be intuitive and replicate physical buttons. Video Two Finger Gestures Using two fingertips, drivers or passengers can control the multimedia player, even when it’s not displayed on the screen. Each gesture has been designed to replicate the physical buttons and dials we’ve become accustomed to, for example, the volume wheel rotation. • Tap to play and pause • Rotation brings up the volume • Tap and scroll sideways to fast-forward • Quick scroll sideways to change media • Scroll top and bottom to change channels Three Finger Gestures Using three fingertips, drivers or passengers can adjust climate control by rotating left or right. When adjusted from the driver’s side of the screen, the temperature is controlled for the whole vehicle; alternatively, applying the same gestures from the passenger side enables dual climate control. • Rotation on the driver’s side controls temperature inside the whole vehicle • Rotation on the passenger's side turns on and controls dual climate control • Scroll top and bottom to adjust fan level Interface Look and feel is another key factor to consider, especially in such a beautifully designed Model 3. The interface should match the quality interior and exterior. We used a simple and smooth design, with a very friendly and warm feel. The buttons are large, with plenty of surrounding space so it’s easy to tap while driving. The colors are balanced to be clearly visible in bright sun, but soft enough to be less distracting for the driver. Night Mode Once the sun starts to set and night falls, the screen will switch to a darker night mode, providing less glare and distraction for a better driving experience. The brightness level is adjustable by moving one finger down from the top edge to decrease the light, and up from the bottom edge to increase the light. Notifications Notifications are made to be intuitive and easy to deal with. For example, whether you are mid phone call or cruising along, when your vehicle’s battery is running low the option for taking direction to the nearest Supercharge station is one simple touch away.

Redesigning Apple OS / MacOs 2020 with Edge to Edge Macbook Concept

Redesigning Apple OS / MacOs 2020 with Edge to Edge Macbook Concept

We are taking a look at a very interesting redesign by Montreal-based designer Aurélien Salomon on a concept for Apple OS / MacOs 2020 with Edge to Edge Macbook. First of all, we can't help to notice the edge to edge MacBook design, what do you think? I am not too keen on the margins but it's quite interesting though. Aurélien does a remarkable at this presentation and he's pretty amazing to see his ideas/concepts for the finder, dark mode, Safari and of course Augmented Reality. What do you think of this concept? Aurélien Salomon is a UI/UX/AR/Motion designer from Montreal, QC, Canada. We love his work on ABDZ, make sure to check his Behance for more. Apple OS concept redesign ( ux, ui, product, augmented reality, operating system, windows, apple, ios, safari, music, finder, design, motion, animation, 3d). This is a concept that I had in mind for a long time and I am happy to share it with you today. It is an unsolicited visual direction exploration done just for fun. The goal wasn't to solve every problems and it is by no means stating that it is "better" that what we have now. I learned a lot working on it and it was a lot of fun. More Links Learn more about Aurélien Salomon at gumroad.com/aureliensalomon Follow Aurélien's work on Behance Interaction Design & UI/UX  

Web Design & UI/UX: Mindshapes™ Concept

Web Design & UI/UX: Mindshapes™ Concept

It's an interesting concept that involves web design & UI/UX by Szymon Łucarz for Mindshapes™. It's an exploration of your mind through our era of technology. The web design is an immerse experience of subtle interactions to explore shall we say the different state of your mind. It's quite an astonishing design, I wish there was a live app to try. One thing though, we gotta give Szymon for his presentation skills, it's quite lovely! What do you think? There isn't much information about Szymon Łucarz but you still should follow him on Behance. More Links Learn more about Szymon Łucarz via Behance  

Interaction Design: Learn some basics of Sign Language with Uber

Interaction Design: Learn some basics of Sign Language with Uber

To me, it's an interesting take on building your brand and at the same time listening to your community on what can be done to improve the overall experience. Let's take Uber for example who recently built what they called a series of features in the effort of the Deaf or Hard of Hearing community. It's a beautiful step in the right direction. We are taking a look at the interaction design of their new microsite where you can learn the basics of American sign language. You'll learn how to sign: Thank you, Goodbye and even sign your name. The microsite is rightful simple to navigate and love the intention of expressing a mobile experience. In their Words Unemployment or underemployment in the Deaf or Hard of Hearing community is close to 70%. At Uber, we’re proud to provide earning opportunities to Deaf and Hard of Hearing drivers across the world and in more than 200 US cities. That’s why in 2015 we built a suite of features including flashing trip request notifications, text-only communication, and notifications so riders knew they were being matched with a Deaf or Hard of Hearing driver. Uber Sign Language Today, we’re excited to introduce a tool that helps teach riders simple phrases in American Sign Language, including how to sign their name, hello, thank you, and goodbye. We hope this tool will help start a conversation between our riders and our Deaf and Hard of Hearing partners. More Links Learn more about Uber Sign Language ABDZ in Sign Language  

Interaction Design & UI/UX: 10Cool Projects with 10Clouds

Interaction Design & UI/UX: 10Cool Projects with 10Clouds

We have featured the branding redesign from the kind of from 10Clouds on ABDZ. Let's now take a look at their actual work that involves UI/UX, Web Design and Interaction Design. The series is called: 10Cool Projects (Get it?!), it's a mixture of different projects including an email app, museum app, events app and more. That's definitely a good link to bookmark for your inspiration. 10Clouds is a team of 100+ experienced developers and designers, ready to help you build your web and mobile applications. Check them out on Behance. Selected user interfaces More Links Learn more about 10Clouds at 10clouds.com Follow 10Clouds's work on Behance Photography  

Seattle Aquarium Redesign by Adobe Creative Resident Natalie Lew

Seattle Aquarium Redesign by Adobe Creative Resident Natalie Lew

It's our final day posting about the Adobe Creative Resident Class of 2017 and we're thrilled to feature the work of Seattle-based interaction designer, Natalie Lew. A designer with a passion for thinking of ways future technologies like augmented reality and artificial intelligence can be used in the classroom to teach intangible concepts, we were particularly captured by Natalie's work for the Seattle Aquarium Redesign. The project entailed attracting those who have visited the Seattle Aquarium before to see the site in a new light, and for those yet to go to the attraction to see aquariums themselves in a unique way. Natalie created a beautiful new visual identity for the aquarium, applied that identity to the branding of the design, and designed a new service application to aid those visiting the site. Check out Natalie's journey for the aquarium redesign below and learn more about this rising star and what inspires her here.  Designing the App Experience This is an application intended for a user about to visit the exhibit or already within the exhibit. It does not intend for the aquarium to offer more than it already does; rather, it simply facilitates the activities and exhibits and the aquarium in current existence. Wireframes and Navigation Further Branding As the identity of the Seattle Aquarium relies on far more than just visual UI, Natalie created mockups of what Out of Home advertising might look like, as well as their website and catalogue for print viewing. MORE ABOUT ADOBE CREATIVE RESIDENT NATALIE LEW An interaction designer and recent graduate, Natalie Lew of Seattle is passionate about the intersections of design and philosophy. Her interdisciplinary background in design inspires her residency project, in which she’ll create a toolkit of resources to make user experience design more accessible and available to the creative community.  She plans to start a design studio in the future, so she’ll challenge herself to learn more about working in individual and group settings while constantly receiving and improving based on feedback.   

Web Design & Branding: Heartbeat Agency

Web Design & Branding: Heartbeat Agency

We've featured the work of MindStudios in collaboration Heartbeat Agency for the Unight App. Now, let's take a closer look at the web design and branding of the Heartbeat Agency. Coming from a background of interaction design, UI/UX, and motion; the folks over Heartbeat Agency has the elegance to work it out by building a simple but engaging digital experience. Heartbeat Agency is a digital startup in design consultance that reign in the field of work of interaction design, UI/UX, motion and branding. Based in Odessa, Ukraine, you should definitely check out their work on Behance and Dribbble. The story of how a digital agency had updated their visual identity Project Gallery   Credits Art Director: Stan Yakusevich Product Manager: Dmitry Lepokhin Designer: Vladimir Gruev More Links Learn more Heartbeat Agency at heartbeat.ua Follow Heartbeat Agency on Behance Heartbeat Agency on Dribbble

Interaction Design & UI/UX: Unight Experience

Interaction Design & UI/UX: Unight Experience

Hope everyone have enjoyed a long Weekend with Labour Day. Time to be back and let's start if off with an interaction design and UI/UX of a web and mobile app called Unight. It's a mobile app to help you guide through your city regarding dining and especially nightclubs. For this concept to be fully functional, I would imagine that these locations must be active on the platform. Adding the QR code integration is neat but I wonder if it's still on nowadays. I might be wrong, anyways check it out! Collaboration work between Heartbeat Agency and MindStudios who is web and mobile design studio based in Dnipropetrovsk, Ukraine. You should definitely follow their Behance for upcoming projects related to interaction design. Cool mobile app with direct access to dining and clubbing locations in your city Project Gallery Credits Designed by Heartbeat Agency UX, Business Strategy and Development: MindStudios More Links Learn more MindStudios at themindstudios.com Follow MindStudios on Behance

Interaction Design & UI/UX: Cashtree App

Interaction Design & UI/UX: Cashtree App

We are taking a closer look at the Cashtree App from an interaction design & UI/UX perspective. There is also brand identity involved but let's put that aside on this one. What is Cashtree? With the word: Cash in the app name, you just can't avoid thinking that is related to money. Which is correct since it's an Earn and Redeem Rewards platform aiming users specifically located in Indonesia. It's an interesting approach vs business model since it's based with Pulsa which is prepaid credit for smartphones over there. Give it a look! MinJee Hahm is a UI/UX designer based in Seoul, Korea. Currently working at Cashtree, the project we are featuring today. Looking foward of seeing more of his work in the near future. Cashtree is a digital rewards platform aimed to change the whole ecosystem on the Indonesian Mobile App Market. As a leading online advertising service, Cashtree offers a new way to satisfy both advertisers and customers. By accomplishing missions, playing games, purchasing items, discovering vouchers, exchanging Pulsa and more, people will enjoy an opulent lifestyle through the app. We strongly believe that Cashtree will improve the quality of life in Indonesia more than any other time in history. Project Gallery   Credits Art Direction & UI/UX: MinJee Hahm Creative Design: DaSeul Kim, Muhamad Ridho, Yomi Sunanta More Links Learn more about MinJee Hahm at minjeehahm.com Follow MinJee on Behance

Interaction Design & UI/UX: Sherpahire.com

Interaction Design & UI/UX: Sherpahire.com

An interesting project to share that involves interaction & UI/UX for Sherpahire.com. What is a sherpa? I honestly had to look it up and discover that web design was done specifically for a target audience and for this case as elite mountaineers and experts in their local area. It's an interesting approach since the focal point of the design is all about the search surrounded by a gallery of beautiful imagery. Since the images are part of what's called the center piece, everything else from the typography and micro-interactions are only played as an extra role. Published on Behance is the collaborative work from Alexander Laguta, Kate Laguta, Alexander Aubakirov, Alexei Rezvanov and Andrey Petrunin. All together sharing their expertise in Art Direction to Motion Design. Props to everyone involved. Sherpahire is the unique service allowing travelers to find sherpas and orginize their trekking vacation. We were asked to create a simple and eye-catchy interface allowing to find a sherpa, meet like-minded travelers and get inspired about Nepal as a trekking destination. We have used simple geometrical forms to create general style for Sherpahire brand and easy to follow interface allowing visitor to solve his goal and meet Nepal at a glance. Enjoy! Project Gallery   Credits Alexander Laguta Kate Laguta Alexander Aubakirov Alexei Rezvanov Andrey Petrunin More Links More about this project on Behance

Interaction Design & UI/UX: Kickstagram, an Instagram Marketing Tool

Interaction Design & UI/UX: Kickstagram, an Instagram Marketing Tool

Let's take a look at this interaction design & UI/UX project from the folks over Bachoo Design Studio. Their project is called: Kickstagram, an Instagram Marketing Tool. We've seen many Instagram tools out there but a lot of them lack features that will actually make us use it even more. If you remove the UI aspect from Kickstagram that is simple and clean. I liked the features that complement the application as well like Drafting & Posting and especially the Drag & Drop Scheduling is a neat idea. Bachoo Design Studio is a design team located in Kyiv, Ukraine. They would mainly work into web design, graphic design, UI/UX and more. You should definitely follow their work on Behance. Photo Gallery   More Links Check out Bachoo Design Studio's site bachoodesign.com Follow Bachoo Design Studio on Behance

Interaction Design & UI/UX: Pay App Concept and Prototype

Interaction Design & UI/UX: Pay App Concept and Prototype

We would like to share a simple and yet great enough interaction design and UI/UX of an Pay App Concept and featuring a prototype using Framer. Designed by Seoul-based Jaewoong You, what's interesting here is the language. Instead of having expressed a standard english, I think what is shown here is Korean. I also liked the use of button as toggle to trigger different cards and options. Jaewoong You is a UI/UX designer based in Seoul, Korea. There isn't much more information about Jaewoong but I would suggest to follow his work on Behance. Photo Gallery   More Links Follow Jaewoong You on Behance

Interaction Design & iOS Design: Dribbble Redesign Concept

Interaction Design & iOS Design: Dribbble Redesign Concept

You know how we feel about redesigns on ABDZ right? It's always a good thing to take a look at them and see what was the general thinking behind each concept. What was improved from the actual product. That way, you can definitely have a better idea. It is for this redesign concept for Dribbble that involves interaction design and iOS design. Designed by Vietnam-based designer Tran Mau Tri Tam, we are introduced to a simpler UI. I think what was the most interesting feature highlighted by Tran was Custom Tabs where you can organize your own tabs. A simple feature that can increase the overall user experience. Tran Mau Tri Tam is a UX/UI designer based in Ho Chi Minh City, Vietnam, he is also an exclusive elite author over at Envato Melbourne. You should definitely check out his latest work via his Behance. I decided to challenge myself make a small concept that would let you know what I would like to add into Dribbble iOS App's features. I also redesign almost visual interface what may make Dribbble looks better, at least for me Concept Gallery   More Links Follow Tran Mau Tri Tam's latest work on Behance

Interaction Design & Motion: Defind, the Word Finder App

Interaction Design & Motion: Defind, the Word Finder App

We are taking a look at this interaction design & motion project of the iOS app called: Defind. What is it? It's an app that will search of word for you by you defining its definition. The concept might be useless to some but I liked about this project is about its execution, flow, motion and overall UI design. Designed by Alex Pluda, the app is taking through different sections to find that particular word from research, synonyms, translation and more. Alex Pluda is working as general manager at A Maza Inc where he focus his work into interaction design, UI/UX and graphic design. You might have recognized his Barry the Touch Bar project, check it out via his Behance. How many times it happens we can’t remember that word we need. This time has come ti an end (almost). Defind helps you to remember any word just by typing a definition.   Links Make sure to follow the latest from Alex Pluda on Behance

Interaction Design & Art Direction: The Refugee Nation

Interaction Design & Art Direction: The Refugee Nation

An Interaction Design and Art Direction for Refugee Nation by Justin Au. I don't know if you guys remember at the last Olympics, we've witnessed a team of refugee athletes compete in the games. A first in the history and since they had no official "home" to call their own, no anthem and no flag. A flag of the "Refugee Nation," created by Syrian refugee was orange and black, to represent the life vests the athletes wore as they set off in boats for a better life. It's quite a beautiful story, I would definitely the full project via his Behance. Justin Au a designer and an art director working at Ogilvy & Mather New York. Currently based in Brooklyn, you should definitely follow his Behance where you'll find work for IBM, 36 days of type and more. Video Bringing the world together to support Refugees. For the first time in Olympics history, the games saw a team of refugee athletes compete in the games. But unlike other competitors supported by their nation countries, these champions had no official "home" to call their own, and thus, no anthem and no flag. The flag of the "Refugee Nation," created by Syrian refugee Yara Said, was orange and black, to represent the life vests the athletes wore as they set off in boats for a better life. Another Syrian refugee, composer Moutaz Arian, created a wordless anthem to convey a universal message of love and hope. The Refugee Flag has since become an international symbol of welcome and inclusion. It is hoisted all over the world by different people, organizations, and even countries as a sign of solidarity in support of refugees. I was tasked with designing a web experience that captured and explained the idea behind the flag and all that it stands, to visitors from all over the world who may have stumbled upon its colors.   Links Follow Justin Au on Behance

Mobile Application & UI/UX: A look at Pay & Go Wallet App

Mobile Application & UI/UX: A look at Pay & Go Wallet App

I am not a true believer of fancy mockups when reviewing a UI/UX project, what's more, interesting is the process behind its concept. The user flow, the wireframes, and the actual UI are all part of it all. Let's take a look at this mobile application of an app called Pay & Go. Designed by the folks at Meat Agency, their goals were to basically change your payment behaviours. Meat Agency is a studio that specialized in product design where they have worked with startups and brands on researches, prototyping, copywriting, branding, visual design for web/interfaces and all kinds of development. Pay & Go is an electronic payment platform, that helps everyone on the everyday needs It saves your time and gives a piece of mind for the periodic and instant payments of your life. Basically it changes your payments behavior.   Links More information about Meat Agency: meat.agency Follow them on Behance