July 12, 2016
Designers and Developers live in different worlds. Although they are close together they don’t always have the same approach to an issue or idea, and that’s a good thing. In order to create great websites those worlds need to collide in a collaborative way.
Differences Between Designers and Developers
Designers can often spend a good amount of their time dreaming of what an experience could be. Designers are also the reason we have the lightning fast evolution of the web. Take a look at any trendy product page and you see what I mean, many of the animations, effects and “wow” elements are the product of a designer dreaming.
Developers think a little differently. We think of how the design functions. As we begin developing a new project we ask ourselves questions like: What technologies will we need to build this project? What can we do to keep the code simple and easy to maintain? Will these design elements and interactions work on older browsers? Are they necessary?
Often times developers seem to be the ones who rain on the designers parade, but our input helps keep sites fast, functional and future proof. We contribute something valuable, but sometimes, we take our quest for functionality a little too far. A design created from the perspective of a developer can often appear dull. That’s why as designers and developers we need each other’s help to create something both beautiful and engaging for the user as well as functional and fast for the web. Understanding each other’s goals and needs can go a long way towards creating something your users will enjoy.
As developers, we love our designers. They challenge us as to find solutions that we wouldn’t always have tried to before. Designers love developers because a developer’s input helps keep their designs fast and simple once they are live on the web.
In order to balance both designer and the developer input, we need to be able to speak the same language. We need to be able to translate our process to each other in a way that fosters creativity and structure.
One of the most important examples of great communication between designers and developers is how we use a design concept often called the grid. Let’s take a look at that now.
What is The Grid and How Do Developers Use it?
The grid is the design concept of separating a layout into equally spaced columns with gap between them (often called gutters) and aligning all of the elements of a design to these columns.
Many grids on the web use a standard layout of 12 columns. A portion of a website may fall across them all or just a few. A common example of this is the older web trend of a blog post with a sidebar on the right. In this example the post may take up 8 of the 12 columns and the sidebar takes up 4 of the 12 columns, completing a full row.
The grid is a concept that has been part of design long before computers were around. Before building websites, designers were using the process of separating content into columns for newspapers. This process is still used today. Pick up any newspaper and you quickly start to see the grid in action.
The grid is so often used across the web that developers have made tools to quickly layout designs using the a grid system. These tools save time and money (Many web projects would double in price without these tools and others like it). Sometimes these are built by a team to be used internally and other times they are build by developers as projects to be used as open source tools for the community. Two popular options are Bootstrap and Foundation 6. Both include a grid along with many other tools to help developers build and prototype quickly.
How Do Designers Work With Grids?
Aside from being comfortable with grids from print, designers can use extensions for programs like Photoshop to quickly design to the same grids that a developer will be using when they start building out the design. Two popular options are GridGuide and Griddify.
With the help of these tools, designers start on the same page as developers. They allow developers to respect the hard work that a designer has put into a design without the giant headache and extra time it would take without the use of the grid. It’s important to discuss what grid system will be used on a project before any design begins. This type of communication allows the designer to create something beautiful while still allowing the developer to adhere to the more strict rules of the web and mobile.
Discuss Your Approach to The Project From The Start
Collaboration and understanding of technologies is a solid foundation for designers and developers to build any project from. For instance if you need to build something fast it is better to design around the restrictions of the web so that the development can be completed more quickly and transition more smoothly to mobile devices. Alternatively if you have the time for something more elaborate the design can be more inventive knowing that some aspects may take a while to develop or may need to be removed for mobile. Talking your way through the process of a project from the start will save everyone time and help you deliver projects to clients faster.