BASIC THEORY OF GRAPHIC DESIGN

I.       Understanding Graphic Design

Graphic design is a form of visual communication using images to convey information or messages as effectively as possible. In graphic design, text, images are also considered as a result of abstraction of symbols that can be sounded. Graphic design is applied in communication design and fine art. Like other types of design, graphic design can refer to the process of manufacture, design methods, the resulting product (design), or any discipline that is used (design). The art of graphic design include cognitive skills and visual skills, including typography, illustration, photography, image processing, and layout.

Cognitive ability, If you use plain language is cognitive thinking, logic, reason, and the like. So if say a graphic designer must have the cognitive ability. Must have a lot of insight into a wide + creativity. Insight not only relates to the design but also a lot of things such as culture, technology, and lifestyle in the community. As the development of digital technology greatly affect the engineering design graphics.

Visual Skills, With the ability of visual, graphic designers must know how to communicate with the right product messages to visually lay out the character, shape, color and typography explore visual forms both 2D and 3D (real form) into a unified design an attractive and appropriate in accordance with message communications products and also find out the implementation of the material / design materials such as the use of paper, printing technique, size, effectiveness of materials, and so forth.

II.    Basic Principles of Design

The basic principle of design is the organization of the basic elements of design by taking into account the principles in creating and applying creativity. Frank Jeff kin (1997:245) classifies the principles of design to be: unity, diversity, balance, rhythm, harmony, proportion, scale, and emphasis.

a.       Unity (unity)

Unity is an effort to incorporate design elements into a form that is proportional to each other and merge into a media. Unity of design is important in a design, without any unity of design elements will split stand on their own do not have balance and harmony is intact.

b.      Diversity (variety)

The diversity in the design aims to avoid a monotonous design. It required a change and contrast accordingly. The existence of large differences in small, thin thickness in the letter, the use of the images, matching the color difference, and diversity of other elements that match will cause a harmonic variation .

c.       Equilibrium (balance)

The balance is how to manage the existing elements into a composition that is not biased. The balance can be achieved from two parts, namely that impressed symmetrically official / formal is created from a blend of form and size the same layout, asymmetrical balance while giving the impression of an informal, but can look more dynamic which is formed from the alloy lines, shapes, sizes, and that is not the same layout but still balanced.

d.      Rhythm / rhythm (rhythm)

Overall flow of the design always implies a comfortable rhythm. A motion which serve as the basis for a rhythm and his trademark is located on repetitions performed regularly given pressure or accent. Rhythm makes the impression of motion that imply eyes in a comfortable and rhythmic display.

e.       Harmony (harmony)

Suptandar (1995:19) defines harmony as a business from a variety of shapes, build, color, texture, and other elements arranged in a balanced composition for favors to be seen intact. Harmony is the order among the parts of a work.

f.        Proportion (Proportion)

Proportion is the ratio between the number of an object or composition (Kusmiati, 1999:19). It could be said that the proportion of the suitability of sizes and shapes to create harmony in a field. There are three issues related to the proportion problem, namely the composition of the interesting placement, determination of the proper size and shape, and size determination that can be measured or prepared as possible.

g.       Scale (scale)

Scale is the relative size of an object, when compared to the object or other element of known size (Kusmiati, 1999:14). Scale associated with visibility or vision with elements that have been raised (factor of legibility). Scale is also very useful for the creation of suitability shape or object within a design.

h.       Emphasis (emphasis)

Frank Jeff kin (1997:246) states that: "In the emphasis, all emphasis is no emphasis, if all highlighted, then there is nothing you'll enjoy. The existence of an emphasis in design is essential to avoid the impression of monotony. The emphasis may be on the type of letter, space, color, and others will make the design becomes interesting when done in a proportion sufficient and not excessive.

III. COLOR

Color is light refraction of sunlight by a prism of glass into MeJiKuHiBiNiU.

a.       Color Theory Basics

-         Hue is the identity of a color

-         Value is the value of color, namely the quality of the dark light of a color.

-         Intensity is the density of color, namely the quality of the clarity of a color that is strongly influenced by the color of light that hit a

b.      The types of color

1.      Under the conditions of the kinds of colors, color can be grouped as follows.

2.      Neutral colors, are colors that no longer has a purity of color or in other words not a primary or secondary color. This color is a mixture of the three color components at once, but not in exactly the same composition.

3.      Color contrast, is a memorable occasion color opposite to each other. Color contrast can be obtained from the opposite color (cut the midpoint of the triangle) consists of color primary and secondary colors. But it is possible also to form a color contrast to reject the value or purity of color. Examples of contrasting color is red with green, yellow with purple and blue with orange.

4.      Hot colors, are a group of colors within the range of a half circle in the circle of colors ranging from red to yellow. It became a symbol color, cheerful, excitement, anger and so on. Color impressive heat close proximity. (Influenced by the light that much)

5.      Cool color, are a group of colors within the range of a half circle in the circle of colors ranging from green to purple. This color is a symbol of tenderness, cool, comfortable and so on. Cool colors impressive distances. (Influenced a bit light).

Based on the classification of the types of colors, color can be grouped as follows:

1.      Primary Colors: Colors of the principal or primary color, red, yellow and blue

2.      Secondary Colors: These colors are produced from a combination of primary colors.

3.      Tertiary Color: The color results from mixing primary colors with secondary color or secondary color with secondary color.

c.       In addition to color classification, there is also the color classification based on the combination of 2 colors or more in one unit, namely

1.      Monochromatic color: blend the colors in a single color family. Example: light blue with dark blue, pink with dark red.

2.      Analogous Color: mix of colors adjacent to each other in the color circle. For example: yellow, green and blue, blue, purple and red.

3.      Complementary colors: colors that blend together in a circle opposite or contradictory, but rather support each other. For example: yellow mixed with purple, orange combined with blue, red combined with green.

IV.  WEB DESIGN

Web Page

• In general, there are three categories of the underlying reasons for preparing a web page, among others:

o       Support the promotion of products or services on the Internet

o       Provider information

o       Conduct online transactions

Preparation Web Page

• Here are some steps that can be done so that the preparation of more effective web pages, among others:

o       Define clearly the purpose of the web page.

o       Make the (content) of interest to be submitted or discussed.

o       Create a web page so that visitors courted and challenged to go back again

Design

• A work / activities / creative process to produce something that nature: New (Innovative), fresh (fresh), amazing.
• Has the efficiency, produce something better, easier and more practical (useful), solve a problem (solution).

Good Web Sites

• Design Elements
• Aesthetics: color (color), layout (layout), typography (typography)
• Communication: the content (content), delivery of messages (language style Used for communication), interaction (interaction / feedback), the formation of the image (image building)
• Usefulness. Utility / functionality, appropriate technology
• Usability / ease of use: learning time, speed of performance, error rate, memory and subjective satisfaction

Website Development

• Content Creation
• User Interface Design
• Graphic / Visual Design
• Technology Planning
• Web Authoring
• Web Programming
• Multimedia Design

Content Creation

• "Content is king"
• Steps to prepare content:
• Setting goals
• Determine audience / target audience
• Write content
• Tip:
• It should be brief and clear
• Use simple language
• Facilitate scanning: highlighting, bulleted lists
• Provide information preview
• Avoid "click here", "under construction"
• Do not force the user to memorize

User Interface Design

• Consider usability
• Some things to achieve usability
• o-branching structure which means, not excessive, do not use frames
• Compactness site - avoid page too long, horizontal scrolling
• Universal access - platform, browser, access speed, screen resolution, color
• Support navigation

Graphic / Visual Design

• layout-grid and structure
• Consistency - colors, fonts, styles
• The simplicity of the site - do not confuse the user
• Optimization of graphic file - a file format, web-safe colors

Set Homepage

• The type of website that we are stacking greatly affect the structure of these websites and order information will be generated. We can set up a website for:
• Peeling our hobby or interest us at one particular thing and so on.
• Opening a forum for discussion and communication
• Provide service to customers
• Generates profits for certain companies or organizations

Information On Web Page

• Some web sites consist of thousands of web pages, some consisting only of a few pages. The more information will be provided or the more important information, then we need to make it easy for users to access them.
• Development of navigation systems should be as simple as possible so more easily followed by visitors.
• In general, visitor information seekers also need quick access.
• Placement of ads have to be careful, try not to interfere or make lies bored visitors.
• A good proportion is necessary to adjust the ease of access and speed of access to the continuity of the website.

Value Added of web design

• Animations and Images
• Many sites use animation and graphics to attract visitors. But be careful! If too much it will make the visitors disrupted
• Consider the problem of bandwidth (download time) and browser compatibility.
• ◊ flash animations must have flash player.
• Animation ◊ JavaScript must be enabled browser.

• Avoid:
• Display the image size (> 1 MB)
• Change the size of large images into smaller through the attributes in the tag <img>. Better to use image-editor.
• Text equivalent
• Any picture or image that we put on a web page, must be accompanied by equivalent text attributes on tags that are used.
• Example:
• Attribute "alt" tag in <img>
• Attribute "title" on the tag <a>

Why?

Because some visitors to disable the option to download pictures or animations to speed download time.

Website Creation Process

• Define Content / Website Objectives
• Develop Architecture
• Creating a basic framework or architecture or site hierarchy.
• Create Design
• The design should look good on computer monitors. Consistency of design on all web pages VERY important. Color, Font, Graphics, Lines, Tables, Logo, and Navigation.
• Implement the Site
• Test your web design on various computer monitors, platforms and browsers
• Maintaining the site

Define Content / Content

• Determine Your Site Objectives
• What Needs People Visiting Your Site?
• Determine the Average Age of Target Audience and Skill Level.
• Know Your Audience
• Keep Your Content Fresh and Up To Date
• Prioritizing Quality over Quantity
• Share your Wisdom Clearly [Privacy Policy, Copyright, Disclaimer]

Site Navigation

• Making site navigation should follow some basic rules, such as:
• Limit the number of items in lists and menus.
• Do not rely entirely on graphic images for navigation.
• The homepage should be easy to find.
• Integrate with content navigation facilities.
• Avoid frames if possible (use tables or CSS).
• List of contents
• Is a type of navigation using a list-item basis.
• Usually used as a table of contents, or navigate within the site content.
• Breadcrumb trail
• Commonly used to provide information to visitors where it is located and is also useful to facilitate the visitor if it will return to the home page.
• Use if the site has content (content) is quite long.

Site Architecture

• Architecture sites to determine how the site and the pages in it are organized, labeled, and interconnected (linked) to facilitate the process of browsing and searching of information by visitors.
• In making the architecture or structure of the web sites, we should follow some principles and rules, including:
• All the pages on the site should have a link to the main page (homepage).
• Subject to the "three-click rule" in which visitors must have found the information in 3 clicks or less.
• Place the most important content at the beginning of the page.
• Limit the length of the page (no scrolling).
• Simplify page layout.
• Try to keep the main content easy to find.
• Display products from various perspectives / categories.
• Follow the general principles of good writing.
• All in One
• All site content is presented in a single page (main page or homepage).
• This architecture is the simplest architecture.
• The advantage of this model is easy in maintenance file maintenance) because it only consists of one page (file).
• Flat
• It is a model structure that make up web pages in a linear manner.
• Each page can be accessed from other pages in sequence.
• This structure is a structure that is simple and often applied in those sites with many pages are not too many. For example, sites that are arranged in the menu Home, Contact Us, Products, About Us, etc.
• Index
• Much like a flat structure, only the index structure of the menu or the page is structured based on a specific index.
• This architecture allows visitors to access a page.
• Hub-and-spoke / Daisy
• This model is suitable for sites that have multiple grooves, such as the application site email. Visitors can access the page inbox (mailbox) in several ways, such as after reading the letter, after sending a letter or when it's managed to save the contacts.
• Strict hierarchy
• Web pages arranged in an array of parent-and-child (per category).
• This architecture allows to access a page through a parent or a category.
• The advantage of this model is that visitors easily and quickly in seeking information or pages they want because the information is prepared based on certain categories.
• Multi-dimensional hierarchy
• Basically the same as the architecture-strict hierarchy, only on this model, the information allows access from multiple categories. In other words, some categories can access the information (pages) the same.
• Search
• If we are going to add a search form on our site, then type the web architecture is applied. Information or pages can be accessed by a visitor after visitor conducts a search through the form (page) that has been provided. Of course, the information or page that is displayed according to the keywords (keywords) entered by visitor.

V.     SOFTWARE

a.       Corel Draw

b.      Photoshop CS

c.       Macromedia Flash

d.      Macromedia Dream weaver

e.       3d Studio Max