• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Catch the 1% in iterative design (OSIDays 11)
 

Catch the 1% in iterative design (OSIDays 11)

on

  • 1,925 views

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

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

Statistics

Views

Total Views
1,925
Views on SlideShare
1,062
Embed Views
863

Actions

Likes
1
Downloads
0
Comments
1

4 Embeds 863

http://gauravmishra.com 856
http://lanyrd.com 5
http://designkreeda.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Catch the 1% in iterative design (OSIDays 11) Catch the 1% in iterative design (OSIDays 11) Presentation Transcript

    • CATCH THE 1% IN ITERATIVE DESIGN Presented by:- Gaurav Mishra - Lead UI Designer, OSSCube11/23/2011 1
    • DESIGN IS AN ITERATIVE PROCESS11/23/2011 2
    • FRONT END DESIGNING Client approved design (static) Dynamic Design11/23/2011 3
    • Browser Engine!! ? Lets talk about Browser First!11/23/2011 4
    • PIXEL PERFECT GAME EXPECTATION OF CLIENT FROM DESIGNER/THEMER ==11/23/2011 5
    • 100% PIXEL PERFECTION IS A LIE! So! What’s the plan?11/23/2011 6
    • GRIDS & GUIDES11/23/2011 &… 7
    • TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECHTRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACESKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCHTRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCHTRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACETRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACETRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACESKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCHSKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE Trace Design!TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACESKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACESKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACETRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCHTRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECHTRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACESKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCH TRACE SKETCHTRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACE TRACE SKETCHTRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCH TRACE TRACE TRACETRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACE SKETCHTRACETRACE TRACE TRACE SKETCH TRACE SKETCH TRACE TRACE SKETCH SKTECH TRACESKETCH TRACE TRACE TRACE MAGIC COPY PASTE TRACE TRACE SKETCH SKTECH
    • Approved Design XHTML Design (trace the design & details, in lesser iteration via using reference image on <body> or <div> container)11/23/2011 9
    • Recipe..OH! The TECHNIQUE (page 1) Technique1. 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
    • TECHNIQUE… page 2 Technique…page-21. 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
    • TECHNIQUE… slide 3 Technique…page-31. 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
    • ADVANTAGES ADVANTAGES1. 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
    • AHH! Well that seems too cumbersome!! NO PROBLEM!11/23/2011 14
    • 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
    • HOW??
    • GUIDE RED! Call the Guides11/23/2011 17
    • Or you Check Visual difference Alternative Approach Static Design & Dynamic Design screenshot overlapped. Check & Fix.11/23/2011 18
    • Follow Grids STELLA Theme All the mentioned techniques covered & applied11/23/2011 19 for this D7 project
    • Currently #wip11/23/2011 20
    • Wait! We are not DONE yet!11/23/2011 21
    • Some e.g. other than designing for web
    • SOME PATH TRACING EXAMPLES 3D http://blenderartists.org/forum/showthread.php?186653- Iron-Man-Model-edit-and-Animation!11/23/2011 23
    • SOME PATH TRACING EXAMPLES… CRICKET! Run Rate (test match) India vs. West Indies, 2nd Test11/23/2011 24
    • SOME PATH TRACING EXAMPLES… Satellite path telesat.com11/23/2011 25
    • Design demand details In short: MATCH THE VISUAL IMPLUSE OF STATIC VS DYNAMIC DESIGN. (techniques already being shared)11/23/2011 26
    • 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 Lincoln11/23/2011 27
    • 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
    • Q & A Yeah! Green Signal
    • THANK YOU! I tweet11/23/2011 @gauravmishr 30