SlideShare ist ein Scribd-Unternehmen logo
1 von 31
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

Weitere ähnliche Inhalte

Was ist angesagt?

Web Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in GurugramWeb Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in Gurugramshailenra
 
How to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-finalHow to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-finalVanitha Pillay
 
Lecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual GraphicsLecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual Graphicslucita cabral
 
Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today Ravi Bhadauria
 
1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details Matter1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details MatterEmily Rawitsch
 
Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic designSylhet IT Academy
 
An introduction to graphic design
An introduction to graphic designAn introduction to graphic design
An introduction to graphic designDhruviMistry
 
Web UI Design For Human Eye
Web UI Design For Human Eye Web UI Design For Human Eye
Web UI Design For Human Eye Jessie Doan
 
Digital graphics evaluation pro forma
Digital graphics evaluation pro formaDigital graphics evaluation pro forma
Digital graphics evaluation pro formaGeorginaWhitelock
 
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia InstituteGrid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia InstituteRavi Bhadauria
 
Graphic design tips for non designers
Graphic design tips for non designersGraphic design tips for non designers
Graphic design tips for non designerssuniltalekar1
 
Graphic Design PowerPoint
Graphic Design PowerPointGraphic Design PowerPoint
Graphic Design PowerPointnycdoe
 
Lsc 440 f12 11 1-12 intro to dragonfly
Lsc 440 f12 11 1-12 intro to dragonflyLsc 440 f12 11 1-12 intro to dragonfly
Lsc 440 f12 11 1-12 intro to dragonflyDon Stanley
 
What is the scope of graphic design
What is the scope of graphic designWhat is the scope of graphic design
What is the scope of graphic designMyers
 
Fundamental graphic design by rayn howayek
Fundamental graphic design by rayn howayekFundamental graphic design by rayn howayek
Fundamental graphic design by rayn howayekRayn HOWAYEK
 
Minimalism in Design
Minimalism in DesignMinimalism in Design
Minimalism in DesignShah Hussain
 

Was ist angesagt? (20)

Web Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in GurugramWeb Designer Gurugram |Web Designer in Gurugram
Web Designer Gurugram |Web Designer in Gurugram
 
How to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-finalHow to-create-5-fabulous-infographics-final
How to-create-5-fabulous-infographics-final
 
Lecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual GraphicsLecture 1 Advance concept in Visual Graphics
Lecture 1 Advance concept in Visual Graphics
 
Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today
 
Lecture11 A Image
Lecture11 A ImageLecture11 A Image
Lecture11 A Image
 
Visual design
Visual designVisual design
Visual design
 
1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details Matter1 Pixel to the Left: Why Visual Design Details Matter
1 Pixel to the Left: Why Visual Design Details Matter
 
Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic design
 
An introduction to graphic design
An introduction to graphic designAn introduction to graphic design
An introduction to graphic design
 
Graphic Design Workshop, 2018
Graphic Design Workshop, 2018Graphic Design Workshop, 2018
Graphic Design Workshop, 2018
 
Web UI Design For Human Eye
Web UI Design For Human Eye Web UI Design For Human Eye
Web UI Design For Human Eye
 
Digital graphics evaluation pro forma
Digital graphics evaluation pro formaDigital graphics evaluation pro forma
Digital graphics evaluation pro forma
 
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia InstituteGrid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia Institute
 
Graphic design tips for non designers
Graphic design tips for non designersGraphic design tips for non designers
Graphic design tips for non designers
 
Graphic Design PowerPoint
Graphic Design PowerPointGraphic Design PowerPoint
Graphic Design PowerPoint
 
Lsc 440 f12 11 1-12 intro to dragonfly
Lsc 440 f12 11 1-12 intro to dragonflyLsc 440 f12 11 1-12 intro to dragonfly
Lsc 440 f12 11 1-12 intro to dragonfly
 
What is the scope of graphic design
What is the scope of graphic designWhat is the scope of graphic design
What is the scope of graphic design
 
Fundamental graphic design by rayn howayek
Fundamental graphic design by rayn howayekFundamental graphic design by rayn howayek
Fundamental graphic design by rayn howayek
 
Minimalism in Design
Minimalism in DesignMinimalism in Design
Minimalism in Design
 
Visual Design Elements
Visual Design ElementsVisual Design Elements
Visual Design Elements
 

Andere mochten auch

Clean Watersheds Project Presentation
Clean Watersheds Project PresentationClean Watersheds Project Presentation
Clean Watersheds Project Presentationtcooper66
 
Creating Tours in Google Earth
Creating Tours in Google EarthCreating Tours in Google Earth
Creating Tours in Google Earthtcooper66
 
Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...
Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...
Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...tcooper66
 
Sustaining Wild Species
Sustaining Wild SpeciesSustaining Wild Species
Sustaining Wild Speciestcooper66
 
Environmental History
Environmental HistoryEnvironmental History
Environmental Historytcooper66
 

Andere mochten auch (6)

Clean Watersheds Project Presentation
Clean Watersheds Project PresentationClean Watersheds Project Presentation
Clean Watersheds Project Presentation
 
Creating Tours in Google Earth
Creating Tours in Google EarthCreating Tours in Google Earth
Creating Tours in Google Earth
 
Wind Energy
Wind EnergyWind Energy
Wind Energy
 
Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...
Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...
Nitrogen Fertalizer Impacts on Carbon Sequestration and Substitution in the P...
 
Sustaining Wild Species
Sustaining Wild SpeciesSustaining Wild Species
Sustaining Wild Species
 
Environmental History
Environmental HistoryEnvironmental History
Environmental History
 

Ähnlich wie GE Tutorials Part VI Design Principles

Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) wael gomaa
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI DesignersRavi Bhadauria
 
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxAPRILROSEVICENTE1
 
LAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptxLAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptxMayMarasigan2
 
ET_lESSON_6.pptx
ET_lESSON_6.pptxET_lESSON_6.pptx
ET_lESSON_6.pptxRhoan4
 
6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web DesignClippingimages
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
 
Design 101 > Lesson 01
Design 101 > Lesson 01Design 101 > Lesson 01
Design 101 > Lesson 01Sean Buch
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UXMayank Ranjan
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skillsSteve
 
Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022simonedaniels3
 
Powerpoint presentation-simplified
Powerpoint presentation-simplifiedPowerpoint presentation-simplified
Powerpoint presentation-simplifiedmohamedaslamh
 
Multimedia design principles
Multimedia design principlesMultimedia design principles
Multimedia design principlesAimeePrater
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basicselmorandall
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User InterfaceBeth Case
 
best Graphic Design presentation created by me
best Graphic Design presentation created by mebest Graphic Design presentation created by me
best Graphic Design presentation created by meshivamds1205
 
Why Design Matters: How to Make Your Website Worth a Million Visits
Why Design Matters: How to Make Your Website Worth a Million VisitsWhy Design Matters: How to Make Your Website Worth a Million Visits
Why Design Matters: How to Make Your Website Worth a Million VisitsSchoolwires, Inc.
 
Creating The Best Materials Design Principles
Creating The Best Materials Design  PrinciplesCreating The Best Materials Design  Principles
Creating The Best Materials Design PrinciplesGoodbuja
 
Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User ExperienceBuiltByHQ
 

Ähnlich wie GE Tutorials Part VI Design Principles (20)

Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice)
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
 
LAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptxLAYOUT_Graphic--Design-Presentation.pptx
LAYOUT_Graphic--Design-Presentation.pptx
 
ET_lESSON_6.pptx
ET_lESSON_6.pptxET_lESSON_6.pptx
ET_lESSON_6.pptx
 
6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design6 Key Principles Of Making A Web Design
6 Key Principles Of Making A Web Design
 
WEB DESIGNING.pptx
WEB DESIGNING.pptxWEB DESIGNING.pptx
WEB DESIGNING.pptx
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
Design 101 > Lesson 01
Design 101 > Lesson 01Design 101 > Lesson 01
Design 101 > Lesson 01
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UX
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skills
 
Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022Top 10 Web Design Trends in 2022
Top 10 Web Design Trends in 2022
 
Powerpoint presentation-simplified
Powerpoint presentation-simplifiedPowerpoint presentation-simplified
Powerpoint presentation-simplified
 
Multimedia design principles
Multimedia design principlesMultimedia design principles
Multimedia design principles
 
Design & Usability Basics
Design & Usability BasicsDesign & Usability Basics
Design & Usability Basics
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
best Graphic Design presentation created by me
best Graphic Design presentation created by mebest Graphic Design presentation created by me
best Graphic Design presentation created by me
 
Why Design Matters: How to Make Your Website Worth a Million Visits
Why Design Matters: How to Make Your Website Worth a Million VisitsWhy Design Matters: How to Make Your Website Worth a Million Visits
Why Design Matters: How to Make Your Website Worth a Million Visits
 
Creating The Best Materials Design Principles
Creating The Best Materials Design  PrinciplesCreating The Best Materials Design  Principles
Creating The Best Materials Design Principles
 
Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User Experience
 

Mehr von tcooper66

Java Koch Curves
Java Koch CurvesJava Koch Curves
Java Koch Curvestcooper66
 
Java tree fractals
Java tree fractalsJava tree fractals
Java tree fractalstcooper66
 
Waitomo slideshow
Waitomo slideshowWaitomo slideshow
Waitomo slideshowtcooper66
 
Energy Facts and Fiction
Energy Facts and FictionEnergy Facts and Fiction
Energy Facts and Fictiontcooper66
 
Designing And Leading Collaborative Projects
Designing And Leading Collaborative ProjectsDesigning And Leading Collaborative Projects
Designing And Leading Collaborative Projectstcooper66
 
C:\Fakepath\Designing And Managing Collaborative Projects
C:\Fakepath\Designing And Managing Collaborative ProjectsC:\Fakepath\Designing And Managing Collaborative Projects
C:\Fakepath\Designing And Managing Collaborative Projectstcooper66
 
Ge Tutorials Part V Embedding Objects
Ge Tutorials Part V   Embedding ObjectsGe Tutorials Part V   Embedding Objects
Ge Tutorials Part V Embedding Objectstcooper66
 
Cooper Family Reunion 2009
Cooper Family Reunion 2009Cooper Family Reunion 2009
Cooper Family Reunion 2009tcooper66
 
Kml Basics Chpt 5 Overlays
Kml Basics Chpt  5   OverlaysKml Basics Chpt  5   Overlays
Kml Basics Chpt 5 Overlaystcooper66
 
Kml Basics Chpt 4 Styles & Icons
Kml Basics Chpt  4   Styles & IconsKml Basics Chpt  4   Styles & Icons
Kml Basics Chpt 4 Styles & Iconstcooper66
 
Kml Basics Chpt 3 Geometry
Kml Basics Chpt  3   GeometryKml Basics Chpt  3   Geometry
Kml Basics Chpt 3 Geometrytcooper66
 
Kml Basics Chpt 2 Placemarks
Kml Basics Chpt  2   PlacemarksKml Basics Chpt  2   Placemarks
Kml Basics Chpt 2 Placemarkstcooper66
 
Kml Basics Chpt 1 Overview
Kml Basics Chpt  1   OverviewKml Basics Chpt  1   Overview
Kml Basics Chpt 1 Overviewtcooper66
 
Google Earth Tutorials Part III
Google Earth Tutorials Part IIIGoogle Earth Tutorials Part III
Google Earth Tutorials Part IIItcooper66
 
Google Earth Tutorials Part II
Google Earth Tutorials Part IIGoogle Earth Tutorials Part II
Google Earth Tutorials Part IItcooper66
 
Google Earth Tutorials - Part I
Google Earth Tutorials - Part IGoogle Earth Tutorials - Part I
Google Earth Tutorials - Part Itcooper66
 
Climate and the Asian Monsoon
Climate and the Asian MonsoonClimate and the Asian Monsoon
Climate and the Asian Monsoontcooper66
 
Designing and Managing Collaborative Projects with Web 2.0 Tools
Designing and Managing Collaborative Projects with Web 2.0 ToolsDesigning and Managing Collaborative Projects with Web 2.0 Tools
Designing and Managing Collaborative Projects with Web 2.0 Toolstcooper66
 
Becoming a Networked Learner
Becoming a Networked LearnerBecoming a Networked Learner
Becoming a Networked Learnertcooper66
 
Spectroscopy
SpectroscopySpectroscopy
Spectroscopytcooper66
 

Mehr von tcooper66 (20)

Java Koch Curves
Java Koch CurvesJava Koch Curves
Java Koch Curves
 
Java tree fractals
Java tree fractalsJava tree fractals
Java tree fractals
 
Waitomo slideshow
Waitomo slideshowWaitomo slideshow
Waitomo slideshow
 
Energy Facts and Fiction
Energy Facts and FictionEnergy Facts and Fiction
Energy Facts and Fiction
 
Designing And Leading Collaborative Projects
Designing And Leading Collaborative ProjectsDesigning And Leading Collaborative Projects
Designing And Leading Collaborative Projects
 
C:\Fakepath\Designing And Managing Collaborative Projects
C:\Fakepath\Designing And Managing Collaborative ProjectsC:\Fakepath\Designing And Managing Collaborative Projects
C:\Fakepath\Designing And Managing Collaborative Projects
 
Ge Tutorials Part V Embedding Objects
Ge Tutorials Part V   Embedding ObjectsGe Tutorials Part V   Embedding Objects
Ge Tutorials Part V Embedding Objects
 
Cooper Family Reunion 2009
Cooper Family Reunion 2009Cooper Family Reunion 2009
Cooper Family Reunion 2009
 
Kml Basics Chpt 5 Overlays
Kml Basics Chpt  5   OverlaysKml Basics Chpt  5   Overlays
Kml Basics Chpt 5 Overlays
 
Kml Basics Chpt 4 Styles & Icons
Kml Basics Chpt  4   Styles & IconsKml Basics Chpt  4   Styles & Icons
Kml Basics Chpt 4 Styles & Icons
 
Kml Basics Chpt 3 Geometry
Kml Basics Chpt  3   GeometryKml Basics Chpt  3   Geometry
Kml Basics Chpt 3 Geometry
 
Kml Basics Chpt 2 Placemarks
Kml Basics Chpt  2   PlacemarksKml Basics Chpt  2   Placemarks
Kml Basics Chpt 2 Placemarks
 
Kml Basics Chpt 1 Overview
Kml Basics Chpt  1   OverviewKml Basics Chpt  1   Overview
Kml Basics Chpt 1 Overview
 
Google Earth Tutorials Part III
Google Earth Tutorials Part IIIGoogle Earth Tutorials Part III
Google Earth Tutorials Part III
 
Google Earth Tutorials Part II
Google Earth Tutorials Part IIGoogle Earth Tutorials Part II
Google Earth Tutorials Part II
 
Google Earth Tutorials - Part I
Google Earth Tutorials - Part IGoogle Earth Tutorials - Part I
Google Earth Tutorials - Part I
 
Climate and the Asian Monsoon
Climate and the Asian MonsoonClimate and the Asian Monsoon
Climate and the Asian Monsoon
 
Designing and Managing Collaborative Projects with Web 2.0 Tools
Designing and Managing Collaborative Projects with Web 2.0 ToolsDesigning and Managing Collaborative Projects with Web 2.0 Tools
Designing and Managing Collaborative Projects with Web 2.0 Tools
 
Becoming a Networked Learner
Becoming a Networked LearnerBecoming a Networked Learner
Becoming a Networked Learner
 
Spectroscopy
SpectroscopySpectroscopy
Spectroscopy
 

Kürzlich hochgeladen

The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...PsychoTech Services
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfJayanti Pande
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024Janet Corral
 

Kürzlich hochgeladen (20)

The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
IGNOU MSCCFT and PGDCFT Exam Question Pattern: MCFT003 Counselling and Family...
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 

GE Tutorials Part VI Design Principles

  • 1. Networked Learning http://www.thenetworkedlearner.com Google Earth TutorialsPart VI – Getting Your Message AcrossHosts – Thomas Cooper, Alice Barr Networked Learning 2010
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. Message First Legible Text – Contrasting Colors – Artful Photos Networked Learning 2010
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. Use of Color Mood – Texture – Scheme – Balance Networked Learning 2010
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. Balance Balance is the distribution of heavy and light elements on the page.  Fair Trade Layer Networked Learning 2010
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. Artful Forms Lines - Shapes – White Space - Size Networked Learning 2010
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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