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.
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
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
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
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
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
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)
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.
Everything
It searches everything on your hard drive, a lot faster than what your start menu search can do.
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).
- 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.
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 dana@dmxt.org 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.
