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, 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.
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 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 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 a desired outcome. 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 should the final version 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.
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 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 developers 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 developer would ask questions that 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, 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 – designer immediately jumps on that and together with the front end developer finds the solution.
Final phase
Importance of being on 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 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 were 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.
If you’d like to learn more about what we can do for your business, check out our Magento Web Design Service and Magento UX Design Audit.
