Designing ! !"#!$%&'()*+,-%% #-.-/'0-,%1'2(-,-23-%4564%7+28+/',-% Ash Ashutosh osh Kuma mar, Yahoo! oo! 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
About me... ! !"#$%&'()*+,"%-'*.$-)"/)01"##2"3&14+*" !"5-'*.$*$."6'-)"789-)*-$:-'"/0)";;"<-+)'"" ! "=)*$:*9+,"#$(-)+:>0$"5-'*.$-)"*$"?+@00A" """""""""""""+'@&(0'@BCCD<+@00E:01" 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
! ” t a e r g o t d o o g “ 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;%*<( Create something "simple" is NOT becoming afraid to add anything to the page. The resulting designs are usually pretty bland. ! "#$%&'(+,#(+-##A(/$(3#;;(/$(F)-#$+( Flipping through layers in Photoshop just doesn’t offer the same perspective as seeing all the designs side by side. ! 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 ! 7( seconds you need to understand this concept? ! 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 ! g n h i s b l i a t e s n i p s l e H d n a m h t y r h h y , c r a e r i h . ! c y n e t i s n s o c 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 onsist 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 ont 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 olor Cor orrect 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 of 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 of 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 ! of of desig esign la language ! Comm ommunica 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 ! on 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 o 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 ography y ca can alon lone e be e ! Desig esign dif ifferen erentia iator or ! 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
Recommend
More recommend
