Catch the 1% in iterative design (OSIDays 11)

CATCH THE 1% IN ITERATIVE DESIGN
Presented by:-
Gaurav Mishra - Lead UI Designer, OSSCube

11/23/2011 1

DESIGN IS AN ITERATIVE PROCESS

11/23/2011 2

FRONT END DESIGNING
Client approved design (static)

Dynamic Design

11/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
&
GUIDES
11/23/2011
&… 7

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

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)
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

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

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

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

AHH! Well that seems too
cumbersome!!
NO PROBLEM!

11/23/2011 14

Alternative Approach
HELLO DOCTOR!

Press Print Screen of your themed page ( in
browser) and do a Health check via Guides!

11/23/2011 15

GUIDE RED!
Call the Guides

11/23/2011 17

Or you Check Visual difference
Static
Design
&
Dynamic
Design
screenshot
overlapped.
Check & Fix.

11/23/2011 18

Follow Grids

STELLA Theme

All the mentioned techniques covered & applied
11/23/2011 19
for this D7 project

Currently #wip

11/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 Test
11/23/2011 24

SOME PATH TRACING EXAMPLES…

Satellite path

telesat.com
11/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 Lincoln

11/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

THANK YOU!
I tweet
11/23/2011 @gauravmishr 30

Catch the 1% in iterative design (OSIDays 11)

Recommandé

Recommandé

Contenu connexe

Similaire à Catch the 1% in iterative design (OSIDays 11)

Similaire à Catch the 1% in iterative design (OSIDays 11) (20)

Dernier

Dernier (20)

Catch the 1% in iterative design (OSIDays 11)