So What’s Involved in Creating a Website?

Know Your Goals and Strategy

I know, I know. This seems obvious. But the line between obvious and overlooked is sometimes erased. Put some thought into this. 

Before you being, you need to figure out your goals:

1. Who is your audience for this campaign?
2. What quantifiable objectives are you trying to achieve with this campaign?
3. How will you measure success?

You next need to figure out your strategy:

1. What is the most effective way to achieve your goals? 
2. What media will you use? Web? Social Media? Print? Etc.
3. What’s your budget for doing this?

These are hard questions! Marketing agencies exist in no small part just to help you answer them. But you have to have some kind of grip on the answers before you can make an effective site.

Think About Content

A lot of tech types think of content as something secondary. First you design the architecture, and you can fill in the content later. 

This never works. 

The strength of a website is in how well it communicates to users. You have to have some sense of what you’re saying before you can gauge whether the site is expressing it well. If you don’t have content ahead of time, developing this material should be considered the first stage of the web design process. 

 I can’t tell you how many bad websites have gone up because they thought comps made with sample copy and sample artwork looked great. Of course they looked great — the visuals were picked for no other purpose. But when they actually inserted the final copy and actual artwork, the whole thing ended up looking like a dog’s breakfast.

Speaking for SCG, when we design your homepage, we want the headlines and main artwork on the comp to be pretty close to final. (Body copy can be written later.) That way, you can see if we’re on the right track.

Here’s the meat of the matter. Two caveats:

First, this is based on a professional workflow. If you’re doing this for yourself, a lot of these steps don’t make sense. (Why would need to give a free consultation to yourself?) But it will at least show you the amount of work you’ll have to do.

Second, this is based on the Seltzer Creative Group workflow. Other designers might work a little differently, and that’s fine. But they didn’t go to the effort of making this site, so we’re ignoring them.

Initial Consultation

⊕1 An Estimate is different than a Quote. A quote you can take to the bank. If your quote is $500, then $500 you will pay. An estimate is mushier. If all the variables stay the same, the estimate will stay the same … but there’s a reason they call things “variables.”This free call or email exchange gives you a chance to explain your project, find out something about the designer, and get a sense of whether you want to work together. You’re unlikely to get a price at this point – there are too many variables. But the designer should try to get enough information to generate an estimate.¹

Preliminary work

⊕2 The Scope of  Work is a detailed breakdown of a project: number of pages, technical capabilities, copy, artwork, etc. The Creative Brief is a short questionnaire that provides the background. The more concrete the answers in the brief, the smoother the project will proceed.Here designers pinpoint the Scope of Work,²create a rough timeline and complete the creative brief, which are collectively the bases for beginning any project.

Creative work

When the creative work begins, designers have the broad goal of coming up with some kind of concept for your project. By the time the creative work is approved, their job changes into executing the one approved concept.

You are not hiring someone to be thunderstruck by divine inspiration. You are hiring someone to complete the assignment to your satisfaction. Because you are the ultimate decision maker, the designers will be guided every step of the way by your sensibilities. For the length of this project, you are not just the client – you are a creative partner.

Because this process involves getting to understand your tastes, your designers should promise not to walk around with the back of their hands nailed to their foreheads if you reject something. In fact, they should expect rejection. That’s why some designers charge a fixed fee for the creative stage. It gives them the ability to take some risks, along with the incentive to knock it out of the park as fast as possible. It also gives you the freedom to speak your mind and reject things outright without worrying about your bottom line.

Typically, designers will submit up to three original design concepts (“comps”), and expect to do up to two major revisions on the approved concept (and, of course, a certain amount of tinkering from there). Some clients like getting all three comps at once, and some like getting them in sequence, with discussions after each one.

Here’s a sample workflow for creative work:

• ⊕3 A Sitemap is a diagram of how the pages relate to each other on the site. Wireframes are schematics for what content and capabilities go on each respective page. They are intentionally ugly, so nobody mistakes them for final designs. They can also be confusing to people who aren’t familiar with them. For that reason, we prefer not to do them as a standalone stage. We’ll either annotate our sitemap with mini-wireframes if the site is complex, or move right along to the page design.Finalize navigation & sitemap;³ create wireframes if desired
  • Submit for approval; revise as needed
• Initial copy for the homepage (headlines and subheads), if desired; May be done in tandem with artwork for homepage; may be done in tandem with SEO guidance
  • Submit for approval; revise as needed
• Design home page; including
  • Header and footer
  • Original artwork
  • Creation or selection of other key imagery (icons, photos, etc.)
  • Mobile version of page
  • Submit for approval; revise as needed
• Initial copy for other pages; May be done in tandem with artwork for other pages; may be done in tandem with SEO guidance
  • Submit for approval; revise as needed
• Design other key pages
  • Submit for approval; revise as needed

Development

Simply put, this is when the approved concept gets turned into a live website. Here’s a development workflow for a typical WordPress site:

• WordPress setup on development site
• ⊕4Plug-ins are little pieces of software that extend the capabilities of other pieces of software. WordPress is pretty basic, and expects sites to use plug-ins to do things like add animation, contact forms, or galleries. Plugins vary in power, complexity and price (some are free).Plug-in⁴ installation & setup
• Implement front-end design, including CSS styles, javascripts, etc.
• Create animations, sliders, etc.
• Create templates for standardized sections of website and recurring pages such as galleries, case studies, etc.
• Populate pages
• Implement all integrations for mail list sign-ups, social media, widgets, etc.
• Create and test all contact forms
• ⊕5 A Responsive site is a site that changes its layout automatically depending on the size of the screen it’s viewed upon. Since a screen can vary from a mobile phone to a 30-inch monitor, making these adjustments takes a lot of work. But doing so is absolutely pivotal for modern websites.Adjust and optimize design for mobile and responsive ⁵use
• Input necessary SEO information

Testing

• ⊕6 Not all browsers work identically. Sometimes you have to make adjustments for each one. However, this isn’t as big a deal as it used to be since Internet Explorer is no longer Microsoft’s browser. IE was buggy as hell. Just so you know, we do not support older versions of IE when we create a site. If Microsoft has disavowed it, we figure we can too.Cross browser check ⁶and bug fixes
• Send for final review
• Make all final client revisions
• Delete unnecessary plug-ins, images and tools
• Backup site and save locally
• Transfer site from development site to host server; Recheck in various browsers, via Browserstack (Desktop: Safari, Chrome, Edge, FireFox); Mobile (Safari, Chrome)
• Launch site