Published on | Prototyping: From UX to Front End — Medium Daniel E. Sandoval

A friend of mine just started as a “UX Team of One” (and Front-End Dev too!) at a startup. She asked me nicely to put together a list of tools that I use(d) in a similar position at my company.

Since it’s the end of the year, and the beginning of a new one, I figured I’d go through all of the apps, websites, tools and services that I used/visited/depended on throughout 2017 and list them out for reference throughout the new year…

Tools and Apps:

Sketch.app (+ http://sketch.land )
InVision (and the new InVision Studio!!!)
Principle.app
Figma.app
Keynote.app
Spirit
Giphy Capture (for recording quick gifs of “shit to fix”)
Gifrocket (convert everything to GIFs!!!)
Camtasia — record and edit screencasts like a pro!
Wistia’s new Soapbox product works will for this too
Skitch (for pointing out exactly what to fix)
Adobe Photoshop, Premiere, AfterEffects (and I guess the new XD product?)
IntelliJ product line (or use Atom)
Postman (for playing with APIs)
VirtualBox, Vagrant and/or Docker (stop building your apps from scratch every time)
Alfred (make hotkeys for everything!)
Nozio and Spotify (to block out the noize)

Websites and Newsletters:

http://www.sansfrancis.co
http://shortcuts.design/
https://www.productmanual.co/
https://css-tricks.com/ + https://css-tricks.com/design-resource-sites/
https://www.smashingmagazine.com/
https://www.nngroup.com/
https://www.sitepoint.com/ — They have an awesome newsletter too! https://www.sitepoint.com/versioning/
https://www.casestudy.club/
https://www.invisionapp.com/blog
99u.com
https://design.google/library/
https://airbnb.design
http://facebook.design/
https://www.reallygoodux.io/
http://www.designyourway.net/blog/inspiration/navigation-inspiration-for-mobile-user-interfaces-57-designs/
https://swipefile.io
http://uigarage.net/
https://www.thebestdesigns.com/
https://www.siteinspire.com/
http://www.webcreme.com/
https://collection.cooperhewitt.org/

Templates:

Books and Articles:

https://resilientwebdesign.com/introduction/
https://medium.com/design-voices/the-pen-is-mightier-than-the-laptop-2d057d3d5b7d (please don’t ever use myBalsamiq)
https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c?gi=31eb83426ec
https://blog.marvelapp.com/can-master-design-must-first-master-fundamentals/
http://whatusersdo.com/blog/how-psychology-principles-are-used-in-ux-design/
https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
http://gretelny.com/work/netflix/

Best of luck at your new gig, Lexie! And happy 2018 to all of you 🙂

The Designer / Developer Toolbox for 2018 was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Designer / Developer Toolbox for 2018

Cool stuff, every week

More Articles