User Interface Design <ul><li>Reflecting what your eyes see in real life </li></ul><ul><li>using CSS3 </li></ul>
“ Users said they were more likely to believe Web sites that looked professionally designed.” —Stanford Web Credibility St...
UI & UX <ul><ul><li>UI (User Interface): The Look & Feel </li></ul></ul><ul><ul><li>UX (User Experience): Ease of Use </li...
YOU DON’T NEED A CHEF TO COOK A BUTTON
CSS3 Only <ul><li>Replicate a microwave button without using any graphic </li></ul>
Closer Look Lighter Darker
Getting Started <a href=&quot;#&quot; class=&quot;button&quot;>Cook Me</a>
Turning it into a Block display:  inline-block; background:  #ffffff; line-height:  34px; padding:  0 10px;
Rounded Corners border-radius:  17px;
Border border:  1px solid #505559;
Gradient background-image:  -webkit-gradient( linear , left top , left bottom ,color-stop(0, # c1d5e3 ),color-stop(1, # 9d...
Upper inner Light box-shadow:  inset 0 1px 3px #fff;
Lower inner Shadow box-shadow:   inset  0 1px 3px #fff,  inset  0 -1px 0 rgba(0,0,0,0.5) ;
Lower outer Light box-shadow:   inset  0 1px 3px #fff,  inset  0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.5) ;
Engraving the Label font-family:  'lucida grande', arial, sans-serif; color:  #333; font-weight:  bold; text-decoration:  ...
Pressing the Button Darker
Pressing the Button box-shadow:   inset  0 4px 10px #000 ,  inset  0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.5)...
Power of CSS3 <ul><li>Rounded Corner </li></ul><ul><li>Box Shadows and Inset Shadows </li></ul><ul><li>Gradient </li></ul>...
CSS Framework? UI CSS Framework Cross Browser Theme-able Creative Commons http://www.vitaminui.org /
VitaminUI
Thank You [email_address] @eliekhoury http://www.ekhoury.com
User Interface Design
User Interface Design
User Interface Design
User Interface Design
User Interface Design
User Interface Design
User Interface Design
Upcoming SlideShare
Loading in …5
×

User Interface Design

1,717 views

Published on

OpenCamp Dallas

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,717
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

User Interface Design

  1. 1. User Interface Design <ul><li>Reflecting what your eyes see in real life </li></ul><ul><li>using CSS3 </li></ul>
  2. 2. “ Users said they were more likely to believe Web sites that looked professionally designed.” —Stanford Web Credibility Study
  3. 3. UI & UX <ul><ul><li>UI (User Interface): The Look & Feel </li></ul></ul><ul><ul><li>UX (User Experience): Ease of Use </li></ul></ul>
  4. 4. YOU DON’T NEED A CHEF TO COOK A BUTTON
  5. 5. CSS3 Only <ul><li>Replicate a microwave button without using any graphic </li></ul>
  6. 6. Closer Look Lighter Darker
  7. 7. Getting Started <a href=&quot;#&quot; class=&quot;button&quot;>Cook Me</a>
  8. 8. Turning it into a Block display: inline-block; background: #ffffff; line-height: 34px; padding: 0 10px;
  9. 9. Rounded Corners border-radius: 17px;
  10. 10. Border border: 1px solid #505559;
  11. 11. Gradient background-image: -webkit-gradient( linear , left top , left bottom ,color-stop(0, # c1d5e3 ),color-stop(1, # 9db1c1 ));
  12. 12. Upper inner Light box-shadow: inset 0 1px 3px #fff;
  13. 13. Lower inner Shadow box-shadow: inset 0 1px 3px #fff, inset 0 -1px 0 rgba(0,0,0,0.5) ;
  14. 14. Lower outer Light box-shadow: inset 0 1px 3px #fff, inset 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.5) ;
  15. 15. Engraving the Label font-family: 'lucida grande', arial, sans-serif; color: #333; font-weight: bold; text-decoration: none; text-shadow: 0 1px 0 #fff;
  16. 16. Pressing the Button Darker
  17. 17. Pressing the Button box-shadow: inset 0 4px 10px #000 , inset 0 -1px 0 rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.5); Normal State Pressed State
  18. 18. Power of CSS3 <ul><li>Rounded Corner </li></ul><ul><li>Box Shadows and Inset Shadows </li></ul><ul><li>Gradient </li></ul><ul><li>Text Shadow </li></ul>Modern Browers: IE9, Firefox, Chrome, Safari & Opera (Older browsers + Hacks)
  19. 19. CSS Framework? UI CSS Framework Cross Browser Theme-able Creative Commons http://www.vitaminui.org /
  20. 20. VitaminUI
  21. 21. Thank You [email_address] @eliekhoury http://www.ekhoury.com

×