The Basic Fundamentals of Graphic Design

When I started studying for my Graphic Design degree, I had little knowledge of what I was getting myself into. First year was tough, as my drawing talent was very limited. Second year was even more painful; as we got into designing on computers and learning the programs, I really struggled. I thought I had gone into the wrong field and that there was no hope for me in the industry.

Then my third and final year came. The programs were becoming more familiar now and once I was over that milestone, I began grasping graphic design and its basic rules and guidelines that resulted in design harmony. I was behind, don’t get me wrong. A lot of students had grasped it long ago, and were just excelling, but I now understood and could start on my own journey.

Below I will outline some basic pointers I picked up while studying. As I’ve mentioned in one of my previous articles, some people are just born with design talent, but those who aren’t can still excel with a great love for the field.

• Adobe: get to know her in all her beauty. The best programs for a Graphic Designer should include: Illustrator, Photoshop and InDesign. The Internet is full of generous people who share guides and tutorials on any and all programs. I’ve learnt the most from mimicking someone’s design tutorial and implementing what I’ve learnt into my own designs
  


• Corporate design: it’s ALL about the logo. If it hasn’t become obvious by now, a company usually has continuity from their logo through their stationary (I’m talking about business cards, letterheads etc,). Take their logo and strip it into elements. Use those elements in the stationary and keep to its colours and colours that compliment the logo. (A nice grey or black usually compliment any logo, or white for the brighter, busier stuff). See my example below:
  
  

  
  
  This was my logo designed for Organa. The most obvious element to pull would be the butterfly, but instead I chose the swirl and bubbles, as seen below:
  
  
  
  I then added the chosen elements to my entire corporate identity for Organa. Below is how it was applied to the Business card and a close-up of it used on a Letterhead.
  
  
  
  
  
  To see Organa's full corporate identity, please click here
  

• Look at existing work - inspiration is so important. Take different aspects from different designs that you like and combine it. Be creative; no credit goes to ideas that have been killed or designs that have been copied outright, but simple or original is timeless.
  


• Look for criticism: If you aren’t studying, try finding someone who is advanced in the field, someone with whom you can consult with and just show your work to every now and then. A second eye is always good (even if they aren’t in the field, most people, even those who cannot design, can tell a bad design from a good one). Sometimes we also get a bit bigheaded and stop seeing our flaws, but it is vital that we are constantly reminded that we are still learning.

If you really love designing but are struggling, keep at it. The programs aren’t easy! The road ahead is not easy! But once you grasp that special understanding in design, you will be unstoppable.

Below I have included previews of my first attempt at designing my website, up till it's current design. You will see how bad I started out and where I excelled to, in just a couple of months. We all started at the bottom!

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.

Why a Logo should be Vector

As you may know, a logo is a companies most precious element - it is its' face and can describe a whole company in one little image. They are so powerful, they can either make or break your company, and yet some of the best logos are the most simple. When choosing a logo for your company, with all the important things to keep in mind such as concept and message it portrays, I urge you to also keep in mine that your logo be created in vector.

Vector Graphics

Vector, in short, refers to 2D graphics that can be stretched to any size imaginable without ever badly distorting or losing quality. This characteristic is important for logos for when you want to make them bigger, for say advertising purposes. The two biggest and best vector programs that currently exist are Freehand and Illustrator.

Below is an example of a vector image, and then zoomed in to show its structure.

As you can see, even after zooming in/stretching the image, it remains crisp and clear. Once placed in your desired design place (advert/website etc.) it then gets converted to a bitmap.

Bitmap/Raster Graphics

The opposing graphic would be Bitmap or Raster. These refers to images that are built up of pixels (such as photographs, or actually most of the graphics you see around you). The main characteristic of these graphics we should be concerned about is that once a size is given, it can never be made bigger without distorting. It is usually a high-resolution image.

Referring to the above posted images, have a look at the one below. It is the same image, but was converted to a bitmap and then stretched.


As you can see, it has lost a lot of quality and is becoming blurry. Imagine the same image needs to be stretched to fit and be clear on a billboard! It's impossible.

If you get a vector logo from the start in its raw format (as previously mentioned in Illustrator/Freehand, or even in Photoshop as a Smart Object) then you won't encounter design difficulties later.

However, if you already have a logo and was given to you as a bitmap, there is a process called vectorisation, which takes your logo and makes it vector, as long as it isn't too complex. It is just a process of tracing of the image and making a new one in vector.

I hope this will clear things up for you, concerning logos and vector, and I hope I have convinced you of why it is so important.

Finding my path in design

I am a new, young designer and am still finding my feet in the world of graphic and web design. I started tinkering with code and designs in a role play website about 6 years ago, and only recently realised it is my passion in life. I studied graphic design and I didn't always grasp it. Suddenly though, I did understand it and am well on my way to being a successful designer.

I have realised simply doing graphic design is too limiting though... So I have taken the path to be a web designer and build my own websites too. My CSS and XHTML code is limited for now, but I have come so far in six months I can't believe it myself. My dream is to become a successful designer, fluent in JavaScript too.

Concerning design, I believe some people do have a natural talent and don't need to be taught, but I certainly did. With the help of my college and the web design firm I worked for, I learnt so much. It helps to have people around you who are patient and willing to help. I was so discouraged at one point, because my work was just... amateur. I was also very lazy (though I am not afraid to admit, coffee has been my best ally these passed months!).

Now that I am starting to grasp the secret to design, I want to share it with the world. I am not the best nor am I perfect, but I aim to get to that point! Below is an example of a project I redid. The difference between the old and new is about a year.



I hope you can see the improvement! That is just the logo of the entire project redo (it was a corporate identity for an existing garden design college). The entire CI can be seen on my website. Along with working on these articles, I am working on a amateur page on my website that shows exactly how I have grown.

If you are a new struggling designer, I know seeing other people's work that is just so amazing can be discouraging, especially when you try your utmost to just do the same, but trust me, if I could eventually grasp it, anyone can. I hope my articles will be helpful and insightful!