Graphic Design vs. Web Design

Although graphic and web design go hand in hand, they are also very different. In the similar sense, both types of design need to be done and changed according to what our clients wants, they both need to be done with some sort of feel and talent for design and both can make or break a company, depending on how well or bad the design is.

Web design, however, is more limiting than graphic design. While graphic designers have complete freedom in their designs, say in editorial and pamphlets, where they can make use of fancy fonts and skew text, web designers have to conform to certain rules. I will outline the basics as well as I can.

When designing any webpage, one should keep the following in mind:

• The main links for any webpage should never be an image (you will find a lot of people use fancy graphics as buttons for their main links). Main links would look similar to: home | about us | contact. Main reason for this limitation is SEO (Search Engine Optimization) - Google needs to 'read' you links. It cannot read images.
• Only the standard windows fonts may be used in text. The reason being, with all the millions of fonts, not everyone has every font. However, PC’s and Mac’s come with a standard set: Times New Roman, Verdana, Arial, Georgia and Courier (New). This way, we are always sure people can see the intended font, even if limiting.
• We need to design with web-safe colours when we put together the initial design, and colours within the text. This basically makes sure everyone sees the same colours when browsing. Photoshop has a built in function that only displays and lets you use web-safe colours when designing.
• We always put an extra set of the main links, at the bottom of the page. So ‘home | about us | contact’ must be put at the bottom of every page too. It is just a standard.
• Text cannot be made skew, put upside down or backwards without using images in web design (Please note: this is now a bit more possible with new CSS and some javascript coding so this rule is becoming obsolete). Websites conform to vertical and horizontal display of the main content. If you wanted to make a fancy header with weird fonts and colours, it would need to be done in a flat image (.jpg, .gif or .png). A whole paragraph of text should never be an image!
• Designers need to keep screen sizes in mind. If a website is too big for the smallest screen (800x600) it can be a nightmare. However, the most used screen size to date is 1024x768, so we generally work around that size.
• We also work in 72dpi as opposed to 300dpi (for print). This makes our lives a little easier in this aspect, because the 100% size you see, and the colours in RGB you see, is what will be seen online. (Where as when you print, there are lots of complications when it comes to CYMK, pantones, dpi etc.).

Those are a few guidelines when designing a website. Most have been put into place for SEO purposes. They are not written in blood but if you want to be seen by Google (the most popular search engine in the world), we as web designers, must conform.

An Introduction to Basic HTML

Pop-ups, buttons and links are just some of the few basic terms popular among anyone who uses the Internet and the websites contained within. Although it is still fairly new to the world, it has been a booming success since the first prototype created in 1992 by Tim Berners-Lee. Basically, the Internet consists of a website. A website consists of images that make up the design, and behind that is code, which tells the images and text where to go and what to do. The coding languages started as HTML (Hyper-Text Mark-up Language) and developed into more advanced languages, such as CSS (Cascading Style Sheets), JavaScript and PHP.

The most basic and popular coding language is HTML, and this is what I will be covering in my discussion. Although it is the simplest, it is also the base for all websites. CSS is just a development of HTML, and JavaScript needs to be called through HTML. So this is what I will be discussing.

Coding is very much like programming. Although basic HTML makes use of basic pair tags, the more advanced JavaScript is very similar to the programming of older programs such as Turbo Pascal. It is very mathematical, and needs alternatives to an initial command. It is very complicated, an area even I have not yet been brave enough to tread through, but that’s a glimpse.

Let me start off by trying to explain a basic set of HTML code. Have a look at the example below (please note: this use of code is pretty outdated because of CSS, but one needs to understand this before covering CSS):


<p align="center">

<font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4">

<b>

Hello! Isn't code beautiful?</b>

</font>

</p>

The above code decoded, would be out put like this:

Hello! Isn't code beautiful?

Wasn’t that simple? Let me break down what you see into English Terms.

Basically, all the coding is contained within tags. Tags are the < and > that surround the command. For every opening tag, you need a closing tag. So, if you look at the example above, we tell the program to centre whatever we want. We open it by saying <p align="center"> and when we are done, we close it with </p> (The 'p' stands for 'paragraph', and we want it 'center') Anything after a = sign, must be enclosed within ", such as URL's, colours, etc. (Please note, coding uses American spelling, in center and color.)

In this simple piece of code, I just wanted to make a simple sentence a bit prettier. (Default colour is black and default font is Times New Roman – yuck!). I called the font commands through the <font> tag. I called a colour for the font (in Hex code (#0000FF or a type of blue), same as that in Photoshop and Illustrator), I then gave it a size (default goes according to points, so 4 points), and gave it a font face (Georgia – the fonts that follow are just in case the user doesn’t have the assigned font on their computer). I then closed the whole tag with a simple </font>. If you look before this, there is a <b> thrown in. This simply made the text bold. (For interest’s sake, you can underline text with <u> and make it italic with <i>).

And just like that, we have made a simple piece of code and output it on screens for people to understand and enjoy. That is a very basic and very simple look into the world of coding of websites. Once you can grasp the basic fundamentals, it is very easy to learn and understand the more advanced HTML and CSS.