articles on

UI Inspiration: This week's selections from Willie.H, Arnar Ólafsson, Zak Steele-Eklund and more

UI Inspiration: This week's selections from Willie.H, Arnar Ólafsson, Zak Steele-Eklund and more

It's that time of the week for our collection of UI/UX interactions to boost your UI inspiration. We are focusing 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 some cool interactions with a recipe app concept and a very intuitive animation for a freelancer app on meetups. In this collection we are featuring the work from Willie.H, Arnar Ólafsson, Zak Steele-Eklund, Anton Aheichanka and more. More Links For more, check out Dribbble Follow my tweets @aoirostudio Follow my pictures on Instagram via Dribbble Design by Anton Aheichanka Design by Martin Strba Design by Willie.H Design by Pawel Waraksa Design by Arnar Ólafsson Design by Minh Pham Design by Zak Steele-Eklund Design by Andrew Aquino Design by Stugbear Design by Cuberto Design by Kane_D Design by CANAAN Design by Ramotion Design by Zoeyshen Design by Johny vino™ Design by Ales Nesetril Design by ∆ Studio–JQ ∆ Design by Hrvoje Grubisic Design by Lukáš Straňák Design by Matteo Pasuto Design by M S Brar

Web Design & UI/UX: Vissla Redesign Concept

Web Design & UI/UX: Vissla Redesign Concept

You guys are fully aware of how I feel about redesigns right? But with the end of the year coming soon, I decided to take a stab at a new perspective. Knowingly that most designers who are working on redesign concepts should know (or know) there are SO MANY details we need to take in consideration. It's mostly not about the UI. Again, for this redesign concept by Simon Kratz for Vissla , what I liked the most about Simon's work was his own approach. He is compassionate about the brand and using at the same time his UX skills/thinking for the completion of his vision. Simon Kratz is an interaction designer based in Basel, Switzerland. Simon is mainly focusing his work on web design, UI/UX and interaction design. You should give him a follow on Behance. Finally had some free time over the last weeks and decided to challenge myself with a quick design exploration and ran a small side project. I have been obsessed with VISSLA for the past few months and decided their current web experience should be more in line with their forward-thinking philosophy and outstanding products. VISSLA is a brand that represents creative freedom and a generation of creators and innovators. They embrace the modern do-it-yourself attitude within surf culture, performance surfing, and craftsmanship. This mission inspired me a lot to push their web presence to the next level. So, i focused on the goal to improve the user experience and suggest new solutions or alternative approaches how VISSLA could look like in todays huge digital ocean. So, this is a small part of an early stage redesign concept – let me know, what you think. — The Vissla Logo and Brand material is intellectual property of Vissla. More Links Learn more about Simon Kratz at wearewondrous.com Follow Simon's work on Behance Web Design & UI/UX   Motion Studies

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.

UI Inspiration: This week's selections from Outcrowd, Nicola Baldo and more

UI Inspiration: This week's selections from Outcrowd, Nicola Baldo and more

This is now a thing! We are starting a weekly UI/UX interactions collection for 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, I noticed how designers love using the iPhone X mockup, it's quite nice actually. Let's keep embracing that notch! In this collection we are featuring the work from Outcrowd, Nicola Baldo, Gal Shir, Michał Roszyk and more. More Links For more, check out Dribbble Follow my tweets @aoirostudio Follow my pictures on Instagram via Dribbble Design by Outcrowd Design by Nicola Baldo Design by Gal Shir Design by Michał Roszyk Design by Cuberto Design by tubik Design by Hwatery Design by Daniel Kerris Design by Quintin Lodge Design by Mario Šimić Design by Piko Rizky Dwinanto Design by Miaomiao Design by Dawid Sobecki Design by Anton Avilov

My experience about going to an onsite UX interview, what I have learned and what I would improve

My experience about going to an onsite UX interview, what I have learned and what I would improve

This is a different approach from our usual feature on ABDZ but this might be greatly useful if you ever get this opportunity. Last week, I (François Hoang - Chief Editor on ABDZ) was on my flight home from an onsite interview I had in San Diego for a UX position. This was my first experience and I wanted to share my thoughts about the things I've learned and what I would improve if you ever get this opportunity. Beforehand, I would like to mention that I won't share any details about the company I was interviewed because of a non-disclosure agreement I signed. Also, I would like to send my regards to the awesome folks I've met along the way (Cheers!). To be able to actually come to an onsite interview, you have to go through a series of phone calls and video conferences. It's usually about 2-3 meetings and if you made the cut. You will get to hear those words: " We would like to invite you to an onsite meeting". OH YEAH! Party time right? Not really, just hold off before you can say anything to your relatives or friends. This is just the beginning of your journey. First Tip The waiting game, I think this is the most brutal part of my whole experience. The wait for email replies and checking your notifications all the time, it almost feels like your current life has been put on hold. The first tip, don't get alarmed about what might be going through your head or the thought about they might have changed their minds on you coming or not. People are busy and they will get to you when it's the time is right. You would rather take this energy and be focusing on doing your homework. First Task: Homework This is an interview but try to change the perspective as if it was a UX project. For this first task is all about research. We are grateful enough to have Google as being the biggest searchable library ever, use it for your own benefits. Try to learn and understand the company’s history, philosophy, products/services, marketing, target audience, design process, tools and etc. This way you will be prepared when asked: What do you know about our X company". This exercise helped me a lot because I was able to understand more things beyond the company logo. Don't forget that user experience is not related to interfaces only, it's all part of everything the users interact within reach of the company logo. For my case, I had the opportunity to own the product for a little while. I decided to use it every day and see what was my feedback as a user. What I would definitely improve on the design side and if I've found any bugs too? It's NOT a vacation trip We are pretty excited (including me) when you get the chance to fly for free to a destination that you have never been before. Remember that you are traveling for "work" and usually what you have planned to do like shopping, tourist stops never ended up happening. You can always ask if the company is willing to book you an extra day or two but you will pay the extra for the hotel fees. It's always good to ask. Make a Presentation For my onsite interview I never saw the mention of having a presentation ready, gladly I made the right move and had one ready. Don't forget that you are traveling all the way across and some people you are meeting probably didn't even read your resume. Play it safe and have one ready. Your presentation should be short, on point and playful. When you going through your portfolio; focus on the points that they need to hear about what they are looking for that UX position. I made a mistake when asked about: "What is the one project that you are most proud of", I decided to go with a project because it was a team effort and process, we had a beautiful outcome on the client side. I was in fact very proud of this project! But I should have stayed with a project that was more around UX and what was the whole process behind to achieve success. Your presentation should also reflect your personality because you will probably talk about yourself for 20-30 minutes. Remember that you are meeting the team that will potentially see you as their next colleague. No harm in slipping a few jokes! Design Challenge or the Whiteboard Design Challenge That famous whiteboard challenge, the exciting part. I was a bit scared and skeptical about this challenge but to calm things down. The whole point of this exercise is that your future team wants to see how would you react in front of problems. Are you a problem solver? In this case, there are many solutions to the problem. Don't be shy to ask questions, sometimes the task can be super vague. For my case, it was about: Creating our startup as a pet caring company. We went through different steps including our goals, customer goals, and business goals as well. We didn't get to the point where we would wireframe but overall I loved this exercise. It definitely helps you think about the problem instead of trying to find the obvious. If this is something that you are not good at, practice makes it perfect. Always try to balance questions with answers, it helps to enhance the collaboration in the room. Be Yourself To end this article, I would like to share Fabio's advice. "Show that you are passionate about your work and simply be yourself". Don't try to be somebody that you are not. If they see you as a great fit for the company, well amazing news for you! If not, there is plenty of great companies out there. Take it as a learning curve! What you have learned from this experience and what would you improve on the next one. Recap Video More Links Follow my tweets @aoirostudio Follow my pictures on Instagram Cover Image by Marcel Fuentes

Web Design Layout Collection by Creative Mints

Web Design Layout Collection by Creative Mints

After a long Weekend of rest, I thought we should start it all with a burst of web design inspiration. A collection really well-designed by Prague-based design boutique Creative Mints. A great balance of typography, layout, and colors; somehow quite different from the usual "guaranteed approaches" and stock photo gallery designs we are seeing lately. It's great to understand the UX of things but it never hurts to also put an accent on the playfulness of your designs. Located in Prague, Czech Republic, Creative Mints is a design boutique with projects focused mainly around illustration, UI/UX and Graphic Design. We really do enjoy their work on ABDZ, make sure to check out their Behance. More Links Learn more about Creative Mints at creativemints.com Follow Creative Mints's work on Behance Web Design  

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  

UI Inspiration: More Hand-picked UI/UX Interactions

UI Inspiration: More Hand-picked UI/UX Interactions

I guess it's that time of the week with an article all about more hand-picked UI/UX interactions. You guys are suggesting we should do this as a weekly thing? Let us know! We would love to get your insights! Let's go again with another collection of UI Inspiration that I've come across on via Dribbble. I tried to mix it all today from static, dynamic and even from a live prototype. We are starting to notice designers embracing "the Notch". In this collection we are featuring the work from Jurre Houtkamp, Manoj Rajput, Vishnu Prasad, George Vasyagin and more. More Links For more, check out Dribbble Follow my tweets @aoirostudio Follow my pictures on Instagram via Dribbble Design by Manoj Rajput Design by Adam Tolman Design by Slava Kornilov Design by Vishnu Prasad Design by George Vasyagin Design by Bobbi Z Design by Jurre Houtkamp Design by Kate Laguta Design by Daniel Tan Design by Miro Koljanin Design by Kostya Vargatiuk Design by Yury Smirnov Design by Vladimir Gruev Design by Bart Ebbekink

UI/UX: "Realistic" 3D Weather App

UI/UX: "Realistic" 3D Weather App

I guess weather apps are part of what we would qualify part of our daily routine, personally I related myself to Google Apps. But they are a numerous amount of applications out there that shares a "fun" factor to the mix. We are taking a look at the RealWeather app from Poland-based designer Michał Sambora. Adding a semi-realistic 3D renders to the minimal UI, this app concept definitely gives the prime to the 3D merging together with a dark UI all across. Michał Sambora is a mobile UI/UX designer based in Krakow, Poland. We have featured his motion work before on ABDZ. Make sure to follow his work and experiments on Dribbble. Fresh concept I had back in January for very simple and clean weather app with realistic 3D weather conditions.. Doesn't matter if there is plenty of such already, had to try to make those lovely clouds and animate them in Houdini and C4D + Octane myself :D Credits to Josef Bsharah (http://www.josefbsharah.net) for inspiration and helping making it happen! More Links Learn more about Michał Sambora via Dribbble Follow Michał's work on Behance UI/UX  

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  

Web Design: Sense6 Fashion Website Design

Web Design: Sense6 Fashion Website Design

Let's kick it off with a clean and simple web design project by Lithuania-based branding studio called: Andstudio. It's a classy design with a nice flow and a little beautiful play on the typography with a combination of Bodoni 72 and Brandon Grotesque. The mixture of black & white pictures gives the website a light approach where you will be focusing on the items. The pictures are stunning and by Visvaldas Morkevičius. Andstudio is a branding studio based in Vilnius, Lithuania. Focusing their work in graphic design, branding and art direction; you should definitely check out their work on Behance. More Links Learn more about Andstudio at andstudio.lt Follow Andstudio on Behance Web Design  

UI Inspiration: Some more Fresh UI/UX Interactions

UI Inspiration: Some more Fresh UI/UX Interactions

We had a pretty good response from last week's article about fresh UI/UX interactions. You guys are suggesting we should do this as a weekly thing? Let us know! We would love to get your insights! Let's go again with another collection of UI Inspiration that I've come across on via Dribbble. Happy Friday, let's keep the spark! In this collection we are featuring the work from Virgil Pana, Divan Raj , Leo Leung, UI8 and more. More Links For more, check out Dribbble Follow my tweets @aoirostudio Follow my pictures on Instagram via Dribbble Design by Tintins Design by UI8 Design by Virgil Pana Design by Divan Raj Design by Cosmin Capitanu Design by Virgil Pana Design by ⋈ Sam Thibault ⋈ Design by Gene Ross Design by Divan Raj Design by Leo Leung Design by Tubik Design by Divan Raj

Brand Identity & UI/UX: Behance Studio Desktop App Concept

Brand Identity & UI/UX: Behance Studio Desktop App Concept

We would like to share this brand identity that involves also UI/UX for a desktop app concept based on the very popular design platform to showcase and discover creative work. Introducing the Behance Studio by Moe Slah. It's a take on the desktop user experience from creating your project and uploading it all to Behance. It's a pretty simple flow but one thing I had in mind is how the sync will work compared to what's already online. Can you still surf on Behance?! What do you guys think, let's dive in first. Moe Slah is a Egypt-based digital creative director. We have featured his work before on ABDZ. Make sure to check out his Behance for more of his delightful portfolio and concepts. Behance Studio is a desktop application for behance showcase network, you can design your project presentation easily and smoothly as you are using photoshop or any design desktop application. More Links Learn more about Moe Slah at moeslah.co Follow Moe's work on Behance Brand Identity & UI/UX  

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  

Web Design & UI/UX: Lionsgate Pitch Concept

Web Design & UI/UX: Lionsgate Pitch Concept

I used to be a great fan (and still) of pitch concepts, it's such a great exercise to do with your team or even with yourself. The goal is to attract a client for project by getting out of your comfort zone with an idea and going through the whole design process. I love it because you get to experiment ideas or even try concepts that you wish you could have done on another project. We are taking a closer look at the work from Rolf Jensen for a pitch he had to work on for Lionsgate (in collaboration with Real Pie Media), I love how the background colour is part of the UI where buttons aren't adding an additional foreground colour. It almost feels like an app but through a web experience. Check it out! Rolf Jensen is a freelance interactive director based in Lower East Side, New York. We have featured his work before on ABDZ, please check him out on Behance. These visuals are pulled from a design pitch I created for Lionsgate and Real Pie Media in LA a while back, yet this is some of the most recent work that I was able to show publicly this year, but more to be shared soon. More Links Learn more about Rolf Jensen at rolfjensen.no Follow Rolf on Behance Via Instagram