Designer’s workflow on Windows

Recommendations, software, workflows, tutorials, and reviews.

I’m one of those designers who use Windows as a primary operating system. I also have moderate experience with Linux and almost none with macOS.
After recent Microsoft and Apple press conferences, there was a significant upset from Apple users and some of them were considering to switch over to Windows.
I decided to layout my workflow and what software I use to ease a transition for someone who wanted to walk away from Apple and toward Windows.
However, this tutorial isn’t written exclusively for macOS users, this also apply to Windows users who might discover new useful software.

What I do

I’m a web designer and logo & brand identity designer. I’m also a front-end developer with SCSS, git for version control and gulp for workflow automation. I don’t wire up with back-end code, I leave that for back-end developers.

My System

Custom built computer, mounted dual monitors, Filco Majestouch 2 TKL brown switches, Logitech G500s, Wacom Intuos Pro and some other hardwares.

I use Windows 8. All programs are compatible with all Windows version back to something you would have to dust off. I tried Windows 8.1 and 10 and they’re just not for me.

Due to thousands incompetent programmers and software, Microsoft had to skip 9

If you don’t know why they named Windows 10 instead of 9, it’s because that would cause thousands of problems due to programmers’ stupidity. I clap to idiot programmers, a huge impact on Microsoft’s OS name.

Design Software

Adobe

We got Adobe software too. Shouldn’t be new to you since it also support macOS for quite a while… since mid-1980. I’m happy using Adobe Photoshop for web design, digital painting, posters, and other design. I use Illustrator for logo & branding and icon design. InDesign for producing PDF. After Effect for motion design and animation.

Sketch?

If you worry about Sketch loss, hear the good news that Adobe XD is coming out and intended to be a direct competitor to Sketch and supports Sketch assist files.

Adobe XD | Adobe Experience CC

Adobe XD Beta on macOS is currently available to download for (temporary) free on Creative Cloud. Adobe XD (Adobe Experience Design CC) is coming to Windows by the end of the year, probably December 2016.

It’s a brand new Adobe software specifically made for UX/UI designers, a straight competitor to Sketch. Great timing considering that nearly all Mac users I know are flocking to Windows after disappointing Apple conference.

Experience Design CC | Adobe XD

You can read more about Adobe XD here. Here’re few of their features:

They should have called Adobe Experience CC as Adobe ED aka Experience Design, Adobe UD aka UI Design, UI, or UX. XD is one of the worst acronym ever xD.

Still, I’m so excited. Maybe I’ll use Experience. Or maybe I’ll just use Photoshop because I used it for 10.5+ years.

Editor

Brackets

Download Brackets

HTML + SCSS project in Brackets.

Adobe bought this software from small group of developers and it’s very active and updating frequently. It’s open source editor primarily designed for front-end developer audience. It has Photoshop integration to grab CSS and images from the web design.

I use couple extensions that can be searched, downloaded and installed right inside File → Extension Manager.

Brackets Extensions I use

Editor alternatives

If you happen to dislike Brackets, fortunately there’s various different editors available for you to use such as:

1. Sublime Text would be my secondary choice on editor. Sublime Text editor has stunning theme selections:

2. Atom is heavyweight and clunky but it got such cool glow effects! And some people like it.

3. Notepad++ is very lightweight, old school, surprisingly it’s still being actively updated. I still use it for random .ini file editing because it’s extremely quick at opening a file, even a very large file.

Terminal

Coming from Linux or UNIX system, terminal or even Powershell that came with Windows is absolutely unsustainable.

Cmder

Download Cmder

I use cmder and it functions like UNIX terminal, it even got ls-la, cd, touch, cat, du, cp, rm -r, etc. They all support arguments.

Cmdr

It supports Powershell, cmd, and Babun (Babun will be talked about in next section) as a shell. Some prefer one or other, personally, I prefer Cmder’s custom script.

I wrote a tutorial how to properly install Cmder as a UNIX terminal on Windows as part of some tutorial, help yourself and view this section. This section also teaches you how to start using gulp and you should if you’re a front-end or back-end developer!

Babun

Download Babun

Babun is a sophisticated semi-POSIX terminal that has much more Linux/UNIX functions than Cmder’s script can offer. It’s basically a bug-free and polished version of Cygwin.

It has pre-configured shells?—?ZSH (default) and Bash, features syntax highlighting, UNIX tools, software development tools (Python, Perl, git, grep, wget, curl, svn, git, etc), custom scripts, aliases, and more. You can read more about it on their website.

Only reason I don’t use it because it has few seconds load time and it feels a little “slow” to me in comparison with Cmder and I don’t really need any extra features they offer, so I use Cmder instead.

By the way, if you don’t like the default terminal interface, you can use Mitty or Cmder as a terminal interface for Babun, it’s in their FAQ. I recommend you to add Babun to context menu to make it easier to open terminal in explorer, it’s in their FAQ as well.

File Transfer Protocol

FileZilla

Download link

FileZilla is a decent free FTP client and it’s probably the most popular FTP out there. It doesn’t support auto-upload on editor save. When updating FTP content, it skips untouched files and upload & replaces updated files.

WinSCP

Download link

WinSCP is an alternative free FTP client. It’s more of a client for “programmers”, but not necessarily, it’s just down to preferences. It supports auto-upload on editor save. It doesn’t skip, it replaces every file which make updating FTP content slow.

I don’t know much about paid FTP software because I’m happy with free ones.

SSH (PuTTy)

Of course, if you own a VPN, other system or something, you would need an SSH client. We use PuTTy for that. Download here, I think putty-0.67-installer.msi is alright.

Git

Terminal

You can use a terminal for git if you prefer, but I really recommend something else… SourceTree.

SourceTree (GUI)

Download link

The beautiful GUI interactions with Git/Mercurial repositories & GitHub/BitBucket support. It’s magical. It’s full of features and functions you need. It’s very clean and recognizable. It supports GitHub and BitBucket accounts with 2FA authorization. It has a native interface for each supported operating systems.

I convinced everyone to switch to SourceTree for Git management, but some stayed to their own software, like official GitHub software. A few years later, they stood up and decided to try out SourceTree, the result is that they came to me and said: “I’m sorry I was so stupid that I didn’t listen to you”.

Download SourceTree

ShareX

This little 4.6MB piece of software that would improve your life so much.

Download ShareX

I tried Hackintosh and I couldn’t find a proper alternative forShareX so I uninstalled the operating system because I couldn’t function without this software that can take a cropped screenshot, auto-upload to any web hosting/FTP to your liking and copy URL to your clipboard with one single hotkey and it all happen in two seconds flat.

It also has screen recording (video, GIFY, or WEBM), post-screenshot effects like watermark, hotkey for color pick and copy HEX to clipboard (useful for web designers & developers!), file uploader to any hosting you want, scrolling screenshot capabilities, drag & drop any file to upload, annotating during screenshot stage, web page capture, and random stuff like monitor test, QR code reader, hash checker, DNS changer, task automater, I could just go on.

This is the most incredible software I have. Oh and also, it’s free source and available on GitHub. Feel free to be reporting bugs in issues section and the developer has been active for last decade, he’s doing it for free.

Download ShareX

Everything

It searches everything on your hard drive, a lot faster than what your start menu search can do.

Download Everything

Font rendering

MacType

Miss how pretty font looks on macOS, huh? Or Infinality on Linux. No worries! We have MacType, just install it and customize it to your liking. It will render fonts system-wide. I recommend setting it first, and when you’re satisfied, have it run as a registry service so it will work more quickly and reliably.

I have a custom .ini file that looks perfect on my monitor, but it may vary from monitors to monitors due to DPI, screen tech, etc. You can download my .ini here. I like it non-blurry, sharp and thick. When you’re done configuring it, go to MacType icon → Wizard → Registry → Finish.

Set it as Registry when you’re done configuring

You can compare ClearType (Windows default rendering) and MacType here:

View it in full size for the best experience. If you cannot tell the difference, please visit an eye doctor specialist near you.

View it in full size for the best experience. If you cannot tell the difference, please visit an eye doctor specialist near you.

It supports most programs, but some programs reject custom font rendering (usually because they use their own rendering or DirectWrite).

If MacType doesn’t render correctly on some software, like Steam overlay or in-game server browser, you can add an exception in MacType settings and it will disable MacType on programs to your liking.

Video Player

Potplayer

This is the best video player on Windows, however, if you’re installing software for your grandma, then VLC will do.

How to install Potplayer tutorial

Take your time, get Potplayer installed, configure it, and then enjoy eyegasm of how beautiful videos it made. The reason why it takes so much of effort because it’s dependent on how good your system is and how well your system can handle heavy video (SVP 60fps motion interpolation+ smoothing + up-scaling + rendering, etc) so you kinda have to manually configure it. Mainly for anime, but still would look excellent on TV shows and movies and you can’t compare with VLC, Media Player, and other players out there.

Good news that it works without your manual configuration, so you can be lazy and just install LAV Filters that include Potplayer and requirements, then just run PotPlayer. There’s a tl;dr guide below if you don’t want to spend 10 minutes of your time and just install the damn thing.

My favorite skin on PotPlayer is Zoon 3.0. It’s included.

All menu on PotPlayer is from right-clicking anywhere on the player. It has a lot of hotkeys. You’ll find that it has much more settings and configs than any other players you used.

tl;dr guide if you don’t want to follow imouto’s tutorial

Setup — LAV Filters

If you need more details regarding decoding mode, setting up video rendering, then please refer to the original site.

Screenshots below is from an anime 5 Centimeters Per Second. Very beautiful, romantic, and worth watching. It’s a movie, not episodic.

 5 Centimeters Per Second

Ninite

When you install Windows, it’s fresh. It got practically no program you regularly use (not even a browser) and it’s tiresome to download and install all of these all over again. Nah, don’t need to do that no more. Ninite will take care of that for you and it doesn’t download with sneaky toolbar spyware, don’t worry.

I also configured ninite and put the install file on my Windows 8 install USB drive in “Install” folder so I don’t even need to open IE to get started setting up.

You pick what software you need, then it will download and install them all with one click.

Download Ninite

Gulp

If you’re a front-end developer (even just HTML5 & CSS3) and don’t use gulp, do the following:

Step 1: Sit in the corner and be ashamed of yourself for approximately 5 minutes.

Step 2: Read this beginner gulp tutorial guide to make your life easier forever.

Step 3: Cry in the same corner you chose because you haven’t done it earlier.

Though it’s not really Windows related, it’s supported on all platforms but this tutorial is targeted to front-end developers and gulp is a semi-required knowledge and makes developers’ life easier by 100 times.

Notice: If you have any trouble downloading, installing, configuring or the transition from macOS to Windows, just email me at [email protected] and I’ll try my best to help you. Please include in Subject [Your tutorial].

This post was originally published on Danas’s Medium profile.

Designer & front-end developer. Currently available for hire. Studies languages, book lover, and BMW enthusiast. Find her on Twitter.

Related Posts

How my Sketch file started: a separate artboard for every type of Yammer thread. There were lots. Reducing our design handoff from 30 mockups to just one I’ve recently begun working on a design revamp of Yammer’s Android app, beginning with conforming all Yammer conversations to a 4px vertical grid for better readability. Because a single misaligned pixel could throw off the… Read More →

As designers, we create user flows and give them to developers, product managers, clients, and sometimes even users for testing. At its best, a user flow is a concise, clean, and compelling way to showcase the scope and vision of your application before it is developed. Oftentimes user flows are the key piece of documentation that we provide developers to… Read More →

I have a lot of friends who work in Growth, but I never really knew exactly what they did. Whenever our conversations turned towards “growth stuff”, I would always just smile, nod, and occasionally contribute a, “that’s really cool!” It’s not like I was clueless. I mean, I had an idea of what “Growth” meant — growing users, making money,… Read More →