Posts Tagged ‘logos’

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!

Making A Website From Start To Finish – Introduction

I’m a self-taught web designer. I have learned almost exclusively from online tutorials, like the ones that I’ve written in the past. When there is a question I have, I Google it. There is a lot I was forced to learn from various projects I was working on, and a lot I chose to learn through my own inquisitive nature. But the one thing that I was never able to read about, was how it all came together. I never really had a good place to go to that helped me figure out if I had covered all my bases for an individual website project. I figured it might be helpful to write up a blog post (or multiple, because this is just way too long for one post) that explained the process of making a website from start to finish. At the end of this series, I’ve made a downloadable checklist to help ensure that for each website project you are working on, you’ve handled each item that needs to get done.

In Part 1, I’ll go over the initial phase of a website. I toyed with calling it 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

In Part 2, I’ll go over the initial setup of the development of the website. In particular, because I’m a big supporter of using WordPress for most websites, I’ll go over how to install and setup WordPress on your non WordPress.com hosted website. Here’s the list:

  • Determining CMS Needs
  • Installing and Setting Up WordPress
  • Building Out Site Content
  • Search Engine Optimization
  • Link Building and Marketing

In Part 3, I’ll go over the actual development of the website and optimization of the website. Yes, that is a two parter! You can’t just make the website, you’ve got to follow up and make sure that what you made is working effectively.

  • Database Design and Creation
  • Site Development
  • Cross Browser Testing
  • Publishing Your Website
  • Installing Analytics
  • A/B Testing, Data Analysis, and Site Optimization

Some of those items have quite a bit of sub items, while others are very simple in nature. Head on over to Part 1 of making a website from start to finish to learn about the initial stages.

Vector And Rastor: What’s The Difference?

When working as a web or graphic designer, it is very important to understand the difference between "vector" and "rastor". These are two words used to describe the basic structure of a file or program. Take the Adobe Creative Suite for example, some of the programs included within the Suite are vector based, while others are rastor based. In particular, you should note that Photoshop is a rastor based program, while Illustrator and InDesign are both vector based programs.

Now I still haven’t answered the question of what the difference between the two is though. Well here is your explanation. The word raster refers to pixels (or points if you will), while vector refers to lines. When making an image, you can base it off of two things; individual points in the image that are colored in whatever way you want that come together to make an image, or a bunch of lines that define spaces and colors, thus creating an image. Still not getting it? That’s okay… Let me try by talking about what you’d want to use for different types of projects.

Photo Editing: Photos are loaded with tons of information all the way down to the pixel level, thus making them rastor based. If you were to take a photo and try to expand it ten times larger than it already is, it is going to get blurry. That’s because for every individual pixel of information, you are trying to turn that into 100 pixels, giving it seemingly less detail. But without simplifying that image, there is no way to really replicate it using just lines is there? That’s why photos are rastor based, but are also limited in how big you can make them.

Logo Design: Now say you are working on a logo, and you need it to work in a lot of different places (on a website, on letterhead, on a business card, or on a giant billboard). That means you need an image that can shift in size but not lose it’s definition. To do this, you want to use a vector based software. So if your logo has a "+" in it, you can make that as big as you need without distorting it, because it is defined using lines, and no matter how you alter it, it will always be two lines. Now don’t limit yourself to thinking of lines as having to be straight. Vector based software thrives off using curves. This is why vector based software is so much more ideal for making things with writing in them. Letters just don’t do well under rastor based software because you lose the specific curve of a font to aliased pixels.

And really, that’s the difference between "vector" and "rastor". You want to use rastor software when working with photos. But for pretty much anything else you are going to want to stick to vector software so that your copywriting doesn’t lose quality, and so that you can change the image size without losing quality.

Any questions? Ask away!

GIF, JPEG, and PNG: What’s The Difference?

Not a graphic designer? No problem! You can still easily master when to use different types of images for different purposes just by understanding some of their individual benefits! So find out below what each image type is good for:

GIF: Graphics Interchange Format
Images with a .gif extension are commonly used for the web because they compress quite well. They function by allowing you to restrict the number of colors that make up the image, with a maximum of 256 allowed. GIF images also allow for layering, which is commonly used to create moving images that you may often see in the form of internet ads or moving smiley faces. GIF images also allow for transparency so that items can be seen that appear beneath them.

JPEG: Joint Photographic Experts Group
Images ending in a .jpg or .jpeg extension are the most versatile images around. They have different levels of compression and are compatible with both RBG and CMYK color formats, making them suitable for both web and print. They have no color limitations, which can make their file sizes much larger than GIFs.

PNG: Portable Network Graphics
Images ending in .png only allow the RGB color format, meaning they are not suitable for print. Their biggest benefit is fantastic transparency capabilities that GIF images can’t match. They also tend to have a large file sizes because their compression isn’t always as successful as that of GIFs or JPEGs.

To help you decide what format to use for your images, try out this table:

Image Description GIF JPEG PNG
Black & White Photo
Full Color Photo
Black & White image for print
Color image for print
Small Icon
Image w/ just text
Moving image
Image w/ complex transparency
i.e. curved lines or drop shadows
Image w/ simple transparency
i.e. straight lines

If you have any specific questions or examples you’d like to ask about, don’t hesitate to ask!

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!