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.
Loading
Design 
The redesign of the CanJS website required a way to create a fixed header and a fixed flexible sidebar that adjusts its width based on its content. The main content container also needed to flex to accommodate more (or less) sidebar content.
Here's a layout hack using Flexbox for creating your own HTML template with:
Luca Wistendahl
Design 
Establishing a Design System improves the quality of a product for the people creating and maintaining it and offers the end-user a better experience. While building a Design System prior to creating a product is the best approach, you may find yourself in the position of having to create one retroactively. Instead of having made documented design decisions prior to development, you have to identify existing patterns and consider how best to standardize them.
Wade Harkins
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.
The Bitovi Team
Design
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.
The Bitovi Team
Design
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).
The Bitovi Team
Design 
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.
Paul Hershey
Design
Tips & Tricks for being a successful remote employee
Due to recent events, lots of people are now "Work From Home (WFH)". If you have never worked from home for long periods of time, it can feel a little weird at first. You might find yourself easily distracted by the TV, streaming services, chores, or your bed might be calling your name. Working from home can be a great experience - start with little changes to get comfortable. I want to share some of the things that have helped me in being a full-time remote employee for Bitovi for the past four years.
The Bitovi Team
Design 
The Myth of Why
"Accessibility is optional."
Legally Required Accessibility Requirements
It all started with Section 508 of the Rehabilitation Act of 1973 from the American government. This act made it illegal to ignore those with disabilities. It focused on the physical world by giving people the ability to enter buildings with wheelchair ramps and handicap buttons. The Americans with Disability Act of 1990 (ADA) expanded these protections into the world of technology.
Erica Price
Design
Icons are used in applications, websites, marketing materials, you name it. They communicate complex topics, create visual interest, punctuate topics, and draw user focus. One of the easiest things to do to ensure that icons are used correctly across applications is to create and share an icon typeface. These icons can then be added to documents on a computer as a font, or used in your stylesheet to display the icons online or in an application.
The Bitovi Team