The Sports Backers mission is to encourage activity, exercise, and fitness in the Richmond Community. They needed a website for their Active RVA program which would present news, events, and recommendations for staying active at home, at work, and at school in an engaging and energetic manner consistent with the message of movement, activity, and exercise.
As is often the case with brand new websites, there wasn’t much existing content to work with in order to understand how to organize, structure, and design the website. The Sports Backers team was still working through the content generation process when we were to begin work, so from the start, this project was going to have a fluid nature, requiring a good deal of flexibility. In other words, it would be dangerous to set too many rigid guidelines at the start because there would be a high level of risk we would need to break them later.
Additionally, this website couldn’t afford to be boring. Not that any website actually can afford to bore its visitors, but this one in particular had a steep requirement to feel energetic, vibrant, and really espouse the notion of movement and activity.
Since we were building an entirely new website instead of redesigning an existing website, and since much of the content remained to be written and gathered, we decided to take a slightly different approach from the traditional design and development process for a website.
In a traditional website design and development project, we would perform the graphic design work in Photoshop first, creating a number of static page designs (images) or “comps” to demonstrate to the client how the site will look when it is developed in code. Typically, these image-based Photoshop comps go through several rounds of review and revision with the client until they are satisfied. Once approved, they are handed to a developer who translates those images into the code that creates the website.
Much has been written about the benefits and drawbacks of designing static, image-based comps in Photoshop to represent very non-static, code-based, interactive experiences on the web. Generally speaking, there are projects where designing look and feel first in an image format works very well – however, for Active RVA specifically, Photoshop didn’t seem like the most effective tool to make efficient progress under the circumstances.
Since we didn’t have a concrete idea of what the content may be (e.g. the amount and length of copy, the number and size of images, video, etc.), and because the site needed to be designed responsively for mobile and tablet devices, we decided to employ an approach often referred to as “in-browser” design.
Designing in browser is quite different. For one, the initial deliverable is likely not very detailed at all, but for good reason. The first deliverable is closer to what designers and developers would call a wireframe, which is something like a schematic drawing (usually just grey boxes or shapes to denote what content will appear on a page and roughly how it should be organized on the page). This first “version” of the site is very plain and simple – few colors, fairly plain type treatment, no graphical flourishes, and likely placeholder content.
The purpose of this first deliverable is simply to establish with the client where content goes on each page, how it may be organized, and roughly how it should be prioritized (i.e. what predominance and how much “page real estate” each element should occupy). This provides an immense benefit when it comes to websites that are responsive for desktop, tablet, and mobile because at this early stage of the design, we can already have the layout adjusting responsively to the browser’s width. In other words, as the design is evolving for the desktop view, it is evolving for tablet and mobile at the same time, and the client has insight into those other platforms throughout the design process.
Following this first version, new elements of the design are introduced progressively through an iterative process where enhancements (colors, type, graphics, etc.) are added to the site through each round (or version) with the client providing input and feedback along the way. In this manner, the look and feel of the site grows organically with the client participating more closely in the design process as it progresses rather than responding to an end product and requesting changes.
As anyone who has ever designed anything will quickly point out, this has the potential to go very bad, very quickly – but under the right circumstances, it can work beautifully. With the Active RVA website, and working with The Sports Backers team, we felt comfortable taking this approach and agreed to try it.
Made for Motion
Another reason to design in browser was the need for movement and motion in the website. One of the weaknesses of designing a website in Photoshop is that it is quite difficult to convey movement, motion, and interaction in a static image. In code however, it is quite easy to establish some rough, simple actions first, and then refine them progressively as the look and feel unfolds.
Since the Active RVA website had to embody activity and movement, we tried to incorporate it wherever we could (without being silly). From sliding calls to action on hover states to a spinning magnifying glass in the search box, small touches of motion can be found throughout the site. But before you even get to those smaller details, the first thing everyone notices about Active RVA is the background video.
The decision to use background video is entirely the result of designing the site in browser. If we had been working in Photoshop from the beginning, we may not have thought to use background video because the process of selecting design elements in the context of image-based design would have been grounded in more static options.
The idea for the background video came as something we simply decided to play with as we were coding an early version of the site. It was simple enough to add, and once we saw it in the site, we loved it. And since we didn’t need to wait until having a final site design to show The Sports Backers, we were able to show them immediately and get their buy in on the idea. In-browser design allowed us to experiment quickly, keep good ideas, and cut the bad ones – all while getting input from the client.
The Active RVA website is one we like to show off because as soon as people see the background video, they are amazed (and typically want the same thing in their website) – but it is equally as fun to show all of the iterations of site as we designed it in browser because it reveals some fascinating details of that design process, namely how it differs from the traditional, static image design process. You can clearly see how small enhancements and evolutions of the design were built upon one another, turning a very simple layout into much more dynamic and visually interesting experience.
Another important change you notice from version to version is that the content and organization evolved over the course of the website build. For anyone who has ever designed or built a website, this will surely come as no surprise! It happens in most website projects, where something was forgotten or something changed, and now the design that was approved weeks ago needs to be changed during development. That situation can often cause distress (along with increased project costs) because it means that work already completed needs to be unwound and/or performed again.
In this case however, since we never spent time designing it in the first place, it wasn’t a problem to make an adjustment while the design was being created in code. Some of that ease is probably due to the fact that the changes weren’t dramatic, though it is also likely due to the fact that without an “approved design” we didn’t approach the code as if we were working towards a design that should be considered gospel. In-browser design, by it’s very nature, is somewhat fluid and flexible.