From Concept to Product

The Digital Design Process

Design is more than simply how something looks. It is also how something works and feels. In the world of digital, we are constantly interrupted and distracted. Therefore good design is essential to ensure you keep the attention of a user and hopefully, they complete a specific action. A good design should be able to solve a given problem in an intuitive and appealing way, which is why it is such a crucial aspect to keep in mind before any project starts.

The Digital Design Process:

The planning stage of a design project is essential. It is the opportunity to really understand what problem needs solving and what the end goal is. Whether it be an app or web development project, it’s important to understand how the product will be used, who will be using it, and what its purpose is. It’s during this discovery stage that we sit down, analyse and really understand the brief given to us, making sure any requirements are noted before moving onto the next step in the process.

Kodal blog design process Artboard 1 2x
Design process 1

Start with wireframes:

Using the information gained from the concept and planning process, it's time to start putting together a visual representation of how the app may work and function. Wireframes are the first step in communicating the proposed structure of the app. They take away the distractions of worrying how it looks early in the process, so the focus can be on function. During the early stage's wireframes may change as the project gets refined. Using wireframes is a fast way to ensure you get the user experience that you're looking for and helps decide how things work and where they go before any building starts.

Introducing Mockups:

Now the functionality has been agreed it's time to start giving it some style. Colour schemes, fonts and branding guidelines are applied at this point. The overall look and feel of the website or app will start to come together and a sense of the finished product starts to come to light. Mock-ups are also very important when the next step begins - development.

Design process 1 1
Design process 1 2

Development of mockups:

The time has now come where we put everything together to deliver something usable. Using the agreed-upon technologies, be it React Native for App Development or Craft CMS for Web Development, the Development team starts to craft something functional. Working closely with the agreed wireframe and mock-up designs to ensure the project comes together as expected.

Regular reviews and testing as project milestones are met will help in keeping the project on track, until finally, the finished product is ready to Go Live.

The whole process, concept to wireframing to mock-up to finished product is a dynamic one. Jumping in and missing part of this process inevitably leads to delays and a disappointing user experience, which should be the main focus. Taking the time to ensure the design process is done properly will enable not only the development process to run more smoothly but it will also mean the result solves the initial brief in a user-friendly and appealing way.