Saturday, December 20, 2008

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:

    Logo done for Organa

    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:

    Close-up into a part of the logo

    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.

    Design applied to Business Card

    Design applied to 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!



Saturday, December 6, 2008

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.