Uploaded byGaurav Mishra
Catch the 1% in iterative design (OSIDays 11)
The document discusses iterative design in front-end development, emphasizing the importance of collaboration between designers and developers for achieving pixel-perfect results. It outlines practical techniques for slicing images, creating CSS references, and ensuring visual quality through early QA checks. Additionally, it highlights the advantages of live design work and provides insights on handling both static and dynamic designs effectively.
![[BROCHURE] Italy Tour Project | @SlideON](https://cdn.slidesharecdn.com/ss_thumbnails/brochure8-251215152319-2805af68-thumbnail.jpg?width=640&height=640&fit=bounds)
Catch the 1% in iterative design (OSIDays 11)
- 1. CATCH THE 1%IN ITERATIVE DESIGN Presented by:- Gaurav Mishra - Lead UI Designer, OSSCube 11/23/2011 1
- 2. DESIGN IS ANITERATIVE PROCESS 11/23/2011 2
- 3. FRONT END DESIGNING Client approved design (static) Dynamic Design 11/23/2011 3
- 4. Browser Engine!! ? Lets talk about Browser First! 11/23/2011 4
- 5. PIXEL PERFECT GAME EXPECTATION OF CLIENT FROM DESIGNER/THEMER == 11/23/2011 5
- 6. 100% PIXEL PERFECTIONIS A LIE! So! What’s the plan? 11/23/2011 6
- 7. GRIDS & GUIDES 11/23/2011 &… 7
- 8. TRACE TRACE TRACETRACE 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. 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. 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. 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. 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. 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. AHH! Well thatseems too cumbersome!! NO PROBLEM! 11/23/2011 14
- 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.
- 17. GUIDE RED! Call the Guides 11/23/2011 17
- 18. Or you CheckVisual difference Alternative Approach Static Design & Dynamic Design screenshot overlapped. Check & Fix. 11/23/2011 18
- 19. Follow Grids STELLA Theme All the mentioned techniques covered & applied 11/23/2011 19 for this D7 project
- 20.
- 21. Wait! We are not DONE yet! 11/23/2011 21
- 22. Some e.g. otherthan designing for web
- 23. SOME PATH TRACINGEXAMPLES 3D http://blenderartists.org/forum/showthread.php?186653- Iron-Man-Model-edit-and-Animation! 11/23/2011 23
- 24. SOME PATH TRACINGEXAMPLES… CRICKET! Run Rate (test match) India vs. West Indies, 2nd Test 11/23/2011 24
- 25. SOME PATH TRACINGEXAMPLES… Satellite path telesat.com 11/23/2011 25
- 26. Design demand details In short: MATCH THE VISUAL IMPLUSE OF STATIC VS DYNAMIC DESIGN. (techniques already being shared) 11/23/2011 26
- 27. Some words ofwisdom 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. Some words ofwisdom If you preach what you practise then your words get magical powers and can do wonders. ~ Ramakrishna (Paramahamsa) 11/23/2011 28
- 29. Q & A Yeah! Green Signal
- 30. THANK YOU! I tweet 11/23/2011 @gauravmishr 30