Published on <a href="https://blog.prototypr.io/understanding-development-for-a-superior-design-delivery-process-23cf90faab7a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Tanmay Saxena 
<h4>A Case Study on my Design process refinements based on the learnings and understandings from my Development experience</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VaLXoygWcjz_dRPM-AoeZw.jpeg">Photo by <a href="https://unsplash.com/photos/cqkbESEkhjk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Mia Baker</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
As a designer, I prefer analyzing things that are happening around me and also try to understand how things work. May it be roaming around in the city, listening to music, or developing web products. And it has surely helped me improve both as a designer and a developer, because of the fact that I can learn a skill from one domain and apply the same skill set in the other. It allowed me to understand the limitations, as well as taught me on how far I can tweak a technology without hampering too much with the normal intuitive interactions.
One amazing thing that I got to learn was that there are a lot of things that are very similar between design and development. These things in turn helped me in cutting down the delivery time of both design and development as a whole. Following are some of the examples of the things that I keep in mind now before I sit down to design or develop anything.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x0wqzTTmt17sbiwhO7dSPg.jpeg">Photo by <a href="https://unsplash.com/photos/_Yc7OtfFn-0?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">RhondaK Native Florida Folk Artist</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
<h4>Variable based Color Management</h4>
A very common mistake that the younger generation of designers make is to be totally free of all the boundaries that would make development of a design vision possible, especially when it comes in terms of colors across the system.
When it comes to development, a developer finds it more easier to keep a track of all the colors being used inside the application with the help of reference variables which keep a key color hex (or other format) values mentioned. This not only allows them to refer to a color when the need arises, but also makes sure of the fact, that they are able to control the App’s color scheme and combination from a single control center for color management. So consider a case, when an application is up and running, and someone wants to integrate theme on it, as a developer I would only need to go back to the file that holds all the values together and create a ‘Switch’ statement, that can re-initialize (or switch between) values that belong to a different scheme. This helps to make the development time for a theme switch short and simple, and provides feasibilities for future ventures into colors without too much of hard-coding which by the way is considered to be a bad way to program things as it interferes with the flexibility of products.
Similarly as a designer, with the Libraries in sketch, I now am able to control fill colors and various states of text representation by simply creating mixins, or text style definitions as a symbol. While nesting symbols, I just need to import these symbols inside the other symbols and that’s done. For me an atomic form of symbol behaves like a reference variable which can be used to change colors with the least of effort.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2tkFIJTCRdbumdHYzLTbRQ.jpeg">Photo by <a href="https://unsplash.com/photos/JEVNI0B7Uwg?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">rawpixel.com</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
<h4>Creating and Using Atomic Components</h4>
Other than the color managment (with the help of mixins), it is also very important to create a library of the Atomic Components which you can manage and control for the long run.
As a developer they maintain core atomic components, along with text style declarations. This allows them to re-utilise already created core components in order to create more complex components and structures. Thus they define basic core styles for all the elements that would be essential later on during the time of templating later on. When you start curating/setting-up a new component, you can refer to styling references that you would have already defined while setting up the base style sheet.
Similarly, we create the basic core style guide with the Atomic components that would allow them to use those core components to create more specific complex elements. Once the core is established, we use those entities to construct elements that are needed to solve problems, or to create custom components that can be re-used throughout the system. Eg., A feed card of facebook is constructed using user image, anchor link for username, subtext to put timestamp of a post, an icon placeholder to provide the 3-dot menu, a text area for the status, etc. Thus, keeping your core entities ready, comes in handy always.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NdiFOoxRLHn2sNOSGupH0Q.jpeg">Photo by <a href="https://unsplash.com/photos/aV5xrpB0bwQ?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Soragrit Wongsa</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
<h4>Templating</h4>
A concept that is pretty common in the world of design right now when it comes to setting a base and transferring the same to the other members for a more standard design execution, is also something that is pretty common to the development world.
Templating helps in component utilization to create base/core solutions or functions with respect to design and development respectively. A process template is a bit different than a regular component, it is created with an entire process in sight. Eg., if you think about a search process template, you need a text field, a place to show results, and a background (in mobiles), bind all these together and you have a search process template. Similarly, a designer and developer can create multiple different process templates.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cy0uJPihwiw3OdRTL0STVg.jpeg">Photo by <a href="https://unsplash.com/photos/fDsCIIGdw9g?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ewan Robertson</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
<h4>Designing for Responsive Layouts</h4>
So once we are all set with the color-manager, the atomic components, and the templates, it comes down to thinking about the component usage across plethora of platforms, which means you would be coming across different types of devices and screen sizes. Thus, it is very necessary to understand the basics of responsive design so that you can utilize the screen space for the right kind of information at the right point in time.
As a web developer I used to work with CSS libraries like Bootstrap, Foundation, Semantic UI, etc. all the time and thus I learnt that it’s not the best choice to make major positional and content changes when it comes to mobile views, rather it is more about how the current UI adapts to the smaller screen sizes and repositions or toggles visibility of content. Also, when it comes to development, a mobile-first approach is preferred.
So whenever I sit down to design, I do make sure that I visualize all the features down to the mobile aspect of it, reason being slowly the web industry is mostly being used on mobile devices like tablets and smartphones which is surely something that is bound to continue till the advent of other mediums.
Thus, the basics of how to use the concepts of Responsive allows me to make sure that I craft the solution in way that it can be used on the mobile web as well. Also, doing so we are able to communicate an across-platform to the developers working the designs and also makes sure that the pixel vs point vs percentage part is also taken care of based on asset sizes and positions.
That’s about it for now, and as you can see, it’s pretty handy when you have control over the development/application side of things or even a good amount of knowledge is pretty handy. It also makes sure that we create designs and asks that can be pulled off by the development team rather than playing in a total free space.
All the above parts also bring in their very own limitations, and that is the beauty of it, as you can help your developer friends and teams out with a better communication pattern and they would surely appreciate the effort you are making as well.
Please share and comment if you like this post.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=23cf90faab7a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/understanding-development-for-a-superior-design-delivery-process-23cf90faab7a">Understanding Development, for a superior Design Delivery process</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Understanding Development, for a superior Design Delivery process

A Case Study on my Design process refinements based on the learnings and understandings from my Development experience

Top Stories