articles on
Prototype Design: Atomic.io, the underrated prototyping tool
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
Introducing the new InVision - Sneak Peek
We are very close to the end of the year and the mighty team from InVision are still sharing a preview of what is coming for 2018. The new year could be easily one of their biggest years to date, we are quite excited for them. We can't wait to get our hands on their latest so we can share our feedback with you guys. Today we are introducing a sneak peek the new InVision, please take some time to watch the video. It comes with new features like up to 8x faster, new design, introducing spaces, powerful sharing and more. Give it a look! In their words Over the last two years, our product and engineering teams have been working tirelessly to essentially rebuild InVision from scratch. The new InVision—codename: V7—runs on an entirely new code base, is remarkably fast, and redefines collaboration across teams and stakeholders. It also comes with a whole new look. V7 was built to address what we recognized as an evolving trend in the world of Digital Product Design—namely, that the volume of new products being created is scaling along with the diversity of the teams building them. Design has evolved into a cross-functional discipline that touches everyone from engineering to marketing to the executive suite. Given this, our highest priority with V7 was to support this scale through performance, responsiveness, and accessibility for a wider variety of individuals than ever before. Up to 8x faster: V7’s entirely new architecture ensures lightning-fast responsiveness and reliability at scale. New unified design: V7 introduces a new universal design system to deliver a unified, consistent user experience throughout the platform. Introducing Spaces: Spaces make it possible to organize all of your project-related documents into one space. This includes Prototypes, Boards, and Freehands, as well as documents from other critical tools your organization relies on. Powerful sharing: We’ve taken sharing to the next level with the flexibility to distinguish roles and customize access across your projects. Built for what’s next: V7 lays the foundation for the future of our platform, including tightly coupled integrations with Design Systems Manager and Studio. More Links Request your Early Access Follow InVision on YouTube The new InVision is coming in 2018, and we can’t wait for you to get your hands on it. Watch the Sneak Peek
Introducing Figma 2.0 with New Features with Prototyping and Developer Handoff
We would like to share exciting news from our friends over Figma where they are introducing their newly 2.0 packed with features including Prototyping and Developer Handoff. This is pretty huge! I can't wait to give it a try myself and maybe share my thoughts on ABDZ. Meanwhile, let's take a look at what they offer with real-time collaboration, the end of versioning and more. In their words But as we talked to more of our users, we realized we couldn’t ignore prototyping forever. Designers were desperate for a solution that would let them create and present in the same place, with one single source of truth. Since we’re the only interface design tool that runs on the web, we’re uniquely suited to meet that demand. In Figma, the prototype is a living document rather than a dead artifact. Prototyping • You can tweak frames or add screens in real time while others watch. We’re already finding this hugely helpful in design critiques at Figma. • No need for endless versioning…or the crazy naming conventions that other tools require to order your artboards (good-bye artboard 1, artboard a1, artboard a1b, artboard a1bcdefgahhhhhfuckthis). • My new fav: You can navigate presentations from your phone. Any designers who dream of strolling the conference room like you’re giving a TED talk, this is your moment. • You can use components (symbols) with hot spots, so when you set a navigation from a component once, it will populate through all instances, as seen in the gif below (the component is the top left X button) Prototyping (Video) Developer Handoff • Developers can select an object and hover over another object to see redlines that measure the spacing between them • They can pull CSS, iOS and Android data with view-only access • We’ve segmented the data as: (1) Table view, which breaks out attributes so they’re easier to skim (2) Generated markup/code Developer Handoff (Video) We’re excited to offer an all in one tool to help teams work better together. That said, we know that designers and tech companies have a wide variety of workflows and requirements. Get Started now with Figma.
What is the best Prototyping Tool for you?
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
InVision is bringing Prototyping Tools within Sketch with Craft Prototype
Having prototyping tools within Sketch is something I've been waiting for quite some time now. And it's finally here! Introducing Craft Prototype by InVision. Sketch is such a powerful tool for UI design, you can to explore your workflow to a newer level by being able to prototype using Craft. Give it a try so are we. We should probably share some of our tips soon on our overall experience, what do you think? Within Craft on Sketch, you can simply add a hotspot to any layer in the project. Link it to an artboard with a destkop or mobile gesture and create transitions like: fading, sliding, rotating, and more. Once everything is ready, you can sync your screens to preview your work, share with your team, and collaborate in real time. This is pretty exciting! With Craft Prototype, you’ll experience an unparalleled level of continuity between Sketch and InVision. By bringing your design and prototyping process together, work faster, collaborate more seamlessly, and stay focused to create more amazing products with your team. Product design is complex, but your workflow shouldn’t be. Bring unrivaled context and continuity to your workflow—and create better products—with Craft Prototype, now free as part of the Craft suite of plugins for Sketch and Photoshop. To Get Started Now: Craft by InVision.
TrackDuck Joins the InVision Family
There is no greater time than our present to be working as an interaction designer and beyond. There's many great tools out there and brands that are working tirelessly to provide the latest of technology to improve our workflow. One of them are the mighty gang over InVision and this time is about acquiring TrackDuck; an award-winning visual feedback and issue tracking tool used by thousands of teams around the world. It's InVision's seventh acquisition in the last 16 months and TrackDuck are now joining their over 2.5M registered users. It's going to increase teams to work seamlessly and manage issues through integrations with leading project management platforms, including Atlassian’s own JIRA Software, Trello, and HipChat. We’re delighted to welcome the talented TrackDuck team to InVision and to continue bolstering our collaboration with Atlassian,” said Clark Valberg, InVision Co-Founder and CEO. “By connecting the tools InVision customers rely on, we are helping teams deliver better digital products faster than ever. Alongside the acquisition of TrackDuck, InVision today announced at Atlassian Summit (Barcelona) its integration with JIRA Software Server, the self-hosted edition of Atlassian’s flagship project management and issue tracking tool for agile teams. InVision for JIRA allows teams to sync InVision prototypes with JIRA issues to facilitate seamless collaboration between design and engineering, including through InVision Inspect. Now any team that uses JIRA Software, whether self-hosted or in the cloud, can take advantage of InVision’s add-on in the Atlassian Marketplace. To Read More via InVision Blog.
Introducing InVision iOS 2.0: All-New InVision App
The mighty folks over InVision is announcing today their all-new app named: InVision for iOS 2.0. What is it? It’s their latest addition to increase your workflow in terms of feedback. As we all aware that in our work, we are always going through workshops and presentations where sometimes we’ll miss some of the missing keys: stakeholders. Everyone is busy but with this app, you can make things easier and even on-the-go. Within the app, you’ll be able to easily view prototypes, comment, collaborate and resolve comments and more. All in real-time which makes things even more interesting. Let’s give a watch to the video. That’s why we’ve been working on a fresh mobile experience to support your workflow. We’re excited to share InVision for iOS 2.0, an all-new InVision mobile app—now with the new Conversations tab, to make it even easier to keep projects moving while you’re on the go. See how it works It’s free, and it’s ready whenever you are. Get the latest InVision app now! To download the app: InVision App.
Android Prototyping for Designers - Shapes and Click Event
Prototyping has become a very important part of the UI/UX design process. With mobile applications taking over the web it is imperative for designers to find ways to test their designs on the devices. In the beginning most designers, including myself, relied on HTML, CSS and Javascript to emulate the native experiences that the users would see. It worked quite well and still does, however it's not a very reliable approach if you really want to understand the constraints and complexities that a developer may face when translating your designs into the final product. With that in mind, I decided to focus my efforts on the Android Platform and Java to be able to create truly native prototypes. In addition, I wanted to deliver more than redlines but reusable assets that could reduce the churn and bug fixes because of differences in the jargon used by designer tools compared to the developers. Android doesn't have the same fame that its counterpart iOS has, however it's a great platform and it's not that complicated to learn for simple prototypes. Dare I say that it's easier than investing in learning Framer, for example, if you are designing for Android. The benefits of learning the right tool are enormous. Here are a few points I want to highlight Truly knowledge of platform constraints Much better communication with developers Reusable assets and styles Real craftsmanship workflow Well, enough pontificating, let's go straight to the tutorial. Android Prototyping for Designers Step 1 Open Android Studio and start a new project. The Application name I used is Shapes. Step 2 For prototyping I don't have to worry to much about older versions of Android. Of course it's important to know which one to choose. You can use the "Help me choose" option. But API 21 is the one that has the Material Design specs, so let's go with that one. You can have the spec running on older devices with the Support Library, but that is for another post. It's quite geeky, I don't understand either :) Step 3 You can select some templates to start with. For this project let's start with an Empty Activity. It will have Action Bar and some theme assigned, I will talk about that on a next post. For now, let's just play with shapes. Step 4 Okay, now it's when things get overlwhelming. Don't worry it's simpler thant it looks. What you see below is the Java file, or the behavior of our prototype. Step 5 For now let's focus on the design. On the left side, in the project tree column, select the folder "res" and then "layout". Click on "activity_main.xml". That's the layout of our prototype. Step 6 Delete that "Hello world" string. We won't need that for this prototype. In this screen we have the layout of our app. We have a column with widgets and right below a panel called "Component tree". You see that there's a component called "activity_main (RelativeLayout)". That is the main container of our prototype. We will add more components inside this one. Note also on the right side there's a column called properties. There will will find all the properties for the component selected. I bet it sounds a bit more familiar. Especially for the Dreamweaver users out there :) Step 7 Let's change the background color of the "activity_main" to #eee. Just select the background option and enter the value. Step 8 Now let's create our rounded rectangle. In order to do that we will create a "drawable" for it. It's like a vector that can be used as background and will scale accordingly to the component we use it with. So, select the "drawable" folder and click with the right click of the mouse. Select "New" and then "Drawable resource file". Step 9 Name it rectangle.xml. In android pretty much all the files in the "res" folder will be .xml. With exception of bitmaps. Step 10 This is the default file created. It has the XML tag and a tag called "selector" Step 11 Just rename the "selector" to shape. Add a property called "shape" and use "rectangle". Inside of the shape tag add a item called "solid" with the color you want to use and another one called "corners" with the radius of the rounded corners you want. Use the image below for reference. Also take advantage of the Android Studio autocomplete. It will save you so much time. Step 12 Back to the "activity_main.xml" file. Now let's add a new component to our layout. But before make sure the activity_main component has 0dp for padding. Step 13 Just drag a RelativeLayout component to the center of the screen. Change its height to 200dp and use 24dp for margins. Step 14 Now let's use our drawable for the background. Find the "background" property and click on the "..." icon to open the "Resources" dialog box. Step 15 Search for the "rectangle" drawable we created and selected it. Step 16 There you go, you have a card designed in Android Studio and ready to be deployed. Now comes the fun part. With Material Design we have the light properties that we can play with. Android renders that in real time. You can use either "elevation" or "translationZ" to cast shadows. Step 17 Let's try elevation. Set it to 4dps and Run your prototype in the emulator. Step 18 And there you have it. A nice card, rendered natively using nothing but XML. It's as easy if not easier than using HTML and CSS. Step 19 Now let's get a bit more advanced and try to add a click event to this card. The first thing we need is an "ID". Enter and id name "card" to the card, very creative :) Step 20 Now open the MainActivity.java and let's write some JAVA code. In order to access the card layout from the XML file we need to declare and bind the data. The first thing to do is to create a JAVA variable that will be a RelativeLayout like the component we use. To do that just write "RelativeLayout card;" Use the image below for reference. Note the position of that variable is important, write before the OnCreate method. Step 21 Once we have the "card" variable created, let's linked to our xml card. To do that bind it using the ID. The code is quite simple: "card = (RelativeLayout) findViewById(R.id.card);" - Don't ask me what the "R" is. I still don't know. Step 22 After that, it's almost like JavaScript. Just create a ClickListener event. Use the auto-complete. Note, every time you see the red underline alert press "Command+Return" to show the options. Step 23 Here's the auto-complete OnClickEventListener{...} - once you select that it will create the necessary methos and overrides for you. Step 24 Step 25 Now just change the cards properties. Here I just set the elevation to 300. So when you click the card will pop out. Step 26 So let's get a bit fancy. Instead of using setElevation, let's animate. To do that is even simpler. Just write "card.animate().translationZ(300).start(). That will animate with the click. Step 27 Let's also make the card scale X and Y. Step 28 In order to change the curves in android we have to use something call Interpolator. Here I am using a subtle elastic one called "AnticipateOvershootInterpolator()". It's pretty much the same thing as translation, you just add "setInterpolator(new AnticipateOvershootInterpolator())". Conclusion If you want to get fancier you can create an "if" statement with a "boolean" value to go back from one state to the other. Again, it's quite similar to JavaScript in my bad coding knowledge. The best thing is that you get full native experience and understanding about the medium you are working with. That, for me, is the true definition of craftsmanship. Knowing the tools, the materials and having the skills to do it. I hope you enjoy this uber long tutorial. I'll endeavor to write shorter ones for the forthcoming parts. Download Android Studio project
A Few Tips for Prototyping with Atomic
Needless to say that there is a wide range of prototyping tools out there and I won't say which one are the best ones because there isn't one. I liked to say it all depends on your workflow and what's your purpose of this tool. That being said, I've been using this prototyping tool called Atomic and what I enjoyed the most about this tool is how fast it is and the fact you can customize with CSS is a must (for me). Here's a few tips that will make your experience with Atomic more accurate and fluid. In Atomic's Words Type To quickly and conveniently select a color within the color picker, just type the name of the color or paste the HEX code into the color selector. You can even type different shades of popular colors. Just be sure to exclude the spaces between words when you type them. For example “darkgreen” or “lightblue”. Gradients • Open a Custom CSS Gradient Generator such as this. Choose your preferred colors, angle and opacity. In the CSSmatic example, there’s quite a few settings you can play around with. Just tweak it until it feels right. • Once you’ve chosen your settings, select ‘Copy Text’ and navigate back to Atomic. With your element selected, paste the CSS into the Custom CSS field in the Atomic. (adsbygoogle = window.adsbygoogle || []).push({}); Convert • Import your image into Atomic • With the image selected, navigate to the Custom CSS window and paste in the following: border-radius:50%; Mask • Import your image and full size • Convert your image to a Container. • Resize the boundary of the Container to mask the image About Atomic Atomic is a prototyping tool and collaboration web app for designers. Originally from New Zealand, this team has been making buzz on the Web with their fast and efficient tool with awesome weekly content. For more information and get your hands on Atomic: https://atomic.io. Originally from: http://blog.atomic.io.
Future of Prototyping Live in Sketch
Just a little while (past week), we've announced Craft-Styles by Invision LABS and today Invision announced that they acquired Silver Flows to bring prototyping live in Sketch. This is the future right here, both a passionate user of Sketch and Invision, allowing designers to prototype and see their designs live (real-time mirroring) on your devices for a better user experience. As we know that it's not about being pixel-pushing-perfect but giving the best practical contact for your users. The Silver Flows team joining InVision is yet another giant leap toward our vision of building the product design and collaboration platform of the future. A vision shared by the nearly 2 million users already on the InVision platform today. Silver Flows helps designers to define all of the logic and transitions required to create prototypes directly within Sketch, a first for the design industry. By enabling UX designers to design and build prototypes in the same space, they can more quickly test and validate the broader user experience their apps provide. Together, InVision and Silver Flows are building a creative cloud within Sketch that provides an unparalleled degree of continuity for designers and their teams. Watch it in Action For more information: http://www.invisionapp.com/craft
iOS7 Frosted Glass Effect with HTML 5 and Javascript
With iOS7 Apple introduced a completely new design for the 6 year old OS. Among all the changes, one that really caught everyone's attention was the blurred background effect. Basically some parts of the UI get a nice frosted glass effect. There are a couple of ways to achieve this effect using HTML and CSS. The easiest way is to use CSS filters, however the performance on phones is far from usable. With that in mind I decided to experiment with Canvas and the result was quite good. So in this post I want to share a little bit about the idea behind this prototype. Basic workflow What we want to accomplish here is a simple way to blur the content once it goes underneath a part of the UI. For this prototype we will use an action bar, or header. To do that in HTML we will have to use a little bit of Javascript. Basically what we want to do is: Render the HTML Duplicate the content area and convert it to canvas. Move the Canvas to the Header part Sync the scroll of the content with the canvas in the header Basic code See the Pen eJlfj by Fabio Sasso (@abduzeedo) on CodePen Javascript To convert the content area from HTML to Canvas I used a library called html2canvas (http://html2canvas.hertzen.com/). It's pretty simple to use if you follow the steps in the documentation: html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered <canvas> element } }); After the Canvas is rendered I then move it to the Header. I also added an ID so I can play with it in CSS and apply the blur effect in the future. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); } }); Blur Effect To apply the blur, I used another library for that, it's called Stackblur and it applies Gaussian Blur to a canvas element. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); stackBlurCanvasRGB('canvas', 0, 0, $("canvas").width(), $("canvas").height(), 20); } }); Conclusion The end result works pretty well for a simple iOS7 prototype. I am still working on fixing the issues with the scrolling, iOS doesn't have "on scroll event" which complicates things a little bit. Below you can see a demo of the prototype. You can fork it on GitHub (https://github.com/abduzeedo/ios7-blur-html5) and make it better :)