Case Study: Fulchers of Cambridge
|
|
We thought it might be interesting to share the design process we went through to create the site Fulchers of Cambridge, a removals and storage business based in the city. The design process itself can be grouped into the following distinct phases;
|
Jumping into any design project before examining the problem or task at hand might spin the wheels, but won’t get you very far. The project, no matter what size, will benefit immensely from research and planning before the work begins. If discovery begins before the exploration commences, the probability of finding a successful direction for the project only increases. The amount of time spent on this phase should usually be proportional to the overall scope and planned duration of the project.
For the Fulchers design, we began by studying the content of the existing site pages, in order to create a model of the document flow and hierarchy. We aggregated the sections and pages into logical groupings and assigned each respective priority. We also spent time considering the purpose of the project, along with the ideas and concepts Fulchers were trying to communicate to their customers.
The site was to be a commercial platform aiming to raise the public awareness of an already successful and recognised brand and to extend its customer base beyond an established area of operations.
This stage in the process involves looking at existing ideas and creations produced by peers and competitors. Competitive analysis identifies the strengths and weaknesses of those existing designs. It can reveal gaps which still need to be filled and shortcomings which should be met. The ability to study what others have designed for the same (or similar) problem lends a sizeable advantage, since a great deal can be learned from their successes and failures.
In the case of the Fulchers and the removals industry we had the advantage of being able to study many existing commercial sites. The concept, makeup and feel of each site was studied and evaluated. Creative and presentation elements and similarities and differences between all the sites were noted. Importantly we sought out characteristics which weren’t yet present and elements that had evolved as defacto for the industry sector.
We began tackling the design project by creating lists of relevant words, topics, phrases and functional ideas. This constituted a sort of a free-form brainstorming of thoughts related to the project at hand. Some are abstract and loose, some are concrete and tightly related. By creating these lists, ourselves and client gain a broadened perspective of the problem we’re attempting to solve, and often uncover additional ideas and concepts which weren’t immediately obvious at the outset.
The Fulchers lists contained groupings of words and thoughts related to removals, storage and services to homeowners, customer service qualities, such as courtesy, care and attention to detail, and characteristics of page design. We also created idea maps of how we all envisaged the site functioning as an end user experience.
 |
Once we had exhausted the idea branching, we started off producing sketches and developing these into storyboards. Thumbnails are small sketches which can literally be as small as your thumbnail, or as big as a couple inches in width and/or height. Think of the kind of drawing that might be seen on a cocktail napkin. Thumbnails are intended to capture the basic ideas for page composition, like header placement, column structure, and text alignment without allowing the temptation to focus on small details too early in the process. They can be quickly sketched allowing rapid idea iteration. When we didn’t like the one that just took 30 seconds to draw, we simply started another one right beside it, perhaps borrowing a single element that was to our liking. It’s best to start with rather small sketches. Then we slowly size them up as more details need to be worked out and eventually developing into storyboard type designs mapping the end user experience and navigation of our envisaged site design |
| Once we had arrived at a few initial compositions, we began studying typefaces and letterforms. In design, typography is a crucial element in setting the formality or informality of a design. Evocations of different typefaces are subliminal to most people, but designers must ensure the selection and construction of type complements the mood of the piece. The easiest way to examine the effect of different typefaces for this project was to create an Illustrator file, and begin setting “Fulchers of Cambridge” and “Removals and Storage in multiple fonts. We have a high familiarity with lots of typefaces, but we wanted to explore all the possibilities and garner feedback from the client. We were looking for something which characterised a professional approach but with an element of informality reflecting Fulchers close links with the community of Cambridge. |
 |
 |
Imagery is not always necessary in design. In fact, some of the most beautiful designs use type and subtle use of block colour alone. However, selectively chosen photography or illustration can create enormous visual impact for a design, adding dimension, implication, and a deeper level of understanding far beyond a well-written headline or paragraph of text.
Our next step in the process was to research imagery which could be used as the foundation for background texture, and imagery to act as supporting visual content. The lists we created earlier in the Exploration phase helped provide direction and spawned additional ideas. We have an extensive stockpile of digital photos and artwork, but we will always aim to incorporate imagery directly related to the client. Imagery conveys concept and identity very powerfully and it is therefore vital to reflect the brand and client image accurately in excellent context.
We will also combine text and imagery to achieve subtle variations in color and value. Just as with other pieces we’ve created, we built up the design imagery over time, taking it through a deliberate process of addition, subtraction, and manipulation.
|
|
We tend to keep imagery confined to particular regions of the layout, or reserve it for specific purpose. The overuse of photography or illustration can quickly create a crowded, chaotic design which just obscures the intention or message of the piece. Contrast is an element of design which we love to work with when creating anything visual. This comes just as much into play with use of imagery in a composition as it does within the image itself. Effectively integrating imagery into a design requires an awareness of balance and tension. Compact areas of motion and activity, countered with spaces for the eye to rest and relax.
With our composition ideas laid out, and initial choices for typeface and imagery made, we began combining them in more developed digital sketches. Alternating between Illustrator and Photoshop, importing art from one into the other, the design was pushed towards final mock-ups. When designing outside HTML and CSS, we focus on constructing the language and guidelines of the page, determining proportions, widths and heights, gutters and white space, specifying complementing typefaces, choosing relative type size and leading, and the application of color as a means of both obvious and subtle accent.
|
 |
We started writing the CSS for the design at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page. Groups of elements were positioned in correct locations. Then we applied the necessary detail to each element, from the top of the page, down.
As we composed the style sheet and tested the page in various browsers, the design changed in small ways. Some changes were sacrifices, some were evolved improvements.
These changes were possible because the designer and style sheet author could make decisions on the fly about what was important to recreate exactly and where the flexibility existed for the design to evolve as it was coded. This unity of thought at the final stage of the process is a strong reason the designer and person responsible for generating the HTML and/or CSS need to be working together as closely as possible, if the two are not already the same person. At Altfusion our team has a great deal of experience working on a broad spectrum of projects. All our team members are highly skilled in both design and coding development. This facet affords us great flexibility, speed of development and collaborative working whereby the team are always working cooperatively with a full individual understanding of the project specifics and implementation.
Although this is where we’ll leave this brief expose, the ever-changing design process does not end here. This summary is not an exhaustive one. Additional review and approval cycles, more design iterations, and frequent user testing are all inserted anywhere into this process as required. The process is not always predictable, and neither should it be applied as a rigid framework. Flexibility and the ability to rapidly react and implement the evolution of the design enable altFusion to continue to offer the very best customer satisfaction.