Everything I know about design I learned playing Starcraft

Everything I know about design I learned playing Starcraft(quizlet.com)

130 points by asuth 13 years ago | 57 comments

noname123 13 years ago |

Starcraft is important but IMO it's not about APM. But build order, at start of each game, there's a series of steps you need to do like the optimum workers to build, to mine Vespene gas; at which time to send workers to build expansion base, build marines/zerg's etc. And adjusting your strategy depending on map, other races on map and opponent style.

Translated roughly to non-player's words, playing Starcraft is not about winning but about optimizing your action and reaction to the quickest and most efficient. I don't wake up everyday thinking that the project is going to give me a hard time, I already have a builder order to efficiently tackle the problem, e.g., lower expectations for stakeholders early on, debugging the code step-by-step to get a handle, browse reddit for diversions etc.

I will not get frustrated if I can't win against CPU or debug the code, because winning is outside of my control depending on the skill of my opponents, allies and luck etc; I will only evaluate myself on how much I optimized on my build order. And if my build order sucks, I watch my replays and search online for a better one.

It's only I have my build-order deeply ingraned in my mind, that I work on my APM; so I can act/react faster and it comes second nature like driving but doing it faster. The same thing IMO applies to poker, trading and sports. You can't focus on binary outcome of winning or losing because so much variables are outside of your control; it's about focusing on your build order. You are willing to lose the right way over the temptation of winning the wrong way.

A much better expression of this: http://www.teamliquid.net/forum/viewmessage.php?topic_id=142...

andrewljohnson 13 years ago | |

They key to StarCraft before the Diamond/Master level is probes and pylons - your build order doesn't matter, your strategy doesn't matter, your micro doesn't matter.

All that matters is you mine exponentially by always building a worker when you can, and never getting supply capped, and spending your money.

A grandmaster can beat a platinum simply by building 10X more primary units than their opponent. There have been demos of this online.

It's true you can "perch" yourself in Diamonds or Masters with a single cheesy build, but if you want your rank to withstand patches and new releases, then you have to master the fundamentals - probes and pylons.

thatthatis 13 years ago | |

You expressed it very well.

alexlym 13 years ago | |

yeah, it's not even about build order, but improving the kunfu :)

hkmurakami 13 years ago |

>In Starcraft, nearly everything has a keyboard shortcut, and can be accessed in milliseconds. Professional players have average APM's of around 300. During intense battles, with their careers on the line, they can get up to 500 or 600. That's almost 10 separate moves per second!

EAPM (Effective APM) is more pertinent than raw APM. APM arguments have raged on for more than a decade (since Broodware at the very least), and there have been many top players with low apm (300 vs 100).

For HNers, an appropriate analogy would be typing speed for coding. We have ongoing (pointless) arguments about the importance of typing speed for programmers. Whatever one's opinion/preference for this subject may be, we've seen plenty of programmers be successful with high typing speeds but many mistypes, and other with relatively low typing speeds but very accurate. There's a pretty wide range in which one can be successful.

>The Starcraft equivalent of a boilerplate template is a build order, which informs which buildings to construct in the beginning of the game.

Build orders need to be informed by the map choice and opponent. I think similar considerations would apply in the template selection in photoshop as well, though not covered in OP. I wonder what the equivalent of such meta considerations would be in design.

>Rush / Macro

Is this the common terminology in SC2 these days? It's strange since the standard counterpoint to "Macro" (economy and production) has been "Micro" (unit control).

heyheyhey 13 years ago | |

Yes, you are correct about "Macro" and "Micro" being antonyms but they are used differently here.

He's talking about a style of play. Generally, "macro" play is going to for the long-game with many bases and huge armies. He calls the opposite of this as "rush." Other synonyms for "rush" are something like "timing attack" or "all-in."

hkmurakami 13 years ago | | |

Yes, so I would have called it "Macro-style", "200/200 style", "late-game oriented play", "turtle-style" or any number of expression that would distinguish playstyle and gameplan from the specific terminology: Macro. "Macro" on its own is a misnomer imo.

Also, I don't think "timing attack" is an appropriate synonym for "rush", since timing attacks tend to occur in the early-mid game (typically off of two bases) whereas "rushes" happen within the first few minutes of the game: 7-pool, 2-rax proxy, etc.

In that vain, "all-ins" can occur at any stage in the game (though typically when a cheesy rush or committed early mid-game timing attack occurs at a heavy expense on economy) so it's not an appropriate counter-term either.

sliverstorm 13 years ago | | |

The way I like to think of it is, "macro" play is attempting to win through advantages in macro. In the same way as "micro" play would be attempting to win through advantages in micro.

calhoun137 13 years ago | |

There is a difference between EAPM, and effective EAPM, in the sense that if you have a high EAPM but do the wrong thing, you still lose the game. SC2 has a way of training you to actually think and make decisions faster, in addition to typing faster, and this is something that I have found to be valuable for increasing my productivity as a programmer.

tammer 13 years ago |

Funny. The title gave me the expectation of something I've been thinking about a lot lately, which is in fact the inverse of the article's content.

Mobile apps are video games. The moment someone (apple) designed an app-centric fullscreen OS, the stage was set for the generation of UIs that can become as immersive as good adventure games.

Mailbox is the example that sticks out in my mind currently. Can't really get much more boring than e-mail, but they figured out how to gamify it in a way that mimics the internal consistency of a cult classic title. The 'tutorial' mode of this and other apps gives me a phantom pavlovian feeling of opening the shrink-wrap on old cereal-box-sized CD-ROM packaging.

I think the if we look to video games for inspiration we can produce even more engaging environments in applications designed for productive use. Upon reading the article it looks like games have lessons for designers on both sides of the equation: the design itself, and the design process.

ricardobeat 13 years ago |

Design work is dotted with long periods of thinking and exploring. You only need a high APM rate because photoshop terribly sucks for anything other than manipulating bitmaps, you can do things much faster in an object-based editor like Fireworks. If only Adobe would make it 100% compatible with PSDs and actually mantain it, it would completely take over web design.

tolmasky 13 years ago | |

I find this a funny comparison because StarCraft is at least in part made difficult on purpose, as is the case with any game. In particular, APM/micro/etc are a key aspect that separate the range of skill levels of most players. So while some multitasking aspects in the game would certainly be difficult no matter what, any good UI designer could make StarCraft easier and more accessible to use, but then there wouldn't be something to advance at. A good example of this is MBS (multi-building select). This feature did not exist in SC1, but was introduced in SC2 and makes it easier to build multiple units. There was some backlash with this feature because it made things "too easy".

Retric 13 years ago | | |

As a compeditive sport you can make games random but not easy. However changing the UI Makes different skills useful which shits the balance of power as well as the learning curve. Much like how the ideal GO and Chess players have related but different skills.

wylie 13 years ago | |

I think the article would be the same no matter which tool he were using. It's about a process of fast iterations in design, which is possible when you're this comfortable with the tool. I'd compare it to using dev tools to mock up a website, it just reduces friction for something you could do manually.

doctorpangloss 13 years ago | |

The fastest wireframers I know seem to use Illustrator, which like you said is object-based. Good point.

jpablo 13 years ago | |

Its not that much as APM as comfort with the tools you are using. Most great programmers are great typists and are master of some text editor, so that the tools won't get in the way and you can actually concentrate on the hard things without having to be thinking how to do the easy stuff.

tomkin 13 years ago |

I hate to be that guy, but this is a real poor comparison. First, who uses guides anymore outside of print? 1140 Grid or 960 does the job perfectly fine and prepares your design for responsive.

You can write an article about Starcraft if you love Starcraft, but juxtaposing against Photoshop workflow is disingenuous at best, misleading and confusing at the worst.

Photoshop isn't perfect, but it knocks Fireworks' socks off in every aspect: automation, formats, shortcuts, UI, precision, etc.

ricardobeat 13 years ago | |

Until you need to use that PSD for production. There are a couple things in PS which make it terrible in day-to-day usage:

- no way to quickly export a layer or group on it's own with a transparent background (FW: click object, cmd+c, cmd+n, cmd+v, export) - can't copy layers with transparency to other applications - no 8-bit PNG export - auto-select sucks - takes minutes to load a 100mb file in an up-to-date computer with loads of RAM and scratch disk space. hangs when you move/resize too many layers at the same time - font rendering doesn't match system type at all

Not to mention that 99% of the time layers are not cut to size (have extra transparent padding) so you can't even get it's dimensions without a pixel ruler. That is, after you finally figure out which magic layer contains the actual objects. Please, make it stop :(

smartwater 13 years ago | | |

I'm using Photoshop CS6 and I haven't had any of the problems you describe. "Save for Web" supports 8-bit PNGs. Exporting layers with a sequence of 4 commands isn't a burden. My Mac Mini loads up 100MB+ files all the time with no problem. I enjoy working with each pixel so I can make it pixel-perfect.

tomwilson 13 years ago | |

> Photoshop isn't perfect, but it knocks Fireworks' socks off in every aspect: automation, formats, shortcuts, UI, precision, etc.

Automation? Not really. The scripting Apis for both are similar. Plus symbols and styles are way more useful for UI design than smart objects. Plus you can find and replace colours. Woot.

Formats? Who cares. Fireworks does the ones that matter for web/app design.

Shortcuts? Subjective. Can customise pretty much anything.

UI I might give you. Fireworks is a bit odd in some ways.

Precision - not a chance..fireworks lets you type in the exact size of stuff you want oh so easily..

You should try fireworks sometime, it's pretty awesome.

As a dev, I love receiving a design in fireworks. It's almost a joy to work with when extracting all the bits I need. Photoshop is a pita (though I have written a bunch of scripts I use there to make it slightly less painful).

mgillett 13 years ago |

Only tangentially related to the article, but I have to commend this guy on his design chops. The new Quizlet site is fantastic. Great job Anand!

baak 13 years ago |

I used to hear this argument from WoW players a lot.

"It's skills you use in every business management, so it's just like work!"

Go ahead and list it on your resume if you believe it.

theory11 13 years ago |

I just wanted to say that Anand Sharma is a gentleman and a scholar. And a phenomenal designer! Anand is responsible for much of the design of our site (http://theory11.com). Unbelievably talented.

Skoofoo 13 years ago |

I'm surprised nobody has mentioned this yet: Photoshop is not design.

vacri 13 years ago |

The title should be "How to shoehorn a simile".

Using photoshop is like carrying water with a bucket. You've got to decide 'rush' or 'macro'. Maybe it's not important that you get all that water to the destination and losing slop over the side in a poorer quality carry is fine. Other times you'll need that bucket to arrive dry with a higher quality carry - you might be carrying over carpet, for example.

Before you start your carry you go through the starting steps to ensure a clean, empty bucket - checking that there's no holes, that the handle isn't loose or broken, that it's clean and doesn't contain anything from a different carry.

A good water bucket carrier has higher APM than a poor carrier, knowing how best to manipulate the bucket in the well and developing appropriate muscles for filling and carrying. The best water carriers can carry a bucket in each hand!

There is no best bucket - pick one to suit the task at hand. Wood is heavier, but more beautiful, a relic of a bygone era, and is the preferable material for use in specialised cases like saunas. Metal is sturdy and less prone to failure - easier to fill than a plastic if you're using a deep well as it won't float as easily. Plastic is light, cheap, and plentiful, which may be all you need, plus it is more flexible.

And of course, carrying water is a task best suited for collaboration. You get to socialise, and it goes faster if everyone pitches in.

chanind 13 years ago |

I especially like the APM analogy. The best designers I know make using photoshop/illustrator look like playing a piano

psteinweber 13 years ago | |

I can confirm that, but in the same time they have a high efficiency when it comes to _not_ create huge quantities of visual waste per minute.

vickytnz 13 years ago |

Hmm, this is basically pointing out that power users take the time to learn the craft and make shortcuts. I learned all this stuff not because of Starcraft but because mousing around a 21" screen (which was amazing back in 2007) started giving me RSI.

Funnily enough, a lot of designers tend not to bother with the shortcut stuff, arguably as they don't tend to be doing it day-in day-out.

On the other hand, an illustrator colleague knows all the shortcuts as well as I do (related: the one peeve I had with the near-future tech of Charlie Brooker's 'Be Right Back' ep of Black Mirror was this exact scenario, where an illustrator is using a highly gestural interface to do work. Her whole arms would be aching after just a few hours!)

d0m 13 years ago |

I also believe there are so many things I've learned in starcraft that help me in my startups. In no particular orders:

- Taking calculated risks - Understanding Macro vs Micro - Timing vs Economy vs Technology - Opponent psychology - Focus / Intelligence / Hard work

alberich 13 years ago |

Isn't the title a bit imprecise? It seems the article is about leveraging things you learn playing starcraft to better use some software tools, not how starcraft gives you lessons about good design.

chencha 13 years ago |

This guy didn't learn anything playing Starcraft. He learned design, and then wrote an article drawing similarities between Starcraft and design. Still entertaining.

mikeprasad 13 years ago |

Very awesome analogies to process and approach to design. I wonder though, at what point does the "build order" approach break down? At some point you need to evolve/differentiate in design. I wonder if there's a repeatable process/approach to drive that progression?

kkrewink 13 years ago |

Relating skill to Starcraft's ranking system was a nice analogy–it's easy to visualize/see in practice on a site like Dribbble along with the described improvement over time. Conversely, it's also easy to pick up on some designers constantly playing the same card.

thelucky41 13 years ago |

Playing Starcraft is an excellent analogy to playing the piano while also playing chess. I won't speak for designers and Photoshop, but for general computer usage, both strategic thinking and expressive hand-eye coordination are particularly useful skills.

vanderZwan 13 years ago |

There's an unusually high number of commenters on that website who have never heard of let alone played Starcraft.

whalesalad 13 years ago | |

They're too busy studying and trying to do well in school ;)

shocks 13 years ago |

Can someone tell me why some of the players keycaps are missing in the APM video?

itafroma 13 years ago | |

It's to facilitate a type of keyboard technique that would otherwise accidentally press the Windows key. There may be others, but the one keyboard layout/system I know of that uses it is TheCore: http://www.teamliquid.net/forum/viewmessage.php?topic_id=341... (mentioned under "Lesson 1: Positioning").