Ge Tutorials Part Vi   Design Principles
Upcoming SlideShare
Loading in...5
×
 

Ge Tutorials Part Vi Design Principles

on

  • 684 views

Covers basic graphic design principles of color, order, and form and show how they can be applied to Google Earth placemark. A review of some of the better layers is given.

Covers basic graphic design principles of color, order, and form and show how they can be applied to Google Earth placemark. A review of some of the better layers is given.

Statistics

Views

Total Views
684
Views on SlideShare
683
Embed Views
1

Actions

Likes
2
Downloads
17
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ge Tutorials Part Vi   Design Principles Ge Tutorials Part Vi Design Principles Presentation Transcript

    • Networked Learning
      http://www.thenetworkedlearner.com
      Google Earth TutorialsPart VI – Getting Your Message AcrossHosts – Thomas Cooper, Alice Barr
      Networked Learning 2010
    • Need for Graphic Design Principles
      Graphic design plays a key role in the appearance of almost all print, film and electronic media. It can be defined as the application art and communication skills to the needs of a business. Graphical visualization has progress from painting, print, web and now to GIS databases. As more and more information becomes visualized as part of a geographical information system, there is a need for graphic design principles to apply to the design of Google Earth placemarks.
      Networked Learning 2010
    • GE Placemarks are Web Pages
      Apply basic design principles found in print, magazines and web pages to your placemarks.
      Major Parts
      Message
      Color
      Order
      Form
      Endangered Species Layer
      Networked Learning 2010
    • Design Process
      Understand the problem.
      Do your research.
      Think with your pencil or mouse in hand.
      Choose your best 3 thumbnails and turn them into roughs.
      Choose your best rough and turn it into a comp.
      Networked Learning 2010
    • Message First
      Legible Text – Contrasting Colors – Artful Photos
      Networked Learning 2010
    • Communication First
      The first goal of a web page is to communicate a message. Your can do this through text, images, shapes, and colors in your placemarks. This layer has excluded images in favor of bold text to get its message across.
      If images are worth a 1000 words, why do you think they were excluded from the placemark?
      Crisis in Darfur GE Layer
      Networked Learning 2010
    • Helpful Text Hints
      Is the text legible? Avoid ornamental fonts in body text. Keeping it simple keeps it legible.
      Does the color of the text make it distinct, easy to read? High contrast between text and background colors increase legibility.
      Does the text have sufficient white space? Good use of white space contributes to a clearly understood message. 
      Networked Learning 2010
    • Helpful Image Hints
      Can the viewer understand why you've chosen a particular photo or illustration?
      Is its purpose clearly understood? 
       It is better to use no graphic, than to have one that does not convey the proper message.
      Networked Learning 2010
    • Use of Color
      Mood – Texture – Scheme – Balance
      Networked Learning 2010
    • Color in Websites
      First of all, notice the number of colors used in the overall design. It is a two color palette (dusty pink, and shades of green). Why only three colors? I have found that a color palette that uses three or fewer overall colors contributes to the clarity of a web page. It reduces visual clutter, so that the eye does not have to work hard to collect information from the page.
      Why are these colors are fitting for a web site about a state park? 
      Networked Learning 2010
    • Color in Placemarks
      Color is the one design element that most Web designers are acutely aware of. But remember that color is not a required element of any design. In fact, a good plan in design is to create the design without color first, then add as little color as you can to enhance the design.
      World Wildlife Fund Balloon Series
      Networked Learning 2010
    • Hints on Finding Colors
      One of the best places to find great color palettes and combinations is in Nature. I keep a digital camera with me at all times. Especially during the spring and summer, as I walk through parks, on beaches, or through gardens, I study Nature for color usage. I will often see a color palette in a flower, orchid, rock or shell, in a leaf turning color during the Fall.
      Miami Beach Life Guard House
      Networked Learning 2010
    • Choosing a Color Scheme
      Monochromatic color schemes are harmonious and peaceful. Using a single color creates unity and can help to create or tie things together.
      Two or more colors can be used in an analogous color scheme however, one color is often used as a dominant color while others are used as accents.
      United States Holocaust Museum Layer
      Networked Learning 2010
    • Contrast
      When most people think of contrast, they typically think of colors or black and white. But there is more to contrast than color. You can have contrasting shapes (square vs. circle), or contrasting sizes (large vs. small), or contrasting textures (smooth vs. rough).
      Walk on the Wild Side Layer
      http://walkonthewildside.wikispaces.com
      Networked Learning 2010
    • Helpful Color Hints
      Do the colors you've chosen clearly convey the spirit of your message? Is it a warm appeal, an exciting pitch, or a cool approach?
      Use colors seen in nature. Warm colors that engage the eye and heart.
      Use watercolors for your pallet. Watercolors are like computer monitors in that semi-opaque colors are applied on a white background.
      Add texture to your backgrounds instead of having large swaths of flat color.
      Networked Learning 2010
    • Create Order
      Emphasis – Balance – Direction - Rhythm
      Layout is about arranging type and visuals on two-dimensional surface so all information is legible, clear and attractive.
      Networked Learning 2010
    • Successful Layouts
      Who will be looking at or reading this?
      What style is appropriate for this audience?
      What is the purpose of this design?
      What information or message has to be communicated?
      Networked Learning 2010
    • Emphasis
      Emphasis is what the eye is drawn to in a design. It's tempting to give everything equal emphasis or try to emphasize everything in a design, but this ends up making the design bland and flat. Instead, as a designer you should determine the hierarchy of the page and then apply the emphasis to the elements based on that hierarchy.
      World Wildlife Fund Balloon Series
      Networked Learning 2010
    • Establishing Emphasis
      Make it the brightest.
      Make it a different color, create contrast.
      Move it in a different direction, contrast of position.
      Make it the biggest.
      Have all other elements lead to it.
      Make it a different shape.
      Isolate it.
      Networked Learning 2010
    • Balance
      Balance is the distribution of heavy and light elements on the page. 
      Fair Trade Layer
      Networked Learning 2010
    • Unity
      Unity describes the relationship of the parts of a design. In order for a layout to be successful, it must hold together. Devices can be used to establish unity.
      Rhythm
      Direction
      Closure
      Proximity
      Networked Learning 2010
    • Rhythm
      Rhythm is also called repetition, or more formally correspondance. Rhythm brings an internal consistency to your Web designs. Patterns are easy for humans to comprehend, and repetition provides patterns that make your placemark easier to comprehend.
      Networked Learning 2010
    • Direction
      Direction gives your Web designs motion. In most designs there is a sense of movement in a direction across the design. Good designs lead the eye through the design in a deliberate fashion so that the viewer sees what the designer wants.
      Global Heritage Fund
      Networked Learning 2010
    • The Grid
      Grids are used as guides for placing textual and visual elements on a page. Tables can be used to align objects or place similar shaped objects together. The idea is to create an underlying structure that maintains clarity, legibility, balance and unity.
      Engendered Species Layer (old version)
      Networked Learning 2010
    • Artful Forms
      Lines - Shapes – White Space - Size
      Networked Learning 2010
    • Lines
      Lines and other shapes can be used to enclose text and visual elements on a page. These include borders and rules. They can be horizontal or vertical and help delineate the spaces around elements in a palcemark.
      Poetry of Place Layer
      http://poetryofplace.wikispaces.com
      Networked Learning 2010
    • Shape
      Shapes make up any enclosed contour in the design. Shapes on most Web pages are square or rectangular. But they don't have to be. You can use icons, geometric shapes, or lettering to generate unique shapes within your designs.
      Earth Watch Layer
      Networked Learning 2010
    • White Space
      On the Web, white space is essential when the viewer is required to read large amounts of content. Generous margins and clear simple layouts make it easier for the eye to work. Cluttered layouts tire the eye quickly and hinder clarity.
      Earth Watch Layer
      Networked Learning 2010
    • Size
      Space is prime real estate. Use space wisely. Don’t leave too much empty space and don’t make placemarks so big that the viewer has to scroll. I tell students to keep the size of placemarks between 300-500 pixels.
      Create emphasis, but don’t have a particular object too big that it takes over the entire placemark. I tell my students to keep their pictures between 300 – 450 width.
      Don’t have too much text. Use links (text or buttons) to web pages or wikis to give users more information. Make the link text stand out by using different colors and a clear message that makes the user want to click on the link.
      Networked Learning 2010
    • Hint - Learn Order from the Masters
      Web designers can enhance their craft by studying the work of great graphic designers. Graphic Design Solutions reviews the basic design principles and provides images from numerous famous designers. You could also think about having students lookat famous artists though history to see how they created order in their work.
      By Robin Landa
      Networked Learning 2010
    • In Summary
      Good web design is clear, and easily understood. Make sure all elements used in your web design speak clearly. If they are not easily understood by the viewer, they will not be taken seriously.
      Networked Learning 2010