SlideShare a Scribd company logo
Visually communicate with your design Serena Carpenter http://serenacarpenter.com
 
 
 
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Contrast
Alignment – Invisible grid
Repetition ,[object Object]
Proximity
 
 
Paging vs. Scrolling ,[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object]
 
 
Monitor Resolution ,[object Object],[object Object],[object Object],[object Object],[object Object]
 
Navigation
Stick with Muted Colors And Think about Your Intended Audience ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
Images ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]
Typography is  not  picking a cool font. ,[object Object],[object Object],[object Object],[object Object]
White space unclutters ,[object Object],[object Object]
Stick with narrow columns ,[object Object],[object Object]
Basic Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Robert Bringhurst The Elements of Typographic Style
Font ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object]
 
 
Font ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Font tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Increase Line Spacing
Links ,[object Object],[object Object],[object Object]
 
[object Object],[object Object],[object Object],[object Object]
 
Design your banner ,[object Object],[object Object]
Design your personal page ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Page-level design
Tree Diagram Site-level Design
Future Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

Viewers also liked

Information Design - BEA
Information Design - BEAInformation Design - BEA
Information Design - BEA
Michigan State University
 
Theoretical Issues - Intro to Quantitative
Theoretical Issues - Intro to Quantitative Theoretical Issues - Intro to Quantitative
Theoretical Issues - Intro to Quantitative Michigan State University
 
Concept Explication - Theoretical Issues - Intro to Quantitative
Concept Explication - Theoretical Issues - Intro to Quantitative Concept Explication - Theoretical Issues - Intro to Quantitative
Concept Explication - Theoretical Issues - Intro to Quantitative Michigan State University
 
Sampling survey - Intro to Quantitative
Sampling survey - Intro to Quantitative Sampling survey - Intro to Quantitative
Sampling survey - Intro to Quantitative Michigan State University
 

Viewers also liked (13)

Alternative search
Alternative searchAlternative search
Alternative search
 
Job Skills
Job SkillsJob Skills
Job Skills
 
Information writing seo
Information writing seoInformation writing seo
Information writing seo
 
Online Information Design
Online Information DesignOnline Information Design
Online Information Design
 
Information Design - BEA
Information Design - BEAInformation Design - BEA
Information Design - BEA
 
Social Media & Personal Branding
Social Media & Personal BrandingSocial Media & Personal Branding
Social Media & Personal Branding
 
Video Editing and Encoding
Video Editing and EncodingVideo Editing and Encoding
Video Editing and Encoding
 
Theoretical Issues - Intro to Quantitative
Theoretical Issues - Intro to Quantitative Theoretical Issues - Intro to Quantitative
Theoretical Issues - Intro to Quantitative
 
Online identity and social media
Online identity and social mediaOnline identity and social media
Online identity and social media
 
Concept Explication - Theoretical Issues - Intro to Quantitative
Concept Explication - Theoretical Issues - Intro to Quantitative Concept Explication - Theoretical Issues - Intro to Quantitative
Concept Explication - Theoretical Issues - Intro to Quantitative
 
Theorybuilding f13
Theorybuilding f13Theorybuilding f13
Theorybuilding f13
 
Measurement - Intro to Quantitative
Measurement - Intro to Quantitative Measurement - Intro to Quantitative
Measurement - Intro to Quantitative
 
Sampling survey - Intro to Quantitative
Sampling survey - Intro to Quantitative Sampling survey - Intro to Quantitative
Sampling survey - Intro to Quantitative
 

Similar to Web Design

Presentation 1 asgardia
Presentation 1 asgardiaPresentation 1 asgardia
Presentation 1 asgardia
Alix Fraser
 
Multimedia: Making it Happen - Text
Multimedia: Making it Happen - TextMultimedia: Making it Happen - Text
Multimedia: Making it Happen - Textjoelk
 
Typography teaching presentation
Typography teaching presentationTypography teaching presentation
Typography teaching presentation
Brianna Morris
 
Neoito — Typography for the web
Neoito — Typography for the webNeoito — Typography for the web
Neoito — Typography for the web
Neoito
 
Editing, Presenting, and Anal Retenting
Editing, Presenting, and Anal RetentingEditing, Presenting, and Anal Retenting
Editing, Presenting, and Anal Retenting
caswenson
 
POW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design BasicsPOW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design Basics
MesaPublicLibrary
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
ssusercc3ff71
 
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012AntonioHolguin
 
0135140560 pp10a
0135140560 pp10a0135140560 pp10a
Designing The Document
Designing The DocumentDesigning The Document
Designing The DocumentProf S
 
Fonts!
Fonts!Fonts!
Fonts!rakeling
 
What the Font? A Quick & Helpful Guide for Professional Typography Usage
What the Font? A Quick & Helpful Guide for Professional Typography UsageWhat the Font? A Quick & Helpful Guide for Professional Typography Usage
What the Font? A Quick & Helpful Guide for Professional Typography Usage
dezinegirl creative studio
 
Introductiontowebdesign 090806135811-phpapp02
Introductiontowebdesign 090806135811-phpapp02Introductiontowebdesign 090806135811-phpapp02
Introductiontowebdesign 090806135811-phpapp02sagaroceanic11
 
Best web design company
Best web design companyBest web design company
Best web design company
Techinventive Software
 
Designing Type for User Interfaces
Designing Type for User InterfacesDesigning Type for User Interfaces
Designing Type for User Interfaces
Andi Galpern
 
Web Typography
Web TypographyWeb Typography
Web Typography
Denise Kolodzey
 
Visual Rhetoric
Visual RhetoricVisual Rhetoric
Visual Rhetoric
palaciok001
 
Font-families in CSS
Font-families in CSSFont-families in CSS
Font-families in CSS
Mindy McAdams
 

Similar to Web Design (20)

Type
TypeType
Type
 
Presentation 1 asgardia
Presentation 1 asgardiaPresentation 1 asgardia
Presentation 1 asgardia
 
Multimedia: Making it Happen - Text
Multimedia: Making it Happen - TextMultimedia: Making it Happen - Text
Multimedia: Making it Happen - Text
 
Typography teaching presentation
Typography teaching presentationTypography teaching presentation
Typography teaching presentation
 
Neoito — Typography for the web
Neoito — Typography for the webNeoito — Typography for the web
Neoito — Typography for the web
 
Editing, Presenting, and Anal Retenting
Editing, Presenting, and Anal RetentingEditing, Presenting, and Anal Retenting
Editing, Presenting, and Anal Retenting
 
POW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design BasicsPOW! Your Point Handout 2: Design Basics
POW! Your Point Handout 2: Design Basics
 
11. Typography data visualization .pdf
11. Typography data visualization .pdf11. Typography data visualization .pdf
11. Typography data visualization .pdf
 
multimedia (2nd)
 multimedia (2nd) multimedia (2nd)
multimedia (2nd)
 
Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012Intro to Design For Devs, 360|Flex 2012
Intro to Design For Devs, 360|Flex 2012
 
0135140560 pp10a
0135140560 pp10a0135140560 pp10a
0135140560 pp10a
 
Designing The Document
Designing The DocumentDesigning The Document
Designing The Document
 
Fonts!
Fonts!Fonts!
Fonts!
 
What the Font? A Quick & Helpful Guide for Professional Typography Usage
What the Font? A Quick & Helpful Guide for Professional Typography UsageWhat the Font? A Quick & Helpful Guide for Professional Typography Usage
What the Font? A Quick & Helpful Guide for Professional Typography Usage
 
Introductiontowebdesign 090806135811-phpapp02
Introductiontowebdesign 090806135811-phpapp02Introductiontowebdesign 090806135811-phpapp02
Introductiontowebdesign 090806135811-phpapp02
 
Best web design company
Best web design companyBest web design company
Best web design company
 
Designing Type for User Interfaces
Designing Type for User InterfacesDesigning Type for User Interfaces
Designing Type for User Interfaces
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Visual Rhetoric
Visual RhetoricVisual Rhetoric
Visual Rhetoric
 
Font-families in CSS
Font-families in CSSFont-families in CSS
Font-families in CSS
 

More from Michigan State University

Content Analysis - Theoretical Issues - Intro to Quantitative
Content Analysis - Theoretical Issues - Intro to Quantitative Content Analysis - Theoretical Issues - Intro to Quantitative
Content Analysis - Theoretical Issues - Intro to Quantitative Michigan State University
 
Social media verification and credibility
Social media verification and credibilitySocial media verification and credibility
Social media verification and credibilityMichigan State University
 
Academic Publishing in Communication and Journalism
Academic Publishing in Communication and JournalismAcademic Publishing in Communication and Journalism
Academic Publishing in Communication and JournalismMichigan State University
 

More from Michigan State University (19)

Stats - Intro to Quantitative
Stats -  Intro to Quantitative Stats -  Intro to Quantitative
Stats - Intro to Quantitative
 
Content Analysis - Theoretical Issues - Intro to Quantitative
Content Analysis - Theoretical Issues - Intro to Quantitative Content Analysis - Theoretical Issues - Intro to Quantitative
Content Analysis - Theoretical Issues - Intro to Quantitative
 
Social media-overview
Social media-overviewSocial media-overview
Social media-overview
 
Social media verification and credibility
Social media verification and credibilitySocial media verification and credibility
Social media verification and credibility
 
Engagement and Journalism
Engagement and JournalismEngagement and Journalism
Engagement and Journalism
 
Google search
Google search Google search
Google search
 
Teaching engagement
Teaching engagement Teaching engagement
Teaching engagement
 
Elevating a Portfolio
Elevating a PortfolioElevating a Portfolio
Elevating a Portfolio
 
Academic Publishing in Communication and Journalism
Academic Publishing in Communication and JournalismAcademic Publishing in Communication and Journalism
Academic Publishing in Communication and Journalism
 
Personal branding sp11
Personal branding sp11Personal branding sp11
Personal branding sp11
 
Online writing, design and SEO
Online writing, design and SEOOnline writing, design and SEO
Online writing, design and SEO
 
Broll or Video Shooting - Fall10
Broll or Video Shooting - Fall10Broll or Video Shooting - Fall10
Broll or Video Shooting - Fall10
 
Social Media and Online Identity
Social Media and Online IdentitySocial Media and Online Identity
Social Media and Online Identity
 
Information Design and SEO
Information Design and SEOInformation Design and SEO
Information Design and SEO
 
Blogging Fall 2010
Blogging Fall 2010Blogging Fall 2010
Blogging Fall 2010
 
Social Media in the Classroom - AEJMC
Social Media in the Classroom - AEJMCSocial Media in the Classroom - AEJMC
Social Media in the Classroom - AEJMC
 
Video Trends, Tips and Communication
Video Trends, Tips and CommunicationVideo Trends, Tips and Communication
Video Trends, Tips and Communication
 
Photo Composition and Communication
Photo Composition and CommunicationPhoto Composition and Communication
Photo Composition and Communication
 
Twitter Basics
Twitter BasicsTwitter Basics
Twitter Basics
 

Recently uploaded

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
Fwdays
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 

Recently uploaded (20)

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 

Web Design