Tuesday 3 March 2015

Placement in Design

Its a Blank Slate

When you're starting a new design, no matter what your design methodology is, you start with a blank page. There is nothing on the Web page - so the first thing you'll do is put something up on the page.
But do you think about the placement of those elements or do you just throw them onto the page willy nilly? Good designers don't allow the position and placement of their designs to occur randomly. They think about:
  • what the element is
  • how the element relates to the page goals
  • where the element fits with the other elements on the page

Notice how the page is split with graphic design and a bold heading, with 3 sections balanced underneath. The color is bold over a black background which creates a focal point and ease of reading. 

Where you Place Your Elements Can Make a Difference

As they say in real estate, there are three important rules: "Location. Location. Location." If the Mona Lisa were stored in my aunt's garage, it wouldn't have the effect on people that it does hanging in the Louvre. It's still the same painting, but if it were sitting next to cans of old paint, a dirty lawn mower, and a dust covered junker car it takes on the aspect of its surroundings.
Notice, on this design, the title is superimposed over the design. It's very effective.
Where are the Other Elements on the Page
In some ways this appears to be the most obvious part of design - after all if you already have a logo in the upper left, you're not going to place content on top of it. But you also need to think about the context of your positions. Placing an ad block in the middle of a text block implies a sense of connection between the two elements. Placing a horizontal line after a headline or by-line can create a sense of disconnect between the title or by-line and the content.
In this design the page is split in half with the balance created by the title and the graphic. The colors are repeated in the swim suits and the bottom section of information. The choice of a beach background cohesively brings it all together. The header and footer are connected by the colors, the design and the horizontal blocking that repeats the beach scene.

Variety is the Spice of Life

One of the easiest design techniques is to center elements on the page. And many beginning designers start with that as their goal - all their design elements start in the middle, usually horizontally, but sometimes vertically as well. Centering appeals to many people because it's easy. You know you've "done it right" because half the page elements are on one side of the screen and the other half is on the other.
The page is divided into 9 sections. They are centered with the title superimposed over the middle section. 
The page is divided in half with text on the left balanced with graphics on the right

Find the Points of Interest on Your Page

Points of interest are the focal points of a design - the places where your eye is drawn to. By changing the spacing around those points of interest you can affect how those items are viewed on the page.
The points of interest are the people. They balance each other by top and bottom placement as well as left and right. 
The checkerboard effect with color and text and graphics is effective and interesting.
The organic effect of apples centered with the title superimposed on a plain white bowl  creates a beautiful thing!
The centered image of the face with graphics on either side balances the page. The color on the left of the face creates interest.

Monday 23 February 2015

Hierarchy in Design






Upside Down or  Right Side Up


Hierarchy is defined as  the arrangement or presentation of elements in a way that implies importance.[1] In other words, visual hierarchy influences the order in which the human eye perceives what it sees. This order is created by the visual contrast between forms in a field of perception. Objects with highest contrast to their surroundings are recognized first by the human mind. The term visual hierarchy is used most frequently in the discourse of the visual arts fields, notably so within the field of graphic design.
http://en.wikipedia.org/wiki/Visual_hierarchy




https://www.pinterest.com/pin/47921183511502091/

Visual hierarchy is not just top to bottom, but it is also left to right


https://www.google.ca/search?q=hierarchy+in+design&espv=2&biw=1366&bih=573&tbm=isch&tbo=u&source=univ&sa=X&ei=-qHrVPreEczIsQTnwoKwDw&ved=0CBwQsAQ&safe=active&ssui=on#imgdii=_&imgrc=Nt7NG5ySOnhcLM%253A%3Bekmuh4quUswNrM%3Bhttp%253A%252F%252Fwww.hierarchystructure.com%252Fwp-content%252Fuploads%252F2013%252F01%252FDesign-Management-Hierarchy.jpg%3Bhttp%253A%252F%252Fwww.hierarchystructure.com%252Fdesign-management-hierarchy%252F%3B750%3B950

Designs can be top down informatively:


https://www.google.ca/search?q=hierarchy+in+design&espv=2&biw=1366&bih=573&tbm=isch&tbo=u&source=univ&sa=X&ei=-qHrVPreEczIsQTnwoKwDw&ved=0CBwQsAQ&dpr=1&safe=active&ssui=on#imgdii=_&imgrc=3g_LMnvcxM-rLM%253A%3BOjiy7yCnxStsWM%3Bhttps%253A%252F%252Fwww.semiwiki.com%252Fforum%252Fattachments%252Fcontent%252Fattachments%252F9390d1385950468-simplified-fpga-hierarchy-jpg%3Bhttps%253A%252F%252Fwww.semiwiki.com%252Fforum%252Fcontent%252F2974-conquering-errors-hierarchy-fpga-ip.html%3B650%3B365

Decisions about Design

So Now WHAT? 


Using pinterest, I created a mood board.
https://www.pinterest.com/kkrammer/mood-board-for-calm/


 I love these colors and backgrounds: especially those in the blue and yellow tones


polygon backgrounds pack Pack gratuito de 20 backgrounds geométricos

https://www.blogger.com/blogger.g?blogID=5396607121170292639#editor/target=post;postID=7773431232052654303

I want to use "spring" inspired graphics, color and text. It creates a calm and light mood. 

https://www.blogger.com/blogger.g?blogID=5396607121170292639#editor/target=post;postID=7773431232052654303

I love the light and free design in the above post. of "inspired by spring|", "the butterfly effect|", "april showers" and "sunflowers". In the Calm 20 online course I am designing, I will choose a light and lively font and use italics for a breezy effect. 

More examples of fonts and designs.


10 Free Watercolor Fonts! I love watercolor effect and these are just awesome. 8 can't wait to use them on my digital scrapbooking layouts
The colors and designs for the fonts are light and airy. It creates a calm, yet happy mood.

https://www.pinterest.com/pin/47921183511427265/

For Graphics I will seek out light ad airy designs that focus on an impressionistic effect. 

「海街憧憬」夏・冬Saatchi Online Artist: elwira pioro; Acrylic 2013 Painting ""MEET ME BY THE SEA ""
https://www.pinterest.com/pin/47921183511427233/

The graduating color and the title going vertically adds interest.

MoMA | The Collection | Koichi Sato. The Modern Poster, The Museum of Modern Art, New York. 1988
https://www.pinterest.com/pin/47921183511427237/

I love the block graphics with the clouds and color of the sky.

Old Poster Art Approach - multiple typefaces in strong single-layer typographic lock-up, stand-alone or separate from the illustration. Every element on the page in distinct area on a single layer.

https://www.pinterest.com/pin/47921183511427310

THE COLORS HERE ARE BEAUTIFUL
The infographic below illustrates the, “10 Commandments of Typography” that could be followed as quite the basics when it comes to selecting fonts. Even th
https://www.pinterest.com/pin/47921183511427268/
They remind me of spring. 

Use of positive and negative space is done creatively in this example. The designs within the colors create an airy effect. 
Great Poster Design - love the teal orange and yellow together with the brown....
https://www.pinterest.com/pin/47921183511427353/

Thursday 5 February 2015

Design Layout

Design Layout

Principles of design should always be incorporated in any graphic design project to assist its communicating and graphic interest, however in the planning of a basic design, the designer must produce a job to suit the class of work, the copy, and the tastes of the customer.
To develop a sense of design use the three `eyes':
  1. Visual-eyes: Examine closely all types of printed material, i.e. physically see/look at what everyone else is/has done. (What catches or eludes your attention, and why?)
  2. Critic-eyes: Separate the good from the bad. (What provokes the ad? What motivates you? Those things that don't catch your eye — why?)
  3. Analy-eyes: Select the element that makes it a good design.
                                        
There are three essential qualities needed to become a competent designer:
Vision.— To be able to detect an idea and then to toss it around in your head (objects, tones, shapes, colours — everything around you).
Imagination.— To be able to use an idea effectively, i.e. brainstorm the idea and bring it to a state where it can work.
Judgement.— To be able to assess the idea's value and correct place and use, i.e. limitations always arise after you come up with an idea.

                                                  
Balance
This is the result of an arrangement of one or more elements in the design so that visually, they equal each other. Every object in nature has structural balance, from the symmetry of a flower petal to the chambers of a snail's shell.

The balance needed every time we perform any form of physical movement is automatically maintained by a built-in equilibrium that we take for granted.
Achieving a physical balance is simple: the weight of one object must be counter-balanced by the weight of another on the opposite end of a fulcrum.

For graphic design, the visual centre of any typical A4 page of the business world is not the actual physical centre but what is termed the Optical Centre. This visual point of balance can be determined mathematically as being located three-eights from the top of the page, five-eights from the bottom.

Regardless of the design style of work that is to be produced, Optical Centre must always be carefully considered during the initial design stages for a printed piece to work successfully.
One of the most fundamental differences in a design is whether balance is symmetrical (centred) or asymmetrical (off-centre). The choice between them profoundly affects the layout and feeling of a design.

Symmetrical BalanceSymmetrical (or formal) balance has elements of equal weight as well as tone placed on both sides of an imaginary vertical line on the page and gives the feeling of permanence and stability.
Any symmetrical layout is likely to produce a more static, restful design. However, because a centred layout is so static, it is very easy to make it pleasantly innocuous but boring. Therefore, color and tone can improve the layout.
                                         

Asymmetrical
One of the major advantages of an asymmetrical layout is that it allows for the more dynamic use of white space. This is particularly important if illustrations are included. Asymmetrical (or informal) balance may be unequal in position and intensity. To create asymmetrical balance, there must be an increase in intensity to compensate for the change in position. Intensity can be increased by changing size, shape, or tone. For a particular job, the designer might choose to position the elements to one side of the picture plane. The white space opposing must then act as a counter-balancing force.

 
Informal balance creates visual interest
A useful way to determine the balance of elements on a page is to compare one area with another; it is helpful to analyze the space with an imaginary grid. In this way, you can optically weigh the masses and determine their intensity and direction. How space is handled will depend on the number of imaginary grid units you have selected and how much space is available.

Contrast
Of all the design principles, contrast is probably the next most important. Contrast creates interest in the printed product by providing variety in the design. An expressive voice will emphasize a word or phrase by raising or lowering the tone, or by increasing or decreasing the speed of delivery. The contrasting tones of the voice in speech give expression and life to the words spoken. In music, a sharp or flat that is outside the primary tonality is a modest but definite emphasis.

emphasiz.gif (4200 bytes)

Similarly, in typography, an italic of the same point size as its roman provides a modest but definite change. To gain emphasis in a layout, there must necessarily be strong contrast between the elements. Contrast can be added in the design by changing the sizes, shapes, position, weights and colours.

Contrast in SizeThis is really a question of whether the picture should dominate or if the type should have the upper hand. The answer to this question depends on many considerations and cannot be answered in general ways.

The contrast of the small ball to the larger one emphasizes the smaller ball.

Contrast in Weight
Most popular type faces of today have a number of companion letters such as Bold, Italic, Extra Bold. The careful use of type families within a design can add visual interest for the reader in addition to providing visual guides, or cues, to a change of thought or item of importance.
                                                         


Contrast achieved by varying the type styles must be carefully planned, otherwise the end result will be too much contrast which only defeats itself. If you try to emphasize everything, you only gain a monotony of emphasis resulting in a visually confusing design.

Contrast in Position
The very act of placing any design style (formal or informal) on the slant will cause the design to be in visual contrast to the normal horizontal position. As a general rule, the placing of such designs on a slant is not a desirable practice, although in some cases it can prove to be very effective.
Nevertheless, ease of reading must always be considered, and tilted designs might cause some inconvenience too many individuals who are trying to read it.
An alternate method which can often result in a visually dynamic layout is to position the design elements of the page in such a way as to obtain contrast from the white space which surrounds all of these elements.

Contrast in Shape
Trying to put a square peg into a round hole is an impossible task because the shapes are at contrast to each other. This principle can be incorporated into a design where the visual elements are deliberately arranged to be in conflict to each other.
This may be achieved in a variety of ways, e.g. Introducing graphics and/or illustrations that differ from the normal proportion of the page; using an extremely large display face that appears to dominate the body text, page itself, or illustrations; incorporating a stunning border or thick rule within the design.


                        
       
Contrast in Colour
The concept of contrast in colour should not be limited to the narrow perspective of natural colours, i.e. red, blue, purple, green, yellow, etc. Certainly, the use of colour opposites will achieve contrast in a design, as for example the use of a colour opposite, together with a colour which harmonizes with the substrate.
Colour Wheel
The colour wheel
It should also be considered in relation to the colour of the typesetting, i.e. the degree of blackness that hits the eye. Careful selection of type, both size and weight, will give a distinctive visual colour to the overall design.
The use of contrast should be handled carefully because it can cause the layout to become too forceful and thus alter the personality of the product or idea.

Harmony
Harmony is the opposite of contrast and relates to the unity of all parts in the design. A layout can contain harmony of shape, tone, colour, and treatment.

Shape.— achieved by ensuring that type masses and illustration(s) conform to the shape of the design.

Tone.— equalness of the weight of type faces, decoration and illustrations.

Colour.— relationship of one colour to another, i.e. stock and ink, two-colour job.

Treatment.— relationship of type face design, decoration, or border, to the product or idea.

      

Variety
The introduction of variety will give liveliness and vigor to the layout. An otherwise dull page, is strengthened by the use of variety. This can be achieved by making subtle or obvious changes in the size, shape and colour of the various units of a design.
The grouping of type elements together with the careful use of type families within a layout will result in an inviting design for the reader. One of the chief dangers lies in the use of too many kinds of type.


                     
Action
Since you will most likely not be present when the reader views your design, the opportunity of showing the reader what information is most important will not present itself. To overcome this problem, there must be some type of action in the layout.
Action refers to the principle that governs the movements of the eye from one part of a design to another. The eye will see not only what the mind wants it to, but also what is thrust upon it.
The information contained in a design will have varying degrees of importance, using the principle of action, the reader should be visually guided to each of the elements according to its importance. Therefore, the eye of the reader may be selectively directed by careful placement of type, illustration/s or border/s in the design.


      
http://www.typography1st.com/typo/prnc-des.shtml   (text)
https://www.blogger.com/blogger.g?blogID=5396607121170292639#editor/target=post;postID=5811919416603912419;onPublishedMenu=posts;onClosedMenu=posts;postNum=0;src=postname  (images)

Wednesday 4 February 2015

Line and Shape

Graphic Design Principles - Lines (Line)

The world we live in is three dimensional but when we try to represent that world in art we use lines, a very simplistic way of trying to represent the three dimensional world around us. But by knowing how to use lines in art we can make a very good sometimes great representations of the world around us.

Horizontal Lines

Lines of Direction Horizontal a horizontal line usually represents a feeling of rest or relaxation, think of a puppy asleep on the floor. That is a horizontal line. Stability is also conveyed through a horizontal line, think of a table or a large building.

Vertical Lines

Vertical, a vertical line usually brings to mind strength and sometimes action. Think of a tall tree, its strong vertical line shows strength. A vertical line can show action especially when it’s compared to a horizontal line.

Diagonal Lines

Diagonal, a diagonal line always suggests movement. Imagine a football player running if you draw a line from the top of his head to his heel you will see a diagonal line. Diagonal lines always get our attention for the action they imply.

Curved Lines

Curved, a curved line can suggest many things. The curved line of a sagging roof can indicate weakness and a curved line of a dancers arm can indicate gracefulness.
Remember lines convey thoughts and feelings and every line you use in your design helps to convey your message.

Graphic Design Principles - Shapes (Shape)

Lines form shapes and from those shapes we get positive and negative shapes, or spaces.

Positive Shapes

Positive shapes are always the objects in an image or design. It’s important to pay attention to your positive shapes their size, placement, and their balance in reference to:

Negative Shapes

Negative shapes, these are always the shape formed from the space around your object. By paying attention to the balance of your positive and negative shapes you can make sure that your designs or images have good balance.

http://www.allgraphicdesign.com/graphicdesignarticles/elementsprinciplesprocess/basicgraphicdesignprinciples1.html

Tuesday 3 February 2015

Graphics

What is Graphic Design?

Graphic design is art with a purpose. It involves a creative and systematic plan to solve a problem or achieve certain objectives, with the use of images, symbols or even words. It is visual communication and the aesthetic expression of concepts and ideas using various graphic elements and tools.

Elements of Graphic Design

Graphic design can use image-based designs involving photos, illustrations, logos and symbols, type-based designs, or a combination of both techniques. These designs can include various combinations of the following elements.
Lines: Straight, curved, wavy, thick, thin - when it comes to lines, the possibilities are limitless. Lines allow designers to divide a space or separate content in a layout. They can also be used to guide the eyes of the viewer, or make other elements follow a strategic path for added findability, to get the viewer easily from point A to point B.
Shapes: Shapes offer a variety of ways to fill spaces creatively, to support text and other forms of content, and to balance a design. Shapes can be created out of nothing, using white space to give a design structure and clarity.
Colour: Colour, or the absence of colour, is an important element of any design. With a solid understanding of colour theory, designers can amazingly influence a design and a brand, seamlessly integrating colour boldly or with brilliant subtlety.
Type: Type can transform a message from mere text to a work of art. Different fonts, combined with customized alignments, spacing, size, and colour, can add power to the point you are communicating to the world.
Texture: Even a smooth and glossy advertisement can seem tangible with texture. It gives a sense of a tactile surface through its visual appearance and adds a sense of depth, enhanced by selection of appropriate paper and material.
https://www.treefrog.ca/what-is-graphic-design

FONT: Letters and the like!

When choosing a font, it's like getting ready for an outing. There are five things to consider when picking that favorite outfit (font)


1. Dress For The Occasion

For better or for worse, picking a typeface is more like getting dressed in the morning. Just as with clothing, there’s a distinction between typefaces that are expressive and stylish versus those that are useful and appropriate to many situations, and our job is to try to find the right balance for the occasion. 

Screenshot

2. Know Your Families: Grouping Fonts

Screenshot
The clothing analogy gives us a good idea of what kind of closet we need to put together. The next challenge is to develop some kind of structure by which we can mentally categorize the different typefaces we run across.

1. GEOMETRIC SANS

Screenshot
I’m actually combining three different groups here (Geometric, Realist and Grotesk), but there is enough in common between these groups that we can think of them as one entity for now. Geometric Sans-Serifs are those faces that are based on strict geometric forms. The individual letter forms of a Geometric Sans often have strokes that are all the same width and frequently evidence a kind of “less is more” minimalism in their design.
Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

2. HUMANIST SANS

Screenshot
These are Sans faces that are derived from handwriting — as clean and modern as some of them may look, they still retain something inescapably human at their root. Compare the ‘t’ in the image above to the ‘t’ in ‘Geometric’ and note how much more detail and idiosyncrasy the Humanist ‘t’ has.
Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

3. OLD STYLE


Screenshot
Also referred to as ‘Venetian’, these are our oldest typefaces, the result of centuries of incremental development of our calligraphic forms. Old Style faces are marked by little contrast between thick and thin (as the technical restrictions of the time didn’t allow for it), and the curved letter forms tend to tilt to the left (just as calligraphy tilts). Old Style faces at their best are classic, traditional, readable and at their worst are… well, classic and traditional.
Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond, 

4. TRANSITIONAL AND MODERN

Screenshot
Screenshot
An outgrowth of Enlightenment thinking, Transitional (mid 18th Century) and Modern (late 18th century, not to be confused with mid 20th century modernism) typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic than the unassuming faces of the Old Style period. 
Examples of transitional typefaces: Times New Roman, Baskerville.
Examples of Modern serifs: Bodoni, Didot.

5. SLAB SERIFS

Screenshot
Also known as ‘Egyptian’ (don’t ask), the Slab Serif is a wild card that has come strongly back into vogue in recent years. Slab Serifs usually have strokes like those of sans faces (that is, simple forms with relatively little contrast between thick and thin) but with solid, rectangular shoes stuck on the end. Slab Serifs are an outlier in the sense that they convey very specific — and yet often quite contradictory — associations
They can convey a sense of authority, in the case of heavy versions like Rockwell, but they can also be quite friendly, as in the recent favorite Archer. Many slab serifs seem to express an urban character (such as Rockwell, Courier and Lubalin), but when applied in a different context (especially Clarendon) they strongly recall the American Frontier and the kind of rural, vernacular signage that appears in photos from this period. Slab Serifs are hard to generalize about as a group, but their distinctive blocky serifs function something like a pair of horn-rimmed glasses: they add a distinctive wrinkle to anything, but can easily become overly conspicuous in the wrong surroundings.
Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

3. Don’t Be a Wimp: The Principle of Decisive Contrast

So, now that we know our families and some classic examples of each, we need to decide how to mix and match and — most importantly — whether to mix and match at all. Most of the time, one typeface will do, especially if it’s one of our workhorses with many different weights that work together. If we reach a point where we want to add a second face to the mix, it’s always good to observe this simple rule: keep it exactly the same, or change it a lot — avoid wimpy, incremental variations.
When we combine multiple typefaces on a design, we want them to coexist comfortably — we don’t want to distract the viewer with the question, are these the same or not?We can start by avoiding two different faces from within one of the five categories that we listed above all together — two geometric sans, say Franklin and Helvetica. While not exactly alike, these two are also not sufficiently different and therefore put our layout in that dreaded neither-here-nor-there place.
Screenshot
If we are going to throw another font into the pot along with Helvetica, much better if we use something like Bembo, a classic Old Style face. Centuries apart in age and light years apart in terms of inspiration, Helvetica and Bembo have enough contrast to comfortably share a page:
Screenshot
But if we want some principle to guide our selection, it should be this: often, two typefaces work well together if they have one thing in common but are otherwise greatly different. This shared common aspect can be visual (similar x-height or stroke weight) or it can be chronological. Typefaces from the same period of time have a greater likelihood of working well together… and if they are by the same designer, all the better.

4. A Little Can Go a Long Way

‘Enough with all these conventional-looking fonts and rules!’ you say. ‘I need something for my rave flyer! And my Thai restaurant menu! And my Christmas cards!’ What you’re pointing out here is that all the faces I’ve discussed so far are ‘body typefaces’, meaning you could conceivably set a whole menu or newspaper with any of them; in the clothing analogy presented in part one, these are our everyday Levis. What of our Halloween flares?
Periodically, there’s a need for a font that oozes with personality, whether that personality is warehouse party, Pad Thai or Santa Claus. And this need brings us into the vast wilderness of Display typefaces, which includes everything from Comic Sans to our candy-cane and bunny fonts. ‘Display’ is just another way of saying ‘do not exceed recommended dosage‘: applied sparingly to headlines, a display font can add a well-needed dash of flavor to a design, but it can quickly wear out its welcome if used too widely.
Screenshot
So far, so good. But look what happens when we apply our prized font choice to the entire menu:
Screenshot
Enough already. Let’s try replacing some of the rank-and-file text copy with something more neutral:
Screenshot
That’s better. Now that we’ve reined in the usage of our star typeface, we’ve allowed it to shine again.

5. Rule Number Five Is ‘There Are No Rules’

Really. Look hard enough and you will find a dazzling-looking menu set entirely in a hard-to-read display font. Or of two different Geometric Sans faces living happily together on a page (in fact, just this week I wound up trying this on a project and was surprised to find that it hit the spot). There are only conventions, no ironclad rulesabout how to use type, just as there are no rules about how we should dress in the morning. It’s worth trying everything just to see what happens — even wearing your Halloween flares to your court date.

In Conclusion

Hopefully, these five principles will have given you some guidelines for how to select, apply and mix type — and, indeed, whether to mix it at all. In the end, picking typefaces requires a combination of understanding and intuition, and — as with any skill — demands practice. With all the different fonts we have access to nowadays, it’s easy to forget that there’s nothing like a classic typeface used well by somebody who knows how to use it.
http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/