Connect with us

Hi, what are you looking for?


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.

Written By

It’s pleasure to introduce myself; this is Keval Gandhi. I am Wordpress Consultant based in India having an experience of around 4 years.rnrnI have a great experience working on Wordpress and different frame works like: Magento | Joomla.rnrnMy all work is responsive and have an experience working on Bootstraps | Plug-in | extensions | Custom CMS.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Digital Marketing

Create stunning web pages with Magento Page Builders. Boost conversions, enhance user experience, and go mobile-responsive.


A huge number of online sellers are turning to Magento. Wondering why? Read this blog to find out more!


Magento Commerce Cloud is a fully-loaded platform with endless options for customization and integration for fast-growing eCommerce businesses. Here’s a detailed rundown of the...


This article describes what is Magento BI, its features & how Magento eCommerce BI enables b2b businesses obtain more customers.