“Don’t spend time updating paintings when what the client paid for was a website.”
—Mike Montiero, Design is a Job, A Book Apart
I was prepping a presentation on agile design practices for WordCamp Orange County. I was talking about how I had begun implementing an agile, modular approach to designing WordPress sites, but I hadn’t thought about the cost, in terms of time and money, of my previous design process. When I did the math, my jaw hit the floor. No WONDER I was consistently eating overages!
To keep the math easy in my example I priced the imaginary project at $50 an hour, with 50 hours budgeted for a design and build project. That gave me a budget of $2500. (I’ll leave the value based pricing advice to Chris Lema. I was still charging hourly at the time, so that’s how I was doing estimates.) You can check out the math in my slides. Bottom line I was spending at least 85% of my budget making comps.
The rest of the project: coding, CSS, research, strategy, and client communication all had to be crammed into that remaining 15%. And if I went over the project budget (which, with that limited amount of time left in the budget you *know* I did), I started losing money on every minute I spent making up for lost time.
Design Systems Speed Up the Process
Focus on creating a solid strategy, not production art.
What if, instead of making a bunch of Photoshop comps with the same content, you created a type system? Creating a template with all possible variations would save a huge amount of time.
It would be totally easy to iterate type combinations, line lengths, color palettes and other design elements. If one element is changed you can edit it in one place–no need to open, edit and save a bunch of files. Webflow makes all that easy.
Why Use Webflow?
Because it embodies the best elements of agile design
I use actual client content to determine what “modules” a client needs styled. When I pass the system off to a developer, they’re not stuck looking through a bunch of PSDs for specs. They have a single example of every element. That’s way easier to integrate into the code. As an added bonus, the chances of having the same module using slightly different sizes, letterspacing, line height or color is nonexistent. I’ve yet to see a series of Photoshop comps that don’t have at least a few inconsistencies.
I use the “duplicate” button a lot. That way I can rapidly create a bunch of different type solutions to see which one is the most legible, has the best visual priority, and is the most effective at getting someone to read more.
When I need to reorder something I just drag and drop content blocks. When the line length is too long I can fix it with a click and drag. My system can change as quickly as I can generate ideas.
When it’s time for client input I push a button to publish and share a URL with my client. I can even enable the troubleshooting link in the site settings so they can leave feedback. How’s that for an easy exchange of ideas? If I need to pass the files to a developer I just export the whole thing as a zip file.
All of those things mean I’m saving time by working smarter, not harder. When I spend less time on production I can put my time into strategy and planning, where I bring the most value.
Creating Type Systems with Webflow: My Process
So how do I actually do all of this awesome stuff?
Here are a few videos of me creating a blog post template using Webflow. I built and styled one option, then duplicated it to show you how easy it is to create rapid iterations of an idea.
Note: My microphone gave up the ghost, so no, there’s nothing wrong with your speakers…there just isn’t any sound. Hopefully the callouts will explain it adequately.
Create a new site
Rough in the type system structure
Tighten up the styling
Experiment with iterations easily
Want to try it yourself?
Go sign up for the free account. That will get you 2 preview sites you can publish on a custom subdomain and unlimited exporting. If you want the convenience of more sites, custom domains, and a CDN, you can upgrade to a paid account.
Note: We participate in affiliate marketing programs where we receive a commission when products are purchased through the links on this website. All products we recommend are ones that we personally use, love, and find indispensable. We will never endorse something we wouldn’t use on our own website. Creativity Included is independently owned and the opinions expressed here are our own.