Website Organization Chart

Web development is more involved than just being a master at specific programming languages: you need to understand some basic concepts before you can begin writing code. The following concepts will give you the strong foundation that you need before writing code and launching a website.

Client-Server Architecture

It is amazing that many web developers cannot explain the difference between client code and server code. The web is built on client-server architecture! Therefore, it is important that every developer understands this concept. You must know what code is running where–is it on the client’s browser or the server?

This is a high-level diagram of basic client server architecture. There is a server that stores all the HTML files (and other code). Using HTTP over the internet, the client can view those files using their web browser. More advanced diagrams will get into more detail, showing all the possible components of an application such as databases, content management servers, and application servers.

As a web developer, you may be asked to write both client and server code. Therefore, it is essential to understand which code runs on the client browser and which runs on the server machine. Even though the code may be in the same file, that doesn’t mean it is being executed on that machine. For example, HTML and PHP may be in the same file, but PHP is server-side code while the browser on the client-side renders HTML. You will dig deeper into this when you learn more about programming languages. This table gives examples of where the different types of code are executed.

Client Code (Web Browser)

• HTML
• Javascript
• CSS
• Java Applets

Server Code (Server Machine)

• Java
• .NET
• PHP
• Databases

Information Architecture

How should a website (or any application) be built? This is something that everyone who has stake in the project will have an opinion on. What is ultimately most important is creating something that has good usability. After all, it is the people who use your website that matter the most.

It is important to have a plan for the website you are building. This general overview of how the site is organized is referred to as the sitemap. You need to determine what your users want to see and what content can be grouped together. Think about how you would organize files and folders on your computer: you usually divide files into folders based on commonality. It’s the same concept in information architecture. You can also compare it to an organization chart.

Website Organization Chart

Navigation and Usability

Now that you have grasped the concept of how to architect a site, you must know what makes a site usable and easy to navigate. Navigating the site is a very important aspect of implementing a website. If the users cannot get around the site easily or cannot find what they need, they will get frustrated and leave.

It’s important to have a navigation menu on each page of your site so that users can get to other sections of content. The main items in the navigation menu should be links to the main sections of the site that were mapped out in the sitemap. You can think of this as the main menu of the site. Generally, people put this at the top or the side of the page where it is easy to find.

Don’t put in too many obstacles or make it difficult for your user to find what they need—easy navigation is key to creating a good user experience. It isn’t easy to create a usable site and much of your knowledge will come with experience. Listen to users and take down notes on what works and what doesn’t. Over time you will become well versed in the best practices of website usability.

Also, don’t just rely on yourself to analyze the usability of a site. Someone else may notice problems that you might not see, so be sure to show your website to others and get their feedback.

Wireframes

A wireframe is a visual representation of a website and creating a wireframe is one of the first steps you should take before you begin to design. The wireframe shows the placement of page features like the header, footer, navigation, and content.

To create a wireframe, you may either draw a paper prototype or use software. Drawing doesn’t require any special wireframe tools or coding skills. Some people skip the drawing portion because they would rather use software, such as Visio or Photoshop, to create their wireframe. Either way is acceptable, but the point is to come up with a prototype before actually starting to design or code the site.

Wireframes are an important and beneficial early step in the development phase. They allow both the developer and the client to take a look at the structure and make revisions early on in the process. The site’s usability can be examined and modified as necessary. Making a visual representation gives the developer a clear picture of what they need to code, as well as helping the client understand how the website flows.

Example of Wireframe

Example of wireframe. Source: Matchist – How do I create wireframes

An example of a wireframe (created with software) is shown above. Most wireframe software has common elements (like radio buttons and images) that you can drag and drop into the page. This wireframe also uses number labels to then explain a little more about that section of the website. A complete wireframe prototype will describe each page and indicate how the pages link together.

Color Theory and Schemes

Understanding how colors work together is a very important concept to master. Learn the color wheel and what it means by primary and secondary colors, color palettes, RGB definitions for web design, and color schemes.

The color wheel definition is shown below. Red, yellow, and blue are considered primary colors. Orange, green, and purple are the secondary colors. The primary colors can be used to create the secondary colors. For instance, yellow + blue = green, red + blue = purple, red + yellow = orange, and so on.

Warm colors are red, orange, yellow, and combinations of these colors. Warm colors are usually associated with warmth, passion, energy, and happiness.

Cool colors are blue, green, and purple, and combinations of these colors. Cool colors usually represent calm, relaxation and a sense of professionalism. Blue is commonly used in business websites for this reason.

Shades of black, gray, beige, and white are considered neutral colors. They can be used alone or combined with other colors. Technically, these are not considered colors and therefore they are not represented on the color wheel.

Color Wheel

Color Wheel. Source: Wikipedia

All colors on the web are described using a three byte hexadecimal representation of Red, Green, and Blue. The first two digits are Red, the next two are Green, and the last two are Blue. White is represented by all three colors set at 100%. Black is the absence of color, meaning that all three colors are set at 0%. Thus, white is FFFFFF and black is 000000.

The amounts of each color are adjusted by setting the values of Red, Green, and Blue to different amounts. For example, to produce Green, set the green digits to 100% (FF), which results in the hexadecimal value 00FF00.

In order to design a website that is pleasing to the eye, you need to have an idea of which colors work well together. To describe some of the popular color schemes, we will refer to the color wheel that we discussed in The Color Wheel section.

There are many different types of color schemes and a few of the definitions and examples are given below. Keep these definitions and the color wheel in mind when designing your website.

Monochromatic: uses several shades of the same color
Achromatic: a type of monochromatic color scheme using black, white, and gray
Triadic: uses three colors which are 1/3 of the way apart from each other on the color wheel
Analogous: uses colors that are adjacent to each other on the color wheel
Complementary: uses colors that are opposite to each other on the color wheel

You should now have some insight on the skills that you need to master as a beginning web developer. These concepts are used in any web development project, regardless of the technology or language used to develop the site. You should understand the overall client-server architecture of the web and also the difference between client and server code. Master how information is architected and how to make your site usable. Create wireframe prototypes in the early phases of development to visualize the site. To design a site and put together visual appealing colors, be knowledgeable about colors and how they work together in the different color schemes. Mastering these five important concepts will give you a strong foundation and help you succeed as a web developer.

Leave a Reply

Your email address will not be published. Required fields are marked *