Designing ! !"#!$%&'()*+,-%% - - PowerPoint PPT Presentation

Ash Ashutosh

• sh Kuma

mar, Yahoo!

• o! Desig

esign!

!"#!$%&'()*+,-%% #-.-/'0-,%1'2(-,-23-%4564%7+28+/',-%

Designing!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

!"#$%&'()*+,"%-'*.$-)"/)01"##2"3&14+*" !"5-'*.$*$."6'-)"789-)*-$:-'"/0)";;"<-+)'"" ! "=)*$:*9+,"#$(-)+:>0$"5-'*.$-)"*$"?+@00A"

"""""""""""""+'@&(0'@BCCD<+@00E:01"

About me...!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

what is “good to great”!

"#$%&'()*(+,#-.)$+/+(./0#-$1(2)3(.45,1( (678()*(9-)&-/../:;#(+,#-.)$+/+$(/-#( (-/-#;<()-('#=#-(9-)&-/..#>?( ( (@5)$(+)(9-)&-/.(%+(-%&,+A(3#(,/=#(+)( ( (&%=#(+,#(+,#-.)$+/+(/'(#B/5+(( ( ( ($5,#>4;#?(

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

“ g

• d

t

• g

r e a t ” !

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Minimalistic is NOT Great!

C+/-+(D).9;#BA(E,#'(C%.9;%*<( "#$%&'(+,#(+-##A(/$(3#;;(/$(F)-#$+( Flipping through layers in Photoshop just doesn’t offer the same perspective as seeing all the designs side by side.! Create something "simple" is NOT becoming afraid to add anything to the page. The resulting designs are usually pretty bland.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Great Design – many perspectives!

To the designer, !

“great design is beautiful design. A significant amount of effort must be placed into making the product attractive.”!

To the client, !

“great design is effective. It must bring in customers and meet the goals.”!

Finally, to the user,!

“great design is functional. It’s easy to read, easy to use and easy to get what was promised.”!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Characteristics of Great Interfaces!

!Clarity"

Avoids ambiguity by making everything clear through language, flow, hierarchy and metaphors for visual elements. !

!Concision"

Too many things on the screen slows down users… challenge is to make it concise and clear at the same time.!

!Familiarity"

Something is familiar when you recall a previous encounter you’ve had. Use real"life metaphors to communicate meaning.!

!Responsiveness"

First, responsiveness means speed; second it provides good feedback.!

!Consistency"

Keeping interface consistent across the application to let users recognize and recall.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Attributes of Great Designs!

seconds you need to understand this concept?!

7(

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Grid separates Density from Clutter!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Grid creates a sense of order !

H e l p s i n e s t a b l i s h i n g h i e r a r c h y , r h y t h m a n d c

• n

s i s t e n c y . !

The variable grid system is a quick way to generate an underlying CSS grid for screens. !

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Grid separates Density from Clutter!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Fluid Grid for Cross Device Support !

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Visual Consistency!

Con

• nsist

sisten ent Ima Imager ery!

Does it bother you when the style of screens shifts from page to page? ! Make sure visually prominent elements are stylistically in harmony is a pretty powerful trick for clean appearance. !

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Consistent Content Hierarchy!

Defin efine e the e fon

• nt hier

ierarch rchy y usin sing CSS"

Use font size, line height, padding, margin properties Optimally.! Separate out Frontend team from rest.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Color Correction!

RAW Color

• lor Cor
• rrect

rected ed!

Ensure images are color corrected and design the object in its actual context.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Play with Gradients!

Make e Subtle le Use se of

• f

Gradien ients!

Gradient cut down the boredom and guide eyes to a focused area AND form natural visual interest.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Use Subtle Textures!

Text exture re is is becomin ecoming in integ egral l part of

• f desig

esign!

More than being a trend! it’s now a simple and effective way to add depth to screen.! It increases the effectiveness of content consumption.! Guides the user’s eye and emphasize the importance of key elements.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Power of Textures!

Text extures res crea create e in interest erest!

Rev evea eal l the e fin fine e ch charact cter er!

• f
• f desig

esign la language! Comm

• mmunica

icate e messa message e ! wit with power er and emp emphasis sis! Fill Fill wh whit itesp espaces ces wit with visu isual l in interest erest! Red educe ce fla flatness ess and bla land look look.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Detailed craftsmanship!

In Innovate e wh while ile ex execu ecutin ing det etails ils!

One px border (in CSS) looks thicker !

• n idevices. !

There is no way to define .5px so…! Here comes pseudo design techniques. !

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Power of craftsmanship!

Fin Fine e det etails ils will will brin ing the e ch charact cter er to

• the

e desig esign.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Typography!

For For con conten ent rich ich sit sites es! Typ ypog

• graphy

y ca can alon lone e be e ! Desig esign dif ifferen erentia iator

• r!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Leveraging Typography!

Establish a clear hierarchy to distinguish the headings from content.! Use different font/all caps/large size for the titles and subtitles. !

Go beyond Arial…..Play with Font Families…!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Color Schemes!

G%&,+#-(=/-%/H)'( %$(3,%+#($I4/-#( /+(J78()9/5%+<(( E,#(>/-K#-()'#( %$(/(:;/5K($I4/-#( /+(L78()9/5%+<?(

M4%5K(E#5,'%I4#(

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Using Contrast!

E<9)&-/9,%5( D);)-(

E,#(,#/>#-(/'>(*))+#-(,/=#(>/-K(:/5K&-)4'>(5);)-$A(3,%;#(+,#( 5)'+#'+(/-#/(%$(3,%+#?(E,%$(5;#/-;<(#$+/:;%$,#$(+,#(%.9)-+/'5#()*( +,#(5)'+#'+?(

N%&(,#/>%'&$( +)(5/+5,( /0#'H)'(/'>( >-/3(4$#-$( +)3/->$(( $./;;#-( 9/-/&-/9,$?( PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Whitespace as design element!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Whitespace in Web Apps!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Simplicity as design Character!

Now time to apply Principles….! Play with All but use selected ones Prominently.! Its like…movies…can’t have suspense, action, horror all together. !

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Using Real Metaphors!

SAP Apps has unique character using metal as metaphor: ! !"#$%&'()*%+,#-&*)-(+,#( 5)'+#'+(/-#/(O(.,)/&0+1%& 0)12"%.&3%$,+&*)-(+,#( 3%'>)3(9#-%.#+#-?(( The contrasts of light and dark, sharp and rounded corners as well as the thickness and feel of each material expresses the inherent quality.!

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Outstanding Apps !

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor

Tha hank You

• u

!"#$%&"#'(()*!#&&+,&-.

/0123%"4.5!#&&6.7-!81"9.:;3,'109.<&&8;1.7-!81"9.7,&=!0,#3>1.

PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor PDF compression, OCR, web optimization using a watermarked evaluation copy of CVISION PDFCompressor