I joined the iomer team midway through the process of a website redesign. The wireframes had already been created by other team members, and I was tasked with developing the site and the visual interface for my first project. As with many projects, there was a limited budget and a short timeframe. The process would have been too costly and inefficient to develop a separate prototype without any code to develop it further. We wanted to incorporate a more agile design process, and because we knew we’d be doing user testing, we needed a solution that would allow us to test the prototype and make changes quickly. For these reasons, using a front end framework was the right solution.
Why A Front End Framework?
Front end frameworks can be powerful tools in a designer’s development process. It can save a ton of time in the project process, and with most frameworks employing a fluid grid system, scaling to different devices becomes less of a headache. A framework also supports a more agile process, allowing a designer to design and develop a site in a streamlined approach. Twitter Bootstrap recently came out with an updated version of their framework,
Twitter Bootstrap 3. There are numerous frameworks available, and after researching a few, Twitter Bootstrap was chosen for its breadth of components and community support. Since this was the first time using a framework, I wanted to ensure that it was well documented and would support all my needs.
A New Process with Bootstrap
Developing In Browser Makes Life Easier
Gone are the days of pixel perfection in Photoshop with static mock ups. By utilizing a framework, I was able to begin developing a prototype of the site in browser straight from the wireframes, without getting caught up in the visual details. We wanted a prototype built in browser to have the ability to engage end users in usability tests. While this can be done using different prototyping tools, developing in browser assures cross browser compliance and testing on multiple platforms and devices. Using Bootstrap helped assure browser support, especially for IE8+. By getting the site up and running in a matter of days, we could quickly jump into user testing. We travelled to the client’s business and set up a usability test station for any patrons that came through. The changes that were needed based on this testing were implemented quickly with a new feature added in a matter of a few hours. Since the prototype was developed in HTML and hosted on a local server all the necessary changes made could be easily viewed by the client.
Responsive Design Feels Like A Breeze
Unless the project scope calls for a separate mobile site, a responsive layout is paramount. However, building a responsive site adds time and cost to a project, easily doubling the amount of design and development required. The update of Twitter Bootstrap 3 moved the framework to a mobile-first, fluid grid layout. This cuts down on the development side of creating a responsive layout and allows more focus to be put towards content strategy and information architecture on mobile platforms.
Twitter Bootstrap Goodies
A great aspect to Twitter Bootstrap 3 is the amount of built in components a designer can use. The form I had to design was lengthy with lots of content. To break up the amount of content a user engages with at one time, we used collapsible elements to section off form content. All the components supplied are well documented and easy to implement. If Bootstrap doesn’t provide a certain component there is a vast amount of third party plugins designed specifically for Bootstrap. The form also required a date picker, and while Bootstrap doesn’t natively provide that, multiple other developers have already created it and made it available for others to use. Because these components are designed specifically for Bootstrap, they work seamlessly with little to no adjustments necessary.
Bringing It All Together
The visual design of the site was developed concurrently with the workable prototype. Rather than sending the client a detailed mock-up of what the site would look like (pre-user testing), mood boards were created to present what the look and feel of the site should be. The mood board strategy fits well with the streamlined and agile approach of designing in browser with Bootstrap, and prevented the client from picking apart small details of the visual design without looking at the overall picture. Three mood boards were developed for the client outlining the suggested colours, fonts, image quality, and showcasing other sample sites. Similar to
style tiles, a mood board is a bit broader and less concerned with site element details like button styles. After the client selected the mood board they felt was appropriate for their vision, we were given a clear direction of what the visual design should look.
When our testing was done and the structural changes were made, applying the visual style based on the mood board felt effortless. Since the site had already been developed in the browser as a grayscale prototype, applying the visual styling only required a few CSS modifications.
Some Downsides to Bootstrap
- Class based modifiers: Using classes as modifiers can really hurt in the end. Our original wireframe had the secondary navigation floating to the right. After our usability testing, it was determined that it was more effective on the left. Rather than changing one line in the CSS file, I had to go through every site page and change the class name of “pull-right” to “pull-left”.
- Bloated CSS file: Unless you customize the CSS from the original download (as you should), your CSS will be HUGE. About 5,000 lines.
- Learning to be a better developer: With all the code needed as a simple copy and paste, acquiring the skills to develop cleaner and more efficient code won’t come easily. If this is what you strive for, then staying away from a framework like Bootstrap would be best.
Even though I came into this project midway, using Twitter Bootstrap allowed me to jump right in to the process. Developing the testable prototype with Bootstrap and creating the visual design concurrently, yet separately, created a more agile process and great learning experience. In the end, we were able to deliver a solution to the client that looked great and was developed in an efficient manner.
While Twitter Bootstrap is a popular front end framework, there are many others available. Each framework provides their own class naming system and different native components. Regardless of which framework you choose, they can be used to quickly and efficiently prototype and develop your solution.