Development and Design Under the Same Roof

Building a web shop on Magento is challenging. When you see a feature that looks “so simple that you could do it”, it was usually not as simple to build it as you think. To create that “simple” thing designer had to spend a great amount of time finding the right solution. After all, creating a feature which draws on that kind of comment means translating something very unorganized and complex to something simple and understandable.

On the other hand, a developer had to spend a lot of hours translating that solution into code. Designer and developer can find that beautiful solution by communicating, which is crucial in this case. And that kind of communication, the one which yields incredible and neat results, would be much harder if a designer and developer are not placed in the same location.

The designer and developer can find that beautiful solution by communicating, which is crucial in this case. And that kind of communication, the one which yields incredible and neat results, would be much harder if a designer and developer are not placed in the same location.

It is all about communication..

When designing a web shop, designers always want to create the best user experience that will be followed by a beautiful user interface. The idea sounds so simple but the whole beauty of it is that it is not. It takes a lot of research, planning, sketching, trying multiple solutions and in the end – checking if that desired layout and functionality is possible within Magento.

In most cases, it is possible. But, think about the following things as well: is it worth the time, the money, possible performance issues, messy code…? If we give up on that functionality, what is the adequate replacement that will leave both sides satisfied?

That is the moment when “face to face” working meetings make the process easier for both designers and developers and where the magic of direct communication comes in handy.

By brainstorming, we can find the best solution which will give great user experience without leaving out the great performance.

The importance of that regular communication is the most visible in the wireframe phase when most of the features, website’s structure, and informational architecture are being arranged. Since I already wrote about the process of designing a Magento web store, I will now explain how important it is to work together, both designer and developer, and why one of the key factors is working on the same location.

Wireframe and design phase

It is crucial for a designer to translate to a developer what is the main idea and the desired outcome. The designer will brief him on the conclusion of the conducted research, importance of the planned features and explain, “face to face“, with help of wireframes and animation, what the final version should look like.

In the first phase of the project, when wireframes are given to developers, dialog about features and transitions (and many other tiny details) happens. On the other hand, if they are designed in an independent design company and simply given to frontend developers, they can have trouble understanding the designer’s idea and why is something designed as it is.

The designer and developer go through every feature on every page for desktop, tablet, and mobile resolutions and search for any possible issues that could happen while translating the design into code. It is not enough just to email the prototype approved by a client and say “Here you go!” because it is never possible to translate everything in the prototypes. Few emails with notes can’t replace real conversation. In some cases, explanations and conversation in person are necessary to give the developer the right course and keep them on track. Walking them through the design in person and explaining how it should work makes the process easier, neater and faster.

That is the moment when the developer would ask questions that the designer maybe oversaw and write down notes that could be useful while working. Because, in the end, we all have to be sure that something that is suggested to the client is doable.

Because of all that, the first people that see wireframes are always front end and back end developers – even before the clients. Wireframes must be first approved by a front end developer who checks the “We can translate that into code!” box, then by the client, and after that, it is time for the design phase.

While slicing the design some problems can occur. Something after all creates a problem and we have to create different approach and redesign it. No problem – the designer immediately jumps on that and together with the front end developer finds the solution.

Final phase

The importance of being in the same location doesn’t reduce even after handing the final designs to developers. After developers are done with their work, it is time for the designer to take a look to make sure that everything is in place.

That is the part where all smallest details are arranged, the smallest issues are found, and working side by side is crucial.

Conversations about tiniest details and sometimes showing physically what should be moved where is something that couldn’t be arranged if the designer and developer are not on the same location.

That collaboration makes building a web shop as efficient as possible and being able to consult with other team members in person can save thousands of dollars and hours of redundant back and forth messaging.