Building a Website

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