articles on

Dome Systems UI/UX

Dome Systems UI/UX

Working in UI/UX, one of the many things that goes overlooked is the content. What I mean about content, I mean how big will be the text area and what kind of content will be on the layout. It’s easy to design a beautiful, seamless layout with negative space all over the place. But introducing content and also in another language than english is also a challenge. We are showing the work of Andrey Stelmakh and what I like about his work is that the flow of this layout might work pretty well on mobile. Even though it’s not shown here but we can definitely see how it will be.   More information via Behance.

Case Study UI/UX: Improving Japan’s Railway and Commuting System

Case Study UI/UX: Improving Japan’s Railway and Commuting System

Japan’s railway system is one the the most complex in the World. I’ve personally experienced it a few months back and it’s pretty consisting of many different and connected parts. Once you really experienced a few different trips, you start to understand its complexity and it becomes quite simple. But I do admit there’s been moments where I was found myself in a chaos where I didn’t knew what to do. I would say that most cases of a redesign are mostly based on a user experience in a goal to an improvement for a better overall experience. I would like to share this beautifully executed UI/UX project by Isa Pinheiro’s concept at improving Japan’s railway and commuting system. She came up with a concept to remove a technology in use for the last 15 years and rely the users to their smartphones payments on the go and recharging as well. There’s probably some features and problems that have been overlooked but it’s definitely an interesting concept to look at. Japan’s rail transportation is known as one of the most complex systems in the world. Carrying more than two million people per day, the rail system demands a fast and easy way for people to use it. Their rechargeable contactless cards have been around since 2001 and are the secret for Japan’s smooth commuting. This technology has been around for 15 years and little improvements have been done. People still need to rely on ticket machines at train stations to recharge their cards, to pay their monthly commuter pass and check transactions. You should definitely check out the live prototype that is beautiful done and you can follow the userflow behind the concept: http://isapinheiro.com/?work=pasmo-application More information: http://isapinheiro.com.

Designing Hitachi Corporate Site

Designing Hitachi Corporate Site

As boring as it sounds, designing a corporate site is incredibly fun! I had the opportunity, in the past to design a site for a popular brand and through the layer of pages and pages of brand guidelines and how everything is strict in typography, colours and even how you interact with their users. It's a really hard challenge you do get to learn a lot and especially how we all should learn to listen to our clients even though we know that we can always do better aesthetic work. We are taking a closer look at the work from the folks from Plastic Studio and their work for Hitachi Spain site. Aside from the beautiful imagery, what strikes my attention the most is the overlapping menu on mobile view. Hope you will enjoy! UX, UI, interaction design & front-end and back-end development for Hitachi Spain corporate site.   More Information: http://portfolio.plasticbcn.com.

Asos UI Design Concept

ASOS UI Design Concept

It's been a few days that I'm not posting any new inspiration, and today I'm featuring a concept UI project from Stanislav Krishtal for the famous wear branding ASOS. It's a web project with a lot of graphic design inspiration, a magazine style that we're seeing so much designer using, but just a few making it right! These are all the templates published on his Behance profile, there is no description about the project, but in my opinion the images talk by themselves.

UI Design by Adrián Somoza

UI Design by Adrián Somoza

We have been posting more about editorial design and UI design as we believe those two areas will fully intersect, if they are not already. Some designers have been pushing the style and really making this reality. Adrián Somoza's work is a good example of that. I also love seeing motion present on portfolio. It's important to highlight the importance of that and also make me stop procrastinating and focus on learning After Effects. Adrián Somoza is a senior visual designer from Buenos Aires, Argentina. He is currently working at R/GA. His portfolio is filled with great concept projects. They have a great mix of editorial design with typography overlapping imagery and other effects very common in printed material. For more information and to check out his portfolio make sure to visit his website at http://www.adriansomoza.com/en/ UI Design

Nike 440 UI Design

Nike 440 UI Design

Nike 440 is a concept project for an e-commerce website based on the content and the structure of the Nike site. It's a good exercise in terms of user interface UI. I especially like the grid and how things are organized. As a personal project and with the goal of learning, it's always admirable seeing beautiful outcomes. Aleksandr Samoylenko, the designer behind this project came up with quite clever motion design solutions for navigation, they look quite stylish and seem to have a quite good result, visually. I tried not to limit myself too much and gave a free go to my imagination. How the focus will change on the e-commerce sites in the future – time will tell. I said this before, I love personal projects and I believe they always give us the opportunity to learn and improve our skills, the biggest concern I have sometimes is that for some UI/UX work we forget some very important variables like how the user is using the service. That would guide the user and avoid falling on assumptions based solely on personal opinion. Again, the outcome of this work is brilliant, but is it realistic? UI Design   Aleksandr Samoylenko is UI/UX, Web and Motion Designer from Kyiv, Ukraine. For more information make sure to check out his Behance profile. You can also check this project in more details at https://www.behance.net/gallery/41393165/NIKE-440 - there you can see the motion design work that we didn't share here on this post.  

Leica T UI Concept

Leica T UI Concept

We are great fans of Anton Repponen's Work on Abduzeedo. There's a distinct level of details that Anton always have in this work and we gotta admit that is quite inspiring. Through his amount of work, there's also concepts which are a pretty efficient practice to perform as a designer. Figuring what would you have done NOT to make better but what could have done to make it work for yourself. I feel this approach makes it even harder as we all know that most of us struggle designing stuff for ourselves. Let's take a closer look at this UI concept for the fancy camera model Leica T. We are all used to see black screen with white pixel typeface scrolling through endless lists of unclear settings and acronyms. Using camera almost on a daily basis inspired me think of some features or improvements in user experience that I decided to illustrate in this project. Please note, that the features presented here might not fit everyone, this is solely the way I would like to use digital camera.Two years ago I started shooting with digital Leica M. A brand and a camera that I really like and that stays true to manual mode. For this particular concept I selected Leica T—a more modern consumer camera with back touch display, but the one that doesn’t scare professional photographers. I do realize that a lot of tasks can still be done by switching knobs on the top right part of the camera, but just for the purpose of the concept I wanted to look into how everything can be done only by using the touch display. In Anton's Words Free Manual Mode Most of the time I use manual mode when taking photographs. For some reason pretty much no camera allows you to make default metering and then start adjusting from there freely (similar to a “P” mode). The idea here is that after the first metering you have complete freedom in adjusting your exposure. Aperture and Shutter Speed are clearly positioned on left and right sides of the screen, allowing you to control each with tapping or swiping using left or right thumbs at the same time (not in two completely different places how most cameras handle it). Default metering sets your Exposure Compensation to 0 (unless set otherwise) and by adjusting Aperture and Shutter Speed in Manual mode it is clear whether you are going to under- or over-expose your photograph. No Separate AV & TV Modes Another thing that bothers me in most cameras is a separation between Aperture (Av) or Shutter Speed (Tv) priorities (as well as Manual Mode). Usually there’s a switch between these three modes. In my ideal scenario it is just one mode where I can quickly “lock” Aperture to set my camera to Aperture priority. After that I can keep adjusting Aperture to my liking, but it will now affect Shutter Speed. At the same time I can quickly adjust Exposure Compensation if I want. Note exposure compensation treatment is illustrated on the grid from -3 to +3 which makes it visually easier to understand whether you are in the minus or plus and how off are you. At the same time only relevant part of the grid is highlighted and not the entire range. Quick Settings Some of the cameras (including Leica T) offer quick access to the most important settings that you might need to change quickly before taking a shot. One thing that I lack the most is quick access to Color Temperature. Most of the time I shoot JPGs so I can quickly post image somewhere. When conditions are unclear I start shooting RAW just because I know camera will get color balance wrong (especially when it’s dark, indoor with artificial light or during the sunrise/sunset). For some reason most cameras offer quite unclear icons such as “daylight”, “cloud” or “shade” which is essentially (5000K, 6500K and 9000K accordingly). With photo retouch software and RAW converters nowadays it is actually easier to think in K (Kelvins) instead of pictograms. Switching to 3000K I know I am going to get cold light that might be good if I am shooting at night time, going over 5000K I know I am going to get more warm (red) colors. Camera Settings Most cameras display settings as a list with titles and what type of mode is turned on/active. Usually user has to use controller to go through the list, enter the desired setting, change it to something else, confirm it and then go back to the main menu. Ideal settings view should display (if applicable) options right in the list mode. This way user can see what is currently being selected as well as tap other option if needed. About Anton Repponen Anton is a designer and photographer based in Brooklyn, New York. He is the co-founder of the mighty design studio Anton and Irene that works mainly in Design, Digital, UX, Photography and more. More information: http://work.repponen.com.

UI Inspiration: Creative Interactions

UI Inspiration: Creative Interactions

As part of the process of a redesign, by the way I don't know if you've noticed that we are rocking a new Abduzeedo design. If you see anything like bugs or anything; give us a shout. As I was saying, part of the process early in the middle of it, we have a part where you just look for inspirations out there. It's quite fun actually to breathe in different kind of interactions, some cool ones and some just to work your mind a little. We never when we'll have an idea that will pop into our head so it's always a good exercise to do so. I would like to share a series of UI interactions that I thought were quite creative so either being aesthetic or plain playful.   Azís Pradana     Mark Lamb     Vehbi Köksal     Nikita Fedorov     PLATFORM     Cleveroad     FΛNTΛSY     Minh Pham     Heartbeat.UA     Scott M Thigpen     Mason Yarnell     Tony DeAngelo  

UI Inspiration: The Work of Tony DeAngelo at ANML

UI Inspiration: The Work of Tony DeAngelo at ANML

Tony DeAngelo is an Art Director working at ANML currently based in Los Gatos, in the great SoCal. Being working in an environment of digital design and development, Tony has being collaborating and ruling the workspace to make a difference. What I do enjoy from Tony's work is how smooth are his interactions. Not too crazy but subtle enough to create a better experience. With the amount of interfaces we are now encountering per day, let's keep it simple but elegant. Founded by Douglas Hughmanick and Patrick Boscarino, the great leaders behind this crew of design thinkers. Our house is your house, and vice versa. We jump right in and immerse ourselves in your world—and that means working with you. With close collaboration, we function less like an agency partner, and more like an extension of your team. Whether we’re working through design challenges on the fly, or sketching on white boards, we’ll uncover the strongest solutions in a fraction of the time. We’ll also have more fun. About AMNL Pronounced "Animal" is a design studio founded by two designers that delivers design solutions to be impactful for their clients. Having the motto at building the very Next Big Things. More information: http://www.anml.com/index.html.

UI Case Study: Almanac Artifex

UI Case Study: Almanac Artifex

We are taking a look at other than beautiful but a functional UX/UI project by Almanac Artifex by Evgeny Biryukov. First thing I've noticed is the removal of the Hamburger Button which is never easy to accomplish especially mostly designers use that feature as a Catch-All. It's not a bad thing if you do but I do appreciate the extra care to the navigation especially on Mobile. On the other hand, that gallery scroll feature was a neat feature. Hope you will enjoy. Artifex is an online collection of masterpieces, inspiring ideas and new trends. Here you can find information about remarkable personalities and noteworthy events in arts community. About Evgeny Biryukov Evgeny is a UI/UX Desiginer based in Moscow, Russian Federation. Focusing his work in UX/UI, Illustration and Graphic Design using Sketch, After Effects, Photoshop and Principle for Mac. More on Evgeny's Work via Behance.

UI Inspiration: RIGHTIME App

UI Inspiration: RIGHTIME App

Productivity is everything. That one thing that will get through the day without having to finish your work late OR for tomorrow and the day after tomorrow. Related to that, we have also have emails. Have you ever been in the situation where you sent an email to your client, potential client or even somebody important and you are eagerly waiting for an answer back from them? We are showcasing the UI work from Zhenya Rynzhuk and Artem Golubtsov about the RIGHTIME app. A tool that helps you send your email in the right time whenever your recipient is active on social networks. This is an inbox app made for sales managers. It helps you send your letter in the right time whenever your recipient is active in social networks and ready to get your mail, so the chances that you letter will be read are increased a lot. More about this project: https://www.behance.net/gallery/38068759/RIGHTIME-App.

UI Experiments with Boyan Kostov

UI Experiments with Boyan Kostov

What is the medium that you are working in, it's always a great thing to experiment with your work. Whatever it is to try new things or just creating things offline, these things are part of your journey as someone from this industry. For this case, UI design is always an evolving platform with so many new and different behaviors/user flows to explore. We are taking a look at Boyan Kostov's work and his UI experiments. A collection of UI experiments I've been working on. About Boyan Kostov Boyan is an experience and product designer currently based in Bulgaria. He specialized his work and experiments in interface design, UX and data visualisation. We look forward to see more of his work. For more information: http://boyankostov.com.

UI Inspiration: 09 Alarm Clock

UI Inspiration: 09 Alarm Clock

We've talked before about side-projects but we haven't dig up the subject well enough in-depth. Finding the free time to work on a personal or client projects are part of a designer's great journey. Part of the projects, the idea of introducing a concept is a great challenge. Many factors have to be encountered and yet it's not always about the UI. This is why I'd liked to share this Alarm Clock Concept from Zero/Nine. I just liked how playful they made their UX flow, especially on a boring task like setting your alarm. Hope you will enjoy! About Zero/Nine 09 is a studio based in Beijing, China that mainly focus their work into UI/UX, Branding and Icon Design. We look forward to see more of their work. More information: http://www.09ui.com.

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

UI Inspiration | Layouts

UI Inspiration: Layouts

Lately, we've gone specific in subjects at sharing UI Inspirations with interactions, cards, footers and more. Today, we've put a collection about  Layouts, which is a pretty much vague but interesting to dig as well. It's great to surf through different works (in progress) and noticed the small little details. I don't personally think there's any major trend going on with layouts but there's a thing happening for subtle details to make your layout stand out more to the others. Hope you will enjoy! (adsbygoogle = window.adsbygoogle || []).push({}); Designed by UENO Designed by UENO Designed by Valentyn Khenkin Designed by Janna Hagan Designed by UENO Designed by Léonard Chalvet Designed by Tintins Designed by Ernest Asanov Designed by Julien Renvoye Designed by Aykut Yilmaz Designed by Owen Perry

UI Inspiration: Site Interactions

UI Inspiration: Site Interactions

As part of the design process, figuring interactions (to me) is the fun and best part. Some of the developers might hate me for saying this but it's a great way to make your site more alive than just a flat UI. But it's also not an easy task! It's not just about making it pretty with light interactions but how it will function too, always. In some cases, the coolest interactions should be subtle, barely noticeable. In the end, it all depends of the result you wanna achieve. So we've put together this collection of  Site Interactions for you guys, hope you will enjoy it. Designed by Ben Clide Designed by Jim DeBrock Designed by Sergey Valiukh Designed by Ernest Asanov Designed by Vladyslav Taran Designed by Leo Leung Designed by Polina (adsbygoogle = window.adsbygoogle || []).push({}); Designed by Cosmin Capitanu Designed by Barthelemy Chalvet Designed by Sergey Valiukh Designed by Dave Soderberg Designed by Jonathan Howell Designed by Marco Vincit Designed by Vadim Sherbakov

UI Works by Matthias Mentasti

UI Works by Matthias Mentasti

We all have our sort of metaphors of what exactly is an Art Director and what does it do exactly. Our image of ourselves as Mad Men is hugely not realistic but in fact, they do much more than what others will think. From the beginning to the end, Art Directors should be involved in every step of the way. From the client first contract, mapping, wireframing, prototyping, figuring interactions, working with developers and making sure of their vision is showcased across the project. (adsbygoogle = window.adsbygoogle || []).push({}); About Matthias Mentasti Matthias is an Art Director over at wild, a studio that is currently based in Vienna, Austria. For more information: http://www.mment.at