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.
We are looking at the interaction design of a personal fitness coach mobile app named: FitMe. Designed by Catherine Wang, what's totally selling me to her concept is for starters the colour palette that is keeping people motivated with a sparking red as the main colour. You'll notice the UI has a tiny resemblance to the Apple Watch UI, it express a nice flair for the least. I also liked the profile aspect of her concept that showcases your progress and achievements. Check it out! Published via Behance is the work from Catherine Wang who is a web designer working at Apple. Focusing her work into UI/UX, web design and graphic design; it's great to see Catherine keeping it busy with mobile app concepts where everything is well detailed. FitMe is a professional personal fitness mobile app tailored for female in different needs. Every feature is designed for users to approach the goal of keeping fit.
We are taking a look at this interaction design of an app named: Smart Expense. Designed by Prakhar Neel Sharma, it’s a colourful approach on how you should manage your daily expenses with cute illustrations and graphics to be more familiarize with your finance. I personally liked the “explore” section since it’s giving you a little bit more options within the app. It’s an overall beautiful work but I can’t help to spot the many spelling errors, be careful with that Prakhar! Published on Behance, this is the work of Prakhar Neel Sharma who is a product designer based in Copenhagen, Denmark. Focusing his work into digital interfaces, everything is all related to the user. His principles are beauty, simplicity and usability.
We would like to share this industrial design by Clement Dauchy about a cycling navigation called: Orion. What’s interesting about this project is that we get to follow his process from the sketching, industrial design, packaging and the UI/UX from the product. Impressive work I have to admit and I would love to see something like Orion in action and see how the UI will react in a live environment with cars and streets all around. Published on Behance is the work from Clement Dauchy who is an industrial/product designer based in San Francisco, USA. Currently working at Astro Studios, Clement works on personal concepts after finding problems in his daily life. Looking forward to see more of him in the future.
We would like to share the latest mobile design from Tubik Studio. We’ve published their work before on Abduzeedo but we truly admire their philosophy to always innovate; especially what’s regarding mobile interactions. Getting inspired by new UX interactions are always refreshing and pounding your mind to create or have them in mind during your next wireframe session. Hope you will enjoy! Tubik Studio is a design agency focusing their work into mobile/web design and development, motion design, graphics and branding. Currently based in Dnipropetrovsk, Ukraine, I would hit their Dribbble from time to time and they always share really inspiring interactions and UI inspiration. Definitely worth a visit.
Nokia OZO is a web design, interaction design and UI/UX project shared by Viktor Vörös on his Behance profile. OZO is a virtual reality camera, the first of its kind and of course it looks extremely futuristic and the work that Viktor did an excellent job showcasing it on a beautifully simple and elegant web site. The cool thing about his design is that the camera is always on the first plane and everything looks secondary in a way. The images of the camera always pop and the low contrast text and black and white theme help with that quite a lot. Enough of descriptions, check it out after the break and let us know what you think. The world’s first professional Virtual Reality camera. Crafted by Nokia Technologies, OZO combines the ultimate in engineering capabilities and intelligent design to offer you the best Virtual Reality production experience. Viktor Vörös is a digital designer from Szeged, Hungary. He is passionate about design, always keeping his ambitions high and quality in focus at all times. He has done work for clients like Microsoft, Samsung, L'Oréal Professionnel, Vogue, Rolls-Royce, Konami, 20th Century Fox & more. For more information check out http://hellowiktor.com/ Web design
We would like to feature this interaction design project by Watson DG for the Moonlight Movie. Recently the movie has won many prestigious awards at the Oscars (2017) and especially for the Best Picture. Asides from the reveal controversy, the kind folks over Watson DG created the site that drew many of our attention to its success. From the visual, the site offers a simple and clean experience. I gotta appreciate the detail for the headings with that thin ruler line across and used as a divider. Watson Design Group is a digital studio based in Los Angeles, USA. Founded in 2005, they focus their work into creative and online development from web campaigns to digital marketing. You should definitely check out the live site, it's a lovely interaction with the header vs the scrolling. Moonlight is a transcendent coming-of-age film that is both agonizing and heartwarming- a true display of the humanity in us all. To engage in the dialogue surrounding the applauded film, Watson Design Group created a site that drew attention to the film's success as well as to the emotional impact Moonlight has had on its audiences, all through the use of poignant articles, quotes, and audience commentary. It is a look at what an unprecedented film meant to audiences around the world.