Designer’s workflow on Windows

ios-windows

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:

  • Create wireframes, screen layouts and productive ready artworks
  • Define flow triggers and transitions prototyping tools
  • Very fast and optimized performance for complex and layered designs
  • Supports importing existing assets from Photoshop, Illustrator and Sketch

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

  • Emmet If you don’t know emmet, you should, because it will speed up your HTML & CSS typing by 2–3 times and it feels much more comfortable
  • Brackets Icons Makes sidebar pretty with icons next to filenames
  • Paste and Indent Can’t live without this one, when you paste a random snippet into the editor, it will auto format with indents.
  • SASSHints Use this if you use SASS/SCSS, it hints your custom variables. While speaking of SASS/SCSS, I recommend using Gulp for a compiler and I have it all covered step by step on my guide on GitHub.

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.

Cmder

It supports Powershell and cmd as a shell, some people prefer using that, but I don’t. I like a UNIX-like terminal.

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!

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”.

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 for ShareX 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. Of course, you can configure it to exclude your super embarrassing secret porn folder.

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.

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

  • On Chrome, go to chrome://flags and disable DirectWrite. If it still doesn’t work for some reason, add --disable-directwrite-for-uias an argument for Chrome shortcut: screenshot.
  • On FireFox go to about:config and set gfx.direct2d.disabled to true. Now you don’t have to disable hardware acceleration to get MacType functional.
  • Brackets doesn’t have the option to disable DirectWrite so I have to add --disable-direct-write argument to Brackets shortcut, screenshot. I also use Default Programs Editor to add this argument to context menus for Brackets, so I can edit files with MacType enabled if opened through ‘Open’ or context menu.

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

  • Download LAV Filters MegaMix 64-bit or 32-bit version. (Compile time: 21 November 2016 12:47pm UTC+8. Build: ed499cafd.).
  • ⚠️ If you have Windows 7, install Windows 7 SP1 Platform Update, otherwise ignore this.
  • Don’t forget to select Potplayer in the installer and select appropriate madVR settings for your build:
Setup — LAV Filters
  • In LAV Filters MegaMix installer, install DirectX End-user Runtime June 2010 (mandatory) and Microsoft .NET Framework 4.

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.

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.

64 thoughts on “Designer’s workflow on Windows

Leave a Reply

Your email address will not be published. Required fields are marked *