Design and build your agency website, part 1: Laying the foundations

Web Development Studio

Design and build your agency website, part 1: Laying the foundations

I built an agency website in Webflow. I used minimal classes, flexbox, the CMS, and the API to create it. In this four-part series, I’ll give you tips about using each, and how to get started.

Design agency websites are tooooo cool. They showcase the pinnacle of creative and forward-thinking talent.

Audiences and visitors are sold the idea that hiring said agency will make their shiny whatsit or gidget fly right off the shelves. They also feel like brushing the mere hem of the agency’s collective frock would leave said client giddy with new potential and forethought — bursting at the seams with notions of innovation and disruption that would make even the most savvy and tenured VC quake in their Allbirds.

They evoke a veritable onomatopoeia of emotions. Wow! Zoom! Pop! Bang! Kablewie!

Parallax! Ohhhhh!

Minimal color palettes! Ahhhhh!

Buuuuuuuuuuuut.

That … sounds really expensive. Not to mention arduous. You’re in the market to make your agency’s web presence jump off that iPhone? Well, sailor, you’re probably better off going with an old trusty WordPress template. No one has time for all that custom, bespoke nonsense. You’ve got businessy things to do, after all. Tut tut!

But wait! You can build and design it yourself! Yes you — designer who can’t code. You can! With Webflow.

Webflow, I tells ya!

Okay, all the grandeur and over-the-top introductions aside, you really can build a fantastic agency site — from start to finish — with Webflow. This is not a WYSIWYG. This is not Dreamweaver or Flash. It’s not some half-baked design tool that vomits sloppy code. It’s not a code tool that acts like it knows how to be a design tool, but really requires you to learn mocha-soy-halfcaf-lattescript. This is a tool that exposes all CSS attributes in a visual way so you can create clean, concise, amazing sites.

If you know how to design websites — stop handing them off to someone else to build them differently than you intended. And, if you know how to build websites — stop messing around with unreliable frameworks or slow ramp-up times. Use a tool that creates code just as well as if you lovingly wrote each opening and closing tag by hand. Webflow!

The following four-part blog post series is a how-to guide for that. I’ll give you a glimpse into my own process, which has been honed by using Webflow for website, product, and prototype design over the last three years.

I’ll give you step-by-step instructions on how to get your site up and running, including how to:

  • Make your own CMS items, configure the data you need for each type of content, and understand how APIs work
  • Think about your site in terms of design systems, so you’ll have the building blocks to quickly implement new content while staying consistent.
  • Use new web technologies like flexbox to make your site scale more easily and mold itself to a device of any size
  • Craft great interactions for desktop and mobile users, keeping the interaction methods of your users in mind
  • Integrate your new CMS system with external APIs so you can pull content from around the web super easily
  • Open your site to internal and external contributors so they can keep your community alive, well after the site is live
  • Use Webflow to make something awesome that you’ll be proud of

Interested? Great. Let’s get to it.

Step 1: Start with a baseline

I “designed” this Bespke site in Webflow.

I say “designed” because I didn’t do the whole design part inside Webflow, or even by myself. I started with this Mirror template from UI8 to make things easier to get off the ground. It’s more of a portfolio theme, but I love the large text and dark UI. I think it has a great premium feel, so I chose it as my starting point.

You may be starting from scratch as the designer, or you may be getting specs like the files in the Mirror template if you’re the developer. I’ve found it’s better not to start with a blank canvas in Webflow — consistency takes too long to happen. I recommend starting with a sketchpad then moving to Photoshop, Sketch, or, in my case, Figma.

I’ve written about Figma, but the primary reason I used it here was for the dev-handoff features. I was able to get exact pixel measurements from the Sketch files I imported into Figma. And I knew I’d be working with some vectors, so it made sense to keep everything together.

Whatever tool you choose, the most important part is having a base design to work from. I almost immediately started making my own changes to the design, but working from a baseline easily cut my time in half. For me, Webflow is a fantastic tool for iterating, but can be too rigid for true experimentation. So I like to flesh out my ideas before I refine them inside Webflow. But your mileage may vary!

Step 2. Define your default styles

Every website features a few common elements. Webflow applies some very basic styling to all of these, but for your projects, you’ll really kick things off right by restyling them to fit your needs.

Here’s a non-exhaustive list of all the elements in Webflow with a default class that can be overridden:

  • Body
  • Links
  • Headings
  • Paragraphs
  • Quotes
  • List Items

There are others, but these are the most important ones.

Let’s start with the body element. It’s not in the add elements sidebar, because it’s already present on every page — it functions as the parent wrapper for your entire site. Configuring the default styles of the body element helps you save a lot of time. I’ll tell you more about that shortly.

First, select the body element and then select the Body (All Pages) class like this:

Now. Here’s why we’re doing this. If you define your font styling at this level, those styles will flow throughout the rest of your site. Let’s say you want to have a site built on the font Lato, and you want it to be black. If you don’t define it here, you’ll have to define it differently in every different instance of font stylings.

Also, if you decide to switch over to Helvetica down the road, you only have to change it one place. It’s a life-saver!

One other thing: The size you give your font at the body level will dictate what an em unit is. Basically, if you set your font to be 12px, then for the rest of your document, 1em = 12px. The emunit is super handy if you’re planning on doing responsive typography. Mileage may vary though, so be sure to read up on that if you’d like to try it out and wow your friends.