Themes Design

863 views

Published on

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
863
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Themes Design

  1. 1. Themes Design Idbloglicious roadshow MEDAN CHAPTER May 2011 THE VERY BEGINNING OF AN ENDLESS JOURNEY
  2. 2. Putra Nasution PROUD BLOGGER SINCE 2001 BLOGBUGS / ANGKRINGAN / BBV / TUKANG LENONG / AWAKMEDAN www.ipoet.net / hi@ipoet.net / @poetra THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER
  3. 3. THIS SESSION: design principles / HTML / CSS / usability / mantra / problems / CMS templating demo: wordpress theme THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER
  4. 4. Keep It Short & Simple THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES
  5. 5. "Simplicity is the ultimate sophistication“ ~ Leonardo Da Vinci THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES
  6. 6. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES
  7. 7. Standard / Widescreen CRT Monitor / LCD Monitor / Tablet / Mobile Phone THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES
  8. 8. WHY? You asked… Avoid unnecessary scrolling  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER DESIGN PRINCIPLES
  9. 9. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER GRID SYSTEM
  10. 10. www.960.gs 12 collumns | 16 collumns | 24 collumns THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER GRID SYSTEM
  11. 11. Hypertext Markup Language HTML is a coding language that makes up the basic construction of a web page. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HYPERTEXT MARKUP LANGUAGE
  12. 12. HTML VALIDATOR Basicly, just watch the tag / markup. Be sure to keep everything closed and organized. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HYPERTEXT MARKUP LANGUAGE
  13. 13. HTML STRUCTURE Watch the order: <h1> <h2> <h3> <h4> (it’s not to make your text looks bigger!) THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HYPERTEXT MARKUP LANGUAGE
  14. 14. HTML STRUCTURE <br /> is inside the <p></p> tag <li></li> is inside the <ul></ul> tag THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HYPERTEXT MARKUP LANGUAGE
  15. 15. TRIAL AND ERROR http://validator.w3.org THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HYPERTEXT MARKUP LANGUAGE
  16. 16. CASCADING STYLE SHEET CSS is a stylesheet language used to describe the presentation semantics (look and formatting). In short, it’s like the make up  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER CASCADING STYLE SHEET
  17. 17. CASCADING STYLE SHEET Basicly, there are class, and ID. And then, properties. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER CASCADING STYLE SHEET
  18. 18. Body { background: #fff; text: 11px arial, verdana, “Trebuchet MS”; color: #ccc; margin: 0px; padding: 0px; } #ID { margin: 0px auto; padding: 0px auto; width: 960px; } .class { width: 500px; background: url(img/bg.jpg) repeat-x; padding: 20px; } THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER CASCADING STYLE SHEET
  19. 19. TRIAL AND ERROR http://jigsaw.w3.org/css-validator THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER CASCADING STYLE SHEET
  20. 20. THEN, WHAT? IMVHO, avoid using WYSIWYG editor. Wait, I mean, avoid using Frontpage! :D THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER NEXT STEP
  21. 21. WEB USABILITY Consistency / Typography / Portability / Speed / Content / Accessibility / Technology / Interaction THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER USABILITY
  22. 22. THE MANTRA Optimize! Optimize! Optimize!  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THE MANTRA
  23. 23. THE MANTRA Why, you asked? Because loading MATTERS . 10/20/30 second. Big difference!  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THE MANTRA
  24. 24. PROBLEMS? - IE still exist! #doh - Cross-browser compatibility - Internet speed THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER PROBLEMS
  25. 25. THEMES NOWADAYS Header / Main Content / Sidebar / Footer THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:
  26. 26. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER HEADER NAVIGATION MAIN CONTENT SIDEBAR FOOTER THEMES NOWADAYS:
  27. 27. THEMES DESIGN * From Scratch * Theme Frameworks * Customizing Themes THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:
  28. 28. THEMES FRAMEWORKS http://codex.wordpress.org/Theme_Frameworks THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:
  29. 29. CUSTOMIZING THEMES The magic words are: “wordpress themes” or “blogger template” in google.com :P THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:
  30. 30. CUSTOMIZING THEMES But remember, read and respect the copyright. THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER THEMES NOWADAYS:
  31. 31. mauliate!  THEMES DESIGN IDBLOGLICIOUS ROADSHOW — MEDAN CHAPTER

×