Tag Archives: Design

➟ Turning Paper to Pixels with a New Game Design Tool

From Paper to iPad, Pixel Press Turns Drawings Into Videogames
Bonnie Cha, recode.net

I loved play­ing videogames as a kid, but I can’t say that I ever spent any time sketch­ing out ideas for my own games like my broth­er and his friends did. (My doo­dles usu­al­ly involved cute ani­mals or spelling out my crush’s name in bub­ble…

The core concept is every kid’s dream: designing their own games for friends to play through, or just for the heck of it. But without some serious inspiration, what you can do in a short platformer level is very limited. I remember a D&D game maker tool for PCs in the 90s; that was infinitely better because you could create a STORY, and set up narrative funnels for your players. 20 years later, our idea of imaginative play can’t be restricted to letting kids carve out crude worlds in 3D chunks and 2D lines.

Some Recent Games And Storytelling

I’ve had the luxury of some console gaming time these past few months, and managed to complete Metal Gear Rising, BioShock Infinite, and the rebooted Tomb Raider, while making progress in Devil May Cry, Luigi’s Mansion 2: Dark Moon, and Super Mario 3D Land.

The observation here is that in my advanced age, the definition of fun has changed. I used to be excited for sandbox experiences, building/business simulations, and multiplayer combat. I think if Minecraft and LittleBigPlanet existed when I was younger, I’d totally see the point of building a giant robot’s head in a mountainside. Now, the thought of spending hours on that kind of play instead of catching up on reading or working on other projects is out of the question.

Open-world games are in a precarious position. Five years ago, I could spend hours collecting Crackdown’s Agility Orbs. I’d mess about in Assassin’s Creed and forget the main quest entirely, writing my own inner narrative about Altair being a medieval pickpocketing Batman. When life next comes collecting, these games will be the first to go.

So when the nights are short, what games make the cut? The aforementioned games on Xbox360 (Metal Gear Rising, BioShock Infinite, Tomb Raider, Devil May Cry) are marked by strong, cinematic narratives, or at least entertaining ones in the case of MGR and DMC. The remaining Nintendo 3DS titles succeed on pure mechanics, where joy is extracted purely from the timing of button presses, helped by exuberant character animations and inventive set pieces.

LuigisMansionDarkMoonReview_Pic2

Luigi’s Mansion 2 might be one of the most charming games I’ve ever seen, and like most portable titles, it satisfies in a different way than a blockbuster console title. Each level is polished and detailed to the point that it vibrates. From one minute to the next, you’re constantly having your assumptions challenged by experimental level designs, new enemies, and ingenious puzzles. There’s a simple set-up about why the ghosts are loose, but the game’s real Story is located in the way that these parts interoperate, and in how the characters react, much like how design was famously said by Steve Jobs to be the craft of how things work, not how they look.

Stories are perhaps the best reason to engage with any entertainment medium; often they function perfectly being the only reason, but videogames call for a balance between play and involvement to be fully realized.

Take BioShock Infinite, one of the year’s most highly rated games, if not the highest. To experience a playthrough is to see an ambitious, first-person SF story with many smart things to say about games, politics, gender, religion, and whatever else people want to see in it. As a game, mechanically, it’s mediocre for a lack of innovation. Fights play out in the usual fashion, with a few superficial gimmicks. When the supporting character, Elizabeth, throws you a health pack mid-firefight with a press of your "X" button, it’s an Auto Heal/Use Potion action in disguise. Much like how artists can throw new textures atop a game engine to create an expansion pack, BioShock’s gameplay designers have reskinned a generic FPS using emotion and worldcraft.

bioshock-infinite-20121207035233984-000

Finding the combat somewhat boring, I started to cynically see places where narrative paint was employed to make the shooting gallery journey seem shinier than it was. It’s sad that a week after finishing the game, I mostly remembered its central conceit and frankly awesome ending sequence. This doesn’t happen in Luigi’s Mansion 2, because the gameplay itself is what you think about when not playing.

Why is BioShock Infinite so overloaded on the story side of things, constantly trying to shove more story in your face with voice recordings, environmental artwork, snatches of conversation, meaning-laden anachronistic pop song covers, in-game exposition cutscenes, etc., but so underdeveloped as an action game? I’m pretty sure the experience of watching someone play the game is >90% as satisfying as playing it yourself. It doesn’t have to be your hands on the wheel. I’ve played games where after a momentous moment unfolded on screen, I was left acutely aware of a lingering sensation under my thumb where things had been set in motion. The button press echoed through flesh and time. Triumph seemed to reside directly in my actions. Because of how little I cared for and enjoyed the gameplay, BioShock felt like pressing Play on a rented movie.

The-Village-with-Radio-Tower-in-Backgroung_620x350

Tomb Raider is more successful in several of these places. While well-written, the story isn’t mind-blowing in the way BioShock’s is, but it has its own surprises and is superbly paced: you always feel like the game’s climax is drawing near, and then the story horizon stretches out in front of you again like a challenge, taunt, and gift all at once. Traversing the world, hunting with a bow & arrow, scouting for hidden objects… did I just get tricked into playing an open-world game I said I didn’t have time for? As a combination of story and fun, and critically, by allowing enough freedom for its player to feel a sense of grace and mastery of the world, it succeeds.

Although progression is linear, how you navigate Tomb Raider’s world feels under your control. Lara is continuously gaining new abilities that open up previously impassable areas. It’s the old Metroid design, and a sound one. You could argue that the superpower-granting Vigors in BioShock play a similar role, but they are few, and the fun is taken out of them by the ammo limits. Tomb Raider doesn’t charge you for the joy of shooting a rope arrow across a chasm and zipping down it. Incidentally, where the ropes go is largely predetermined, but because the player personally installs them, the feeling is completely different from BioShock’s steel skyline cables, which herd you heavy-handedly around the map like the rails they literally are. A minor difference, design-wise, but one with an outsized impact on the experience.

Your Tumblr should look like this

Finding a Home for Your Copywriting Portfolio or: How I Learned to Stop Channeling an Art Director and Love the Words

Lots of portfolio tools advertise the ability to create a gorgeous website online within minutes, but how many are suited to showcasing a copywriter’s work? This post covers getting a basic presence up for a handful of your projects. More comprehensive site builders are only briefly mentioned.

It’s often said that people only look into their CVs between jobs, but taking stock of what you’ve accomplished on a regular basis is a really good practice. But with a standard resumé, updating a paragraph about your current employment several times a year isn’t attractive. Fortunately for people in the creative industries, there’s the portfolio, which can be very satisfying to compile, if only to remind ourselves how little victories on a project tend to make up a bigger result.

Not Your Creative Director’s Portfolio

Over the last few years, I’ve seen a fair few creative portfolios, and increasingly, when one asks to see some work, a URL gets sent instead of a PDF. When I was starting out in advertising about 8 years ago, we routinely brought physical folders of printouts to interviews. If you wanted the job, you might make an extra copy to leave behind. If you’ve heard some creatives calling their folios “books”, it’s because that’s what they really were.

Another thing that’s changed since the mid-noughties is how the presentation of a copywriter’s work has gone from showing a few ads and/or documents with long-form writing samples, to being very close to how the art guys do it. Big, colorful pictures that would reel even an illiterate eye in. Some writers’ books now haven’t got a word in them.

Carbonmade
Carbonmade: Your online portfolio, the door to a bright future in children’s illustrations

Most of the people I’ve met showed off work on portfolio cum social networking sites for creatives. Places with start-uppy Web 2.x names like Carbonmade, Krop, the Behance Network, Cargo, Coroflot, and to some extent, Dribbble. Some respectable, shirt-wearing creatives had portfolio sites on their own domains, and the ones who didn’t return their pencils used blogging services like Tumblr.

What I’ve noticed is that very few of these solutions are suited to the needs of creatives who self-identify as copywriters.

Copywriters Are A Needy Bunch

Designers, illustrators, and art directors are well served by the many visual portfolio tools out there. Flip through a few examples and you’ll notice a tendency to not explain the images — when it comes to showing off craft, the work often speaks for itself. Maybe it’s because most tools just don’t allow text at all, but I’ll come to that later.

I think a writer needs a little room to take his viewer through the work. So much of what we do is problem solving and just not visible in the finished consumer-facing work (nor should it be). Some of the things a writer could supply to complement a piece of work are: some background info, a project or team story, the strategic line between proposition and product, an elucidation of the idea (if one exists), how the piece works with a wider campaign or positioning that the brand has pursued, and any measured results that came out of it. Touching on just a little of the above, versus a caption reading “Banner Execution #2″ on a photo of a toothpaste tube telling a joke, can help explain yourself come Judgement Day.

Five Steps to Happier Portfolioing

The more I saw, the more I started to wonder, where should a copywriter put their work online? To answer that question, I signed up for a bunch and put them through their paces, and also asked colleagues and industry friends for their (possibly subjective) opinions on the leading ones. Here’s what I know, filtered through what I didn’t like.

1. Keep Good Company

Maybe this won’t apply where you are, but Cargo (or CargoCollective) ostensibly carries a reputation for being full of student work. I don’t know where that comes from; too many cans of Heinz baked beans styled like Warhol prints? That said, there’s probably nothing wrong with using Cargo if you ARE a student. Coroflot seems to be another good place for junior creatives to get their work in front of recruiters and large brands. DeviantArt was ranked below the two, because your application will disappear into an HR drawer labeled ‘Slashfic Writers’.

Krop
Krop: Your killer headlines will need killer headlines

For professionalism, I was advised to try Krop. It charges a not-insignificant monthly price of US$10, in the league of premium site-building services like Squarespace. I didn’t see anything that justified the price against Krop’s drawbacks. Amongst those I asked, Behance enjoys a neutral to positive reputation that will not stand in the way of your looking righteous.

As far as domains and URLs are concerned, it’s also about the right associations. If you’re on a site built for creative work, then piggybacking on their domain isn’t an issue. For example, having “behance.net/name” is okay, but “name.tumblr.com” looks like a collection of meme gifs. Using a “name.com” is great as long it’s not the “best-name-online.com” that GoDaddy recommends when your name of choice is taken.

2. Know the Tools You’ll Need

Behance
Behance: Owned by Adobe now, so you’ll have to hit refresh for minor HTML updates every 10 minutes

Plenty of sites simply don’t let you annotate or supply a paragraph of text beside your large and beautiful images. It’s practically textist. Krop is a major offender. And since we’re talking your garden-variety copywriter here, and not those mystical hybrid writer-designers who can tastefully superimpose text within their images, an ideal tool would allow writers to enter text on the page itself. In that regard, Behance trumps Krop, which only allows a short caption for each image. Not only is Behance free, it allows the mixing of as many images, embedded videos, and text blocks on a project page as needed.

Most importantly, if you’re going to be uploading work where you’re especially proud of the writing, make sure it can be read! Being able to click and zoom in (or load the original image) is table stakes, but plenty of sites I’ve seen don’t do it. This is the point where your portfolio’s tab gets closed and your reader goes back to a ‘Hunger Games Wedding Ideas’ board on Pinterest.

For this reason, I do not recommend using ‘free’ services that reserve this ability for paying customers, e.g. Carbonmade. Behance won’t zoom either, but you can at least reproduce your copy on the page using a text block.

3. Create a Gallery, Not a Blog

Your Tumblr should look like this
If you must Tumblr, your portfolio should look a lil’ sumthin like this wicka wicka

When a portfolio site is built on a blogging CMS, and looks like a linear blog, expectations are set for a diary of constantly evolving works-in-progress. Visitors will be less impressed by your last post being 18 months old, even if it was ahead of its time.

Of the sites I’ve seen built on simplistic platforms like Posterous, Tumblr, Blogger, Pinterest (you gotta see this Hunger Games wedding), too few employ themes with a static front page serving as a table of contents. If your platform of choice doesn’t let you do that, find a new one. A scrolling page of entries without proper navigation is counterintuitive to your purpose: showing your recent work at a glance, and putting more details one click away.

Some sites will also format and present a version of your resumé in addition to your portfolio. Behance and Coroflot are two that stood out for me.

4. Decide If You Want Feedback with That

Socially enabled sites like Behance are proud of their communities. You can follow people doing interesting work, and browse a stream of their recent work right from your front page. Gold stars, comments, resharing; all that stuff. But there’s a real need for portfolios that don’t talk back, and if you’re familiar with the teen movie trope of parents embarrassing their sons with baby stories whenever a girl comes over, you’ll understand not letting a potential mentor or employer see the “helpful” suggestions you’ve been given by others. Or your witty mom-centric replies.

Moreover, as we’ve already covered, many of these sites are for designers and not copywriters. I’ve heard this sentiment several times: “Designers have Dribbble, but where do copywriters go to share their work and get constructive feedback from peers?” It’s a gap that no one has filled. Until then, my advice would be to keep the two as separate as you can. Find an avenue for copy feedback that works for you, and display your work on a pedestal where it belongs.

5. Keep Open Secrets

Another feature that’s rather important but not always available: the ability to secure projects with a password. Some client work can never be fully public, but if there’s a story in there worth telling, you might open it up to select viewers. Please don’t set your password to “password” or your first name, or have no password at all and instruct the HR person to ‘just press Enter’, because that just makes it look like passwords are a new concept to you.

Choose Your Own Ad Venture

The first conclusion I drew is that you’ll want to spend some money to get this right, although it doesn’t have to be a lot. Whatever your choice, make sure it looks good on mobile devices and doesn’t rely on Flash.

Squarespace theming
Squarespace: Can you handle this much customization? Find out with a free 14-day trial.

My preferred solution has always been to create pages on a personal site, using whatever CMS you’re comfortable with, but that involves a fair amount of set-up and manual work. In contrast, the allure of these modern portfolio services is undeniable. Most come with the promise of page views from fellow creatives baked in, and who doesn’t like getting ‘Liked’? The drag-and-drop features and professionally designed templates are also particularly good for copywriters. Uploading a bunch of comps and artwork almost always results in a presentable page.

Of all these services I evaluated, the only free one that would meet the needs outlined was Behance. Their paid option is called ProSite, but its fancy templates frustratingly strip away the extra text that makes their free pages compelling for writers. If that gets fixed, it would be a complete winner.

If you’re willing to get your hands a little dirty, then Squarespace, Breezi, Virb, and WordPress are sound bets. The first two have no free options and start at around $8/mo for a standards-compliant, responsive design site. With templates as starting points and pixel-level control over every detail, they are suited to people with knowledge of web design but who don’t want to code.

Virb
Virb: If it’s good enough for a coffee bar in Portland, why not your portfolio?

Virb is another all-in-one hosted site & blog solution that costs the same as Krop ($10/mo) but lets you do more. There are templates that let you bundle images and text together quite simply and beautifully.

The open-source WordPress.org software is pretty much the gold standard for consumer CMS on the web, and if you don’t want the hassle of installing it on your own servers, WordPress.com has an ad-supported “hosted service” that takes care of everything for you, with few compromises. A number of portfolio-ready themes are available, but do pay for the domain mapping upgrade, because “name.wordpress.com” looks almost as bad as it would if it said Tumblr. Almost.

Paul Barnes lecture, SMU/Design Society

Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011
Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011Paul Barnes design lecture, SMU June 10 2011

We attended this on Friday, June 10th. He was on the first stop of a tour that will take him to several Australian cities later this week. Mostly a look at some of his favorite work, from doing logos and type for The Guardian, the National Trust, Kate Moss, Givenchy, and a good deal of insight into how much reiteration and historical knowledge are required for these projects.

Smartphone usability and my parents

I just watched my mother try to take a photo with her Nokia smartphone for the first time. An orchid in the home was blooming, and it was the closest camera within reach. She only uses it as a regular phone, and as the least technically-minded member of the family, is strangely the only one not using an iPhone. Needless to say, she was baffled by the Symbian OS. A primary hardware feature on the device, and the icon was buried in a submenu. Afterwards, she asked my father where to find the file so she could email it to herself, and he couldn’t readily answer her.

His last phone before the iPhone 3GS was a Nokia E90 Communicator, a top-of-the-line Symbian workhorse business machine. He’d spent so much time understanding how it worked, that the iPhone’s simplicity initially confused him. He’d ask how to access the file system so he could manage his data. Coming around to a task-centric model (photos are always available in the Photos app; music lives in the iPod data well, managed with iTunes) took awhile, but now that he gets it, the Nokia way is unfathomable. Managing a nested file system on a mobile device is no consumer’s idea of fun.

There’s always been the image of Macs being for stupid/lazy people who can’t work “real” computers and handle complexity in the user interface. Now the iPhone has inherited that reputation in the face of competition from Android, a system that David Pogue calls “best suited for technically proficient high-end users who don’t mind poking around online to get past the hiccups” in his review of the new Droid X. This became clearer as I got older, but I don’t consider most people over the age of 40 who struggle with technology to be stupid or lazy. It comes down to privilege, familiarity, and priorities.

One of Apple’s most prominent user experience attempts at improving accessibility involves mimicking real-world interfaces, such as using a yellow notepaper background and handwriting fonts in Notes, and superfluous flipping page animations in iBooks. Marco Arment has a good post on this: Overdoing the interface metaphor. It’s a divisive strategy that works well in the early stages of familiarization, but soon becomes a hindrance as one grows more proficient/confident. One of the best metaphors I’ve ever encountered on a mobile device was the lens cover on one of my old Sony-Ericsson cameraphones. Slide it open, and the camera application started up. Along with a physical shutter button, it was perfect, and my mother would have understood it instantly. Such a design benefits even experienced users who know how to start the camera up from the main menu. It’s easy to see how a physical feature can offer that experience, but the real challenge is finding that middle ground in software.

* I ended up taking the photo with my Panasonic LX3.

➟ Couch Cushion Architecture: A Critical Analysis

Build Blog:
At first glance the composition appears unintentional and the construction shoddy. But further investigation reveals a clear delineation between indoor/outdoor space with a design focus on protection through the use of barrier. Planes are shifted off the orthogonal to accommodate function; as a side effect it relieves inhabitants from a harsh Euclidian geometry.

Posts like this are what architectural writers train their whole lives for. Many more examples through the link.