Importance of Design before Development

Image by Balázs Kétyi

Many young developers value design less than it deserves. For many of us, it is something that “makes things a beautiful phenomena”. But it is more than that. Preparing design upfront not only saves time during development but also directs the journey of software development.

Here is my opinion about the design and before development. With a background in computer science, I’m working as a UX/UI designer at CYBRNODE.

At the beginning of my carrier, I didn’t realize the importance of the design. I was assigned the project of a startup that was working in stem education. My responsibilities included both designing the web and developing their front-end. As most startups have time constraints the case was the same for us. That is why I skip the design part and moved on to the frontend-development. I thought I would figure out the design as I progress through the project.

Since I skipped the design part I now started facing problems during development. I was struggling with the choice of colors, the layout of the software, and even very basic things like a number of sections on the landing page. Which was causing a waste of time due to lack of focus. The interface looked like Frankenstein’s monster.

I discussed this matter with my team lead, he guided me to a solution. The solution was very simple they told me to spend some time on the design so I can have a clear image of what is going on. After spending some time on the design which includes wireframing, the design guide, doing research for end-users, and deciding the basic structure of the project. If you don't have any idea about these terms let's divide the whole thing into steps.

1. Wire Frames

Wireframes are the structure of the design. It helps you to have an overall structural view of how your website is going to look. In my case, I was designing for a company that deals in STEM education. This is an example of a wireframe.

2. Design/UI

Once you are done with the wireframes you should start thinking about the look and feel of the design. You can also take inspiration from resources like Dribbble, Behance, UIstore.design, etc. Inspiration is a big part of the learning process. After spending some days on a design I now have a well-defined UI for the project. I am now able to start development with a focused mindset.

3. Development

Now comes the development part when I am done with my design (color scheme, font family, structure, images, etc.) I quickly start building the website, and in a very short period of time, I was done with the front end. In this way, I not only saved my time and efforts but also the end solution was consistently nice and elegant like BBQ pizza 🍕

Conclusion:

When you are working on a digital product make sure you have a design ready before development. Because design is the first stem of any successful product.

1. A good design guides the developers to effectively understand the requirements.
2. Design not only saves programmers time during development, but it also makes the end product consistent and improves overall quality.
3. It also helps identify upcoming business logic problems ahead of time.

Thanks for reading! Let me know your opinions with your valuable feedback and share the content with those who are new to the field. 😊