Without a solid foundation to work from, design can quickly become an overwhelming task, resulting in poor time management, unpredictable project lengths, and substandard design. You wouldn’t build a house without a plan, so why should design be any different?
It’s incredibly important our design team has an effective process that allows them to push the boundaries and to produce the innovative, creative work that our clients expect. While we understand that a process may need to evolve to suit different client requirements, outlining some of the key aspects of how we work will allow you to better understand the thought, planning and effort we put into every project.
Before We Begin
In order to produce the best possible work, the designers needs everything they require from the client. If the designer doesn’t have everything they need then they can’t ensure that their work powerfully and effectively communicates the client’s message.
The best way to avoid this is the simplest. Meet the client before any work has begun, not only to outline the project for everyone involved, but to guarantee that everyone knows what to expect and has everything they need. It offers an opportunity for designers and developers to discuss the aims and goals of the project with the client directly, as well as for the client to ask any questions or identify any issues they would like to raise before work begins. Establishing these aims early on means from the start we’re focusing on exactly what you need.
We’re a talkative lot in general, but in order to plan ahead and minimise risk the following topics are essential for any pre-project design meeting:
Branding
Unless the client is a new startup, it’s likely that they’ll have some form of existing branding and identity, often including a logo, typeface and colour scheme. It’s important to establish what they want to keep and what they’re open to experimenting with before work begins.
Many companies will have aspects of their brands that their customers strongly relate too, therefore it’s important to establish what needs to stay. This may include looking into new typefaces, colours, or in some cases going as far as creating a new identity altogether.
Structure
Examining an existing website can provide great insight into how a company currently works and what needs to change in order to move forward. This is also an opportunity to learn about a market you otherwise might not be familiar with.
Put simply, this is a way to discover what’s working and what isn’t. For example, a lot of customers are visiting a particular page, but why, and how can we use that information in order to increase leads?
Copy
One of the common issues we face when starting on a project is knowing what the current state of copy is. A lot of the time we’re forced to use Lorem Ipsum because we simply don’t have the real content to use. While this can be used as a placeholder until late stages of development, developing copy alongside other aspects will avoid copy that’s hastily thrown together and not carefully considered being added at the last minute.
Whether the client is taking responsibility for the copy or not, this is a chance to analyse the existing content and what else may be needed. Identifying what the client wants to keep, remove, or rewrite. For example, there may be certain phrases on the homepage that are already performing well, while other paragraphs are out of date and don’t relate to the company anymore. The earlier these decisions are made, the easier the process.
Features and Integrations
By examining the structure of the site both the designer and client can discover existing or potential features that may need to be explored further before being included in the project. These could be little interactive elements, specific relationships between content types or more complicated integrations with third party services.
Assets
With any established company comes an array of existing assets. Branding elements, content and case studies are just a few examples. Asking a client to send whatever they have can only give the designer a better understanding of the company and better inform how they communicate their message and brand values.
Content is Key
We’ve already established that content is vital to the success of a project. If it isn’t managed properly, it can negatively affect the design and development, even after the project has been completed. But there are ways to effectively manage content. This is ours:
It starts with a sitemap of all pages within the site. Signed off by the client, this gives the designers a solid foundation on which to build. Everyone knows how expansive the site is, how it’s structured, and how the each piece of content will relate to each other.
We solve the issue of how to aggregate content using GatherContent. It allows us to create a sitemap and invite the client to add their own content in their own time. We can customise pages with different content blocks, along with handy features such as word limits to ensure that we always have the required amount of content.
Having a cloud based location for all the content is great for both the client and ourselves. The client, designers, and developers can all retrieve content from a single location. Paired with the revision capabilities of GatherContent it means that nothing is lost or miscommunicated between team members, or the designers and the client.
Maintainable Design
Different designers like to work in different ways. We all have our preferences for how we prefer to approach a project, as well as how we arrange our Photoshop and Illustrator workspaces. Yet some of these differences in the way a design team works can prevent things from running smoothly. There’s nothing worse than opening up another designers files to discover a different layer structure or effects applied in different ways. Time can be wasted just trying to understand the mindset of another designer.
Therefore, for the sake of effective time management, team skills, and maintainable design, it’s important to have a set of rules and guidelines in place that all designers adhere to. They need to be broad enough that designers still have the freedom to work in the way that works for them, helping them to be as creative as they can be, yet specific enough that they always have the ability to pass their work on to a colleague without sacrificing important project time trying to understand how another designer prefers to work.
An effective set of guidelines allow us to focus on ensuring that a project can be properly maintained, even before development has started, and that the site is optimised to create the smoothest experience for your users, across all devices, from day one.
Accessibility
It’s not just how a design file is organised that can affect productivity. How they’re organised and stored also plays a big role. It’s important that when anyone leaves the office, they ensure that any files they’ve been working on have been copied or moved to a shared medium.
We’ve found that the best solution is to use a Network Attached Storage device (NAS). Located in the office, it quickly allows designers to share files between themselves and provide a location for all projects files to be stored. Paired with an automated Dropbox backup script and access from outside the office, we always have access to our project files regardless of location, machine or person.
Application Guidelines
The Big Bite development team has a solid set of principles for governing how we code (Read our article Our Process: Opening The Black Box to learn more). Best practices and examples ensure maintainable scalable code across small and large projects, and these guidelines can translate to the design process too.
Our primary design tools, Sketch, Photoshop and Illustrator, have an almost unlimited amount of options and effects. Often there are numerous ways to achieve the same goal, so by outlining best practices it allows our design files to be universal across our team.
Designing
When jumping straight into Photoshop you don’t have a foundation to build on, so there’s a tendency to try to do everything at once. By breaking down our design process we can focus on individual characteristics separately, helping to keep our designs well thought-out.
Research
Depending on the type project we may spend hours up to days researching the purpose and objectives. Spending time learning more about your customers and how your competitors work can help focus our designs and make you stand out from your competition.
User Experience
We’ve found that the best way to start a project doesn’t even involve touching a computer, instead sitting down with a sketchbook and a set of pencils. This allows designers to experiment with bare-bones concepts and not yet fully-formed ideas, without the restrictions that a computer inevitably imposes on you. By including the developers in these concepts early on, it ensures that everything is possible within the projects timeframe and budget.
Once the designers are happy with the concepts it’s time to create digital wireframes to represent them. These don’t go into the details of typefaces, colours or specific spacing, but they allow the designers to experiment with the layout and structure of the pages, as well as how they’ll relate to one another.
We then link them together using Invision to help convey ideas and the overall user experience. This allows the client to click through and annotate individual wireframes with any questions or feedback they may have. An example of a few of our early concepts are below (Field Notes for scale).
Interface Design
Once everyone is happy with the wireframes we begin the process of full interface design. Initially focusing on typography and colour rules, before moving onto spacing and the finer details.
With the layout and structure already decided on during the User Experience phase, we can focus all of our creative energy on ensuring that we’re conveying the correct mood and message to the client’s users.
Below is an example of a fidelity wireframe we used to help convey ideas for illustrations and interactive features.
UI Components
Beginning development after the design has finished isn’t uncommon in the industry, but we feel this tends to drag out a project, costing us time and our clients money. That’s why we start development not long after the design process itself has started.
Once the first few designs have been completed we’ve usually set a large amount of styles for the project. Layouts, element sizes and typography, are just three examples. At this point we work with the developers to create a UI Kit full of elements that will be used on the site. This means that they can start creating a modular website almost immediately and all we have to do is amend and add elements as the project progresses.
Above is an example of the colour palettes we’ll create for our developers including colour codes and variable names.
Keeping Developers Happy
Here at Big Bite we like to keep our developers as happy as possible. One of the best ways to do this is to ensure that, throughout the design phase of a project, the developers are kept fully informed about all of the features that we’re designing or proposing. Not only does this mean that we get useful input from our developers, but it also ensures that the project will meet its estimated timescale.
Annotating our designs also plays a big part in this. While we try to keep the developers as informed as possible, there will always be something that slips through the net. Adding notes to our designs allows us to go through them with a fine toothcomb, explaining how we want an interaction to work or why a particular section is slightly different. This also has the benefit of forcing us to consider every aspect of our design. Since we have to explain it to the developers it’s good practice to explain it to ourselves first. For example, does it actually serve a purpose or is it just there to look pretty? All of this encourages more considered design throughout the process.
Wrap-Up
Communication between designers, developers, and clients is the key to a successful project. By having a proven process to work through we can ensure exceptional work every time.
As discussed previously, we understand this process will need to adapt and evolve to suit individual clients needs, but if you have any thoughts or ideas on how we can improve this process just get in touch. If you have a better tool to organise your content or whether you prefer Photoshop over Sketch, get in touch. We’d love to hear your thoughts!
