Prototyping animations and interactions is vital for a number of reasons: they can make your interface feel deceptively fast, they can help focus the user on a specific task, and they can provide a better sense of the current state of your application. Is data being loaded? Is something now unclickable? How long do they have to wait until they can perform an action?<\/p>\n
<\/p>\n
At Gusto<\/a>, I\u2019ve been working on a lot of tiny interaction details and prototypes lately for these very reasons — sadly there\u2019s not much that I can show you all in detail just yet. But, I think the process<\/em> of how I\u2019m doing this is far more interesting than what I\u2019m actually working on so that’s what I’m going to share here.<\/p>\n The problem I\u2019ve faced with prototyping animations comes down to the tools because they ultimately feel restrictive to me. Whenever I\u2019ve experimented with them in the past, I feel like one hand is always tied behind my back. It could very well be that I\u2019m not using them correctly, but I feel that none of them really mimic browser behavior quite right and, although I\u2019ve been fascinated to watch tools like Framer<\/a>, Marvel<\/a>, Zeplin<\/a> and Principle<\/a> gain traction, I don\u2019t think they\u2019re for me. At least not yet anyway.<\/p>\n In my opinion, the best way to prototype a lot of interactions is still with plain ol\u2019 HTML, CSS and (gasp!) a sprinkle of jQuery when I need it.<\/p>\n With my recent project, I decided to invest a little bit of time into CodePen to help our design team quickly prototype things. Here\u2019s what I built: <\/p>\n See the Pen Gusto Prototype: Header<\/a> by Robin Rendle (@robinrendle<\/a>) on CodePen<\/a>.<\/p>\n No really, that\u2019s it. It\u2019s just a simple prototype that looks like our app.<\/p>\n It\u2019s a pen with all the HTML for the app navigation — and it contains all the CSS, too. This way, a designer at Gusto can fork that pen and start writing HTML and CSS to experiment with a specific bit of UI<\/abbr> without all the added pressure of having to write production code. It\u2019s important to note that this prototype isn\u2019t for figuring out UX<\/abbr>, as tools like Figma<\/a> and Sketch<\/a> do a much better job of that. Prototypes like this are mostly useful when figuring out finicky UI interactions like tables, spreadsheets and dropdowns — components that can get complicated real quick. <\/p>\n To make this prototype, I simply copied and pasted all of the HTML and CSS from our web app into a new pen. (In the future, we should probably have a system where we\u2019re always prototyping with the latest up-to-date code from our app but, for now, I think this is a fine starting point.) This pen contains all of the menu and navigation items we need to make it look like the Gusto app. We have a a separate pen for the footer which closes off all the divs that we open up in the header. Lastly, we have one more pen that imports those two other pens like so:<\/p>\n See the Pen Gusto Prototype: Full<\/a> by Robin Rendle (@robinrendle<\/a>) on CodePen<\/a>.<\/p>\nHow I\u2019m prototyping today<\/h3>\n
<!-- HEADER -->\r\n[[[http:\/\/codepen.io\/robinrendle\/pen\/481a88853820067752e28cdb479c91f3]]]\r\n\r\n<!-- HTML GOES HERE -->\r\n<h1>App Prototype<\/h1>\r\n<p>You can fork this pen and write all the HTML and CSS you need to prototype interactions and explore ideas right here in your browser.<\/p>\r\n\r\n<!-- FOOTER -->\r\n[[[http:\/\/codepen.io\/robinrendle\/pen\/0dcaa93954f06f4d03b7e23e8ea54cac]]]<\/code><\/pre>\n