Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

Catch the 1% in iterative design (OSIDays 11) Slide 1 Catch the 1% in iterative design (OSIDays 11) Slide 2 Catch the 1% in iterative design (OSIDays 11) Slide 3 Catch the 1% in iterative design (OSIDays 11) Slide 4 Catch the 1% in iterative design (OSIDays 11) Slide 5 Catch the 1% in iterative design (OSIDays 11) Slide 6 Catch the 1% in iterative design (OSIDays 11) Slide 7 Catch the 1% in iterative design (OSIDays 11) Slide 8 Catch the 1% in iterative design (OSIDays 11) Slide 9 Catch the 1% in iterative design (OSIDays 11) Slide 10 Catch the 1% in iterative design (OSIDays 11) Slide 11 Catch the 1% in iterative design (OSIDays 11) Slide 12 Catch the 1% in iterative design (OSIDays 11) Slide 13 Catch the 1% in iterative design (OSIDays 11) Slide 14 Catch the 1% in iterative design (OSIDays 11) Slide 15 Catch the 1% in iterative design (OSIDays 11) Slide 16 Catch the 1% in iterative design (OSIDays 11) Slide 17 Catch the 1% in iterative design (OSIDays 11) Slide 18 Catch the 1% in iterative design (OSIDays 11) Slide 19 Catch the 1% in iterative design (OSIDays 11) Slide 20 Catch the 1% in iterative design (OSIDays 11) Slide 21 Catch the 1% in iterative design (OSIDays 11) Slide 22 Catch the 1% in iterative design (OSIDays 11) Slide 23 Catch the 1% in iterative design (OSIDays 11) Slide 24 Catch the 1% in iterative design (OSIDays 11) Slide 25 Catch the 1% in iterative design (OSIDays 11) Slide 26 Catch the 1% in iterative design (OSIDays 11) Slide 27 Catch the 1% in iterative design (OSIDays 11) Slide 28 Catch the 1% in iterative design (OSIDays 11) Slide 29 Catch the 1% in iterative design (OSIDays 11) Slide 30
Upcoming SlideShare
What to Upload to SlideShare
Next

1 Like

Share

Catch the 1% in iterative design (OSIDays 11)

Catch 1% in iterative design, presented at OSIDays 11, 22th Nov. Bengaluru- http://2011.osidays.com/proposal/catch-1-iterative-design

Catch the 1% in iterative design (OSIDays 11)

  1. 1. CATCH THE 1% IN ITERATIVE DESIGN Presented by:- Gaurav Mishra - Lead UI Designer, OSSCube 11/23/2011 1
  2. 2. DESIGN IS AN ITERATIVE PROCESS 11/23/2011 2
  3. 3. FRONT END DESIGNING Client approved design (static) Dynamic Design 11/23/2011 3
  4. 4. Browser Engine!! ? Lets talk about Browser First! 11/23/2011 4
  5. 5. PIXEL PERFECT GAME EXPECTATION OF CLIENT FROM DESIGNER/THEMER == 11/23/2011 5
  6. 6. 100% PIXEL PERFECTION IS A LIE! So! What’s the plan? 11/23/2011 6
  7. 7. GRIDS & GUIDES 11/23/2011 &… 7
  8. 8. TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE Trace Design! TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCHTRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE MAGIC COPY PASTE TRACE TRACE SKETCH SKTECH
  9. 9. Approved Design XHTML Design (trace the design & details, in lesser iteration via using reference image on <body> or <div> container) 11/23/2011 9
  10. 10. Recipe..OH! The TECHNIQUE (page 1) Technique 1. Slice psd carefully and export the images. 2. Create a separate directory for sliced images in your code base. 3. Create the css file trace.css. 4. Pick those slice image and add them as background image to your containers #id, .classes in trace.css. 5. Start theming in your browser using reference image. Don’t forget FIREBUG or choose webkit inspector, Dragon fly or IE Developer tool bar! 11/23/2011 Continued… 10
  11. 11. TECHNIQUE… page 2 Technique…page-2 1. Designer can work on his/her design assignments, chewing it slowly into bits & pieces. While developer getting dirty with code. 2. Use sliced background image as your reference, follow them well. 11/23/2011 Continued… 11
  12. 12. TECHNIQUE… slide 3 Technique…page-3 1. For Visual QA a different eye is needed other than designer. 2. Ask QA to have an early look on the design before QA’s signals. 3. Based on feedback. Refine. And Don’t forget the cross browser check! 11/23/2011 Continued… 12
  13. 13. ADVANTAGES ADVANTAGES 1. You need not to shuffle between psd design and the actual design. Everything LIVE and trying to get ALIVE (reference image) in same plane. It is like an artist painting on a canvas. 2. Help the developer easy to remember the bits & pieces from reference image in the design (under theme development). 11/23/2011 13
  14. 14. AHH! Well that seems too cumbersome!! NO PROBLEM! 11/23/2011 14
  15. 15. Alternative Approach Alternative Approach HELLO DOCTOR! Press Print Screen of your themed page ( in browser) and do a Health check via Guides! 11/23/2011 15
  16. 16. HOW??
  17. 17. GUIDE RED! Call the Guides 11/23/2011 17
  18. 18. Or you Check Visual difference Alternative Approach Static Design & Dynamic Design screenshot overlapped. Check & Fix. 11/23/2011 18
  19. 19. Follow Grids STELLA Theme All the mentioned techniques covered & applied 11/23/2011 19 for this D7 project
  20. 20. Currently #wip 11/23/2011 20
  21. 21. Wait! We are not DONE yet! 11/23/2011 21
  22. 22. Some e.g. other than designing for web
  23. 23. SOME PATH TRACING EXAMPLES 3D http://blenderartists.org/forum/showthread.php?186653- Iron-Man-Model-edit-and-Animation! 11/23/2011 23
  24. 24. SOME PATH TRACING EXAMPLES… CRICKET! Run Rate (test match) India vs. West Indies, 2nd Test 11/23/2011 24
  25. 25. SOME PATH TRACING EXAMPLES… Satellite path telesat.com 11/23/2011 25
  26. 26. Design demand details In short: MATCH THE VISUAL IMPLUSE OF STATIC VS DYNAMIC DESIGN. (techniques already being shared) 11/23/2011 26
  27. 27. Some words of wisdom Give me six hours to chop down a tree and I will spend the first four hours sharpening the axe. ~Abraham Lincoln 11/23/2011 27
  28. 28. Some words of wisdom If you preach what you practise then your words get magical powers and can do wonders. ~ Ramakrishna (Paramahamsa) 11/23/2011 28
  29. 29. Q & A Yeah! Green Signal
  30. 30. THANK YOU! I tweet 11/23/2011 @gauravmishr 30
  • kamapreet

    Nov. 23, 2011

Catch 1% in iterative design, presented at OSIDays 11, 22th Nov. Bengaluru- http://2011.osidays.com/proposal/catch-1-iterative-design

Views

Total views

3,896

On Slideshare

0

From embeds

0

Number of embeds

1,350

Actions

Downloads

0

Shares

0

Comments

0

Likes

1

×