My Design and Development Setup - Fall 2017

My day-to-day arsenal of tools

I've spent a great deal of time collecting what I would like to call my ideal setup for my design and development workflow. Everything from hardware, software, and even peripherals is important to make my output that much better when works need to be done.

To break up my video series marathon a bit I figured I would share my design and development setup openly on a new screencast/vlog. Below is a long list of my gear. You're welcome to ask me questions regarding any of it as I won't go into great detail of each here but rather in the video so be sure to watch.

Chair

Steelcase Gesture

Probably the most overlooked tool in a designer or developer arsenal is the chair they sit in. I went many years sitting in an uncomfortable chair. My back is still barking at me at times as a result. I highly recommend spending the extra money on a quality chair. Do your research, read reviews, and budget accordingly. It's truly worth it.

I was lucky enough to get a huge discount through a supplier I came in contact with through my sister, who is an interior designer. I picked what's called the Steelcase Gesture.

Computer

I've used primarily Macintosh computers for the length of my career thus far. Switching away and back to PC sounded terrible a few years ago. Today, it doesn't sound all too bad. Why is this? For starters, Apple seems to be paying more attention to marketing rather than producing high-quality software and hardware they are famous for. What I'm seeing today seems like a big push for higher earnings rather than making truly innovative and user-friendly computers and devices. My brand new MacBook Pro crashed on day two of ownership. You could say I'm concerned.

All that aside, I still love Apple computers. I use Mac OS High Sierra today. The only catch is I run it on a PC I built myself. Alongside my Hackintosh install I also run Windows 10 which is mostly dedicated to gaming and what will soon be V.R. Pretty excited to get going with that!

Building a PC / Hackintosh

My first experience with building a hackintosh was quite pleasant. It is a little tricky to get everything working at the start but you start to learn a lot as you go. I mostly had trouble with video/audio compatibility but luckily everything worked itself out. I could write many articles on the subject of building a PC but I won't bore you with that much content.

The main reason I built mine in the first place was to be able to use a 34" curved monitor. As silly as it sounds, I simply wanted to get rid of my two-screen setup and try for a larger single screen avoiding that ugly bezel in the middle of my sight. After a bit of research, I realized any Apple device minus the Mac Pro wouldn't work and I didn't really want to spend that much money on a trash can.

After quite a bit of research and searches on YouTube, I figured out I could get away with building my own mac. A fantastic website and resource for doing this is called https://www.tonymacx86.com/. If you or someone you know is interested in building your own machine, I highly recommend you go to that site and spend some time on it. I followed their guides to create the equivalent of a higher-end iMac with the power of a Mac Pro under the hood for about half the cost of a brand new Apple device.

You can view my part list here: https://pcpartpicker.com/user/justalever/saved/RyxGXL

PCPartPicker part list / Price breakdown by merchant

Type	Item	Price
CPU	Intel - Core i7-6700K 4.0GHz Quad-Core Processor	$309.99 @ SuperBiiz
CPU Cooler	Corsair - H60 54.0 CFM Liquid CPU Cooler	$64.99 @ Amazon
Motherboard	Gigabyte - GA-Z170X-UD5 TH ATX LGA1151 Motherboard
Memory	Crucial - Ballistix Sport LT 16GB (2 x 8GB) DDR4-2400 Memory	$153.95 @ Amazon
Storage	Samsung - 850 EVO-Series 500GB 2.5" Solid State Drive	$169.88 @ OutletPC
Storage	Seagate - Barracuda 2TB 3.5" 7200RPM Internal Hard Drive	$71.89 @ OutletPC
Video Card	EVGA - GeForce GTX 980 Ti 6GB Video Card
Case	Corsair - Carbide Series 300R Windowed ATX Mid Tower Case	$82.46 @ Newegg
Power Supply	Corsair - RMx 650W 80+ Gold Certified Fully-Modular ATX Power Supply	$99.99 @ Newegg
Wireless Network Adapter	TP-Link - TL-WDN4800 PCI-Express x1 802.11a/b/g/n Wi-Fi Adapter	$39.88 @ OutletPC
	Prices include shipping, taxes, rebates, and discounts
	Total (before mail-in rebates)	$1013.03
	Mail-in rebates	-$20.00
	Total	$993.03

Below are some shots of the build and the process. I enjoyed every step of the way!

Desks

I made my own desk. It's a collection of stained 2 x 6 pine. The stain is a Walnut color with a ton of lacquer. I found a third-party standing desk attachment and mounted it to the desktop. I used to use sawhorses but wanted something more configurable. The desk itself without the standing attachment was less than $100 to make which to me was worth the extra work!

Being a musician, I am a bit of a tone snob. Regular old computer speakers aren't enough for me. Pictured below and in the video is a pair of KRK powered monitors. I combine those with a cheap but deadly subwoofer from Behringer. All in all, I'm very pleased with the audio. It's hella loud :)

Workflow

Caskroom & Homebrew - https://caskroom.github.io/

For application installs I've switched to Caskroom & Hombrew. This allows me to skip the download, mount, and drag the app icon madness you all know about and probably loathe like I do. Caskroom depends on Homebrew so be sure to install it first. To add an app or update your apps it's the matter of one small command in your terminal of choice.

Alfred - https://www.alfredapp.com/

Alfred gives my mouse a rest and allows me to trigger applications, find files and folders, or even google something without even firing up a browser first. A very user-friendly tool that I can't live without.

Clipy - https://github.com/Clipy/Clipy

If you find yourself needing a history of your clipboard data, Clipy is the application for you.

1Password - https://1password.com/

Unless you use the same password everywhere (I hope you don't), 1Password makes remembering those pesky passwords a breeze. I really love the credit card and password generator features as well. I've recently tried the team feature as well, it's awesome.

f.lux - https://justgetflux.com/

I have had bad vision all my life. Up until recently, I was lucky enough to get LASIK surgery which was truly life-changing. Post surgery I noticed my eyes were a bit more sensitive to light than before. Being as I spend most of my day staring at my screen I consider flux a must. I do turn the app off when designing as it toys with color a bit but for everything else, It's pretty much always there.

Backblaze - https://www.backblaze.com/

I go through what seems like a new hard drive every year or so. They simply crap out and I'm stuck without. Backblaze backs up all my drives in case that happens. I already use Dropbox for most of my work-related files but even that doesn't feel like enough so I bought into Backblaze and haven't looked back. Well worth the security of knowing your files are saved no matter what.

Mac2imgur - https://github.com/mileswd/mac2imgur

This app does what many others do but I like it because it's not me who is hosting my screenshots. Why load up my own Dropbox account with them? You take a screenshot, it uploads it to imgur and automatically generates a link for you to share. Combined with Slack this app is a great way for me to communicate what I'm looking at if someone else doesn't understand it outright.

Development Workflow

Sublime Text 3 - http://www.sublimetext.com/

I love Sublime Text. It's fast, doesn't bog down my machine, and is completely customizable. I use the Space Gray theme with only a few tweaks.

VS Code - https://code.visualstudio.com/

I'm a fan of jumping between code editors. VS code is one I'm experimenting with and I have to say it is growing on me. There are a lot of built-in features that are great but I've only just broken the surface. I use a theme called Bimbo at this point in time.

Hyper - https://hyper.is/

For my command line utility, I like to use Hyper. It's lightweight and does as you'd expect out of a nice command line application. I combine Hyper with OHMYZSH to get themes, helpers, and more out of the app.

Laravel Valet - https://laravel.com/docs/5.5/valet

I recently ditched the ole' MAMP install for something less bulky called Valet. This essentially allows you to do what MAMP did but without worrying about firing up an app of some sort. You can declare a directory as a locally based site and serve it like a real site from that folder using Valet. You will need something like MySQL installed if you're doing database backed work but Valet already has tons of support for many frameworks out of the box.

Transmit - https://www.panic.com/transmit/

Anytime I need to move files via FTP/SFTP or to an AWS instance I reach for Transmit. It's a great application from the Panic team who also created Coda (my first love).

Sequel Pro - http://www.sequelpro.com/

An awesome free app to visualize your database. This tool is a great companion to Valet as you can connect to your MySQL backed database to read, add, edit, and delete records from a given database all within the application.

PostGres App - https://postgresapp.com/

I only use Post Gres for Ruby on Rails projects. This application is much like MAMP in that regard. It's pretty straightforward to use. Definitely, check out the documentation if you are stumped on how to get things rolling on your own projects.

Image Optim GUI - https://imageoptim.com/mac

Image Optim is a super handy application that uses image minification libraries (configurable) to optimize any photos you drag and drop into the interface. Sometimes I'll forego adding an image optimization task to Gulp and just use this app as it does the same thing.

Typora - https://typora.io/

I have tried many Markdown editors and Typora is my favorite. The autoformatting inline feature is literally the best!

Design Workflow

Affinity Designer - https://affinity.serif.com/en-us/designer/

I use Affinity Designer almost exclusively now. I find myself straying away from Adobe applications as they just feel clunky and unresponsive. It's a matter of preference of course but I think Affinity Designer has fantastic potential as a modern design tool that I wish more people took notice of.

I use the application for anything from UI design to illustration. Its persona feature stack alone is incredibly powerful.

Affinity Photo - https://affinity.serif.com/en-us/photo/

Aside from some client work I almost always use Affinity Photo for photo editing. It's real-time responsive and indestructible adjustment layers and filters are fantastic.

Adobe - https://adobe.com

I can't quite part with Adobe products just yet. Indesign, in particular, is a necessary evil for me in terms of publication design and invoicing for my agency's work. I still make use of Photoshop in regards to clients that require PSDs as deliverables but I have found as time goes on that I reach for Adobe apps less and less which I'm perfectly fine with.

Sketch - https://www.sketchapp.com/

When I'm not using Affinity Designer you can bet that Sketch is open. I really love how quick Sketch is. At its core I find the symbol workflow to be the most powerful feature. Nesting symbols and now the new Sketch libraries feature truly make it great design software for apps and designs that need to scale.

Nucleo - https://nucleoapp.com/

While not 100% necessary I do find that having an icon manager proves to be pretty valuable. I save a lot of time using Nucleo by being able to copy and paste SVG code as well as utilize present icons of different sizes. Not having to manually resize an icon every time I use it is great.

Prototyping

Invision - https://www.invisionapp.com/

I use Invision the most for prototyping but I jump back and forth between similar services. Invision is really great for presenting work to clients if we aren't in the same room. My only gripe is a number of features they keep throwing at the users of the product. If I had my way, the app would be a lot slimmer than it is currently.

Marvel - https://marvelapp.com/

Marvel is very similar to Invision. I would go as far to say it is a less feature based version which I'm a fan of. Marvel kept things simple and for that, you can't get mad about.

Messaging/Communication

Slack - https://slack.com/

I don't know who doesn't use slack these days. I belong to a few channels for work and some for play. Almost all revolve around design and development.

Spark Email - https://sparkmailapp.com/

I've tried likely every email client out there. Not one really has what I need. Spark has done the best job for my use case to date. Prior to Spark, I used Airmail. I abandoned that ship after the need to constantly pay for updates.

Google Pixel + Project Fi - https://fi.google.com/

The Google Pixel 2 was just announced so I'm sad! I have the first generation phone on the Project Fi plan. My phone bill is now less than half of what it was when I was using an iPhone on the AT&T network. I'm really happy with Project Fi. If you are eligible to join use this link . We'll both earn $20. Win-win!