June 24, 2021

My UX Design Toolbox

Just like carpenters rely on different tools for different tasks, so do UX designers. Start adding some tools to your digital toolbox and explore a few of the most popular programs that you might use as an entry-level UX designer.

A person with long hair stands in front of toolbox holding a laptop. Text above reads wireframing and prototyping tools

Early in your UX design career, you’ll likely spend a lot of time creating wireframes and prototypes.

  • A wireframe is an outline or a sketch of a product or a screen. Wireframes help designers figure out how a page is arranged, where each piece of a product fits in with the others, and how users will likely interact with the product.
  • A prototype is an early model of a product that demonstrates functionality.

You’ll learn much more about wireframes and prototypes, and create your own, as you progress through this certificate program. 

There are tons of digital tools available to help you design wireframes and prototypes. The most popular tools among them are Figma and Adobe XD due to their availability:

Read More
December 21, 2020

The Results are in!

image

Figma is now the king in interface design industry. It didn’t just overtake Sketch, it pretty much buried it six feet under. Not only that, it even managed to buried other competitors in other category too. Like prototyping (which was pioneered and led by InVision for the longest time) and handoff (something that was typically handled by Zeplin).

Figma’s lead in almost every single category in the design process is a testament to what the designers truly want: more feature in a single, unified package rather than super specialized tools that focus on a single aspect of the design process.

Don’t get me wrong though, specialized tools have their uses, and I’d argue their places are quite indispensable. But they are more useful in large studios with extended work pipelines where there are people dedicated to certain parts of the process.

April 2, 2020

Figma UI Recreation Challenge #1: Streamlabs Dashboard

Once in a while I’d come across a screenshot of a cool UI that I think would be relatively simple to recreate in Figma, so I made it a personal challenge to do so. This is not something that I do in my spare time or anything because, quite frankly I don’t have any spare time anymore. This is more of a distraction to prevent me from going insane between juggling 3 different major projects atm.

I will first start with 2 Streamlabs dashboard screens.

Read More

November 10, 2018

Zeplin Desktop client for Linux

As mentioned in one of my previous posts, we now have an excellent tool for screen design to work on right there on Linux. But what about design handoff? With Figma, normally you have 2 choices for handoff: one is Avocode, the other is Zeplin. Most people would prefer Zeplin since Avocode is a subscription based abomination. But there’s one problem for Linux screen designer: Zeplin does not have a desktop client for Linux. Now this isn’t much of an issue like other softwares because they have a webapp, but you can’t integrate Figma with the webapp, unfortunately.

After looking around, I realize Zeplin, like many other great web-based apps, was built on top of the execellnt ElectronJS framework, that means porting it is fairly trivial. After murking around, I came up with this, let me know if it works:

Download zeplin-linux-x64.tar.gz

Made with nativefier

So now that we’ve managed to make desktop client for both Figma and Linux, it should be trivial to integrate them right? Well not really, turns out the folks over at Figma currently only has the integration option enabled for their Windows and Mac client. If you’re a designer working on Linux right now, and need Figma & Zeplin integration, consider spamming their support blog for this feature. I mean, we did that hard part, creating the desktop clients for them, right? All they need to do now is enable integration between the 2 apps.

October 29, 2018

Essential things to get things done in Linux (2019 edition)

Ok I’m gonna give an honest list of the best software to use in each category in MY unbiased experience. What I mean by unbiased is that I will pick a software base solely on the overall user experience that it provides (functionality AND aesthetic), REGARDLESS of whether it’s Free software or not. Most other list will either be sponsored or heavily biased toward free software, and since there’s only one or two decent software in each category, you’ll end up seeing pretty much the same list over and over again, year in and year out.

It’s not that I don’t support free software, quite the contrary I’m actually a huge supporter of free software (why else would a graphic designer like me use Linux as his primary working platform). But I’m also aware that for a platform like Linux to gain traction in the end-user market, it needs support from software developers. Yes, all of them, even proprietary software. After all, you can only reasonably expect a program to function correctly if the developer behind it has the incentive to make it better.

Onto the list, my choices are based on the following criterias: function, aesthetic, and performance.

  • Function means it has to get the thing it was designed for done, that’s the baseline.
  • Aesthetic means it has to have a well designed interface. This is, for the longest time, the weakest point in most opensource software. Obviously it’s not as important as Function but IMO still a far more important aspect to software than most people give it credit for. A well design UI/UX will boost your productivity by a wide margin.
  • Performance means the software have to perform at its best on Linux, meaning no emulated Windows or OS X App, VMs are out of the table also. That doesn’t mean the app have to be native, mind you. It’s 2018, I will also gladly choose app created with web technologies like Figma or Vectr, granted that it runs consistently on Linux just as it does on any other platform.

 

Here we go

 

  1. Best Linux Distro: Deepin OS

List that are Freeassed will tell you about Ubuntu, Mint or Fedora

I’ve used quite a lot of different distros in my time. Off the top of my head, I’ve used Ubuntu, Mint, elementaryOS, Majaro, Arch, Fedora, Zorin. You can see there’s no Gentoo, Red Hat or CentOS in my line up. That’s because I’m not a power Linux user, I only choose distros that boast userfriendliness, aimed at the end user, with pretty interfaces. And judging by the criterias, Deepin OS takes the trophy.

I remember some 15-16 years ago, when Vietkey Linux – the first ‘Vietnamese’ operating system hit the mass. Yes it was simply a reskin of Red Hat, with little change under the hood, but it got me into liking the platform. Back then, the UI of Linux in general, compares to its contemporary counterpart Windows XP, was nothing short of a massive pile of steaming garbage. And then Ubuntu came along with its sweet streamlined interface and Compiz-powered effects. I was completely blown away.

Fast forward 16 years later, when pretty much everything on the market more or less has a good UI, I didn’t expect to get that sensation again, but then I did, when I installed Deepin OS.

To be honest, my expectation for the distro was low, mostly due to my previous experience with a Chinese distro called Red Flag Linux, yes I do realize the irony of the name. But the Deepin experience wasn’t like Red Flag, but more like MIUI. It’s clean, it’s fresh, packed with little touches that indicates there was involvement from real UI/UX/IxD designers. Unlike most Chinese product, Deepin didn’t feel like a copied and pasted product, because it’s not. The overall user experience is very pleasant (except for the setting sidebar, I mean, who brilliant UX designer was it that think people want the settings they’re changing to disappear everytime they click outside the window?)

Overall. I rate this a 10/10, the first time I ever rate a distro this high. Meaning this is a mature product, complete and ready to compete with the likes of Windows and Mac. It’s currently my production platform.

 

  1. Best Office Suite: WPS Office

List that are Freeassed will tell you about OpenOffice and LibreOffice.

Yet another software from China, by now some people must be think I might be a commie. Well I actually am, but that’s not why I choose WPS Office. I choose it simply because it is THE best office suite for Linux, in every way. LibreOffice is based on OpenOffice, this massive pile of Java code that is both fugly and sluggish. WPS on the other hand is responsive, good looking, has great compatibility (it saves as microsoft file format instead of its own), AND portability (1GB of cloud storage means you can access your file anywhere, anytime instead of worrying about forgetting to hit Ctrl-S.

Overall, the only reason why WPS hadn’t dominate the Linux office world yet is because a lot of people still use Office for idealistic reasons rather than focusing on productivity reason (and also, many people don’t trust Chinese softwares, much less storing sensitive files on their cloud). They are all valid reason, but for me, WPS is the office suite of choice.

 

  1. Best raster graphic editor: Krita

List that are Freeassed will say it’s the GIMP

As one of the longest supporter of the GNU Image Manipulation Program, it makes me sad that the software had lagged so far behind. For a while, it was considered a Photoshop ‘alternative’, and some still calls it that, but we all know that’s not the case anymore. While the offering from Adobe has received a crapton of new features over the years due to their massive resources, our beloved GIMP still look and feel like the same guy we use 10 years ago. Even the image editor that comes with K-Office: Krita beat the GIMP in every aspects. Maybe it’s time we let it rest.

Krita on the other hands had seen massive improvements over the years. It now has the UI of a professional image editor, something that the GIMP couldn’t accomplished after decades of development.

 

  1. Best vector graphic editor: Gravit Designer

List that are Freeassed will say it’s Inkscape

Don’t get me wrong, Inkscape is a heavy contender. The gap between Inkscape and AI is far smaller than the gap between GIMP and PS. And yet I still have to choose a web based app over it due to its ease of use, its beautiful aesthetic, and portability (storing files on the cloud ftw!)

 

  1. Best screen design tool: Figma

List that are Freeassed will have no idea what it is.

Screen design tool is a new software segment, one that didn’t exist just a few years ago. I myself didn’t even know of their existence until Adobe released their Adobe XD a few years ago. Yes I know that was already pretty late since Adobe themselves were late to the game, XD hit the market as a response to Sketch’s popularity. Like I said in a previous blog post, I believe that despite its massive popularity, Sketch’s days are numbered, killed by free cross-platform tools like Adobe XD and Figma.

Figma is not the best screen design tool on Linux, nor it is the best screen design tool on the web. It is THE best screen design tool, across all platform, period. Everything you do, you do directly on the cloud, you don’t ever have to worry about hitting Ctrl+S ever again!

 

  1. Best 3D software package
October 29, 2018

Why Sketch will die in 2019

Sketch, Adobe XD, Figma. If you’re a screen designer of any calibre, surely you’ve heard of at least one of these tools. They’re currently the 3 biggest players in the screen design tool arena.

 

Sketch:

  • Pros:

– Features: being the oldest tool means it has a very healthy ecosystem with a plethora of plugins

  • Cons:

– Availability: being a Mac exclusive app means it’s only a matter of time before it’s erased from the market.

– Speed: Sketch is snappy when it comes to opening a file, but viewport stability decreases drastically when navigating around a large project.

– Price: like every other Mac apps, this shit cost money. If you’re a solo creator, this app is currently more expensive than the other 2 combined times infinity.

 

Adobe XD:

  • Pros:

– Adobe Ecosystem: being tied to the biggest creativity toolset on the market is a huge!

– Price: it used to cost money, but it’s free now (undoubted in an effort to accelerate the construction of Sketch’s coffin)

– Availability: Adobe has a bit more advantage over Sketch in term of platform availability, given that it works on both Windows and OS X. A common misconception is that the majority of the design community works on OS X, that’s only true in North America and Europe. If you count globally, you’ll see that most companies operating in the outsourcing sector (India, APAC) still uses Windows as the primary operating system. Some statistics currently put Sketch at over 70% dominance, but if you count the actual product output (which is huge in the outsourcing sector), I’d suspect that number would drop to somewhere around 30%.

  • Cons:

– Adobe Ecosystem: yes, this is both a pro and con for this nifty little app. Being part of a giant company like Adobe certainly has its perk, while we know Adobe has the resources needed to make Adobe a thing, whether or not those resources are allocated correctly is a different story. We all know there’s very little innovation left going on at Adobe, having dominated the market for so long. They’ve also killed off fantastic tools like Freehand and (gasp!) Fireworks!

– Availability consistency: apart from the fact that there’s still no client on Linux (which is not a huge deal, I say this as a designer who uses Linux, I know there’s not that many of us).

 

Figma:

  • Pros:

– Availability: Figma is the champion when it comes to platform availability. This tool is built with WebGL, with desktop wrapper for desktop use (like Slack). That means it works everywhere as long as you have a web browser (currently it’s THE screen designer of choice for designer working in Linux)

– Price: if you’re a solo creator, it’s completely free, there’s no limit on the number of project you can have in your account. They only charge if you want to add more than 2 editors to your project, which is completely reasonable.