Here at Friday we put a lot of focus on collaboration between team members and skill sets with a view to optimising what we deliver on every project. Traditionally the web design and web development processes are seen as two separate entities, design comes first, development second. As a web designer with some skills in front-end development, I’m increasingly aware of how collaborating with your lead web developer during the design process really impacts the outcome of the project in a positive way and avoids potential pitfalls along the route of development.

Avoid any issues early in the process

As a designer, the emphasis is always on visual style and usability, and designers can often come up with creative solutions to display and navigate content which might work great in theory, but may not always work well from a developers point of view. We’ll always discuss any new ideas at an early stage with our developer to make sure that they are feasible from a technical standpoint, and a practical one.

Designers and developers will have different priorities for a website, and too often the designer can take too much control of the site, always make time to discuss the design with your developer before showing it to a client. You don‘t want to show your client something which may be too difficult or impractical to build. Whilst the debate as to whether designers should be able to code is one we won‘t get into here, I will say that I believe a designer will produce a better result if they have a basic grasp of the web technologies being used by the developer.

Understand the technology

At Friday, we mostly build content driven websites using WordPress, an open source framework that is very scalable. We find it works well for both large and small sites, and clients love it. From years of experience, our designers know the platform well, but we’ll always ask our developer for their opinion on the design in terms of performance, usability, and how the client can manage the various elements.

99.9% of the sites we build have custom functionality that we build from scratch to suit the needs of our clients, and it’s these areas in particular that can benefit from a close dialogue between designer and developer.

Listen to your developer

Our developers often have great ideas too, in terms of style and functionality. Ziggy, our main developer, is always looking for the latest advances in web development technologies and techniques and can point out things to us that we may not have been aware of. For example, recently he showed me a jQuery colour picking plugin, that scans your web page for the most dominant colour and outputs it as a variable for use in your stylesheet. That conversation led us to use the concept on a website for Sinéad Moriarty where the main slider on the homepage utilises the main colour from each book cover.

Working with Ziggy on this design really pushed it forward, and made me as a designer, think outside the box and we’re very happy with the result. It’s very easy for a designer to think in terms of static designs and images, but your developer can often remind you about how using dynamic elements can really bring a design to life and make it more flexible.

Consider technical specifications

Outside of suggesting new and clever techniques in web-design, your developer can also point out pit-falls in a design that may not be obvious to a designer. Something that might look great in a flat mockup might not work well responsively, or might not be easily updatable by a client. Having these conversations early means that designers and developers can work together to come up with creative solutions to potential issues that both parties can be happy with.

A good design is only good if it works well, and that means it must perform well speed wise, and it must be flexible and intuitive for the client to update, beyond simply looking good.

Make the most of your resources

As I mentioned earlier, a lot of our website development is WordPress based, and discussing design ideas with your developer can help you define the structure of a site. For example, if we’re creating an online shop for a client, and we choose to implement the WooCommerce WordPress system for managing the shop (Woo-commerce is the most popular WordPress eCommerce Plugin), then, unless you are familiar with the system you’ll want to run through it with your developer before approaching design.

While we find Woo-commerce very flexible, there are guidelines that you’ll need to follow in order to have a smooth shop experience. As a designer it may be tempting to “streamline” the process where you might end up removing functionality or checkout steps that are vital for the system to work properly. Your developer can advise you of the necessary steps required, and can point out features available that you may not have considered including in the design structure.

For example, order history, or up selling similar products are examples of features that are easily integrated into a Woo-commerce shop, but not so easily incorporated into a design if it hasn’t allowed for them. Always check with your developer that you are making the most of the technology you are using.

Besides all of the benefits from better communication between designer and developer from a design point of view, the benefits can also work in the developers favour. Being involved from the beginning means that your developer will have a greater sense of ownership on the project and feel a greater sense of accomplishment on completion.

Team members collaborating more closely together can never be a bad thing, and after a few projects it will become obvious that the skill sets on both sides are being expanded. Designers learn more about the technicalities of their designs being brought to life, and developers learn more about the design stages of a project and why certain design decisions were made.