What a time to be a designer whatever you are in the field of UI/UX, Interaction Design, Product Design or a Graphic Designer in transition. There are many incredible design tools out there and we are lucky to have such a variety to get things done or to integrate into our workflow. But now the thing is, which one is the right tool or the ultimate tool for my personal work? Your studio? Your organization? To be honest, there aren't any right or wrong answers. It all depends on what are the needs and what are the things you wanna accomplish. On my recent experience, I was asked to integrate Atomic.io into my design process as an experiment. I was surprisingly amazed by how it has changed since my last use of Atomic which was probably about two years ago. I will share with you the things that I liked and what I disliked, so here goes. Disclaimer: That is NOT a sponsored post, my opinion and feedback shared in this article are explicitly based on my own user experience. Thank you for reading! More Links Try Atomic From the Atomic Team Learn Atomic What the interface looks like What is Atomic.io Atomic is a prototyping tool that puts advanced interactive design features like logic, data, and variables. The first win for me is the fact that Atomic is browser-based, you can have the freedom to either prototype designs whenever you are on a Mac or PC. I am personally a Mac user (for Sketch) but some companies/startups out there are building their development structure in relation to PCs. On Atomic, you will be able as features: Basically design from scratch in Atomic or you can import your design Add interactions like gestures, user inputs, events and keyboard interactions. Learn Atomic through ultra-quick tutorials that teach you everything from the basics right through to advanced features. Animate your prototypes using One-click page transitions or finely controlled keyframe animations. Build reusable interactive components help you quickly scale designs while maintaining consistency. Introducing external data sources to create dynamic, realistic interaction designs. Create logic to handle complex, personalized user journeys. Share components, data, templates and more with your team via Atomic’s built-in libraries. Share links, provide feedback, design simultaneously. Access your designs anywhere through the Cloud UI Interface Since I haven't played with Atomic in years, it was almost like a new experience. At first glance, there is a hint of Sketch in Dark Mode but you have your toolbar on the left side instead of on the top. In Atomic, at the top, you will have what I called: Create Toolbar. You will be able to create a component, a mask, introduce a scroll and group your elements/layers. On the right side, you will have your alignment options, layout options, and appearance options. What's different though are the sections: Image (Inheritance), Actions (for your hotspots) and CSS (custom or export). Understanding Component vs Interaction Hotspot I would be honest, it took me a little bit of time to understand the intent of making a component and creating your interaction hotspot. It's very different but once you understand their properties, everything else goes pretty smoothly. You have to understand that if you wanna create an interactive component or shall we say a UI element. You will have to define its different state first because placing it into your prototype to make an interactive hotspot. It's a bit tricky at the beginning but totally right after your first try. What's good? Well as I mentioned before, I just like the fact that you are working within the browser. It's pretty fast and one thing that worked pretty well for me was the integration with Sketch. Yes! You can work on your low-fi and hi-fi prototypes in Sketch and simply sync it to Atomic. I can hear some designers mentioning the fact there are already those functions on Sketch, let's say we are doing different experiments with our process. If you wanna learn more about the Atomic Sketch plugin. Tip: before you sync your artboard to Atomic, make sure your settings are fixed with the project (on Atomic). Aside from the tool itself, I would say I love the community support around Atomic, you can supercharge your workflow with prototyping samples, resources, UI kits, navigation samples, tutorials and more. I would like to share a story where I had an issue during prototyping and I contacted Atomic for help. What's a game-changer is the functionality to collaborate and share links between us and the experts. Imagine sending a link from my prototype and one of their experts replied a new link with an updated functioning prototype with a tutorial on how to reproduce. It wasn't a company who sent them that email, it was an individual (me) asking for help. To me, that's awesome and one of the reasons why I am writing this article. Furthermore, this tool is completely free with full access to their features, unlimited prototypes, unlimited projects, and no usage limits. *Drop the mic What's bad? I wish the design tool feature was a little bit more robust like Figma for example so whenever you wanna design straight into Atomic, it feels more intuitive. I haven't played long enough with Atomic but I had this feeling during my participation. I wanted to experiment without thinking that I could do the "same thing" on Sketch or at the least it feels like a vector tool for example. Conclusion We can go more in-depth Atomic for our next article, maybe a tutorial? Let us know of your thoughts, do you use Atomic? What was your experience and do you still use it? What are your design tools that you use every day? You can tweet me @AoiroStudio. More Links Try Atomic From the Atomic Team Learn Atomic
It's amazing how prototyping has become one of the hottest skill-sets in the toolbelt of any designer. We went from pretty much zero to a plethora of applications that help us to prototype our designs. I attribute this to the mobile revolution, nowadays it's vital to be able to test your designs on the device. There are so many details that get lost in translation otherwise. Among the most popular tools Framer ranks at the top for many. Yes Lee shares some amazing examples of navigation style design that illustrate that quite well. Below you'll find some examples of the design and the prototype shared on Behance. Make sure to click on the images to see the Framer prototype as well. Yes lee is a Senior Designer and Seoul, South Korea. For more information check out his https://www.behance.net/yesl1121.
Designing interfaces and products is all about iterations and testing. Wireframing is a very important part of the process, it's about testing ideas very quickly and ideate. The last thing you should think about is the look and feel, but of course you don't want something terrible to show, especially when collaborating with other designers or clients. Basiliq - Freehand UI Kit provides a great solution for this problem. With over 300 beautiful crafted UI elements ready for your prototypes. Everyone loves high quality icons. Even user interface designer, who work with sketches and wireframes. The problem is that popular prototyping tools produce mockups that don't look so great. That's why we've created over a three hundred design elements specifically for prototyping. A hand-crafted set of icons for mockups. Customize 300 (maybe even more) little bits and pieces and bells and whistles. You can assemble anything from them. From the mobile YouTube UI to a model WWII tank. We've double checked to make sure you're covered. Current version is incompatible with assembling several abyssal fish spieces and Higgs boson. We're working hard to fix it in next release, thank you for your patience. Download Download the pack
Prototyping is a vital part in designing great products, from a simple poster to a car, it's extremely important to test designs in situations that resemble the real usage environment. My background is in Industrial Design and we used to prototype everything. Then I moved to graphic design and again I was always printing and checking to see how my designs felt. Now in the digital world, and with mobile taking over it's really important to be able to simulate the products in the handsets. There are quite a few frameworks out there but I would like to share one called Framer. Frame can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote. I started using it a few days ago, recommended by Noah Levin, a fellow Googler and the amazing designer behind the Google App for iOS with Google Now.? Framer is a prototyping tool for animation and interaction on desktop and mobile. Features Photoshop: Framer integrated with Photoshop to quickly export assets and set up a project. Animation: Animate any view in full 3D space with spring physics and bezier curves. Performance: Hardware accelerated for high frame rates. Based on CSS keyframes. Flexible: Works well for desktop, mobile and tablets. Plays well with the rest of the browser. Video preview Framer Photoshop from Koen Bok on Vimeo. For more information, to check out some demos visit http://www.framerjs.com/
We love industrial design, it is everywhere, every object was conceived with a goal in mind. That goal, most of the time, is achieved through the design. We have also learned to admire beautiful industrial design work, especially the first phases of the creative process and prototyping. Jack Lamburn's Lotus Esira Concept exemplifies all of this and that's why we would like to share with you here in this post. Jack Lamburn is a designer at James Park Associates. JPA work all over the world focusing their design output on commercial aircraft interiors, airport lounges and hotel interiors. Lotus Esira Personal mood board_ Sketch & development work Model Making Final Scale Model