articles on

A Few Tips for Prototyping with Atomic

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

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

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 :)