Domino's PizzAPP is an app where you can order your pizza by reading the traditional menu, by selecting each ingredient to create your own pizza, by experiencing the most innovative ways to order: Pizza Match and Lucky Pizza. Currently available in Italy, this is the work from the folks over Alkemy. The interaction design is putting a delicate and characteristic touch to the micro-interactions meanwhile the addition of the illustrations adds an overall simple approach for a very friendly experience. Alkemy is a studio based in Milano, Italy. Where they will work in the fields of Consulting, e-Commerce, Creativity & Brand Strategy, Social Media, Content, UX & Design, Media & Performance and Technology. Make sure to check out their site at alkemy.com. An unexpected experience is not only a foreign brand making pizza with Italian ingredients but also a mix of experiences that people can live thanks to Domino's Pizza. And thanks to this App. Check out Alkemy's site: alkemy.com
Last week, they announced at E3, the very next instalment of the game God of War 4. It's pretty exciting and stunned to witness their latest game to a newer console knowingly that the last game was dated from 2010! Aside from this release, we are looking at the work of Rolf Jensen on the web design and UI/UX (a year ago) in collaboration with Real Pie Media and Sony Interactive Entertainment. It's quite a lovely overall design. We are looking at the work from Rolf Jensen who is an independent design director based in New York, USA. Working mainly in art direction, web design and interaction, you should check out his Behance for more of his work. These are some designs I created almost a year ago for Real Pie Media and Sony Interactive Entertainment. I wasnt allowed to put them on display publicly until now, so it's been a while. I've tried to capture the essence of the hyper detailed in-game 3D renders instead of promoting pre-rendered stills with studio post production. Here it goes! Check out Rolf Jensen's site: rolfjensen.no Follow Rolf on Behance
An app design that combines a user-friendly interface and at the same time giving a smooth experience sounds about right. If you know how this kind of apps are usually is boring with infinite dropdown scrolling on mobile. Meanwhile with this Mileage Tracker that can easily track your mileage and also providing an easy and minimal approach to simply put it on top. Last thing is the micro-interactions for the app for the "drives report" is kind of clean and intuitive with the swiping. Dtail Studio is a studio that specializes in Product Design & Visual Identity based in Irvine, California. They also work in UI/UX design, Identity, Mobile Apps and Web Design for Startups and Businesses. Check out their profile on Behance. Mileage Tracker Website & Application Design Project Gallery More Links Check out Dtail Studio's site: dtailstudio.com Make sure to follow Dtail Studio on Behance
And yet another Interaction Design & UI/UX for you guys today. This time is the work from Phoenix the Creative Studio based in Montreal, QC for InSymbiosis. They are a pharmaceutical company and boy we know how most of them are looking pretty boring and unfriendly. Well, it's not the case with this one. In a universe of what is sexy, original and scientific; what I love the most about this design is the hamburger button. I know what we all think about this button but this treatment is quite genuine and playful. Worth a look! Phoenix the Creative Studio is a studio based in Montreal, QC, Canada (Yay!). They are focusing their work into emotions, interactions; create brand experiences that engagge people. Breaking standards in the goal to connect people together. InSymbiosis is a pharmaceutical company that assists in the development of new medicinal drugs. The company acts as a mediator between the client and the research and marketing team. Far from the austere and dull look of the medical world, we created a universe both sexy, original and scientific. We wanted a fresh and innovative website that offered a friendly vision of the pharmaceutical world. Our team, which was keen to leave behind the typical illustrations of pills, microscopes and white blouses, turned to the theme of the aquatic and microscopic universe. Numerous animations populate the website; in particular molecules and anemones created in WebGL which interact with the user in a floating movement. Project Gallery More Links Check out Phoenix the Creative Studio Site: phoenix.cool Follow Phoenix Studio on Behance
Let's take a look at this superb web design and UI/UX project from the mighty folks from Anagrama and their work for Bodyport. They are a San Francisco based start-up dedicated to the development of at-home cardiovascular monitoring technologies at the reach of everyone. The whole UI across the identity and web design has been made to be easy and friendly to follow. I loved the micro-interactions from the header to icons, it's pretty neat. I personally wish there was an additional colour to balance the contrast but that might be just me. Hope you like it! Anagrama is a studio based in Mexico City. They focus their work into branding, graphic design and packaging. We have featured their work before on ABDZ, give it a look! The website's objective aims to educate the user about Bodyport's technological attributes through simple and friendly graphical representations on an informative tour. The identity system manifests around the navigation while the visual breaks and interaction strengthens the content and communication with the user. Project Gallery More Links Check out Anagrama Site: anagrama.com Follow Anagrama on Behance
Let's take a look at this UI/UX & Interaction Design project by Doeun Shin by an app concept called: Meallow. What is it? It's an app that helps children in growing up at making their diet with the right food and etc. It's an interesting concept where from the wireframes, Does start her thinking in child information (profile), meal planning and browsing. After setup the profile, you can a series of recipes and also given the difficulty of cooking where you can get suggestions as well. I liked the overall UI and also the user flow where you can be dispensable within the Meallow app for the better growth of your kids or in the near future. Doeun Shin is a student in graphic design and UI based in Seoul, Korea. She just started her Behance, make sure to follow her. MEALLOW is a service that helps children in growing up to make their diet with the nutrients they need. This is based on the health information of the user who wants to care and the ingredients. This helps children achieve balanced energy intake and assesses appropriate growth. Photo Gallery More Links Follow Doeun Shin on Behance
What is the best prototyping tool out there? We have asked that question to ourselves and between us many times. The answer is simple, there isn't one. All the tools out there have their own advantages and disadvantages, the question is which prototyping tool works the best for you? One thing though, we are living at an incredible time and grateful to have so many great tools at our disposal to increase our workflow, achieve better results and collaboration. Maybe it's just about having your own list of criteria to tackle down. I've tried a lot of prototyping tools and still haven't touched the surface of what's out there. During the past couples of years, I have tried Axure, Marvel App, UXPin, Atomic and more. Let me breakdown three prototyping tools that worked pretty well for me and my design needs. Remember there isn't such thing as one "best" tool that rules them all. Ask yourself questions on the pricing, what it could do on short terms and long terms, what platforms you wanna work on and even what is my workplace is currently using. Remember there isn't such thing as one "best" tool that rules them all. Sketch + InVision InVision I love InVision! For many reasons too, but I feel where InVision shines is the fact you can do-it-all under one roof when combined with Sketch or Photoshop. For my case, I use it with Sketch and combined with their plugin Craft. Together into a very powerful tool for the mood-board, prototyping, syncing, free hand (neat!), user-testing and more. Along with their tool, they are pretty active within the community with their blog, announcements, and famous newsletter! They keep adding new features for us to discover which makes them a game-changer in the industry. Price Free Principle for Mac Principle for Mac Another tool that I really do enjoy and it's Principle for Mac. Right off the bat, I love the fact that you're off a pricing of a monthly plan, you purchase it once and it's yours forever. What's neat with Principle for Mac is that you can record your prototype then export it as a video or animated GIF. We know how important it is and cool to be able to share your process as a GIF! Another thing that I feel work pretty well with Principle for Mac, you don't need an internet connection to work on this tool. Being offline can increase your productivity instead of relying on a fast connection. Price $129USD Framer Framer We have recently featured Framer Design on ABDZ and they highly have the potential to change the game in the near future. Their latest integration of a smart graphics tool and now simple code editor together combines into a very powerful tool. From the auto-layout functions on the interface design to the power of code-based prototyping to the masses. I ordered my copy and I'll play with it and shares my thoughts on the next article. Price $15USD/per month Voilà! Cheers to another quick roundup, hope this will help you to refine your design process. We all have the same goals to achieve greatness and still enjoy ourselves too. Also, it's never too late to learn new things and discover tools that change your workflow for the better. More Links Follow my tweets @aoirostudio Follow my pictures on Instagram
When Jeff Gothelf, a UX designer, decided to change two simple texts requiring users to sign up, he was trying out something he had read from a psychology book. He wanted to find out how true the text was, and if at all, how it could apply in his UX designing job. The result was a 30% increase in paid signups that led him to cite copywriting as the secret weapon for UX. Where UX Design and Copywriting Tips Merge A UX designer and Copywriter may differ greatly in their daily tasks and overall functions. But as many people and organizations are realizing, and you will too, there is plenty that UX designers can learn from copywriters. The art of crafting words to influence a purchasing decision or subscription status is truer today than it was years ago. While a good website design is sufficient to keep new visitors a few moments longer on a site, it is not enough to convert them into buyers or subscribers. Interesting and high quality copy is also required to earn money selling online. This is because when you have poor written copy, no one will be interested to know what you are selling. And the worst part, you might never know that your copy is the problem. Only 4% of an organization’s customers give feedback about their experience. 96% never voice their concerns and 91% will not return On the other hand, if your copy is compelling, a visitor will be more willing to learn more about your products and services. This is possible through tapping into the mind of the user, which is one thing a UX Designer and Copywriter have in common. So how can UX Designers integrate copywriting tips into their work? Below are a few ways how this is possible. How UX Designers Can Tap Into Copywriting for their Benefit 1. Know who the website’s audience is Before a copywriter starts to write, he or she ensures they understand their target audience fully. In copywriting, don’t assume the characteristics of your audience. If you do, you’ll end up with a high quality copy that is meaningless. When trying to communicate to an audience through text, there is no direct opportunity for follow up questions. So when your copy does not communicate your intentions, there is no time to explain what you mean or what you want to happen. The same is true with UX designers. As you make a website and include copy to go with the design, remember to write to a particular audience. Otherwise, you will end up with a top notch website design that does not convert visitors into buyers or subscribers. 2. Understand that visitors are potential buyers When a copywriter is creating test for someone starting a blog or an existing one, they consider every visitor as a potential customer. Copywriters don’t write because the site needs a new blog post or article. They write with intent to sell a product or service and to provoke a particular action. As a UX designer, this too should be your approach. Don’t think about the site’s audience and potential visitors as just people who can be convinced to do something. Consider them to be potential customers and make sure your text speaks to them directly. For instance, when Jeff Gothelf changed the label “Premium Membership” to “I’m serious about my job search”, he had potential subscribers in mind. The first one was directed at random visitors, while the second one spoke to a specific caliber of visitors. So, does the copy you used when designing that website you are proud of resonate with potential buyers and subscribers? 3. Perfect writing to one person While someone who is learning how to create a website is hoping to attract numerous visitors, this does not mean that copy should be directed at a crowd. Copywriters create copy that resonates with readers because they have perfected the art of speaking to one person. That’s why you will find the most popular article pieces using the pronoun “you” a lot. As a UX designer, you too should adopt this writing style. While your copy may not include as many words as that of a copywriter, personalizing a message to one person makes site visitors feel special. And when potential customers feel they have been treated well or special by organizations, they are more likely to purchase whatever service or product is being sold. 70% of buying experiences are based on how the customer feels they are being treated. Can you notice the use of “you” in the text above? It speaks directly on one person, making each individual feel cared about. This brings us back to the art of tapping into someone’s mind and using appealing text to influence their decisions. 4. Connect with your users at a personal level Copywriters make it their business to understand who their audiences are, tailor content specifically to them and ensure their needs are met. As a UX designer, you need to design a website that not only impresses visitors, but also makes them want to take action. What is the best way to achieve this? It’s by sharing a personal connection with your users. Forget about what UX concepts dictate about copy and try to adopt your user’s language. As I mentioned earlier, users appreciate personalized text than they do general. They need to feel that you care and using their language is the most effective way. If you find this particular function challenging, you can always consider hiring freelancing services where you get to work with a competent copywriter. 5. Don’t just communicate the what, include the why Without even knowing it, most UX designers fail at converting visitors because they focus on elements instead of advantages. A visitor to a site does not subscribe to receive emails because there was a prompt telling them “click here to receive our emails”. They subscribe because of a told promise like “Click here to subscribe and receive more uplifting blog posts.” Users need to know why they are being told to buy a certain product or service. They also need to know what’s in it for them, or rather, what they gain in the process. In Conclusion A well-converting design cannot ever be complete if the copy is wanting. It can also never convert visitors and leads into customers or subscribers. By understanding the art of copywriting, UX designers can offer more value to website owners. Looking for more ideas like this? Learn more at Metapress and X3 Digital, or connect with Alex Jasin directly on Twitter, Medium and LinkedIn. Read more of Jasin’s writing on Business Insider, Entrepreneur, The Huffington Post, Internet Retailer, The Next Web and other major publications. * Cover image by Cathryn Lavery
It’s a great time to be a designer especially in terms of access to information, resources and tools to get our job done effectively. Today, to make things even more exciting, the lovely people from Framer launched Framer Design. In my opinion, this is the new standard for UI/UX design tools. The reason I am so adamant about my statement is because it brings design and code closer together than ever before. It’s not a coding tool that does design so so, it can be used as a design tool solely and beautifully, but it magically allows you to create prototypes right there as you would expect if you used Framer before. Details on this awesome UI/UX Design tool The new graphics mode offers a way to draw your designs directly in Framer, with a full-featured toolkit and device-specific artboards. But where Framer Design really excels is in its auto-layout functions, built specifically for responsive interface design. Once artboards are complete, a designer can then simply switch over to Code mode and insert pre-made interaction patterns or create multi-screen app flows. Programming logic still powers much of how the Code editor works, but for the most part, it’s wrapped in customizable snippets and a WYSIWYG interface. “Even as a web app, it feels smoother than native. It's solid, does what you expect it to do and then some. I especially like the auto-aligning and responsive settings. I foresee a bright future for Framer.” - Tim Van Damme, Head of Design at Abstract This launch marks a pivotal point in the design space, opening up the power of code-based prototyping to the masses. Within the past year alone, Framer has increased its Enterprise accounts by tenfold, onboarding entire product teams at tech giants like Google, Facebook, Amazon and Uber to corporate companies like Barclays and SAP, as well as agencies like Huge, Work & Co. and Frog. To cater to the specific demands of cross-collaborative teams, Framer has also built an entire Cloud collaborative workflow, providing enterprise-level security and access via the client’s own SSO services. Other team workflow features include a full access management panel with version control, built-in project invites and real-time design updates for team members. I have been playing with it for the past week and I have to say, Framer is on to something here. As a design tool alone Framer is very impressive. It’s fast and has pretty much feature parity with the competition. Now add on top of that the Framer Studio and resources already available for prototyping. That explains why I think this is a big deal. I have been designing and coding for the past 15 years and I always had the desire to have one tool to rule them all. This may or may not be the silver bullet but the most important thing is that Framer is setting the bar for what a product design tool should be and do and that is great for all of us and the industry in general. How major companies use Framer Because Framer is a browser-based app, the tool allows for unparalleled flexibility when it comes to integrations, modules and third-party apps. Uber uses Framer + Mapbox to design with real data and reimagine their app Facebook used Framer to prototype FB Live Video Lonely Planet redesigned their website experience using Framer Dropbox used Framer to conceptualize Paper EA uses Framer to design for Battlefield on gamepad/console Classpass uses Framer to design their mobile app experience Work & Co. uses Framer to prototype for clients like Marriott, Youtube and Jigsaw Yandex uses Framer to prototype mobile onboarding flows Deliveroo onboarded their entire design team onto Framer Google used Framer to design Google Gboard Twitter used Framer to prototype Twitter Videos For more information check out https://framer.com/
What should be my design title? This is a different approach from our usual inspirational features, hope you will follow along. This question was brought up by a good buddy of mine on what should be his design title? It wasn’t a question of “Fake it till you make it” but mostly what are the industry standards nowadays in terms of what is my title and what are my roles? For this article, let’s go deeper for the case of what are the differences between a UI/UX Designer, an Interaction Designer, and a Product Designer. Shall we? I took this comparison's case because it has been brought up many times during the course of my career and the last few years with the popularity rising of the UX. Whatever if you are a beginner, professional and even if you’re a freelancer. Let’s be honestly, most of us who comes from a background of graphic design and we aren’t being called graphic designers anymore. I know some people who still hasn’t done this switch in their careers and there’s absolutely nothing wrong with that. As long as you love what you do, nothing else matters. One thing to remember though is there is no ultimate goal in our field, everything depends on what do you wanna do with your career. Image by Ruthson Zimmerman What is UI and UX? Here we go! In the simplest explanation, UI is about what you see and UX is all about what you feel as a user and user experience. This role means that you’re juggling between both what’s visual and the overall experience. It’s one big giant role to be in and some companies do in fact mixed it all up (between UI and UX) which is not always right. From creating your visual path for each screen, page or elements and by the same time following what has been done on the UX side of things. On top of that, you’ll be working at creating style guides and ensuring a design language across the board. Image by Andrew Welch What is an interaction? In my opinion, during the course of a project; this is usually worked near the end from the design process. It’s basically animating all the static design into a fluid transition across the product. Sometimes it can be done for a certain element in particular but overall it’s always been figured it out as we go along. For example, what happens the interface does after a user clicks on this button. How the content appears? What transition effects to use? Motion becomes the main part of the interface by providing visual guesses as to how to use the product. Image by Carl Heyerdahl> Product Design We often say that UI/UX designers do become Product Designers and why is that? In my opinion, it’s an all-inclusive term of being a designer who is involved in every step of the process including what you see and feels but also conducting user research, design UI interfaces and create UI assets. Their understanding of the user and the product itself goes beyond since they have the capabilities to select the problem and address it with either prototyping and even front-end coding. Their role involves also testing in generating solutions to problems. This is the role that we keep hearing about since companies tend to hire designers that understand the user experience, research and visual elements. Voilà! This is what these roles meant to our industry, hope these were helpful during the course of your research or growth perspective. One thing to remember though is there is no ultimate goal in our field, everything depends on what do you wanna do with your career. If your goal is to be that catch-all designer, then you have to step it out so you can understand every single compartment of a product or keep crafting your skills in your desired role. We are lucky to be in our growing community that is not shy to share knowledge or even skills. Hope you have enjoyed this read. More Links Follow my tweets @aoirostudio Follow my pictures on Instagram
We are checking out this app design concept that involves UX and motion for a community called: Onstreet. Designed by Seoul-based designer Jaejin Bong, it's an app based on a mixture of photo app and a shopping experience. So basically you're sharing your daily look and you can tag the items that you are wearing so others can collect that information to buy them. It's an elaborate take on mobile shopping and I think that the idea is quite unique. I am not personally the genre of person to take a picture of my outfit but there's a certainty of a market of users for this experience and I'll be intrigued to see how the future holds as the retail experience is slowing dying. Check it out! Behind this concept is the work from Jaejin Bong who is a UI & Graphic Designer based in Seoul, Korea. You should definitely check out his Behance for more projects. ONSTREET is the service that is literally used on the "Street". Street shows everyone’s fashion. Gallery More Links Make sure to follow Jaejin on Behance
Happy Monday guys! Let's start it off with a web design & UX project of a store concept named: Formerly Yes. The thinking behind this concept would be both quite aesthetic and easy to use. Indeed, going through the project; the UI is indeed quite minimal accompanied with simple interactions. Lots and lots of negative space so you eyes are focusing on the products nor anything else. Designed by Milk Work where we have featured before with his work on Fran Silvestre Arquitectos. Behind this stunning work, we have Milk Work also known as Sergei Gurov. He's a senior designer and art director based in San Francisco, USA. He really has a distinct style into this web/ui work, you should definitely follow his work on Behance.
Let's take a look at this interaction design & UI/UX for a MacOs app named Mailcube, behind the app we have the team over Significa that believed that the email is not dead and it's all about how you treat this relationship. Right off the bat, you are introduce to what they called: faces where you can customize as you pleased through faces (categories) like messages, contacts, attachments and more. What I liked the most is the fact that your notifications are filtered and you can organize your emails by dragging a cube (kind of like creating a channel on Slack). You can join their private beta here. Behind this design, we have the work from Significa, a creative studio based in Porto, Portugal. Currently focusing their work into interaction design and brand development. You should definitely see their motto through their work and it's about good design thinking that can answer almost any question and solve most problems. Even though many of us have declared email dead, it's up to all of us to breathe new life into it. Let's face it: you're not going to stop using email, so, instead, why not work on the relationship?
Let's share our first interaction design project this week of a cooking app concept named: Ecook. Designed by Ha Truong, we are approached with an app that can help you cook more through daily menus and suggestions depending on the weather or whatnot. What's cool about this concept is the integration of watching what famous chefs are sharing as recipes, on the other hand I really liked this user flow from the shopping list to the actual cooking. Check it out! Behind this concept, we are sharing the work from Ha Truong who is a designer based in Hanoi, Vietnam. He is shifting his work lately into interaction design, you get to experience his thinking through his concepts and ideas that are pretty great. Definitely worth following on Behance. Ecook is an application that helps users find and share recipes with the community. In addition, Ecook has the ability to suggest daily menus based on the current time and weather, helping users find and choose the most suitable and the best food. You can plan to cook delicious meals for your family with delicious dishes from ecook. Ecook members can watch famous chefs cook food or watch them share great recipes. Cooking is easier and more interesting with Ecook.
Let's take a look at this project about Web Design & UI/UX by Kamila Figura on her work of a hotel & spa named New Wave. I really loved her colour palette throughout this whole project, it does bring a theme of relaxation and pleasant stay. From the UI/UX site of things, I am loving the direction but personally not to keen about the treatment on the submenu (on desktop) where there's too much negative space. Overall, it's looking great and her photography direction is just top-notch! Via Behance, we are showing the work of Kamila Figura who is a digital product designer based in Katowice, Poland. A mixture of UI/UX, branding, web design and graphic design are part of her wide range of skills. You should definitely check out her Dribbble. Branding and Responsive Website designed for the New Wave Hotel based in Wisła, Poland. Logo was created for is a modern resort highly know for its SPA facilities. Hotel captures its guests with an glass covered swimming pool with a view of the mountains. The whole project regarded to capture in the minimal form the essence of this unique place. The hotel offers stylish rooms which needed a simple and effortless web access. Website is responsive and easily accessible on mobile devices. Branding included business cards, leaflets, brochures, menu, key cards, photoshoot, Facebook and other social media covers and ads, company's identity in general. Website is minimalistic, clean and modern like the estate.
Let's take a look at this interaction design project that is quite interesting that involves UI/UX as well. It's a concept display named: Caseture that uses gesture based interactions in digital experiences. It could a glimpse that what could be a potential experience in the near future, for the "case" being they worked on a concept through how every human action passes through 7 stages. I would definitely advise to watch the videos as well to completely understand the whole experience. Published on Behance is the work from the mighty folks from demodern, a digital agency based in Cologne and Hamburg (Germany). You should definitely check out their Caseture site for the whole experience. Caseture is a humanscale screen installation that explores the potential of gesture based interactions in digital experiences. Having emotions at the core of its concept, it's a journey based on the theoretical basis of Donald Norman's ‘Stages of Action' - how every human action passes through 7 stages. Videos Credits Luis Uribe Eduardo Marzionna
Let's take a look at this interesting interaction design concept of a transit tracker by Matteo Mapelli. As I am starting to see a trend with designers using the font: Montserrat; it's a great readable font especially on apps. What I really enjoy about this concept is the main (bottom) navigation, that subtle-overlayed gradient and wrapped with the menu button is quite neat. What raises a question is the use of the map when you've actually found your destination and also the use of the other features from the navigation. Overall, it's pretty great! Published via Behance is the work from Matteo Mapelli who is a digital art director based in Milan, Italy. Focusing his work into UI/UX, web design and art direction, you should definitely follow Matteo on Instagram.