SlideShare ist ein Scribd-Unternehmen logo
1 von 128
Downloaden Sie, um offline zu lesen
INTERFACE DE SIGN JUG GLING
        by DAN CEDERHOLM
http://www.flickr.com/photos/designerbrent/194242417/
http://www.flickr.com/photos/shawnzlea/137209564/
COLOR
TYPOGR APHY
ICONO GR APHY
MICROFORMATS
FLEXIB ILITY
Learn to juggle


 - Passing one object from one hand to the
   other.
 - Then two ...
 - Then three ...
 - You’re still not juggling.
Juggling is ...


 - Keeping all objects consistently in the air
 - Adapting to shift, changes in pattern, etc.
MY BACKYARD

              http://www.flickr.com/photos/stuartyeates/45919678/
SPECIAL ANNOUNCEMENT
(Wig 2.0?)
toupeepal.com
Color.

Start with a small, core palette. Reuse
that set throughout the design.
http://wellstyled.com/tools/colorscheme2/index-en.html
Choosing color palettes from nature photos
Filter > Pixelate > Mosaic...
                #b67f72




      #393643
SCULPTING
   an INTERFACE
Link color carries
weight.
On link-heavy pages, link color can be
an important design element.
TYPOGRAPHY
GREAT TYPOGRAPHY IS
      INVISIBLE
http://www.informationarchitects.jp/the-web-is-all-about-typography-period
Too few fonts?

     “During the Italian renaissance the
   typographer had one font to work with,
  and yet this period produced some of the
     most beautiful typographical work.”
                            —Oliver Reichenstein
“Information design is not about the use of
good typefaces, it is about the use of good
 typography ... Anyone can use typefaces,
some can choose good typefaces, but only
        few master typography.”

                           —Oliver Reichenstein
DO THE BEST WITH
 WHAT WE HAVE
Verdana
Georgia
Headings   Everything else
CSS Typography

-font-family
-font-size
-font-weight
-letter-spacing
-text-transform
-text-align
h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  }
h3 {
  font-family: Georgia, serif;

 font-size: 90%;

 text-transform: uppercase;

 letter-spacing: 2px;
  color: #963;
  }
5.1.3 In heads and titles, use the best available ampersand.
<span class=quot;ampquot;>&amp;</span>

span.amp {

 font-size: 110%;

 font-family: quot;Goudy Old Stylequot;, quot;Palatinoquot;,
    quot;Book Antiquaquot;, serif;

 font-style: italic;

}
webtypography.net
Harmonize type set
in graphics.
Use as an opportunity to treat type
consistently.
Avenir
Favicons.

The most important design element of
any site. No, really.
subtraction.com
tanyamerone.com
REALLY EASY
       or
REALLY DIFFICULT
Three choices


- Scale the mark down to 16x16
- Choose a fragment to focus on
- Use something unique
salon. com   technorati.com




saturn.com   andybudd.com




adidas.com     veer.com
zeldman. com   sixfoot6.com




sidesh0w.com   photomatt.net




meyerweb.com   adactio.com
CREATE IN PHOTOSHOP
PASTE INTO ICONOGRAPHER
Add detail without
adding complexity.
Understand the limitations of
background images and boring boxes.
Please recycle.
Suggest the box.

Style portions of the box with minimal
background images for simple markup
and future-proofing.
Reuse/Recycle.

Simplify design and process by reusing
themes, color, graphics.
diag-bg.gif
MICROFORMATS
microformats are ...


 - Confusing
 - A waste of time
 - Something geeks do with a lot of time on
   their hands
“Designed for humans first and
machines second, microformats are a
set of simple, open data formats built
upon existing and widely adopted
standards. Instead of throwing away
what works today, microformats intend
to solve simpler problems first by
adapting to current behaviors and
usage patterns (e.g. XHTML, blogging).”

    – http://microformats.org/about
“Cool. I’ll do it that
                                                     “Cool. I’ll do it that
                                          way too”
“I'm going to mark                                         way too”
 up a contact like
      this...”                                   “Cool. I’ll do it that
                                                     way too”
                                                              “Cool. I’ll do it th
                                                                    way too”

      <div class=quot;vcardquot;>
       <a class=quot;url fnquot; href=quot;http://simplebits.com/quot;>Dan Cederholm</a>
       <div class=quot;orgquot;>SimpleBits, LLC</div>
      </div>




                           APPLICATION
PEOPLE                                                                CSS
CONTACT INFO?
PRODUCT REVIEW?
 EVENT DETAILS?
 RELATIONSHIPS?
GUIDED BY VOICES




             http://www.flickr.com/photos/bluetypewriter/174367695/
USE WHAT WORKS TODAY
hCard
(contact information)
http://microformats.org/code/hcard/creator
hCard

<div class=quot;vcardquot;>
 <a class=quot;url fn hidequot; href=quot;http://simplebits.comquot;>Dan Cederholm</a>
 <div class=quot;orgquot;>SimpleBits, LLC</div>
 <div class=quot;adrquot;>
   <div class=quot;street-addressquot;>60 Washington Street, Suite 402</div>
   <span class=quot;localityquot;>Salem</span>,
   <span class=quot;regionquot;>MA</span>,
   <span class=quot;postal-codequot;>01970</span>
   <abbr class=quot;country-namequot; title=quot;United States of Americaquot;>USA</abbr>
 </div>
 <div class=quot;telquot;>
   <span class=quot;typequot;>Fax</span>:
   <span class=quot;valuequot;>+1 978 744 0760</span>
 </div>
</div>
hCard

<div class=quot;vcardquot;>
 <a class=quot;url fn hidequot; href=quot;http://simplebits.comquot;>Dan Cederholm</a>
 <div class=quot;orgquot;>SimpleBits, LLC</div>
 <div class=quot;adrquot;>
   <div class=quot;street-addressquot;>60 Washington Street, Suite 402</div>
   <span class=quot;localityquot;>Salem</span>,
   <span class=quot;regionquot;>MA</span>,
   <span class=quot;postal-codequot;>01970</span>
   <abbr class=quot;country-namequot; title=quot;United States of Americaquot;>USA</abbr>
 </div>
 <div class=quot;telquot;>
   <span class=quot;typequot;>Fax</span>:
   <span class=quot;valuequot;>+1 978 744 0760</span>
 </div>
</div>
SEEING IS BELIEVING
THIS STUFF WORKS NOW
hReview


hReview
rel-tag
hCard
PLANTING SEEDS
“OBLIVIOUS DEVELOPMENT”




               http://www.flickr.com/photos/96434059@N00/196061290/
I HAD NO IDEA WHAT HE
  WAS TALKING ABOUT
“ACCIDENTAL API”
     —Brian Oberkirch
http://allinthehead.com/retro/301/can-your-website-be-your-api
XFN
                hCard



MICROFORMATS WORK
     TOGETHER

      hReview
What good is one brick?

                        XFN

                hCard         hReview

      rel-tag      hCalendar       hResume
hReview




          hCalendar
WIGGREGATOR?
microformats.org
BULLETPROOFING
“Bulletproof”


 - Embracing flexibility
 - Preparing for worst-case scenarios
 - Protecting your designs from “breaking”
 - Catch-phrase to sell books and secure
   speaking engagements
INTEGRITY TESTS
Turn images off.

When images are disabled, is the site
still readable?
Styled alt text

 #header #logo {
 
 float: left;
 
 margin: 0 0 20px 0;
 
 color: #fff;
 
}
WOW!
WOW!
Turn CSS off.

Give your design an x-ray. A quot;10-
second usability testquot; isn't scientific—
but it can help illustrate separation of
structure and presentation.
Bump up text size.

Increase text size to see how the design
reacts. Can it adapt to varying
amounts of content?
#wrap {
  width: 50em;
  }

#content {
  width: 30em;
  }

#sidebar {
  width: 20em;
  }
Validate.

Validate markup and stylesheets when
possible—especially during the design
process.
COLOR
TYPOGR APHY
ICONO GR APHY
MICROFORMATS
FLEXIB ILITY
THANK YOU.
http://simplebits.com/publictions/speak/juggling

Weitere ähnliche Inhalte

Andere mochten auch

Rodzaje planów filmowych
Rodzaje planów filmowych Rodzaje planów filmowych
Rodzaje planów filmowych
Karolina Janko
 
Media społecznościowe w 2015 - kierunki rozwoju
Media społecznościowe w 2015 - kierunki rozwojuMedia społecznościowe w 2015 - kierunki rozwoju
Media społecznościowe w 2015 - kierunki rozwoju
Łukasz Dębski
 

Andere mochten auch (10)

Prezentacja teatr telewizji
Prezentacja  teatr telewizjiPrezentacja  teatr telewizji
Prezentacja teatr telewizji
 
Western i antywestern - charakterystyka i rozwój gatunku filmowego
Western i antywestern - charakterystyka i rozwój gatunku filmowegoWestern i antywestern - charakterystyka i rozwój gatunku filmowego
Western i antywestern - charakterystyka i rozwój gatunku filmowego
 
Poczatki telewizji, poczatki widzow
Poczatki telewizji, poczatki widzowPoczatki telewizji, poczatki widzow
Poczatki telewizji, poczatki widzow
 
Nurty i gatunki filmowe: komedia slapstickowa
Nurty i gatunki filmowe: komedia slapstickowaNurty i gatunki filmowe: komedia slapstickowa
Nurty i gatunki filmowe: komedia slapstickowa
 
The World Games 2017 Wroclaw - applicant city
The World Games 2017 Wroclaw - applicant cityThe World Games 2017 Wroclaw - applicant city
The World Games 2017 Wroclaw - applicant city
 
Rodzaje planów filmowych
Rodzaje planów filmowych Rodzaje planów filmowych
Rodzaje planów filmowych
 
Szwajcaria
SzwajcariaSzwajcaria
Szwajcaria
 
Historia kina - 2014
Historia kina - 2014Historia kina - 2014
Historia kina - 2014
 
Muzyka na Facebooku
Muzyka na FacebookuMuzyka na Facebooku
Muzyka na Facebooku
 
Media społecznościowe w 2015 - kierunki rozwoju
Media społecznościowe w 2015 - kierunki rozwojuMedia społecznościowe w 2015 - kierunki rozwoju
Media społecznościowe w 2015 - kierunki rozwoju
 

Ähnlich wie Juggling

960 grid psd
960 grid psd960 grid psd
960 grid psd
Raju Nag
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
Even Wu
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Mario Heiderich
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
Christopher Schmitt
 

Ähnlich wie Juggling (20)

Juggling
JugglingJuggling
Juggling
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
960 grid psd
960 grid psd960 grid psd
960 grid psd
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Responsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHResponsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPH
 
Functional Animation with SVG - OpenWest 2018
Functional Animation with SVG - OpenWest 2018Functional Animation with SVG - OpenWest 2018
Functional Animation with SVG - OpenWest 2018
 
Old Dog, New Tricks
Old Dog, New TricksOld Dog, New Tricks
Old Dog, New Tricks
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 

Mehr von Ross Lawley (19)

Thinking Functionally In Ruby
Thinking Functionally In RubyThinking Functionally In Ruby
Thinking Functionally In Ruby
 
Kanban For Software Engineering Apr 242
Kanban For Software Engineering Apr 242Kanban For Software Engineering Apr 242
Kanban For Software Engineering Apr 242
 
Kanban Vs Scrum
Kanban Vs ScrumKanban Vs Scrum
Kanban Vs Scrum
 
How To Fail With Agile
How To Fail With AgileHow To Fail With Agile
How To Fail With Agile
 
Evolving From Scrum To Lean
Evolving From Scrum To LeanEvolving From Scrum To Lean
Evolving From Scrum To Lean
 
Anti Patterns2008
Anti Patterns2008Anti Patterns2008
Anti Patterns2008
 
Couch Db
Couch DbCouch Db
Couch Db
 
Metaprogramming in Ruby
Metaprogramming in RubyMetaprogramming in Ruby
Metaprogramming in Ruby
 
Designing For Web2
Designing For Web2 Designing For Web2
Designing For Web2
 
Designing Web2
Designing Web2Designing Web2
Designing Web2
 
GOF patterns in Ruby
GOF patterns in RubyGOF patterns in Ruby
GOF patterns in Ruby
 
User Experience Pain Free
User Experience Pain FreeUser Experience Pain Free
User Experience Pain Free
 
L R U G - JRuby
L R U G - JRubyL R U G - JRuby
L R U G - JRuby
 
Rails Conf Europe 2007 Notes
Rails Conf  Europe 2007  NotesRails Conf  Europe 2007  Notes
Rails Conf Europe 2007 Notes
 
Learning To Love Forms Webvisions 07 21033
Learning To Love Forms Webvisions 07 21033Learning To Love Forms Webvisions 07 21033
Learning To Love Forms Webvisions 07 21033
 
Wiki Design Luke W
Wiki Design  Luke WWiki Design  Luke W
Wiki Design Luke W
 
B D D Intro
B D D  IntroB D D  Intro
B D D Intro
 
Thesis Carohorn
Thesis CarohornThesis Carohorn
Thesis Carohorn
 
When Interface Design Attacks
When Interface Design AttacksWhen Interface Design Attacks
When Interface Design Attacks
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 

Juggling