INTRO TO GRAPHICS AND WEBDESIGN

Learn to create beautiful visual materials and simple websites for your students

portfolio site templates

Principles and Tools for Graphic Design

Teacher’s activity, but also the student’s one, often require handy tools and applications to make things easier. Products like articles, flyers, school magazines, are often created to promote the institution and school’s results, but also to reflect the intense dedication in certain projects or simply to inform the public about important educational aspects.

No matter what program you choose to use, it is imperative to have precisely highlighted in your mind certain aspects relating to graphic design. This set of rules can decide whether your work is well done or not.

The golden rules of the graphic design are:

Mobirise

Choose the right shape

Most of the times, complicated shapes are the worst option. Their tricky aspect can lead you to the wrong path and express things in a negative way.

As a matter of fact, simple geometric shapes can form together the perfect picture.

As you can see in the picture, the combination of triangles can form a very elegant and/or efficient logo for a company, business or school.

The main aspect to keep in mind is to combine the shapes simply and correctly, not excessively.

2. Use appropriate colours 

Keep in mind the area of interest. Colours not only make beautiful and attractive the product, they also capture attention, stir up feelings and they increase the level of perception. If the product is meant to be presented to other institutions, use red and blue – red inspires confidence, and blue lets your audience feel that you are trustworthy.

If a magazine has as main readers children, use bright and childish colours as they are yellow, green and orange.

The colours can define the reader’s intention and influence the emotional state. Therefore, red colour can demand actions and directs readers’ attention to certain aspects, green indicates decision making, blue denotes credibility and honesty, indigo conveys emotions.
You can read more about the colours HERE.

Mobirise
Mobirise

3. Pay attention to the font size

Words reflect the main ideas and the way they represent you indirectly. The straight fonts will show your professionalism, while the curved ones will reflect a childish style.

It is very important to keep it simple and not to use more than two fonts in your design, one for the header and another for the rest of the content. Straight fonts reflect a professional look and the curved ones, a childish look.

4. Keep a balance

 Contrasts highlight the design. Although this implies colours, fonts, spaces, the best way to use it remains the colour. If you are novice in this area, you can use a colour-wheel.

Pay attention to the visual heaviness of the contrasts. Never too much. 

Mobirise
Mobirise

5. Use the right scale

Small things offer a professional aspect to your project.

As an example, in an article or a book, titles are big and short because they are meant to get the attention of the reader, and the subtitles are smaller and written with a comfortable font, for a quick view.

Another example are the objects inserted in documents or websites – if they are too small or too big, they will transmit the feeling of disproportion and/or instability.

6. Maintain a balanced FRAME

To keep a certain order, you must align the texts and objects in a simple and elegant manner.

You can use lines to separate certain paragraphs or texts, so the reader could observe much easier the text or image.

This aspect specially applies to informative content and/or posts. Keep the design balanced and fluent, considering the symmetry.

Mobirise
Mobirise

7. Textures and models

The best choice for the background of the website and/or is the white colour because the words are easier to read, but sometimes, other colours are better, and this fact depends of the approached theme.

On a white background you can use many colours for the text, except yellow and similar colour shades.

On dark backgrounds, bright colours look good.

The aspect of the background influence very much the visual impact. 

8. Visual concept 

This concept is the most important step behind the design process.

An appropriate approach can be the usage of images to complete the subject and can strengthen the story.

Don’t be afraid to leave empty space to avoid a chocking and crowded design. These spaces will considerably improve your design.

You can use lines to create a pleasant structure and to make the first impact be impressive. 

Mobirise

Gestalt Principles

A basic and reference component in graphic design and web design consists in Gestalt Principles. These principles are applied in the area of graphics and they approach the visual perception. The principles actually describe how the public will perceive the final result. 
Hoover with the mouse over the pictures to see more details.

Mobirise

1. Similarity 

Human usually associate objects like a group with similar characteristics, dimension or colour. An example are the links from the Internet pages. The underlined blue words indicate the fact that the path they offer is related to the content. The reader associates the blue words with the content. As shown in the picture, the primary human instinct is to group the shapes in this manner 

Mobirise

Continuation

The human instinct is to watch a line or a path until we get to its final. The theory explains that each thing or situation needs continuation and a result.

Mobirise

Proximity (aka grouping)

Proximity uses the arrangement process of the elements, in order to create an associative link between them. The similarity characteristic will determine us to perceive them as a single object.

Mobirise

Closure

This principle is about making everything easier. In the image, the components are easily perceived as an individual, then, as a whole. The closure combines parts, fill gaps in a way which make the reader perceive the entire shape, not its parts particularly.

Mobirise

Figure/ground

Figure/ground refers to the link between the positive elements in a negative space. Instinctively, people will observe the “hidden” elements after they separate the shape of the background.

Mobirise

Symmetry and order

Symmetry give the feeling of order. The human nature is always seeking for order in any chaotic aspect. The principle highlights the fact that we will always try to arrange symmetrically the elements of a composition.

Basics of Webdesign

There are many programs that facilitate the creation of a site. Some are more advanced and demand certain skills, others are free and very easy to use.

In order to understand the rules of graphic design applied in the building process of a website, we chose as an example, the new Google Sites. The application is very friendly and easy to use.  



Mobirise
  1.  
  2. When choosing the colour, pay attention to the picture you add and/or the colours of the institution’s logo. As you can see in our picture, we used blue because this colour is predominant, but we could have used the colour of the school. On the first page you can present the school, write a slogan, and/or describe the principles of the institution.
Mobirise
  1. Supposing that you already have a google account and you're logged in, write in the search bar of Google its name and click on the “+” sign in order to create a new site. A similar page like the one presented will open to you. From the right side of the page you can choose the theme, colours, number of pages, insert sheets, calendars, buttons, dividers, change the layout, etc.
  2. When choosing the colour, pay attention to the picture you add and/or the colours of the institution’s logo. As you can see in our picture, we used blue because this colour is predominant, but we could have used the colour of the school. On the first page you can present the school, write a slogan, and/or describe the principles of the institution.

Mobirise is one of the easiest website development tools available today. It also gives you the freedom to develop as many websites as you like given the fact that it is a desktop app.

Mobirise

Funded by the Erasmus+ Program of the European Union
The European Commission support for the production of this publication does not constitute an endorsement of the contents which reflects the views only of the authors, and the Commission cannot be held responsi­ble for any use which may be made of the information contained therein.

 This is an OPEN EDUCATIONAL RESOURCE created by SLIDE team within SLIDE Project. You are free to use, adapt, reproduce and share the work as long as you do not use it commercially and indicate the creator (SLIDE Project Team 2018-1-RO01-KA201-049382). More info HERE.