A static interface works fine most of the time. But wouldn’t it be better if you added animation? You’ve seen animation used so spectacularly elsewhere. It will improve your product too. Right? Not always.

Product design is a necessary part of the product development process. Although design might necessitate some level of creativity and an understanding of visual arts, design and art are not synonymous. Where arts are meant to express, designs are meant to function. This post explains the basics of creating a high quality product design.

Have you ever had the daunting task of checking whether developers coded a component (e.g., button, checkbox, alert) according to spec and needed to find ALL instances of that component in a huge collection of pages in an unfamiliar design system? Let’s say you have a spec for an alert banner (component/symbol). You know what it’s supposed to look like. But now, you need to find every single page or modal that alert appears on, how to navigate to it, and what conditions cause it to appear, so you can check that all instances are coded to spec. Gulp! You definitely don’t want to open file after file of page-level specs/comps, search multiple pages and artboards, in a slow tedious hunt for that elusive little component, especially if there are 100+ files and hundreds of artboards in your design system. This is the dilemma I faced on a recent project. 

Application + style guide = smart buy

A recent project called for the creation of a single page site that would showcase a real estate agent’s expertise, sales history, professional connections, and various other impressive attributes. Pages would be generated using a fill-in-the-blank template. Eventually, two additional real estate agencies affiliated with our client would make their own versions of the page, identical in function, but with slight changes in styling and content. Future brand-specific styling variations would need to be documented somewhere, so Bitovi offered to provide a fill-in-the-blank re-usable style guide to go along with the template page. Both the template and the style guide could be cloned and restyled as many times as desired. Hence, our client bought themselves a cookie cutter vs. paying for one cookie at a time.

Learn how and why GreenSock became our animation pick

Feeling uncertain about how to add animation to a Web site or single page app? We’ve been in the same boat. There are plenty of CSS and JS animation frameworks available, ranging from free and easy (but limited and inflexible) to steeper learning curve, robust, can-do-almost-anything paid options. None are necessarily a “bad” choice, but you definitely don’t want to make a choice and find out later it can’t do everything you need, then have to start over with something new (losing valuable project time and developer resources, maybe even client confidence).

Projects would be so much easier if clients understood the vision for our concepts and automatically bought in but that almost never happens. The reality of the job is we need to get other people to buy-in to our work. Not only do we need to get buy in from our internal teams of developers and project managers but we also, most importantly, need buy in from our clients.

Below is a three step process to help clients feel more involved in the design process so you can get client approval and get to work faster.