Summary: I worked with Kenny Morgan of Counsel Creative to develop the new JHM site. Using Webflow, we bypassed a lot of the miscommunication that can happen between designers and developers to create a website that matched Kenny's original vision.
The designer/developer relationship.
Before talking about JHM, let's talk about how custom websites are built. They're created in two main phases: (1) design and (2) development.
In the design phase, a designer works with the client to create what the site will look like. Then, it's up to a developer to interpret the design into the code that will make the website work. I used the word "interpret" purposefully. That's because designs are flat images with fixed sizes. But, websites don't work that way.
I'm hinting at the idea of responsiveness. A website will be accessed by desktops, laptops, tablets, phones, and even watches. For each one of those devices, there's varying sizes. An iPhone X is 375px x 812 px. But, a Galaxy S5 is 360px x 640px. Quite a bit shorter.
Then there's the content. Designers will often use dummy content in their designs. But, once the client starts adding their own content, how will the website respond?
A developer has to take the design file and use it to approximate how the website will behave in different contexts. That dymnamic has created a tension between design and development. Designers sometimes resent developers for not following their designs strictly and developers often resent designers for failing to anticipate how their designs can be implemented in the real, practical world.
Working with Counsel Creative
Kenny Morgan (CEO of Counsel Creative) and I have had conversations about this dynamic. So, when the JHM project came up, we knew it was the perfect opportunity to collaborate and use Webflow to develop the website.
Webflow is a tool that lets you create a custom website visually. So, instead of writing the website's code in a text editor, the developer uses an interface to accomplish the same thing. The end result is the same, but one approach is text-based and one approach is visual.
In collaborating on this project, Kenny and I followed the same phase cycles. He created the website design. When it was approved by the client, he sent the final design to me and I started developing the website in Webflow.
Here were our takeways:
- As a designer myself, I understand how each design decision -- the spacing between elements, the size of text, where a sentence breaks into a new line -- are all purposeful and important. At the end of the project, Kenny said it was a relief to work with someone who thought like he did and tried to realize his vision.
- I could see in real-time how content responds to the design. Take staff names. Once I added every staff member to the content management system (CMS), I could make sure that the website had adequate space for everyone's names.
- JHM can easily edit and add content by using the Webflow editor and CMS. If they need to change a photo, change out some of the copy, add a new teammember, or upload a new blog, they can do it all without having to wait on Kenny or I to make the change for them. Kenny and I have both used Wordpress' CMS and found Webflow's system much more user-friendly.
- I could implement Kenny's feedback with him in person so that he could see the impact of changes he wanted to make. This one is important. There's always a difference between how a website looks in a design file and what it looks like live. On almost each web project I've been a part of, once I see the site live, there's changes I want to make to make the website look and function better.