<p>Published on <a href="https://blog.prototypr.io/the-designer-developer-toolbox-for-2018-10395afb4e07?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Daniel E. Sandoval </p>
<p>A friend of mine just started as a <a href="http://rosenfeldmedia.com/books/the-user-experience-team-of-one/">“UX Team of One”</a> (and Front-End Dev too!) at a startup. She asked me <em>nicely</em> to put together a list of tools that I use(d) in a similar position at <a href="http://www.discuss.io">my company</a>.</p>
<p>Since it’s the end of the year, and the beginning of a new one, I figured I’d go through <strong>all of the apps, websites, tools and services that I used/visited/depended on throughout 2017</strong> and list them out for reference throughout the new year…</p>
<h4>Tools and Apps:</h4>
<ul>
<li><a href="https://www.sketchapp.com/">Sketch.app</a> (+ <a href="http://sketch.land">http://sketch.land</a> )</li>
<li><a href="https://www.invisionapp.com/">InVision</a> (and the new <a href="https://www.invisionapp.com/studio">InVision Studio</a>!!!)</li>
<li><a href="http://principleformac.com/">Principle.app</a></li>
<li><a href="https://www.figma.com/downloads">Figma.app</a></li>
<li><a href="https://www.apple.com/keynote/">Keynote.app</a></li>
<li><a href="https://github.com/spirit/spirit">Spirit</a></li>
<li><a href="https://giphy.com/apps/giphycapture">Giphy Capture </a>(for recording quick gifs of “shit to fix”)</li>
<li><a href="http://www.gifrocket.com/">Gifrocket</a> (convert everything to GIFs!!!)</li>
<li><a href="https://www.techsmith.com/video-editor.html">Camtasia </a>— record and edit screencasts like a pro!</li>
<li><a href="https://wistia.com/">Wistia</a>’s new <a href="https://wistia.com/soapbox">Soapbox</a> product works will for this too</li>
<li><a href="https://evernote.com/products/skitch">Skitch</a> (for pointing out exactly what to fix)</li>
<li><a href="https://www.adobe.com/creativecloud.html">Adobe Photoshop, Premiere, AfterEffects</a> (and I guess the new XD product?)</li>
<li><a href="https://www.jetbrains.com/">IntelliJ product line</a> (or use <a href="https://atom.io/">Atom</a>)</li>
<li><a href="https://www.getpostman.com/">Postman</a> (for playing with APIs)</li>
<li><a href="https://www.virtualbox.org/">VirtualBox</a>, <a href="https://www.vagrantup.com/">Vagrant</a> and/or <a href="https://www.docker.com/">Docker</a> (stop building your apps from scratch every time)</li>
<li><a href="https://www.alfredapp.com/">Alfred</a> (make hotkeys for everything!)</li>
<li><a href="http://noiz.io/">Nozio</a> and <a href="https://www.spotify.com/">Spotify</a> (to block out the noize)</li>
</ul>
<h4>Websites and Newsletters:</h4>
<ul>
<li><a href="http://www.sansfrancis.co">http://www.sansfrancis.co</a></li>
<li><a href="http://shortcuts.design/">http://shortcuts.design/</a></li>
<li><a href="https://www.productmanual.co/">https://www.productmanual.co/</a></li>
<li><a href="https://css-tricks.com/">https://css-tricks.com/</a> + <a href="https://css-tricks.com/design-resource-sites/">https://css-tricks.com/design-resource-sites/</a></li>
<li><a href="https://www.smashingmagazine.com/">https://www.smashingmagazine.com/</a></li>
<li><a href="https://www.nngroup.com/">https://www.nngroup.com/</a></li>
<li><a href="https://www.sitepoint.com/">https://www.sitepoint.com/</a> — They have an awesome newsletter too! <a href="https://www.sitepoint.com/versioning/">https://www.sitepoint.com/versioning/</a></li>
<li><a href="https://www.casestudy.club/">https://www.casestudy.club/</a></li>
<li><a href="https://www.invisionapp.com/blog">https://www.invisionapp.com/blog</a></li>
<li><a href="http://99u.com">99u.com</a></li>
<li><a href="https://design.google/library/">https://design.google/library/</a></li>
<li><a href="https://airbnb.design">https://airbnb.design</a></li>
<li><a href="http://facebook.design/">http://facebook.design/</a></li>
<li><a href="https://www.reallygoodux.io/">https://www.reallygoodux.io/</a></li>
<li><a href="http://www.designyourway.net/blog/inspiration/navigation-inspiration-for-mobile-user-interfaces-57-designs/">http://www.designyourway.net/blog/inspiration/navigation-inspiration-for-mobile-user-interfaces-57-designs/</a></li>
<li><a href="https://swipefile.io">https://swipefile.io</a></li>
<li><a href="http://uigarage.net/">http://uigarage.net/</a></li>
<li><a href="https://www.thebestdesigns.com/">https://www.thebestdesigns.com/</a></li>
<li><a href="https://www.siteinspire.com/">https://www.siteinspire.com/</a></li>
<li><a href="http://www.webcreme.com/">http://www.webcreme.com/</a></li>
<li><a href="https://collection.cooperhewitt.org/">https://collection.cooperhewitt.org/</a></li>
</ul>
<h4>Templates:</h4>
<ul>
<li><a href="https://energy.gov/eere/communicationstandards/user-experience-research-templates-and-examples">https://energy.gov/eere/communicationstandards/user-experience-research-templates-and-examples</a></li>
<li><a href="https://standards.usa.gov/components/">https://standards.usa.gov/components/</a></li>
<li><a href="http://www.mentorcg.com/resources/">http://www.mentorcg.com/resources/</a></li>
<li><a href="https://gridprint.in">https://gridprint.in</a></li>
<li><a href="http://sketchsheets.com/">http://sketchsheets.com/</a></li>
</ul>
<h4>Books and Articles:</h4>
<ul>
<li><a href="https://resilientwebdesign.com/introduction/">https://resilientwebdesign.com/introduction/</a></li>
<li><a href="https://medium.com/design-voices/the-pen-is-mightier-than-the-laptop-2d057d3d5b7d">https://medium.com/design-voices/the-pen-is-mightier-than-the-laptop-2d057d3d5b7d</a> (please don’t ever use myBalsamiq)</li>
<li><a href="https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c?gi=31eb83426ec">https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c?gi=31eb83426ec</a></li>
<li><a href="https://blog.marvelapp.com/can-master-design-must-first-master-fundamentals/">https://blog.marvelapp.com/can-master-design-must-first-master-fundamentals/</a></li>
<li><a href="http://whatusersdo.com/blog/how-psychology-principles-are-used-in-ux-design/">http://whatusersdo.com/blog/how-psychology-principles-are-used-in-ux-design/</a></li>
<li><a href="https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php">https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php</a></li>
<li><a href="http://gretelny.com/work/netflix/">http://gretelny.com/work/netflix/</a></li>
</ul>
<p>Best of luck at your new gig, Lexie! And happy 2018 to all of you 🙂</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=10395afb4e07" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/the-designer-developer-toolbox-for-2018-10395afb4e07">The Designer / Developer Toolbox for 2018</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


The Designer / Developer Toolbox for 2018

Top Stories