How to Make a Website
Learn the 5 step process that the top website designers use to make websites.
There are many processes and considerations involved in making a website. Website design is one of those things that almost anyone can do, but few can do correctly. There are billions of websites on the internet, and the one thing they all have in common is to provide information. Unfortunately very few of these websites provide that information as well as they could. If your goal is to figure out how to make a website, read on, because I will outline the entire process.
Before we begin, I'll let you know a little about who I am. My name is Gary Simon and I've been a freelance designer for about a decade. I make my living online both as a webmaster and a designer. In my time as a designer, I've dealt with almost 1,000 clients (most of which are logo design clients) and I've learned a lot about the design industry as a whole. I have developed my own process for designing websites that works very well, and I will share that process with you below.
Preliminary Factors
It helps to consciously consider the following factors before you begin making a website. If you're able to provide yourself with a mental foundation before you begin the work, you will make the process much easier on yourself. Some are obvious, while others are not so obvious yet critical to the outcome of the project.
- Industry
What industry is the website involved in? This is a no-brainer sort of question, but knowing the industry (and even more importantly understanding the industry) is an important aspect of making the website. Industries can also have niches, and it's important to know the niche.
- Market Research
Once you definitely know the industry, then you can begin researching the industry. This means finding the keywords associated with the industry and niche, as well as analyzing your competition's websites. Examine what they're doing, and figure out how you can comprehensively improve their entire approach. This includes ad copy, layout and design, pricing points, etc..
- Target Demographics
It's important to know the visitor demographics associated with your future website. This will greatly influence the many design related decisions you will need to make.
- Objectives
Knowing the objective(s) of the home page, and every other subsequent page is very important. Some websites have a purely informational purpose that requires no action from the visitors, others rely solely on the visitor taking some sort of action, whether it be clicking a button or filling out a form.
- Timelines
If you're making a website for yourself, a timeline isn't so crucial. But if you're making a website for a client, more often than not you're going to have to deal with a deadline. Sometimes you will find yourself in a situation which there is not much time to complete a project, and you must account for this at the very beginning. The less time you have, the more shortcuts you must make.
Taking the time to consider each of these points will help your project flow much smoother.
Step 1: Logo Design
After you have gathered your preliminary information, you can begin making your website. The first step is designing a logo. Sometimes you may already have the logo in hand, in which case you can skip this step. But most of the time, you won't have the logo and it's what you need to address first.
I could dedicate pages upon pages of information on logo design alone, but to spare you the details for now, I'm going to provide a simple overview about the most important logo design factors.
Adobe Illustrator is what most logo design professionals prefer to use. It allows them to design a logo which is 100% vector. A vector logo is capable of being scaled up to any resolution for use on the many print mediums available (flyers, billboards, stickers, etc..). It *is* possible to design a logo in Adobe Photoshop, but it's not preferable because sometimes inexperienced designers will include non-vector elements in the logo.
This is a list of what a logo SHOULD be:
- Simplistic
Look around you, the most successful companies have the most simplistic logos. Why is this? Because they understand that people remember things that are simple. If a logo contains a lot of intricate design elements, people are more likely to forget that logo.
- Creative
This should go without mention. But the more creative your logo is, the more likely people will remember it. Simplicity and creativity go hand-in-hand.
- Timeless
Avoid designing your logo with trendy techniques. It's the hope of every business / website owner that their company will be around for decades, and you can end up hurting your image without outdated design trends.
- Engaging
It's always a plus if your logo can give people an "Ah hah! Clever!" factor. The FedEX logo is a great example of this with the hidden arrow.
- Contrasts
Your logo should work well without color in black and white. Sometimes there are circumstances which requires your logo to be presented in a black and white fashion.
- Scalable
Your logo should still work if it's scaled down to very small sizes. Once again there are instances in which your logo will need to be presented on a tiny space.
With the above attributes in mind, you can begin to design your logo.
Step 2: Design the Website in Photoshop
Once you have your logo, you then want to start the process of making your website by designing exactly what it will look like in a browser, in Photoshop. The benefit to designing the home page first in Photoshop is that you get to see exactly what the end result will look like in the browser. Most beginners simply start writing the html and css and design it as they go, this is not ideal!
Designing the layout in Photoshop first is particularly important if you're designing for a client, because they will want revisions. The revisions are easy to make when you don't have to also worry about altering code. You just open up the document in Photoshop, make the revisions by adjusting / adding / removing layers, and you're ready to go.
Below is a list of guidelines you should follow when designing the website in Photoshop:
- Set the document width at 960 pixels
960 pixels is the maximum width you should use for your website. Most visitors have a resolution of at least 1024 width. You wouldn't want to set your document width at 1024 though, because the vertical scrollbar on the browser takes up a certain amount of pixels and would create for horizontal scrollbars.
- Import your logo
I always start by designing the website by importing the logo and positioning it accordingly.
- Determine the layout orientation (Left, Right or Centered)
Most websites these days are centered, and it's the orientation that I almost exclusively use. Left aligned is a second favorite, and a right aligned website would be the least desired. A centered website ensures that the website layout is perfectly in line with the visitor's vision. If you're left aligning or right aligning a website and the visitor has a large resolution, there will be large empty spaces in the browser to the left or right, when the browser is maximized.
- Design the Header
The header almost always consists of a few key elements. The logo, the primary navigation, and other important features like login forms.
- Design the Content Portion
After the header, you have the main content area to worry about. This is the area which is most important to the success of your website. If you really want to know how to make a website, this is the most important thing to remember on this page. People read from top to bottom, left to right. This means that the area underneath the logo (to the left), is the most important screen real estate you have. This is the spot where you want your visitors to understand exactly what your website is about and what it has to offer. Your goal is to intrigue the visitor to stay on your website, so this area in the layout is of particular importance.
The content area can either by one wide column of information, 2 columns or 3 columns traditionally. Generally speaking, if your website one which requires user action, you'll want to make the content area very simple with little to no columns and few text and other distractions.
- Design the Footer
It's a personal preference that I include the navigation in the footer. Sometimes particular pages on your website will have a lot of content. This increases the vertical size of the page with scrollbars. If they're near the bottom of the page, they can simply access the navigation at the bottom in the footer, instead of having to scroll back up. Other than the secondary navigation, you can also include copyright information, terms of service / privacy policy links.
After you have the website designed, you then have an exact image of what you want it to look like when it's in the browser. This is where you would send a JPG of the layout to a client if you're not making it yourself. If you really want to see exactly what it looks like the browser, you can save the layout as a JPG, import the image into HTML and preview it in the browser!
Step 3: Image Slicing
Before we proceed to the HTML, we need to cut up the images on the layout for use within CSS. Cutting up the images can be a little tricky, but the entire goal of image slicing is to use the least amount of images as possible. Wherever CSS can be used to achieve a certain design element, the better.
As a general rule of thumb, save images that are photographs or contain photographic elements as JPG's, and all other images as either GIF's or PNG's. In Photoshop you can "Save For Web" and preview different file types side by side to determine quality vs. file size advantages.
Step 4: HTML
After you have your images sliced, the next step is HTML. Entire articles can be dedicated on HTML alone, so bare with me as I overview the process. I prefer to use Adobe Dreamweaver to work with HTML and CSS. The split code-design view is ideal as I get to see what my current coding looks like visually. It's not a necessity to use Dreamweaver, you *could* use Notepad if you wanted! All HTML is, is text!
HTML is structured in code snippets known as Tags. There are many different HTML Tags. Below is an overview of the most frequently used tags:
- HTML Tag
The very beginning of every HTML document begins with the HTML tag.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> is an example HTML tag. - Header Tags
After the html tag, you have the <head> tag. Within the <head> tag are several other very important tags.
- <meta name="keywords" content="keyword1, keyword2, keyword3" /> The keywords meta tag is used for the search engines to identify keywords associated with the current page.
- <meta name="description" content="A relevant description of the current page" /> The description meta tag is the description that search engines commonly used when listing out websites in search results.
- <title>The title of the page</title> This is the Title tag, and it is the title that shows on the top of the browser window. - Body Tag
The body tag is very simple. <body> (all other html) </body> - The body tag is the first HTML tag that CSS can reference and style. All other html is specified within the body tag.
- DIV Tag
<div>HTML</div> - The div tag is referenced by CSS for layout and styling purposes.
- Paragraph Tag
<p>Paragraph here</p> - Any paragraphs of text are specified within the paragraph tag.
- Image Tag
<img src="/image_location.gif" width="#" height="#" /> - The image tag is used to display images that are not associated with the layout. CSS is used for layout graphics, while the image tag is used for dynamic images.
- List Tags
<ul><li>Item 1</li><li>Item 2</li></ul> - The UL tag (Unordered List) is often used for navigations, and lists of information. You can also use "ol" (ordered list) to have numbered lists.
- Heading Tags
<h1>Important title</h1> - You can use H1, H2, H3, H4, H5, and H6. H1 is the most important heading, while H6 is the least important.
- Link tag
<a href="different_page.html">Anchor Text</a> - This takes the text "Anchor Text" and makes it a link that can either point to an internal page, or to a different website.
Step 5: CSS
CSS (Cascading Style Sheets) is used to reference HTML tags and provide them with visual styling. CSS has a specific structure. Below is an example of CSS:
body {
background-color:#000;
padding: 20px;
}
The "body" is the HTML tag it is referencing. The CSS properties are specified within { }. "background-color" is the css property which is followed up by a colon (this is where the property ends). The value after the colon is the value for the property. #000 is the color code for black. There are many different CSS properties that you can use to style HTML, a list can be found here.
There are three ways to reference HTML tags.
- The first way is to type out the HTML tag directly (as in the above example). This will affect every instance of that HTML tag.
- The second way is to reference an ID. In HTML, you have the option of giving any HTML tag an ID name. For example:
<p id="paragraph1">paragraph text</p> - In CSS you would reference this TAG by: #paragraph1 { properties } - Referencing an ID allows you to target a specific instance of a tag and apply styling to *only* that tag. - The third way is to reference a Class. As in the above example, a class works like this: <p class="paragraph1"> - In CSS you would reference it by: .paragraph1 { } - This allows you to reference a GROUP of tags that you want to apply the styling.
And that's it!
The 5 step process above is all it takes to make a website. Don't worry, I understand you are probably still confused at this point. That's to be expected if this is all new to you. This is why DesignCourse.com exists. We take learning web design a step further by providing our members with full video tutorials that showcase every detail, step by step, with commentary from a web design professional with over 10 years of experience.