Rapid Web Prototyping & Branding with Bootstrap

Rapid prototyping — what is it?
Rapid prototyping vs. Sketching or white boarding
Rapid protoyping vs Wireframing
Rapid prototyping vs. Mockups
When to use rapid prototyping
When not to use rapid prototyping
Tools and resources
Examples

Transcript

1. 1 PRIVILEGED AND CONFIDENTIAL RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP Zach Winnie, Senior Interface Designer Tampa Bay UX Meetup AUGUST 24, 2016
2. 2 PRIVILEGED AND CONFIDENTIAL AGENDA Intro Rapid prototyping — what is it? Rapid prototyping vs.  Sketching or white boarding  Wireframing  Mockups When to use rapid prototyping When not to use rapid prototyping Tools and resources Examples and possibly live coding RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
3. 3 PRIVILEGED AND CONFIDENTIAL WHO ARE YOU & WHY SHOULD I LISTEN TO YOU? UX  Research, strategy, sketches, wireframes, paper prototyping, information architecture, flows, usability, user feedback, accessibility UI  Photoshop (Artboards & Generator), Illustrator, InDesign, Acrobat, Sketch, branding, print Front End Design & Development  HTML, CSS, JS, jQuery, Node, ReactJS, Grunt & Gulp, style guides, linting, SonarQube, Selenium & functional testing, browser testing & compatibility, WordPress/Sitefinity/other CMS’s, MVC .NET, PHP, MySQL, SQL, Git Agile & Scrum  Sometimes scrum master & sometimes fill-in product owner Mentor to 3 other Interface teammates and many more developers RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
4. 4 PRIVILEGED AND CONFIDENTIAL RAPID PROTOTYPING — WHAT IS IT? Quickly moving from a blank screen to a visually working website or web app within a browser Validating ideas, visuals, branding, interactions, animations, and system states within the browser During rapid prototyping you will be creating a website or web app that can be seen in the browser by stakeholders, developers, and other designs The whole point is to move quickly, designing software faster and iteratively, and obtaining feedback from stakeholders At the end of rapid prototyping you should have a mostly functional website or web app that can be used by application developers to populate with dynamic data from a server or API RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
5. 5 PRIVILEGED AND CONFIDENTIAL RAPID PROTOTYPING VS SKETCHING OR WHITE BOARDING You need to start somewhere and sketching & white boarding is cheaper and faster than rapid prototyping RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP Sketching/white boarding lets you explore a variety of ideas quickly, helps brainstorm alternative solutions, and fosters discussions Sketching/white boarding can be a group activity, prototyping is not Sketching or white boarding works very well as the first step toward rapid prototyping
6. 6 PRIVILEGED AND CONFIDENTIAL RAPID PROTOTYPING VS. WIREFRAMING Wireframing refers to digitally generated visuals created in programs like Balsamiq, OmniGraffle, Sketch, or other web based tools RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP Are usually done quickly by using widget libraries, using only greyscale colors, and normally have sketch look & feel to denote low fidelity/not final result Higher fidelity & easier to understand than sketching If presenting ideas formally to a client, wireframing output is better than presenting sketches or images of white boards
7. 7 PRIVILEGED AND CONFIDENTIAL RAPID PROTOTYPING VS. MOCKUPS Mockups refer to highly detailed visuals that include photography and stylized bitmap effects, and is usually done in Photoshop or Sketch Mockups are (usually) slower to iterate & take as long as rapid prototyping Mockups will still require a front end development phase Mockups promote pixel-perfection and unimportant details Mockups are time consuming to generate multiple responsive breakpoints Tools like InVision can be used to help show flow & emulate interaction Why not take a screen capture of a prototype and use it as a mockup?  Awesome Screenshot (Chrome & Firefox): https://www.awesomescreenshot.com/  Greenshot: http://getgreenshot.org/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
8. 8 PRIVILEGED AND CONFIDENTIAL WHEN TO USE RAPID PROTOTYPING You have a basic to good understanding of HTML, CSS, & some JS/jQuery You need to show how a site will respond at multiple breakpoints You need to show visuals, interactivity, and animations for websites You need to emulate a user’s flow through several screens Designers and stakeholders (product owners, clients, etc.) have a very clear and mutual understanding of what needs to be & will be prototyped You need to get closer to the final product sooner You need to show varying, real-world data You’re working in an iterative environment RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
9. 9 PRIVILEGED AND CONFIDENTIAL WHEN NOT TO USE RAPID PROTOTYPING You’re not strong with HTML, CSS, or JS/jQuery You’re trying to prototype a native app Your stakeholder wants to see pixel perfection Your stakeholder isn’t web savvy Your website or web app is very simple with only a few screens and a limited number of states Responsive, interactivity, and animations aren’t needed or wanted Design by committee C-level swoop & poop RAPID PROTOTYPING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
10. 10 PRIVILEGED AND CONFIDENTIAL JUST REMEMBER… Use the right tool for the job Don’t rush into rapid prototyping RAPID PROTOTYPING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
11. 11 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: BOOTSTRAP Why use it?  Free user testing & updates  Common components ready-to-go  Customizable & extended Alternatives  Foundation: http://foundation.zurb.com  Semantic UI: http://semantic-ui.com  Pure.css: http://purecss.io RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
12. 12 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: BOOTSTRAP Examples using Bootstrap under the hood  http://www.voltairengineers.com/  http://lykesinsurance.com/  http://quala.us.com/  http://www.bhappeals.com/  http://www.fairwarning.com/  https://www.allprocorp.com  http://www.smithmicro.com/  http://mkt-strat.com/  http://focusonfellows.com/  http://www.stavrosinstitute.org/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
13. 13 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: BASIC Bootstrap: http://getbootstrap.com/ IDE or text editor  Atom: https://atom.io/  Visual Studio Code: https://code.visualstudio.com/  Coda: https://panic.com/coda/  Dreamweaver: http://www.adobe.com/products/dreamweaver.html HTML5 Boilerplate: https://html5boilerplate.com/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
14. 14 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: BASIC Bootstrap Theming  http://paintstrap.com/  http://www.stylebootstrap.info/  http://getbootstrap.com/customize/  http://bootswatchr.com/ Bootstrap Interface Builders  LayoutIt! http://www.layoutit.com/  Bootply: http://www.bootply.com/  Brix.io: http://brix.io/  Webflow: https://webflow.com/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
15. 15 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: INTERMEDIATE Webfonts  Google Fonts: https://fonts.google.com/  TypeKit: https://typekit.com/  Font Squirrel: https://www.fontsquirrel.com/tools/webfont-generator Icon fonts  Font Awesome: http://fontawesome.io/  Octicons: https://octicons.github.com/  IcoMoon: https://icomoon.io/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
16. 16 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: INTERMEDIATE Photoshop Generator  Automatically export JPG, PNG, or GIF files when making changes & saving a PSD  Tutorial: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html Avocode: https://avocode.com/home/  Get CSS, export image assets, get dimensions, share designs from PSD & Sketch files CSSHat: https://csshat.com/  Get CSS from a layer in Photoshop RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
17. 17 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: ADVANCED Bootstrap SASS: https://github.com/twbs/bootstrap-sass Compilers  Prepos: https://prepros.io/  GhostLab: http://www.vanamco.com/ghostlab/  Koala: http://koala-app.com/  CodeKit: https://incident57.com/codekit/  Compass: http://compass-style.org/ Real Favicon Generator: http://realfavicongenerator.net/ Reflector: http://www.airsquirrels.com/reflector/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
18. 18 PRIVILEGED AND CONFIDENTIAL TOOLS AND RESOURCES: ADVANCED Style Guides & Kitchen Sink  http://www.monolinea.com/projects/styleguide/  https://getbootstrap.com/examples/theme/  http://styleguides.io/ Git & GitHub: https://github.com/  GitKraken: https://www.gitkraken.com/  SourceTree: https://www.sourcetreeapp.com/ Hosting  https://pages.github.com/ FTP/FileZilla: https://filezilla-project.org/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
19. 19 PRIVILEGED AND CONFIDENTIAL EXAMPLES Mercury Pipeline Status  http://www.mercurynewmedia.com/pipelinestatus/v1/  http://www.mercurynewmedia.com/pipelinestatus/v2/  http://www.mercurynewmedia.com/pipelinestatus/v2.1/  http://www.mercurynewmedia.com/pipelinestatus/v3/  http://www.mercurynewmedia.com/pipelinestatus/v3/detail.html  http://www.mercurynewmedia.com/pipelinestatus/v3.1/  http://www.mercurynewmedia.com/pipelinestatus/v3.1/detail.html  http://www.mercurynewmedia.com/pipelinestatus/v3.2/  http://www.mercurynewmedia.com/pipelinestatus/v3.2/detail.html RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
20. 20 PRIVILEGED AND CONFIDENTIAL LIVE CODING Using & Setting Up Prepos HTML5 Boilerplate Bootstrap 3 HTML Kitchen Sink Bootstrap 3 SASS  Changing colors  Changing look & feel  Changing other global styling Using & Setting Up GhostLab RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
21. 21 PRIVILEGED AND CONFIDENTIAL PARTING WORDS Email: zwinnie@mercurynewmedia.com Twitter: @zachwinnie More about Mercury: http://www.mercurynewmedia.com/ Join me at Mercury: http://www.mercurynewmedia.com/careers  Interface Designer: http://goo.gl/IVBGUa  Senior Front End Developer: http://goo.gl/nSxbGY Mercury’s Twitter: @mercurynewmedia Mercury’s Blog: http://www.mercurynewmedia.com/blog RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
22. 22 PRIVILEGED AND CONFIDENTIAL QUESTIONS? RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP
23. 23 PRIVILEGED AND CONFIDENTIAL REFERENCES http://www.awwwards.com/my-process-and-tools-for-rapid-website-prototyping.html https://webflow.com/blog/always-choose-prototypes-over-mockups http://blog.alexdevero.com/html-rapid-prototyping-facts-need-know/ https://speakerdeck.com/bermonpainter/death-to-wireframes-long-live-rapid-prototyping http://www.uxforthemasses.com/rapid-prototyping/ http://blog.teamtreehouse.com/rapidly-prototype-websites https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/ RAPID PROTOTYPING & BRANDING WITH BOOTSTRAP WITH ZACH WINNIE – TAMPA BAY UX MEETUP