Welcome to Episode #4 of BrightTakes, Brightfind's first video series!
In these videos, I'll cover different elements of creative design, along with answers to frequently asked client questions I receive as the Creative Director at Brightfind. If you have a burning question that you'd like me to discuss, leave it in the comments section. Enjoy!
Transcription:
Hi everyone, and welcome to another episode of BrightTakes. My name is Vince Tardy, and I’m the Creative Director at Brightfind, a digital design agency located in Silver Spring, Md. Today I want to talk to you about building a modern, flexible design process.
Building a Modern, Flexible Design Process
Before we talk about where we are now, it’s important to talk about where we were. In the past, we could count on designing for a fixed number of screen sizes - maybe 1024x768 or 800x600 - but the whole idea is that we were able to design “pixel perfect” comps. And we spent a lot of time designing pixel perfect comps. With the explosion of screen sizes that we have today, we’ve had to adapt our processes to become much more fluid, iterative, and more importantly, user and content focused.
Samantha Toy Warren, the creator of Style Tiles, said that our process has to be as responsive as the products that are being designed. At Brightfind, we break up our design process into three phases: Define, Ideate, and Build.
Let’s talk about each of those phases.
Phase 1: Define
First, we have a very robust design discovery where we learn as much as possible about the project. I’m a huge advocate of measuring twice and cutting once. The more information we have, the better we’re able to design a product.Next, we take the information we learned in our creative brief and we document that, and detail what was learned during the design discovery. After that, we’ll create wireframes, which define the functions, structure, and content areas of a website. We’ll also create a pattern library, which is a collection of design elements that appear multiple times throughout a site. It’s great for cutting down on the amount of rework, and it also ensures design consistency. That’s an overview of the define phase; then we move to the Ideate phase.
Phase 2: Ideate
We use Style Tiles, which help to form a common visual language between the stakeholder and the designer. As an example, imagine that you go to an interior designer and you say, “I would like you to redesign my living room.” The interior designer isn’t going to build a tiny little model of your living room with tiny drapes and tiny pictures. Instead, the designer is going to provide you with a series of swatches of color, different fabric types, maybe some sketches. Style Tiles are exact same concept for the web. They help us to make these design decisions independent of layout. The layout happens with the wireframes, if you recall.Once we have determined our design decision via the Style Tiles, then we move onto rapid prototyping. Rapid prototypes are medium fidelity mock ups with simple interactions. Whereas we previously used to make very detailed pixel perfect comps, rapid prototypes are looser and faster. They give us an idea of what the site is going to look like when we combine the style and layout. Brightfind uses a really great tool called Envision to upload our prototypes into the web and get feedback. We’re also very excited about Adobe’s upcoming Project Comet, which combines wireframes, prototyping, and designing. Maybe at some point we’ll have a discussion about Project Comet.
Phase 3: Build
Once we go through our Ideate phase, then we’re ready to build. We take all of these great design elements that we’ve created and hand them off to our front-end team. Front-end development is responsible for translating design layout and functionality requirements into actual websites. So they use things such as HTML, CSS, and JavaScript. They use Sass for creating modular, efficient style sheets. They use version control, using Git, or in this case we use Git via GitHub, which is a service. We also use task automation, which is very fluid and iterative. Task automation use tools, with funny names such as Grunt and Gulp, (a streaming build system), allow us to take on all these little tasks—saving, exporting, compiling, and all those things that happen in the background—that free the front end team to build according to the design vision.
Those are the three pillars of our modern, flexible design process. Of course all design processes are different, but at the core, they all have the same purpose in mind: getting to better design faster.
Thank you very much for watching, and I would be very interested to hear what kind of processes you have in your own organization. I look forward to talking to you next time.