5 Things Every Web Designer Should be Doing Right Now

Download 5 Things Every Web Designer Should be Doing Right Now

Post on 15-Jul-2015

113 views

Category:

Design

8 download

TRANSCRIPT

RIGHT NOWTHINGS EVERY WEB DESIGNER SHOULD BE DOING@PaulTrani5TTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani2FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe SLIDES: #FITCtorontoTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani3DIFFERENT TYPES OF DESIGNERS3The Artist Designer CSS DesignerUI/UX The DeseloperTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani4GETS SH*T DONETHE RIGHT WAY TO DESIGNIS THE ONE THATTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniDONT TRY TO BE ORIGINAL5JUST TRY TO BE GOOD.PAUL RANDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani6BE GOODHOW TOTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani7THE 5 THINGSTTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani8(RESPONSIVE DESIGN)1 CREATE USING A GRIDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani9GRIDS ORGANIZE CONTENT.- CAPTAIN OBVIOUSUSE A GRIDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniFOUNDATION OF DESIGN10Design as we know it was born partly in response to the Industrial Revolution.English Illustrated Magazine, 1884 shows designs were suddenly competing for attention.USE A GRIDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniFOUNDATION OF DESIGN11Design as we know it was born partly in response to the Industrial Revolution.English Illustrated Magazine, 1884 shows designs were suddenly competing for attention.USE A GRIDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniResponsive Grid SystemUnsemanticGolden Grid System1200 Grid System960 Grid SystemPhotoshopGRID-BASED DESIGN12USE A GRIDWirifyTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani13USE A GRIDGOLDEN RATIO1 x 1.618THINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniResponsive Grid SystemUnsemanticGolden Grid System1200 Grid System960 Grid SystemPhotoshopGOLDEN RATIO14USE A GRID1 x 1.618THINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniGRID SYSTEMS15Photoshop Unsemantic Golden Grid System 1200 Grid System 960 Grid System Responsive Grid SystemUSE A GRIDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani16TRY TO BE GRIDNOT BORINGUSE A GRIDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniTRY TO BE GRIDNOT BORING17USE A GRIDTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniDESIGNING WITH A GRID18USE A GRIDLAYOUT GUIDES SMART GUIDES LINKED ASSETS THINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani19(WIREFRAME/PROTOTYPE)2MAKE MESTAKES EARLYTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani20Low-fidelity Wireframe High-fidelity PrototypeWIREFRAME/PROTOTYPETHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniChanges Made06121824303642485460667278849096Web DesignWith a Wireframe21WIREFRAME/PROTOTYPEMinimal ChangesTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniWithout a Wireframe22Changes Made06121824303642485460667278849096Web DesignWIREFRAME/PROTOTYPETHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniChanges Made06121824303642485460667278849096Web DesignWithout a Wireframe23Buttload of ChangesWIREFRAME/PROTOTYPEI didnt realize our product line was this confusing.We have too many options in our navigation: our key pages are getting lost.Our call to action is weak.Our Contact form takes too long to fill out.Were talking too much about ourselves and not enough about our customer.Our most important product photos are below the fold: nobodys going to see them.We really dont know what were doing.THINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani24Low-fidelity Wireframe High-fidelity PrototypeWIREFRAME/PROTOTYPETHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani25Low-fidelity Wireframe High-fidelity PrototypeWIREFRAME/PROTOTYPEhttp://www.axure http://muse.adobe.comAdobe Comp CC https://marvelapp.comhttp://www.invisionapp.com THINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani26(AND SPEND MORE TIME OUTSIDE)3USE A FRAMEWORKTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani27USE A FRAMEWORKGoogle Web Starter Kit Zurb Foundation v5+ UIkit Semantic UI Gumby FrameworkBootstrapTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani28EVEN FOR ICONS4USE WEB FONTSTTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniTYPOGRAPHY29CONVEY INFORMATION IN WRITINGHAS ONE PLAIN DUTY BEFORE IT AND THATS TOEMIL RUDERWEB FONTSTTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani30WEB FONTST(roll your own) Typekit Sky FontsDESKTOP USEWEB FONTSHOSTED SERVICESTypekit Google Fonts Font Squirrel THINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani31WEB FONTSWEB FONTSTTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniRESPONSIVE TYPOGRAPHY32MEANS LEGIBILITY EVERYWHEREWEB FONTSTTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniUSE FONTS33FOR IC NSWEB FONTSTTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani34ICON FONTSWEB FONTSTFONTAWESOME ICOMOON scalable vector icons that can instantly be customizedTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani35RESPONSIVELY5USE IMAGERYTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniUSE IMAGERY36WITH VISUAL INTERESTTO CONVEY INFORMATIONIMAGERYTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTraniRASTER/BITMAP: GIF, JPG, PNG, SVGVECTOR: SVG, ICON FONTS, HTML CANVAS 37IMAGERYCREATING IMAGERYSKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATORTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani38IMAGERYCREATING IMAGERYSKETCH PIXELMATOR GIMPPHOTOSHOPILLUSTRATORTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani39IMAGERYCREATING IMAGERYPHOTOSHOPILLUSTRATORALIGN TO PIXEL GRID SAVE AS SVG CSS PROPERTIESEXTRACT ASSETS EXTRACT IN BROWSER COPY CSSMARKETTHINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani40IMAGERYANIMATED SVGSNAP.SVGAND NOWPLEASE STOPTHINGS EVERY WEB DESIGNER SHOULDNT BE DOING5THINGS EVERY WEB DESIGNER SHOULD BE DOING5@PaulTrani44THANK YOU!FOLLOW ME: @PAULTRANI Sr. Creative Cloud Evangelist, Adobe SLIDES: #FITCtoronto