July 04, 2017

Beginner’s guide to the website design and development process

If you're looking to create your first website or hire a web designer, but don't know where to begin in the process, you've come to the right place.  This article outlines what you can expect from idea to design to implementation.

1. What's the point of your website?

Every website has a purpose.  You aren't building this for shits and giggles.  What do you want people to do when they reach your site?  Do you want users to sign up for your monthly membership to the latest flight deals or spread the word about your upcoming campaign?

What should users do when they visit?

Some of the more common goals for a website are:

  • Spread brand awareness (informational)
  • Buy a product (e-commerce)
  • Capture email (service)
  • Contact (generally service)
  • User sign-ups (SAAS)

It's important to first ask yourself why you're designing a website in the first place as this should be the driving factor in the website design and layout.  It seems like such a small step, but going forward without thinking this through leads to a rudderless and very mediocre site.

Does the site have any special functionality?

By special functionality, I mean anything other than your basic run-of-the-mill static pages.  This can be anything from a store, to memberships, to a task management app.  Since these are pieces of the website that take longer to develop and create more UI design issues, it's important to plan them out thoroughly.

If you're planning a full application, it's more than okay (and encouraged) to ask for advice on interface design and any snafus you might hit along the way.  BUT, you should not expect a web designer to create your business idea for you.  This feels like something that should not have to be said, but I've been asked more than once to "create a web product that earns more than 5 figures a month."  It's your job to make sure your business idea works- and not every idea will, which is okay.  Your web developer's job is to implement it and if you're lucky enough to have a good web designer, determine potential UI/UX issues along the way.

2. Create your content

You have to have content for your site.  And no, you shouldn't expect your web designer to create this for you.  While these are services that website creators offer, they aren't the norm when creating a site.  Paying for these is okay, but if they're coming "free" with a website, this should be red flag and scream "lousy quality."

We offer content generation and images for clients on an hourly basis, but we don't recommend them for your core content when possible for 2 reasons:

1.  Stock images usually look… like stock images.  Yes, there are ways around this (i.e., sifting through images for hours and noting how many times in the back of your head you've seen this same image used on the web), but real images will almost always look better.  

Pro tip: Make a massive collection of images and dump them in a Google Drive or Dropbox.  These images should be high quality.  As a rule of thumb, shoot for images that are at least 1920 pixels in width as this is going to cover 70-80% of monitor dimensions.

2.  Your main pages act as the marketing material for your site.  You can contract a third party to help you write these, but they'll rarely be as persuasive and understanding of your product or brand as you are.

What should you put together?

Sitemap – Even if you think you know all the pages you want, list them out.  It will help you cover all your bases and help speed things up when development comes.  There are a bunch of great tools out there, but Writemaps gives you 3 sitemaps for free and has a pretty decent interface.

Logo – If you're hiring a professional web designer to do your site design, you may consider asking them to do your logo as well if you don't already have one.  This is not included in the cost of most sites.  You also need a logo that's web-ready.  

Content – Your page's content ideally should be written out beforehand.  There are some exceptions where it's okay to use placeholder text during the initial design, but plan on a good round of revisions to clear this up afterwards.

Images – Higher quality the better.  If you don't already have images ready, it's possible to determine what you need during the initial design concept, but this can be limiting.

3. Design the site

Before writing a single line of code, you should have some level of design.  I don't care if this is a pencil sketch on a napkin, but the more detailed design you have, the less time you'll spend developing or revising development to match what's in your head.

Now obviously there's a trade-off here.  Designing every single page and fine detail of a site will translate to the least amount of development time, but this can also skyrocket design costs.  If you have 100 pages with similar layout, sketching out 100 pages is going to be a complete waste of time, while only doing 1 page of a full-blown web app is not going to paint the whole picture.

In case that's not crystal clear, here's a rough example of different ways to go about the same project that illustrates why finding the balance is so important:

No design created

0 Design Hours + 45 hours Development = 45 hours

Every page designed

28 Design Hours + 30 hours Development = 58 hours

Initial design concept and style guide

6 Design Hours + 35 hours Development = 41 hours

If these all yield the same results, why not go with the most cost effective option?  This is not a one-size-fits-all approach and there are definitely sites that can benefit from doing more design upfront and even those that can be done purely in-browser.

What's the best design approach?

Previously, we've endorsed using Style Tiles as a quick and efficient method to creating base styles for your site.  It helps under basic elements like typography, color schemes, and interface elements used on your site.  While I still really like this concept, it has 2 weaknesses.

1.  It can be difficult for a non web designer to understand.  If you're showing this work to someone else or trying to get client approval, it may be difficult for them to understand what they're looking at.

2.  For more complex UI layouts (think more app-like sites), it's not quite comprehensive enough and doesn't provide insight to real UI/UIX problems.

These days with smaller projects, we generally opt for a homepage concept with any added UI elements.  This gives us all the basic styling a layout we need for the site and gives the client a good idea of what they're actually getting.  For larger web applications, we'll create any views of the application itself that contains non-static content in addition to basic style guides.

4. Purchase a domain

This step isn't too hard if you've already come up with a name.  Head over to Namecheap or anywhere else really and grab your domain.  It's not super important where you purchase, but going with a reliable company is always a smart move.  

Most domains are only going to cost you around $10 a year unless you want to purchase one from someone squatting on a domain, in which case plan to spend $1000s.

The extension of the domain won't make a difference in SEO unless you going with a country specific one, in which case there is some evidence of scope search changes.  But if you plan on telling customers in person, "Go to my-domain.com," having both a shorter domain name and .com extension is advantageous.  If someone is having dificulty remembering your domain, they will default to the usual ".com" extension.

Pro tip: Shorter domains are generally better if you have to verbally provide your domain name and the .com extension is always easiest to remember.

5. Setting up hosting

Hosting is where your site is actually stored.  The domain you previously purchased just acts like a street sign pointing to your house (the host).  Where you choose to host matters A LOT more than where you purchase your domain.

Hosts are very commonly the bottleneck for entry-level websites and web applications.  Why?  Because people love to buy the cheapest hosting they can find.  Also because the hosts that you hear about the most are by far the worst (I'm pretty sure they allocate 99.9% of their budgets to marketing, while the remaining amount gets put into server upkeep).

Your host is essentially just a computer sitting in a warehouse somewhere whose job is to display your website to the world when they type in your domain.  But how quickly that box is able to communicate with the outside world, write files to disk, and what kind of software it's using will dictate whether or not a large majority of your customers ever see your site and how secure it is.

Website speed is way more important than you think.  If you need some quick tips and a want to know why it's so important, check out our article on optimizing website speed.

Pro tip: Don't be a cheap ass.  Pay the extra $10-15 a month for decent hosting as it will put more money in your pocket long-term.

Where should I host my site?

As for specific recommendations as to where to host, we recommend staying away from GoDaddy, HostGator (or any other host owned by EIG), and pretty much anyone you've seen in an ad.  For WordPress hosting, we have an article on recommended hosts.

For all other sites, it's highly worth it to spin up a custom VPS with the technologies you need.  We tend to use Linode quite a bit, but DigitalOcean also has pretty good servers as well.  If you haven't ever built a LAMP stack before, DigitalOcean is probably a bit easier to get started with, but both have pretty thorough documentation if you want to get your hands dirty.

6. Building the site

Whether you're building your own website or hiring a professional web developer, you need to have a plan before you start building.  

What platform will you use?

If you're hiring a developer, this is one of the first discussions you'll probably have with them.  If not, you should really weigh the pros and cons of each system and see if it fits your needs.  DO NOT pick a system because it's the only one you or your developer is familiar with; this sets you up for disaster.

WordPress can make for a great system for beginners who need to frequently update their own content, but would be absolute terrible decisions for a SAAS application that needs to scale.  Conversely, Ruby on Rails or Node.js can be lightning fast and handle heavy traffic, while both would be overkill for a small website owner that needs easy visual editing.  Even comparing Rails and Express + Node.js, there is generally a better option depending on the type of application you're building.  But talk to someone who only knows Javascript and they're going to recommend Node.js every single time.

This is why the earlier stages of planning, goal setting, and design are so important.  The framework you choose should fit the requirements of your website; the framework should not limit what your application is capable of.

Developing and staging your website

Websites should not be developed in a production environment.  Firstly, you don't want a half-baked product displayed to the world.  If you have a site already in place, it's best to leave that in place until the new site is fully developed.  Even if you don't have a site in place, you don't want Google indexing unfinished pages and showing bugs to users.

Secondly, development work is always faster in a local development environment.  If you're developing by editing files on the go and FTPing them back to the server, you're doing it wrong.  This is not only super inefficient and time consuming, it's also dangerous.  Between the possibility of a corrupt transfer and lack of version control, you're asking for trouble.

If you need to share your website development between clients or coworkers prior to launching, you should deploy your site to a staging server.  This is a good place to review what edits have been made and content revision that's stored in a database (i.e., not for editing code).  All parties can review for bugs here and make any final changes before launch.

7. Maintaining the site long-term

So you have a beautiful web design and a finished product.  All done, right?  Not exactly.  Most websites will require some type of ongoing maintenance.  For most sites, this will probably mean checkups every few months, while other high end applications may require weekly or even daily monitoring.

As sites age, framework core's and plugins can become outdated, leaving easy access to hackers.  Storage or database tables can become littered with unused data and decrease performance.  Bugs can pop up that weren't discovered during development.  Or maybe you just need to tack on a new feature. 

It's good to understand what kind of maintenance you can expect on your website to prevent crashing or being hacked.  Getting regular checks will ensure that your investment stays safe and continues to grow.

 

Building a new site?  Feel free to leave questions or comments below!