The Internet is a worldwide network of computers. Within this network you’ll find everything from personal computers, mainframes, cell phones and any other device that has an Internet connection. The internet is growing at such a rapid rate that you can now even connect to your TV, fridge, microwave, washing machine, toys, game consoles and anything else that allows you to have remote access or an internet connection. You have various forms of control, but the bottom line with all these connections is that they exist for the simple reason to share information in one way or another.

The Internet is made up of millions and millions of computers and devices that are connected to one another.

For the purposes of this course (and to become a well-rounded web designer), that is the most important thing that you need to remember about the Internet: its main function is to share information. As a web designer, your job is to create a space where you share information for your clients. In order for information to be read or digested, you need to follow some principles. The various applications will have various rules that should be followed, but that is not as important as the information that needs to be digested by a user.

The Internet is a place to share information with people. Some information is just for fun, but it can also be a great tool to promote businesses.

The Internet is a great tool, but it wouldn’t be quite as successful without standard applications that allow you to view HTML documents. HTML is the universal language that is used to retrieve, present and send information via the Internet. The application that has been created to view these documents is called a browser and it is installed on your computer. Below are examples of some popular browsers.

Images: wikipedia.org

Because there are many different browsers (and different versions of the different browsers), it leads to a problem where they do not all display the HTML pages in the same way. For this reason you need to make sure that you code your HTML in a way that it appears consistent in all browsers. You can use browsershots.org to see this.

An HTML file is interpreted by a browser and is then displayed as a webpage on a computer or device.

Now that we are sending and receiving all the HTML files and our computers are all connected to form part of the Internet, what is the point of it all? The point is information, useful information at that. We are looking for information and now we have access to tons of it. That is of course also a problem, if there is SO much information, how do we find information that is useful, relevant and accurate? This is where a search engine comes in. Basically a search engine is a program that searches the entire HTML document for keywords that you enter and then returns the most relevant results to you. In its basic form it is software that is designed to help you find what you are looking for. The two most common search engines are, google.com and bing.com.

     

Images: wikipedia.org

You type a search query into a software application, which then scours the Internet and returns the most relevant results back to you.

Some things are important to understand though, so I would recommend the following for further reading:

• How Internet Infrastructure Works by Jeff Tyson
• Wikipedia article on Tim Berners-Lee

For the sake of this course I am going to discuss 10 principles of effective web design that you need to know. As we work our way through the next 12 weeks, I will show you how these principles apply to everything that you try and accomplish in a great piece of web design. So let’s look at these principles:

1) Get a good brief

This is the most important principle. You need to understand what a client’s requirements are before you can supply them with a finished product. You need to understand what detail is required and what functionality is needed. You need to also try and establish if your client has any visual preferences and likes. Get their brand guidelines if they have any, otherwise look at all their other printed or design collateral in order to get a clear idea of what direction the design should take. All design needs to have a business objective in order to be effective. The more detailed a brief you can get, the greater the chance that you will come up with a website that meets all your client’s needs.

There are many sources online that can help you come up with all the questions you should ask a client, but here are 10 of the top ones that you definitely need answers to:

1. What kind of visitors are you expecting on your website? (Consider their income, interests, gender and age.)

This question helps you to understand the potential visitors better. If you know who your target audience is, you can plan the website design and development in a way that would appeal to them. Obviously a site for teenagers will be very different from a site for working moms or businessmen.

2. Who are your competitors and how do you differ from them?

Most clients will have some competition in cyberspace. Find out what they think of their competitors, how they differ from them and what their strengths and weaknesses are.

3. What actions do you want visitors to take on the site?

A website can sell products, provide information, educate or encourage a visitor to make a phone call or fill out a form. Depending on the client’s needs the website structure, functionality and design can vary substantially.

4. What is your deadline for completing the site? How big is the budget?

These questions help you manage the client’s expectations. Your purpose is to set clear and realistic time frames, which are linked to the budget. In other words, your client can’t expect you to build an extensive website in a day’s time. And they can’t pay for a beat up old VW Beatle and expect a Porsche.   

5. What features should be used on your website? (This includes things like contact forms, pictures, videos, etc.)

We need to know what the client would like to have on the website and manage expectations accordingly. A small company website doesn’t need to have as many features as media portal. Some clients may know exactly what features they would like, while others might have no clue. Guide them by asking questions and showing them examples of other websites.

6. Please list the names of three sites that you like and explain what you like about them.

Very often a potential client already knows what their website should look like or be similar to, so there’s no need to re-invent the wheel. Be sure to pay attention to exactly what the client wants, otherwise you could waste valuable time and money.

7. Do you have any colour preferences? What should the look and feel for the website be?

Since colour is a very subjective thing, a client may not have the same colour preferences as you do. It’s always a good idea to come up with a colour palette beforehand and show the client what you have in mind. (Keep the colour theory modules of Design 1 and 2 in mind.) You might not always agree with the clients’ choices, but part of being a good designer is being able to make their preferences look good.

8. Who will be the contact person for this project?

Sometimes big companies have more than one person working on a project. Since people have different opinions and ideas, this could get quite chaotic. Ask the client for one contact person that you can deal with if you have questions or need feedback.

9. What do you NOT want on your site in terms of text, content, colour and graphic elements?

Sometimes it is as important to know what your client doesn’t like as it is to know what he or she does like. This can help you get a full picture of what the client has in mind for the site.

10. Who will be responsible for maintaining the website? Will the person have the time and skills to do so?  

If your client asks for a forum, blog or social media integration, they need to understand the time requirements from within their company. They need to make sure that they have the resources available for such a commitment.

2) Before designing anything, work out a website architecture or wireframe

This is probably the most critical phase in any web or programming project. This helps you get a handle on exactly what the information is that is needed and also how the information that has been supplied fits into the website. Laying out the architecture will really help you to plan the website, it will show you how big the site needs to be and all the elements that need to be taken into account. This will be a collaborative process with your client. Since you are a student and don’t deal with clients yet, I suggest that you work in teams to learn to be effective at this process.

Here is an example of what it should look like. I will go into more detail later.

3) Functionality: Don't make the user think

When a user arrives at your website, everything needs to be self-explanatory. The path from A to B needs to be a straight line and options should be minimised, thus making the structure and architecture very clear, concise and extremely simple to navigate.  Often visitors to the website will have an idea of what they are looking for. If you complicate how they get to that information with lots of repetitive clicks, they will leave your website frustrated and not willing to trust you again. In short, keep it simple.

4) Simplicity: Remove clutter

Because web design is a complex field, web designers tend to over-complicate websites. The key is to keep features to a minimum and make sure that they serve a particular and useful function. Make sure that the website is simple in its structure and that it drives users to the specific locations that they are looking for in an easy and clear manner. Look at all the information from the user’s perspective before you start designing the website. You need to help your client to offer a simple and clear website. Sometimes that means that you have to help them eliminate clutter. It's almost like ridding yourself of unnecessary stuff when you move from one apartment to another. If you don’t need it, lose it!

5) Create features that help users

A website will often have loads of information and this poses a problem for search engines and users who don’t have a lot of time and is looking for something specific, quickly. You want to create features that drive visitors to important sections of the website, allowing them to get an overview. From there they can make a choice if they want to move to another section or get more detailed information. Whatever you do, don’t fall into the trap of becoming a “feature creature” and create useless features that over complicate things for a visitor.

6) Copywriting

Make sure that you hire a copywriter or at least spend time making sure that the website is written correctly. Readers should be informed and engaged when they read the copy. Web designers often overlook this, but make sure that you spend enough time and effort on the copy. I cannot over emphasise this to you, it can mean the difference between a good website and a great one. Furthermore, spelling and grammar mistakes will reflect badly on the client’s business and make them look unprofessional. 

7) Typography: Choose the right fonts

The fact that so many different fonts are readily available can have quite an interesting effect on web designers. All of a sudden we have access to thousands of fonts and we feel the need to use all of them. This is NOT a good idea. In fact with browser compatibility issues being what they are, it’s better to stick to web safe fonts where possible and bring in other fonts for main headers etc. Look at all the font variations you may need and then create a set of rules around your fonts. Stick to those rules throughout the website. Creating these rules will help you keep your design clean and consistent.

8) White space and the ability to create clean design

The ability to create proportion in design is the real challenge for a web designer. Too much colour and a page cluttered with information tend to defy the simplicity principle and typically make the page very difficult to read and navigate. Proportions and white space allow us to easily focus on the main message and makes copy easy to read. This is over simplified, and again, I will go into more detail around this in the coming weeks.

9) Web conventions: Don't reinvent the wheel - it works

Another great principle is to follow web conventions. This means that users can make decisions easily and they quickly understand what you have to offer. When a user understands basic principles, they don’t have such a big learning curve. This makes your job easier in the long run. It also means that you can focus your energy on being innovative in areas where it’s more applicable than trying to reinvent the wheel, which is a little pointless. For example, if users understand that a “home” button takes you to the homepage of any website, then why would you rename this to something else?

10) Make sure that you test everything

At every part of the process, make sure that you test your work and process. If you want a great site, ask other people to help you test it and make sure that is user-friendly and easy to navigate.

In conclusion, website design is both technical and simple at the same time. It’s about finding the balance between innovation and information. Although everyone wants to be innovative, the biggest concern should be how visitors receive information and what they do with it. If a visitor is looking for information or a certain product, you want your website to be the first point of call.

If you haven’t done so yet, remember to watch the Lynda tutorial on Web Design Fundamentals

Good luck and remember that there is a big world of reference out there called the Internet.