A Glimpse into our Web Design Process: From Design to Development

By Sandra Dammizio | February 4 2022

It’s always important to make a good first impression. A website is a major point of contact for an organization and its audience. Many clients join our family with an understanding that creating a beautiful website requires a specialized skill set. But they are sometimes less familiar with the unique roles and contributions from the members of the Loop team! Far from being a one-person venture, the process of creating a website involves two unique teams, Design and Development. At Loop, our in-house Design and Development teams work together to create beautiful, functional websites for our amazing client family.

In this post, we will be exploring the intersection of Loop’s Design and Development teams with Graphic Designer Emma Steele and Developer Álvaro (Al) Ramos.

Roles of Design and Development

Web design and web development are the same thing, right? You may be surprised to hear that these terms refer to very different aspects of the website building process that require two unique skill sets!

“Design is like the architect and Development is the builder. We hand over the plans, but they wouldn’t actually turn into much if we didn’t have someone who could build them.”  – Emma

Web design is what creates the overall look and feel when you’re using a website. At Loop, this involves our Graphic Design team creating the visual elements of a website, such as colours and typography, which then come together on the pages of a site to give it a unique and memorable aesthetic.

Web development is the how we turn our web designs into a functioning site. Our Development team use programming languages, like HTML and JavaScript, to make it possible for users to interact with a site. Some of our Developers work to create front-end components, like buttons, while others build back-end processes like databases that live on a server.

“The way to produce beautiful things is to divide the work, have good professionals in each of the fields and then be able to work to put everything together.” – Al

At Loop, we are so lucky to have fantastic Design and Development teams in-house, allowing us to collaborate and problem solve throughout the web creation process. We think it’s a big part of our success in producing beautiful and functional sites for our client family!

Stages of Website Creation

At Loop, we like to start our web projects with an in-depth conversation with clients about the core objectives, audiences, and features for a site. Understanding an organization and its community is essential to informing the later design and development of the site. These conversations also establish key features of the site like Investment Functionalities (eg. multi-language capabilities) that will need early and ongoing attention from our Design and Development teams.

“For me, it’s a challenge. How can we do this? But also how can we also do it realistically… within the scope of the project?” – Al

After Discovery, Design and Development work together to create a timeline and site map for a project. The Design team presents style guide options to clients with colours, type hierarchy, icons and button styles as well as other graphic elements that may be used on the site. These visual elements are compiled in a sample homepage so that our clients can see how elements work together. Once we receive a sign-off on the basic structure of the site, the Design team creates high-fidelity mock-ups of pages and modules.  After approval, the design files are handed off to the Development team.

Design Handoff

 At this stage in the web project we have a beautiful design and now it is time for our Developers to make this vision into a reality! Our Designers and Developers have been working together up to this point to ensure features and functionalities are set for success. At this point, our Design team hands off the design files to the Development team. These files not only provide visual reference to the Development team, but also help them understand the goals and objectives of the project and the various features of the site. At Loop, we are first and foremost a team of problem solvers. If the Development team knows the reasoning behind design decisions, they can use that information to troubleshoot any issues that arise in the translation of the visual design to code. For instance, the Design team may describe the vision for how an animation on the site will function, while allowing Development the freedom to implement those animations in a manner that works best for the coded structure of the site.

“Mock-ups allow Al and his team to see the visuals and then imagine what the animations will look like, without putting them in a box creatively.” – Emma

After our Development team has built out the site, we do quality and accessibility checks to ensure the site meets accessibility requirements and everything is working well. Finally, it’s the moment we’ve all been waiting for- the site will be ready for launch!

Your Role as a Client

Building a web project is a team effort!  For many in our client family, developing or updating a website is a major investment.  We love when our partner agencies feel they are integral parts of the process along with our Designers and Developers. Here’s a few tips to optimize the web design and development process:

• Consult project timelines frequently. We find that web projects proceed most smoothly when both the Loop team and clients adhere to dates and deadlines set out in project timelines.
• Set out a reporting structure early in the process. It’s easier to manage communication and feedback on a project if we establish early on who will be providing feedback to Loop and how that communication will take place.
• Bring positivity and enthusiasm! A new website is an exciting opportunity for an organization to establish their positioning and connect with an audience. Let’s work together to make something special.

Creating a great website involves a variety of skill sets. At Loop, our Design and Development teams both play integral roles in this process and we love working together to produce websites that work visually and functionally. We hope this post has given you a little peek into the collaborative process of building websites here at Loop!