Part 2: Content design and visual direction
Redesigning Webflow.com
Co-authored by Barrett Johnson and Ryan Morrison
Last week, we looked at why we decided to redesign Webflow.com, how we approached it, and discussed our goals for the redesign.
This time, we’ll take a closer look at the actual work of designing the site.
As we outlined at the end of last post, we’ll discuss how marketing and design worked together on the videos, content, and design of the site before taking the final step and building everything in Webflow. Next week, Ryan will focus on how he approached building the site in Webflow and what he learned along the way.
Phase 1: Recording the product videos
Because we knew that the product videos on the homepage would play a key role in “selling” Webflow, and that they would be among the more labor-intensive aspects of the redesign, we decided to work on these first.
Once we had the videos in a presentable place, we could then work on filling out the copy and the layout alongside them, at which point we could present our first pass at the homepage redesign to the larger team for feedback and first impressions.
Once we had the homepage design far enough along, we’d expand on the points it introduced within the more detailed Designer, CMS, and Hosting pages.
But first, we had to answer a question: what should we feature in the videos?
This question had a couple parts to it. The obvious first half was: What features or aspects of Webflow do we want to highlight in the videos? The second part was: What exactly are we going to be building in the video?
We knew the videos needed to illustrate the core features of Webflow — the things that make our product uniquely powerful. Among others, we considered these to be:
- The CSS and styling controls in the Designer, which provides near-complete control over layout and styling in a completely visual interface
- The Webflow CMS, which lets designers define their own content structure and display it via whatever layout and structure they have in mind
- Our interactions and animations toolset, which give designers a completely visual way to bring CSS and Javascript style animations to their designs
A theme that kept cropping up in the team’s initial discussions was how expressive designers can be with Webflow — that “if you can design it, you can build it with Webflow” really is the heart of the matter.
So, we decided the videos should visually express the precision, power, and expressiveness that Webflow offers designers.
The second part of the initial question — “What are we going to be building in the video?” — was one of the more fun parts of the process: now we had to “invent” a few fake websites to serve as example projects in the videos themselves.
In all, we created three dummy sites before settling on those you see on our current site.
Once Ryan designed and built the fake sites, I went in and used ScreenFlow to record myself working in the Designer. I then edited these for presentation on the site, splicing clips, speeding some parts up, adding freeze frames where necessary, and so on.
In all, we cycled through 8 to 10 versions of each of the five videos featured on the site. Each version varied in terms of what we were building, how we were building it, and how the timing and clip splicing played out.
Once we had versions that we felt were strong enough to present to our larger team, we exported the videos as MP4s at 1440x900px, using H.264 encoding at 1,200 kbits/sec to save space. In the end, the videos ranged in file size from 2.5 to 3.5 MB — a compression result that, given the quality of the videos, we were happy with.
Phase 2a: Content structure and copywriting
Once we had (nearly) final versions of the videos recorded, I (Barrett) threw screenshots of them into a Sketch file and made a first pass at the copywriting and content structure.
My goal was to create a simple wireframe of the content and layout I had in mind, which I could then hand off to Ryan for him to polish, using the new visual direction that he was developing in parallel (more on that below).
Why I didn’t start copywriting in Google Docs
From the beginning, we knew this redesign was as much about what we were saying as how we were presenting it visually. So, when I sat down to wireframe the homepage, I realized that, for me, writing the copy in an isolated Google Doc would divorce the content from the visual story we were telling alongside it.
At the same time, the tools available were changing before our very eyes. The downside of copywriting in Sketch — when compared to something like Google Docs, Notion, Dropbox Paper, or the many other collaborative writing tools available — is the lack of native commenting, and for many, InVision bridges this gap.
With InVision, you can upload static mocks and comments on design, content, functionality — whatever. And in the earlier stages of the process, we used InVision to do just that.
But as we moved through the redesign process, we saw Figma launch its real-time collaboration feature in early October. This interested us, but it was the ability to directly comment on artboards that sold us.
For us, this unified the process of refining copy and design in parallel, since you can instantly make changes in response to comments, and there was no disconnect between the annotation and the corrections, as there is with InVision. Also helpful was the easy Sketch file import feature Figma offered.
While I worked on the content, copywriting, and structure, Ryan worked on charting out a new visual and creative direction for our site, which I’ll let him get into below.
Phase 2b: Charting a new design direction
While Barrett worked on copywriting and content structure, I (Ryan) started exploring a new visual language that would help tell the story of what Webflow is now, and where we’re going. In short, this meant devising a visual style and iconography that reflected how Webflow had evolved technically since the last design, as well as how we see it evolving in the future.
Picking the right fonts
Type offers designers a powerful tool to shape the feeling of a design. We were using Circular and Avenir in our old designs, and although I love both of those, the roundness of Circular didn’t have the technical and professional vibe I was aiming for.
First, I searched far and wide for typeface candidates, and reached out to both my fellow designers at Webflow and my designer buddies, collecting all of my favorites. After many many iterations of possible type combinations and tweaks, I landed on a combination of Akkurat and Graphik with a little dash of Roboto Mono here and there.
After I locked in my typeface choices, I took some time to freshen up my knowledge of best practices, spacing recommendations, and type scales. I spent about a day of tweaking the sizes, weights, line heights, letter spacing, and margins to achieve the desired levels of balance and contrast between all my headings, paragraphs, and other standard web type styles.
I learned along the way that the set of fonts I had defined for our website—though great in a more visual-centric context—was pretty awful for long form reading situations like on our blog. In Webflow, I gotta say, this was really easy to fix. All I had to do to was edit how some of the fonts within rich text elements were styled, such as adding some extra vertical breathing room, and making the headlines smaller with more contrast between the H1’s, H2’s, paragraph’s etc.
Choosing a color scheme
When it came to colors, I wanted to use a new palette with a lot more blacks, whites, and neutrals, with pops of bolder colors that would make our site stand out and look sharp. As I explored colors, I didn’t just throw colors onto arbitrary squares and compare them side by side. Instead, I tried different color schemes on a quick sample web page that I built in Webflow to see everything in context.
In the end, I came up with a system where each of the main pages features a dominant accent color that contrasts as well as compliments the sharp blacks and whites throughout. This system allows for consistency throughout the site, yet allows each page to be clearly branded as its own.
The role of illustration
Over the years, I’ve spent many many hours on illustration and icon work, which has given me a lot of time to think about the role that illustrations should play in design. Above all, I believe every illustration and icon should serve a functional role, though I also know that they have at least as much emotion-evoking power as color and type.
As you’ll see in the icons on the site, each is designed to support the copy by adding information — whether it’s literal or abstracting the point — so that it can be more easily understood at a glance. Though I put function first, it was important to me that the illustrations and icons I made were not only interesting and fresh, but also unique to Webflow.
(For more on this, Meg Robichaud from Shopify does a great job exploring the duality of the functional and emotional role that icons can play in marketing in her article Product Vs. Marketing Illustration.)
Phase 3: Presentation, feedback, and review cycles
Marketing and design collaboration
As our design direction and content collaboration advanced, the two of us went back and forth in Figma quite a bit, with the marketing side refining what we say, in what order, and adding and subtracting pieces as we moved along; and the design side tightening the visual presentation, type hierarchy, and creating a set of components and styles that we could use across the site.
We also needed to make sure that the four pages communicated well together, and that they had a unified visual style that would be immediately apparent as visitors clicked around and explored our product.
Once we had everything in a presentable state, we went to the rest of the team for buy-in and feedback.
Getting feedback and iterating on design and content
Before we could start building the site in Webflow, we needed to present our proposed pages to the larger team, including our content lead, some members of our support team, and the three founders.
We knew we’d still be able to make more copy edits and design decisions as we built it in Webflow, but we needed buy-in on content, structure, and design direction from the team before moving forward with the build.
As we discussed in Phase 2a, InVision and Figma played key roles in helping us work out some of the more nitty-gritty details of copy and small design questions. But we also made a point of having regular meetings to encourage discussion as questions came up.
To be fair, asynchronous tools and communication modes were critical to helping us move this along — especially with almost a third of our team being remote — but getting everyone in the same (proverbial) room and having those discussions live remained an important part of our design review process.
Phase 4: Redesigning Webflow.com in Webflow
Next week, we’ll take a look at how Ryan approached the task of building out the website in Webflow. Along the way, he’ll discuss building a component system to lay out initial styles and elements, deciding on class-naming conventions, and using the previous version of the marketing site as a starting point.
To stay up-to-date with the Webflow design team, follow us on Medium, Dribbble, and Instagram.
