SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Post Design Elements and Principles

    Design Elements and Principles

    Howdy peoples!

    In the past 2-3 years, while studying graphics at school, and now while studying multimedia at Tafe, many times have I needed to analyse several graphical pieces. Throughout the analysing, it is required that you talk about the design elements and the design principles. Each time I find myself desperately seraching google and such for "design elements" and "design principles" and just not finding exactly what I need. A readable 16-19 aged answer that I can understand and actually take in. I'm assuming that this whole analysing thing is still happening, whether living in Australia or America or wherever you might be. So now after researching everywhere and such, I decided to make something teens can understand and apply yo their work. Now, I know there's a web design principles article, but once again, not as easy to understand as some, and it's majorly for web design.

    In this article(don't get me wrong, not trying to make it official at all) I will basically talk about the design elements and principles the easiest way I can. For those of you who also know what you're talking about, not saying I do :P just feel free to throw in your two cents(or more) worth. Also doing this for those who are extreme beginners, coz I know what it's like, as most would, and good help is hard to find sometimes.

    So here goes...

    Design Elements
    There are typically seven basic Design Elements. Most of these elements speak for themselves, but some can be of a distorted view. These elements are pretty much the structure of the design world. In other words, Good Luck working without any of these!

    Line
    Shape
    Form
    Tone
    Texture
    Colour
    Letterform


    Line



    Line represents one single dimension, or length. These dimensions, or lenght can be straight, curved or irregular and can combine with other elements. Line can also create the other elements, such as shape, tone, form and texture. The weight of the line, also called the width, can vary depending on what you want it for. Line can be good to direct the seeing eye to a particular part of a graphical piece, and they can also be used to organise certain features of a piece.

    Shape



    Shape is made up of several lines, which are in turn, closed. So a shape is made up of lines around it, with an 'inner-soul' if you will. Shapes can be organic or geometric and can be used with other elements to create form. A shape can also be enhanced or improved by using tone, texture or colour. Shape on it's own is Two Dimensional.

    Form



    Form is created by joining two or more shapes together. Form is considered to be three dimensional and can either be illustrated on paper or on the computer screen. Or it can be physically contructed. Like shape, form can be enhanced by texture, tone or colour.

    Tone




    Tone is pretty much the lightness and darkness of a form or shape. It also can be used to describe volume of a form or shape, in terms of it's highlights and shadows.

    Colour



    Colour should really be thought about along with Tone. Colour is definately one of the strongest elements of design, whether good or bad, it can either make or break the piece of work. Colour may be used to specify areas, distinguish the form, or to highlight such aspects of hierachy(I'll explain this later).

    Letterform



    Another very important part of the design elements range. Letterform is also known as Typography or even Fonts. Letterform can easily be manipulated to have an impact on the quality of the visual message. Once again, a make or break area. Depending on what you're going for, choosing the right font is critical.

  2. #2
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Design Elements and Principles

    Design Principles

    There are typically eleven design Principles. And like the design elements that are metahorically the physical structure of design, the princicple can be the plan of the structure. They define where things will go and what other things they will hold up, cover and so on. They can be divided into two main groups. The second group it just more abstract than the first.

    Figure
    Ground
    Cropping
    Scale
    Proportion
    Pattern
    ____________

    Balance
    Contrast
    Hierarchy
    Cohesion/Unity
    Composition


    Composition



    I decided to do composition first, as it's quite important you understand this, as most of the other principles are related to this one principle.
    Composition refers to the piece of graphic as a whole, or the total piece. It refers to the layout and the way all the elements and principles are organised on the page/screen. A composition is the part that must communicate to an audience. The various elements must be visually organised in such a way that this communication can happen and become effective. The placement of the various elements in the layout lets your eyes explore the visual message. You just learnt a new big word!

    Figure



    The 'Figure' usually refers to images that become visually dominant than the ground in the composition. It can also mean and be referred to as 'Positive Space'.

    Ground



    The Ground is the 'Background' or 'Negative Space' depending on how technical you wanna be! The ground is clearly defined, and at times can be the dominant component in the composition.

    Cropping



    A piece of graphics or a part of a piece(? if that makes sense!) can be modified by selecting an area of interest to emphasise, create dominance, or simply to clarify information.

    Scale

    Scale pretty much refers to the size of the figure on the ground. It's relative size and scale will determine the hierarchy of visual components in the layout.

    Proportion

    This is the comparative relationship between the size of components within the layout.

    Pattern - Repitition and Alternation

    Pattern is the repetition or the alternation of one or more components to create a visual thing. Any visual element can be used to create a pattern. Repetition can be very powerful in creating a sense of order in a piece. Alternation can create more complex patterns than those created by repetition alone.

    Balance



    The design principle of 'Balance' can be either symmetrical/even or asymmetrical/uneven. When the balance is symmetrical, the elements are mirrored on opposite sides of the visual axis to create a stable and formal composition.



    When the balance is assymetrical, the elements are still balanced but are not mirrored, and make a dynamic informal composition. The design or piece can also be dynamic because it has visual tension.

    Contrast



    Contrast is good! All good forms are based on quality contrasts. Contrast should always be thought of in terms of creating tension between opposites. Large-Small, Dark-Light, soft-hard etc.

    Hierarchy



    Hierarchy... I used to hate it. It was a stupid word that I never understood, and sounded like a word I didn't want to understand, but I eventually gave in and decided that I should learn about it. Low and behold, it was actually quite important to the value of graphics and such, and still it very important.
    Visual information can be arranged in order or importance. And this, generally, is what hierarchy. Factors determining the hierarchy may be the size, colour or placement of the visual information. For example the focal point of a composition draws attention to specific information.

    Cohesion/Unity

    The cohesion of a design can be achieved by using similar design elements/principles. For instance the Ford Australia web site uses the Ford logo (the ellipse) as a repeated motif throughout the web site. This use of line and shape helps make the site look visually coherent and unified. To help visually unify a design a grid can be used. This ensures that the elements on each page will be in the same positions (also consistent borders, column widths, the position of graphics and text, etc).


    Well folks, that's about it. I'm all typed out! Well, if anyone has any questions, queries or any sort of abuse. Let me have it all! I'm willing to change stuff. Remember, this is not an official expert advice thingy. I'm just trying to help out those teenagers who never listened in class and now while doing last minute projects need to know about the elements and principles! Just like I did!

    Well, thanks for listening! And i hope to hear from some of you soon!
    Have a good one won't you?

    p.s Sorry it's so long! :P

    Bo5ton

    Edit: Had to change a bold in the post...
    Last edited by bo5ton; Mar 17, 2004 at 20:38.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This has been added to The Megathread. Nice work bo5ton!

  4. #4
    Non-Member Frozentoast's Avatar
    Join Date
    Apr 2002
    Location
    Manchester, UK
    Posts
    4,758
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Thanks! Great article

  5. #5
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I just hope it helps those who need it...

  6. #6
    SitePoint Enthusiast OReason's Avatar
    Join Date
    Jun 2003
    Location
    Eindhoven, The Netherlands
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, very understandable

  7. #7
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    No Problem!

    1000+ Views Totally worth all that writing!

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Apr 2003
    Posts
    4,095
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks!

  9. #9
    SitePoint Zealot Dorsey's Avatar
    Join Date
    Feb 2004
    Location
    NJ
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Robin Williams (not the actor) has a few design books based on the CRAP principals (hope that made it past the moderator):

    Contrast
    Repetition
    Alignment
    Proximity

    I was pretty happy with those four alone until I read this article. Now, I've got a few more things to remember. And, they aren't conjured up by an easy-to-recall acryonym.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •