SlideShare uma empresa Scribd logo
1 de 21
An Introduction to Web Graphics
Lesson 1 – Design Principles and
Logos
WHAT IS A LOGO?
WHERE MIGHT YOU SEE LOGOS?
WHY ARE LOGOS IMPORTANT?
TIME FOR A QUIZ
HOW DID YOU DO?
WHAT CHARACTERISTICS DO THESE
LOGO DESIGNS SHARE?
Objectives and Outcomes
Objectives
• Understand basic design principles of
white space, contrast, proximity,
alignment, repetition and
complimentary colours
• Learn how to create a logo using
graphics software
Outcomes
• All: Will be able to say what these
words mean
• Most: Will use some of these ideas in
their work
• Some: Will use most of these ideas
and explain how they’ve been used
• All: Will have created a simple logo
• Most: Will have created a simple logo
with a coherent design
• Some: Will think about audience and
produce an appropriate design
PROXIMITY
Proximity
• The distance between things in a design has
an impact on how they relate to one another
• Elements close together appear to have a
stronger relationship than those further apart
CONTRAST
Contrast
• Contrast works in several different ways
• Most obvious example of contrast is the
colour of text against a background
– Easier to read text that contrasts highly with the
background
• Can also include all sorts of differences
between elements
– Make something different so that it stands out
– Helps indicate what’s important
Contrast
• This is an example of poor contrast. The
colour of this text is not different enough
from the background colour. Higher contrast
is far easier to read.
 This text is much easier to read than the text
above. Tests indicate that white wording on a
black background is harder to read than the
black text on a white background.
COMPLIMENTARY COLOURS
This is a complex
area but, put
simply, ‘opposite’
colours work often
well together!
Is the opposite true?
REPETITION
Repetition
• Saying the same thing or using the same
design component several times to get a
point across
• Use of a consistent theme
• Common in nature – the brain accepts it
quickly!
ALIGNMENT
Text Alignment
• Can enhance or detract from appearance of page.
• Can significantly affect readability
Aligned left is most common.
This provides a consistent
starting point for each new
line. The eye of the reader
becomes used to easily finding
the beginning of a new line
Centre alignment makes finding the
beginning of a new line of text
much more difficult.
Each line tends to be a different
length. As a result it is much more
tiring to read text with centre
alignment.
The eye is constantly guessing and
searching for the start point.
In addition, centre alignment causes
odd line lengths.
These odd lengths cause a sort of
"choppiness" in how the text reads.
It lacks the smooth flow that tends
to occur with left alignment.
Right alignment seldom serves a
useful purpose if readability is a
concern. While it may be used in
an artistic way, the use of right
alignment for significant amounts
of text should be avoided.
The odd starting points of the text
cause the eye to search and the
appearance in bulk of such text
can be off-putting to some
viewers. Always remember that
people tend not to read anything
that is too difficult or annoying!
WHITE SPACE
White Space
White space isn't always white – it’s a graphics design term and refers to the space
between objects in a design. So the area between text and a photograph is "white space"
even it’s another colour.
Create Your Own Logo
• You’re going to create a logo for an
imaginary company called Pad Blazer
who make games for mobile phones
• Use Fireworks
• Try to incorporate some or all of the
principles we discussed:-
– White space
– Proximity
– Repetition
– Alignment
– Contrast
– Complimentary colours
• Keep it simple
• Think about audience
600 x 600
Text
Shapes
Objectives and Outcomes
Objectives
• Understand basic design principles of
white space, contrast, proximity,
alignment, repetition and
complimentary colours
• Learn how to create a logo using
graphics software
Outcomes
• All: Will be able to say what these
words mean
• Most: Will use some of these ideas in
their work
• Some: Will use most of these ideas
and explain how they’ve been used
• All: Will have created a simple logo
• Most: Will have created a simple logo
with a coherent design
• Some: Will think about audience and
produce an appropriate design
Homework
• Find a picture or graphic that demonstrates
one or more of the design principles we
discussed today
• white space, contrast, proximity, alignment,
repetition and complimentary colours
Bring it to the next lesson

Mais conteúdo relacionado

Mais procurados

How to create effective powerpoint presentation
How to create effective powerpoint presentationHow to create effective powerpoint presentation
How to create effective powerpoint presentationSteve Johnson
 
Working With Power Point3 30
Working With Power Point3 30Working With Power Point3 30
Working With Power Point3 30nandav
 
Presentation strategies by emelia noronha from pd lions , mumbai, India.
Presentation strategies  by emelia noronha from pd lions , mumbai, India.Presentation strategies  by emelia noronha from pd lions , mumbai, India.
Presentation strategies by emelia noronha from pd lions , mumbai, India.Emelia Noronha
 
Guidelines for preparing a powerpoint presentation
Guidelines for preparing a powerpoint presentationGuidelines for preparing a powerpoint presentation
Guidelines for preparing a powerpoint presentationakshichoudhary3
 
Power Point 7 Design Principles
Power Point 7 Design PrinciplesPower Point 7 Design Principles
Power Point 7 Design Principlesbthat
 
Slide presentation szd
Slide presentation szdSlide presentation szd
Slide presentation szdSizwe Dlamini
 
Do’s and don’ts of power point presentation
Do’s and don’ts of power point presentationDo’s and don’ts of power point presentation
Do’s and don’ts of power point presentationManish Lodha
 
How to make a Poster Presentation in PowerPoint
How to make a Poster Presentation in PowerPointHow to make a Poster Presentation in PowerPoint
How to make a Poster Presentation in PowerPointLeonov Martin
 
Principle of standard slide
Principle of standard slidePrinciple of standard slide
Principle of standard slideRayhan .
 
Effective PowerPoints
Effective PowerPointsEffective PowerPoints
Effective PowerPointsmcmackenzie
 
Design a poster like a pro!
Design a poster like a pro!Design a poster like a pro!
Design a poster like a pro!KidsintheCloud
 
Power point presentation dos and donts
Power point presentation dos and dontsPower point presentation dos and donts
Power point presentation dos and dontsAyeshaKhan644763
 
Guidelines on Developing Effective PowerPoint Presentation
Guidelines on Developing Effective PowerPoint PresentationGuidelines on Developing Effective PowerPoint Presentation
Guidelines on Developing Effective PowerPoint PresentationAsif Mehmood, CLDP
 
Presentation Design 202
Presentation Design 202Presentation Design 202
Presentation Design 202lothwe
 
Creating an effective power point presentation
Creating an effective power point presentationCreating an effective power point presentation
Creating an effective power point presentationMslms
 

Mais procurados (20)

Presentation guide 1
Presentation guide 1Presentation guide 1
Presentation guide 1
 
How to create effective powerpoint presentation
How to create effective powerpoint presentationHow to create effective powerpoint presentation
How to create effective powerpoint presentation
 
Design Workshop HWI
Design Workshop HWIDesign Workshop HWI
Design Workshop HWI
 
Working With Power Point3 30
Working With Power Point3 30Working With Power Point3 30
Working With Power Point3 30
 
Presentation strategies by emelia noronha from pd lions , mumbai, India.
Presentation strategies  by emelia noronha from pd lions , mumbai, India.Presentation strategies  by emelia noronha from pd lions , mumbai, India.
Presentation strategies by emelia noronha from pd lions , mumbai, India.
 
Effective powerpoint presentation
Effective powerpoint presentationEffective powerpoint presentation
Effective powerpoint presentation
 
Guidelines for preparing a powerpoint presentation
Guidelines for preparing a powerpoint presentationGuidelines for preparing a powerpoint presentation
Guidelines for preparing a powerpoint presentation
 
Power Point 7 Design Principles
Power Point 7 Design PrinciplesPower Point 7 Design Principles
Power Point 7 Design Principles
 
Slide presentation szd
Slide presentation szdSlide presentation szd
Slide presentation szd
 
Do’s and don’ts of power point presentation
Do’s and don’ts of power point presentationDo’s and don’ts of power point presentation
Do’s and don’ts of power point presentation
 
Presentation skills training
Presentation skills trainingPresentation skills training
Presentation skills training
 
How to make a Poster Presentation in PowerPoint
How to make a Poster Presentation in PowerPointHow to make a Poster Presentation in PowerPoint
How to make a Poster Presentation in PowerPoint
 
Principle of standard slide
Principle of standard slidePrinciple of standard slide
Principle of standard slide
 
Effective PowerPoints
Effective PowerPointsEffective PowerPoints
Effective PowerPoints
 
Design a poster like a pro!
Design a poster like a pro!Design a poster like a pro!
Design a poster like a pro!
 
Power point presentation dos and donts
Power point presentation dos and dontsPower point presentation dos and donts
Power point presentation dos and donts
 
Guidelines on Developing Effective PowerPoint Presentation
Guidelines on Developing Effective PowerPoint PresentationGuidelines on Developing Effective PowerPoint Presentation
Guidelines on Developing Effective PowerPoint Presentation
 
Presentation Design 202
Presentation Design 202Presentation Design 202
Presentation Design 202
 
Creating an effective power point presentation
Creating an effective power point presentationCreating an effective power point presentation
Creating an effective power point presentation
 
Print and Outdoor Design ad Layout
Print and Outdoor Design ad LayoutPrint and Outdoor Design ad Layout
Print and Outdoor Design ad Layout
 

Destaque

Principles of web design web graphics software 10am-mw
Principles of web design web graphics software 10am-mwPrinciples of web design web graphics software 10am-mw
Principles of web design web graphics software 10am-mwmelissagnichols
 
Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1PRN USM
 
Graphical User Interface
Graphical User Interface Graphical User Interface
Graphical User Interface Bivek Pakuwal
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)Bilal Amjad
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 

Destaque (8)

Principles of web design web graphics software 10am-mw
Principles of web design web graphics software 10am-mwPrinciples of web design web graphics software 10am-mw
Principles of web design web graphics software 10am-mw
 
Creative software
Creative softwareCreative software
Creative software
 
Ppt ch08
Ppt ch08Ppt ch08
Ppt ch08
 
Application GUI Design
Application GUI DesignApplication GUI Design
Application GUI Design
 
Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1
 
Graphical User Interface
Graphical User Interface Graphical User Interface
Graphical User Interface
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 

Semelhante a An introduction to web graphics lesson 1 (c by)

Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) wael gomaa
 
Course Content Considerations
Course Content ConsiderationsCourse Content Considerations
Course Content ConsiderationsDerek Moore
 
The Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDThe Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDJames Washok
 
Design Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly websiteDesign Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly websitenonlinear creations
 
Using visual aids effectively
Using visual aids effectivelyUsing visual aids effectively
Using visual aids effectivelyPhil Ewels
 
Some Basic concepts of design
Some Basic concepts of designSome Basic concepts of design
Some Basic concepts of designJen Sabado
 
Covers that Connect, IBPA 2016
Covers that Connect, IBPA 2016Covers that Connect, IBPA 2016
Covers that Connect, IBPA 2016BookWise Design
 
Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014DUSPviz
 
Design in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaDesign in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaMobileNepal
 
Covers that Connect IBPA 2017
Covers that Connect IBPA 2017Covers that Connect IBPA 2017
Covers that Connect IBPA 2017BookWise Design
 
Avalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and TricksAvalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and TricksAvalon Consulting
 
PowerPointGuidelines.ppt
PowerPointGuidelines.pptPowerPointGuidelines.ppt
PowerPointGuidelines.pptDrGlavnik
 
Power Point Presentation Guidelines-1.pptx
Power Point Presentation Guidelines-1.pptxPower Point Presentation Guidelines-1.pptx
Power Point Presentation Guidelines-1.pptxLovelyMaePenaroya
 
Graphic Design first class (1).pptx
Graphic Design first class (1).pptxGraphic Design first class (1).pptx
Graphic Design first class (1).pptxSubhashisRoyOfficial
 
Visual Interface Design HCI presentation By Uzair Ahmad
Visual Interface Design HCI presentation By Uzair Ahmad Visual Interface Design HCI presentation By Uzair Ahmad
Visual Interface Design HCI presentation By Uzair Ahmad UzairAhmad81
 
Communication Skills Lectures # 13.pptx
Communication Skills Lectures # 13.pptxCommunication Skills Lectures # 13.pptx
Communication Skills Lectures # 13.pptxFarhanAhmad254929
 

Semelhante a An introduction to web graphics lesson 1 (c by) (20)

Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice)
 
Course Content Considerations
Course Content ConsiderationsCourse Content Considerations
Course Content Considerations
 
The Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDThe Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for ID
 
Visual design
Visual designVisual design
Visual design
 
Design Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly websiteDesign Credibility: No one trusts an ugly website
Design Credibility: No one trusts an ugly website
 
Using visual aids effectively
Using visual aids effectivelyUsing visual aids effectively
Using visual aids effectively
 
Some Basic concepts of design
Some Basic concepts of designSome Basic concepts of design
Some Basic concepts of design
 
Covers that Connect, IBPA 2016
Covers that Connect, IBPA 2016Covers that Connect, IBPA 2016
Covers that Connect, IBPA 2016
 
Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014Seven Habits of Highly Effective Designers - IAP 2014
Seven Habits of Highly Effective Designers - IAP 2014
 
Design in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaDesign in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil Acharya
 
Covers that Connect IBPA 2017
Covers that Connect IBPA 2017Covers that Connect IBPA 2017
Covers that Connect IBPA 2017
 
Web Designing ICT/TLE G9 QUARTER 1.1
Web Designing ICT/TLE G9 QUARTER 1.1Web Designing ICT/TLE G9 QUARTER 1.1
Web Designing ICT/TLE G9 QUARTER 1.1
 
Day01 design final
Day01 design finalDay01 design final
Day01 design final
 
Avalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and TricksAvalon's DM 101 - Design Tips and Tricks
Avalon's DM 101 - Design Tips and Tricks
 
PowerPointGuidelines.ppt
PowerPointGuidelines.pptPowerPointGuidelines.ppt
PowerPointGuidelines.ppt
 
Power Point Presentation Guidelines-1.pptx
Power Point Presentation Guidelines-1.pptxPower Point Presentation Guidelines-1.pptx
Power Point Presentation Guidelines-1.pptx
 
Graphic Design first class (1).pptx
Graphic Design first class (1).pptxGraphic Design first class (1).pptx
Graphic Design first class (1).pptx
 
Visual Interface Design HCI presentation By Uzair Ahmad
Visual Interface Design HCI presentation By Uzair Ahmad Visual Interface Design HCI presentation By Uzair Ahmad
Visual Interface Design HCI presentation By Uzair Ahmad
 
Communication Skills Lectures # 13.pptx
Communication Skills Lectures # 13.pptxCommunication Skills Lectures # 13.pptx
Communication Skills Lectures # 13.pptx
 
powerpointguidelines.pdf
powerpointguidelines.pdfpowerpointguidelines.pdf
powerpointguidelines.pdf
 

Último

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 

Último (20)

Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 

An introduction to web graphics lesson 1 (c by)

  • 1. An Introduction to Web Graphics Lesson 1 – Design Principles and Logos
  • 2. WHAT IS A LOGO? WHERE MIGHT YOU SEE LOGOS? WHY ARE LOGOS IMPORTANT?
  • 3. TIME FOR A QUIZ
  • 4. HOW DID YOU DO? WHAT CHARACTERISTICS DO THESE LOGO DESIGNS SHARE?
  • 5. Objectives and Outcomes Objectives • Understand basic design principles of white space, contrast, proximity, alignment, repetition and complimentary colours • Learn how to create a logo using graphics software Outcomes • All: Will be able to say what these words mean • Most: Will use some of these ideas in their work • Some: Will use most of these ideas and explain how they’ve been used • All: Will have created a simple logo • Most: Will have created a simple logo with a coherent design • Some: Will think about audience and produce an appropriate design
  • 7. Proximity • The distance between things in a design has an impact on how they relate to one another • Elements close together appear to have a stronger relationship than those further apart
  • 9. Contrast • Contrast works in several different ways • Most obvious example of contrast is the colour of text against a background – Easier to read text that contrasts highly with the background • Can also include all sorts of differences between elements – Make something different so that it stands out – Helps indicate what’s important
  • 10. Contrast • This is an example of poor contrast. The colour of this text is not different enough from the background colour. Higher contrast is far easier to read.  This text is much easier to read than the text above. Tests indicate that white wording on a black background is harder to read than the black text on a white background.
  • 12. This is a complex area but, put simply, ‘opposite’ colours work often well together! Is the opposite true?
  • 14. Repetition • Saying the same thing or using the same design component several times to get a point across • Use of a consistent theme • Common in nature – the brain accepts it quickly!
  • 16. Text Alignment • Can enhance or detract from appearance of page. • Can significantly affect readability Aligned left is most common. This provides a consistent starting point for each new line. The eye of the reader becomes used to easily finding the beginning of a new line Centre alignment makes finding the beginning of a new line of text much more difficult. Each line tends to be a different length. As a result it is much more tiring to read text with centre alignment. The eye is constantly guessing and searching for the start point. In addition, centre alignment causes odd line lengths. These odd lengths cause a sort of "choppiness" in how the text reads. It lacks the smooth flow that tends to occur with left alignment. Right alignment seldom serves a useful purpose if readability is a concern. While it may be used in an artistic way, the use of right alignment for significant amounts of text should be avoided. The odd starting points of the text cause the eye to search and the appearance in bulk of such text can be off-putting to some viewers. Always remember that people tend not to read anything that is too difficult or annoying!
  • 18. White Space White space isn't always white – it’s a graphics design term and refers to the space between objects in a design. So the area between text and a photograph is "white space" even it’s another colour.
  • 19. Create Your Own Logo • You’re going to create a logo for an imaginary company called Pad Blazer who make games for mobile phones • Use Fireworks • Try to incorporate some or all of the principles we discussed:- – White space – Proximity – Repetition – Alignment – Contrast – Complimentary colours • Keep it simple • Think about audience 600 x 600 Text Shapes
  • 20. Objectives and Outcomes Objectives • Understand basic design principles of white space, contrast, proximity, alignment, repetition and complimentary colours • Learn how to create a logo using graphics software Outcomes • All: Will be able to say what these words mean • Most: Will use some of these ideas in their work • Some: Will use most of these ideas and explain how they’ve been used • All: Will have created a simple logo • Most: Will have created a simple logo with a coherent design • Some: Will think about audience and produce an appropriate design
  • 21. Homework • Find a picture or graphic that demonstrates one or more of the design principles we discussed today • white space, contrast, proximity, alignment, repetition and complimentary colours Bring it to the next lesson