Posts Tagged ‘favicon’

Making A Website From Start To Finish – Part 1

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!

Branding A Website

When making a website, it is very important to consider branding. If you want the website to be memorable and recognizable to it’s visitors, there needs to be a level of consistency and impact across the whole site. To do this, I have a few suggestions to follow below:

1. Logo and Favicon: Designing a logo can be very difficult, but it is incredibly important. The logo will serve as a reminder to your user, wherever in your site they may be, that they are on YOUR site. Any print materials that reference the website should also have that logo to help your users with that association. If you are designing a logo yourself, try doing it in black and white first, then add color, because it should be able to stand on it’s own without color. Keep it simple too. Some of the most recognizable logos (like IBM or Apple) couldn’t get any simpler. Once you’ve done that, don’t forget to create a favicon! The favicon is that tiny 16×16 pixel icon that shows up in your favorites/bookmarks list, browser tabs, and sometimes the URL textbox too. To turn any square icon into a favicon, use this favicon generator. Then, include the following in your head:

<link rel="shortcut icon" href="images/favicon.ico" />

2. Color Scheme: Picking a color scheme is really important for your branding. You want to select a small set of colors that remain consistent across your website, logo, and any print materials that are related to the website. I’d suggest first selecting a single color and then if it is easier for you, you can use color scheme generators that are available for free online. There are tons out there, but I’ve found a few for you here: Color Scheme Designer, Color Schemer, or Color Toy.

3. WWW Redirect: This phrase refers to how your website appears whenever you market it off the website, as well as the actual URL you actively use to point to your website. Any website can be written as both http://www.yourdomain.com OR http://yourdomain.com. Any user can type either one, and you’ll end up at the same place. However, it is important to select one and stick with it for two reasons. One, as I’ve mentioned in a previous post about SEO, I explained that search engines can actually see those two different URLs as two different websites, which reduces your traffic, which reduces your search results. Two, selecting one of these will help your users remember the site, and reduce any confusion with the less computer literate. FYI, here’s how you force your website to use the www version or the non-www version:

Insert the following into your .htaccess file:
The WWW Version (http://www.yourdomain.com):

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]

The Non-WWW Version (http://yourdomain.com):

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [R=301,L]

In both cases, remember to replace "yourdomain" with your actual domain name.

Well, that’s all for now. Good luck!