In Part 1, I’ll go over the initial phase of a website. I toyed with calling it the ideation stage, the design stage, or the setup stage, but in reality, it covered a lot of different issues, and it just wasn’t fair to do that. Here’s what we’ll cover in Part 1:
- Competitive Analysis
- Hosting and Domain Name Setup
- Color Palette Creation
- Branding (Logos and Icons)
- Developing a Site Architecture
- Initial Designs
To discuss these elements, we’ll make up a fake website for example purposes. Let’s say we have a client who runs a restaurant. They have no existing online presence, but recognize the benefits of being online. For each item that we go over in the website creation tutorial, I’ll talk about what that item means for our restaurant website example.
1. Competitive Analysis: Before you do anything for your new website, you should look at other websites, particularly those in the same space as what your future website. Pay attention to what you like about these other websites, and what you don’t like. Do they have features you like? Do they have a confusing site structure? Do you like the color scheme? Do you think their logo is creative? Do they have fun interactive elements that you want? Ask these types of questions to start to identify some of the elements you want to bring into your website.
For our example restaurant website, take a look at websites of some other local restaurants, especially some that you would consider competitors. Look at their branding, site organization, and interaction. Find what you like, and what you don’t like. Then use those elements for parts 3, 4, 5, and 6 below.
2. Hosting and Domain Name Setup: Once you know what domain name you want, it is a good idea to secure it just to make sure it doesn’t get snagged up. Domain names disappear quickly, and if you find something you like, lock it down. Pick a name that is ideally short, easy to spell, includes branding, and ideally includes a word that is important for your business. Pick .com if you are a for-profit, and .org if you are a non-profit – other options are less common so users won’t expect them. You could also consider getting multiple domains and redirecting them to your primary choice. Once you’ve picked your domain name, buy it, and setup hosting (usually you can get a cheap deal working with the same service like Go Daddy, Dream Host, or Host Monster (I’ve used all three for clients before).
For our example restaurant (let’s say it is named Pizza House) we’d want to grab pizzahouse.com. You could also consider pizzahouserestaurant.com because having the word restaurant in the domain name could give you an SEO bonus (though I’d opt for the shorter name myself).
3. Color Palette Creation: Now that you’ve looked at competitor websites and snatched up a domain name, the designing can begin! The first stage of designing? Color Scheming! You can also start with logos as a logo that looks good in color needs to look good in black and white first (so in theory you don’t need a color scheme to work on the logo first). Knowing that those two stages are interchangeable, start with some color palette websites like the Color Scheme Designer which I use regularly.
For our restaurant website, I’d want two bright colors (probably red for the pizza association) plus some basic colors like a dark brown and beige for the basics.
4. Branding (Logos and Icons): As mentioned above, you can work on the logo before you have your color scheme, they can work hand-in-hand for sure. Building out your logo is one of the hardest things to do. You need something that is diverse. It will work for a website, but can also ideally be used in print materials and as icons. Outside of the associations you are hoping for your logo to create for your users, a good logo has keeps three things in mind. First, it should work in both black and white as well as color. Logos end up being used in lots of locations, so it needs to be able to be diverse. Second, it is beneficial if it can be kept in a rectangular area. The more obscurely shaped your logo becomes, the harder it is to work it onto things like business cards. Lastly, if your logo can be reduced to a square icon, like the Facebook f, you’ll thank yourself later. You’ll need a few different icons for your website (specifically a favicon for browswers and webclip icons for mobile devices). Once you’ve got your logo and icons down, you are ready to start on initial website designs.
For the restaurant website, we could do an abstracted pizza pie, missing a piece, overlapping with the P in PizzaHouse. That shape, plus a PH would make a great icon, and it isn’t dependent on color to get across the basic concept quickly.
5. Developing a Site Architecture: You’ve got to figure out what kind of information your website is going to have, what pages will contain what information, and how those pages relate to each other. Site architecture has a lot to do with usability, because a user needs to know how to find the specific information they are looking for quickly. Think of a website like a series of folders where you keep your computer documents. Folders can contain file and other folders. In reality, website are actually built with a folder/file structure exactly like we are talking about. Each time you see a forward slash (/) in a web address, it signifies you’ve entered a new folder. This provides context for where the user is in your website and what the information they are accessing pertains to. Luckily, for simple websites, site architecture can be very simple.
For our restaurant website, which is very small, our site architecture will be simple. We could go for a simple homepage that is mostly branding and quick information about the restaurant, with large navigation links to the sub information. Let’s say the restaurant has been around for over 70 years, passed down through a particular family, you’ll want that information on an about page. You can probably avoid a contact page by putting phone, address, and operation hours on the homepage and in the footer. The most important thing is probably the menu, so make sure that the menu is easily accessible, and simple to read by possibly breaking it out into multiple pages. Some of those decisions will most likely be influenced by your competitive analysis from item 1 above.
6. Initial Designs: The last thing in this stage of creating a website is to actually build out your designs/mock-ups. You’ve got a color scheme, a logo, and a site structure. You can design your header, footer, and navigation with that information. Then you can work on your central content area with a few different page mock-ups, specifically your homepage and at least one main content page. With that, you’ll be ready to start setting up and building your website which I’ll begin to discuss in Part 2 of this tutorial!