Which Comes First: Website Design or Copywriting?
The dilemma of website design and my 6 step DIY process
The typical website design process looks like this —
You establish a solid brand (meaning that you have a thoughtfully designed logo, color palette, and font selections that support your brand's values and appeal directly to your target audience)
You create your content: shoot your brand photography and write your website copy
Your designer takes this information and builds a website wireframe (a rough mockup that shows you the "skeleton" of how the site will look)
From the wireframe, your website is developed and your content is plugged into the site
Your website launches
This is the industry standard, by far. And I totally get it A vast majority of designers are not photographers or copywriters, so one of the biggest problems that web designers face in their process is waiting on you, the client, to give them photos and copy that they can use on your site. Designers need to ask for photography and copywriting as soon as possible, otherwise they risk huge delays waiting for this content before they can design your website.
If you’re working with a designer, it’s important to respect the project timeline and get them the content that they request by the due dates they assign you. Delays not only affect your website launch date, they can result in fees for you and delayed start dates for other businesses who are eagerly waiting to start their website design process.
The issue is, I see a glaring problem with the model of “write first, design second”.
Your website copy doesn't live as a single giant block of text on your website — it's dynamic, segmented, and conforms itself to the optimal flow of your site and the experience that you want to give your audience.
The way that you use and display copy on a website is completely different depending on the industry and the individual brand.
For example, a service-based business is likely to have very different homepage copywriting than a product-based business. Our focus with the homepage is to build a story and a connection first and foremost, through brand storytelling rooted in the brand's ethos, history, and the problems that they solve for their potential customers.
A product-based business, on the other hand, will have a homepage designed to showcase products and encourage clickthroughs to items and product collections as quickly as possible. There's likely to be less copy above the fold on the homepage, and the brand storytelling happens at a deeper level on secondary About or Brand Values pages, while product descriptions act as important brand storytelling pieces that should connect with the audience deeply enough to inspire immediate conversions.
This is just one high-level example of how much website design informs copywriting decisions.
How are you supposed to know what to write and how to write it if you don't know what the end result should look like?
Designing a website wireframe first allows you to see exactly what headers and body text your website needs, so that you can write specifically and strategically for each section. You’ll save yourself the headache of copy/pasting your copywriting into a Frankenstien-esque collage to suit each section of your site (or worse, re-writing your copy entirely to match your sales funnel strategy).
If you’re on the path of DIY website design, here’s my six-step design process that can help you save time and get strategic!
01.
Research & Brand Building
Always always always start with research and thoughtful brainstorming. Make sure that you can put into words why you started your business (your brand ethos and values), who your business serves (your ideal client), and what problems your business solves (what sets you apart from your competition).
Take a look at your competition and research other brands in your field or related fields to see what the market looks like, so that you can accurately identify your strengths and weaknesses - and figure out how to highlight those strengths and optimize or address those weaknesses. Build a solid brand identity based on your values and what you’re passionate about, so that you can resonate with your audience and attract your ideal client in a way that’s natural and organic rather than forced and salesy.
Yes, it takes time and effort, and it’s tempting to skip this step. Don’t! All of the time spent on this step will save you a lot of time later, because it will inform your design process and brand voice so that you can build a website from an informed and intentional space. When you design a website backed by knowledge of your market and a clear Brand Identity, it will do the heavy lifting for you.
Psst - you should complete this step before you design your branding (logo, brand colors, etc.)!
02.
Sitemapping
Now that you’ve established your Brand Identity and taken a look at different websites already out there, it’s time to figure out what you want on your website, and how that information should be organized.
You want to think audience and action first. Meaning, if someone lands on your website and they know absolutely nothing about you or your business, what do you need to do or say to get them to stay on your website? The more clear you can get on this, the better!
These are some of the questions you can ask yourself to inform your sitemap:
Are you selling one product/service, or multiple?
Do you want to prioritize one product/service over the others? Which should it be and why?
Do you offer frequent sales or promotions that are important for you to market?
Do you rotate and change your product/service offerings? How often? How do you want to highlight new products?
How do you want to categorize or organize your products/services? Will they be grouped together, or will each one have its own full page?
Will you need sales pages, landing pages, or a blog?
How do you plan on highlighting your brand ethos and what sets you apart from your competitors? Does it make sense to dedicate a whole page to this (“Our Method”, “My Philosophy”, etc.)? Or will this be incorporated into your Home Page or About Page messaging?
Based on your brainstorming, you can organize your site’s navigation to funnel your audience exactly where you want them to go. You can get crafty in Canva, with GlooMaps, or other digital tools, but I like to do this the old-fashioned way with a pen and paper. You don’t have to invest money in a bunch of fancy tools and software or spend a ton of time to create a strategic plan that works for your website! Here’s an example of a sitemap I created for a client project:
03.
Wireframing
If a sitemap is the foundation of a website, wireframing is where we begin building the framework to put up the walls. A wireframe is a sparse mockup of your website pages, where you decide the layout of your copy, photos, CTAs, and any other elements you need to include.
The most important thing to remember when designing your wireframe is, again, action. Where does it make the most sense to place your CTAs on each page? 80% of small business websites don’t have a Call to Action on their homepage. CTAs are important because they make it as easy as possible for your audience to engage with your site and purchase your product or request your service.
Some questions to consider when creating your wireframe:
What are the most important pages you want your audience to spend the most time on?
What actions do you want your audience to take on each page? Explore your product/service offerings? Join your newsletter? Read your blog posts? Book a consultation or purchase a product?
Again, I love simply drawing this out for each page. However, as a designer, I can envision exactly how my sketch will translate on-screen, and I’m familiar enough with the platform that I use, Squarespace, to know what tools and CSS I can employ to accomplish a layout or design function.
Before you create your dream wireframe, I recommend getting acquainted with your platform - whether it’s Squarespace, Wordpress, Showit, Shopify, etc. - so that you know what functionality it offers, and what your design limitations are. If you want to make a cleaner wireframe mockup, you can use digital tools like Lucidchart, Invision Freehand, Balsamiq, or even Photoshop (my tool of choice) to build your wireframe.
04.
Copywriting
Now the copywriting can begin! Because you’ve developed a clear plan for your layout and how you’re going to segment the information on your site for a clear and intuitive user experience, you know what needs to be written for each section of your website, and roughly how detailed each section should be. Some areas require an easy-to-digest and engaging headline with a CTA button, where others need a few paragraphs of storytelling.
Always write with your audience in mind, and use your copywriting to speak directly to them by showing that you understand them and their needs - and you can provide them with the solution. For more on effective copywriting, see this blog post.
05.
Site Development
Time to put together all of the pieces. Now that you’ve thought through every component, you can implement it all on your website platform of choice! Minor tweaks may be needed based on the functionality and design limitations of your platform (this is why I love Squarespace! It’s easy-to-use and simple to customize, even for non-designers).
Minor edits aside, this should now be the easiest step because you have all of your content ready to go and a clear vision for each inch of your site.
06.
Testing & Launch
The fine points and finicky details. Make sure that your site looks great on mobile, all of your links work, you’re optimized for SEO, and every page is ready to go. Take a look at my Complete Website Launch List to check off everything you need for a successful and stress-free website launch!
Working with a website designer & their process
If you’re working with a website designer, it’s important to respect their project process and the order in which they do things. They’re an expert, after all, and they’ll know how to craft a great site experience for your audience. That being said, if you’re feeling completely in the dark about how to write your website copy - ask them!
“I’m having trouble figuring out how to write my copy in a way that’s going to make sense for the flow of the website and the strategy of each page. Can you give me some pointers on how I should section out my headers and text blocks?”
They should be able to give you a quick rundown of the flow of each page - or better yet, a wireframe of the site! - before you start writing. It will save both of you headaches and delays.
And there you have it! This is the same 6 step process that I follow for each of my full-service website design clients because it’s a straightforward, stress-free, and easy way to launch an intentional and strategic website quickly!
Have any questions about the process? Pop them in the comments below!
