Considering that Ryan and I create things for a living (and as a hobby), we really wanted to do something unique that represented us, so I designed our own wedding website and invitations! We even have a custom rsvp and registry — check it out for yourself!
Carrot Cart is the first app my fiance and I designed completely on our own — and in record time (three weeks to be exact)! In fact, we created the iPhone (ads & paid versions), iPad (ads & paid) and Android versions, meaning Ryan ported what was in Objective C to Java and I had to deal with different aspect ratios and make slight layout adjustments. We generated the levels algorithmically, created automated build scripts to support multiple resolutions on the fly, hand-illustrated everything and animated our bunny avatar to move in all four directions. We haven’t made any updates since launching a month ago (or done any marketing), since we’re working on a new app (and also why I haven’t had time to blog about it until now), but we hope you’ll give the game a shot and let us know what you think of it!
As for my greatest take away from this experience? Simple is always better. Originally, I had drawn the rabbit much more complicated than needed:
In the end, this was the simplified version:
…and the animations going north and south were even simpler.
Click on for screenshots! Read more →
It’s a pity that the latest version of Camp Bears in the app store is only at 1.4, because we had so many new features designed already. One good example of this is our heads up display (“HUD”), which gives you a glimpse into new features we had in mind: health, XP, friending, and quests. We had some baking and cooking interactions all designed, illustrated and engineered for bears to take turns role-playing and earning points from, but alas, Camp Bears is put on indefinite hold. Anyway, I figured since no one would ever see the new HUD, I might as well blog about it to illustrate how UI design is really iterative, especially for an application that can have endless updates with new features added constantly.
HUD 1.3: In this version, we have a very bare-bone display, with inventory integrated into the profile and a universal notification tab that drops down from the top right. Initially, we actually had two other features planned for the bottom right but we took those out, so I wanted to reorganize the HUD in a more balanced manner. However, from a usability standpoint, it made a lot of sense to keep the chat functions in the bottom left so that the columns of text popped out naturally from left to right (think “start” tab on a Windows computer). Read more →
I think one of the more tedious tasks for Camp Bears was whipping out beautifully illustrated game scenes within a reasonable timeframe, so I just wanted to share a personal method of getting production time down to just three days. In the beginning, there was a lot time-consuming experimentation on Illustrator itself, but I’ve since discovered that it’s way more efficient to do most of the layout work on paper first. Here’s how I would break it down:
Day 1: Sketch out the scene on paper.
Yes, I’m recommending that you dedicate an entire eight-hour-day to just sketching on paper. Why? Because this minimizes guessing on the computer, which takes much longer. In the end, drawing a line with pencil is much faster than with the brush tool on Illustrator, even if you have a fancy tablet.
Normally, I first start off sketching really basic layouts in small boxes; if I’m unsure of what to put in the scene, I’ll start looking for inspiration and sketching buildings and objects out. Read more →
Less than a month ago, our mobile gaming company decided to pivot unexpectedly into social commerce and abandon our feature product — something we’ve been working incredibly hard on for the past seven months. That project was Camp Bears, a magical virtual world set in the woods, designed for kids K-6 grade. The kids we invited in as beta testers loved our game, and so did our young, iPad-savvy nieces and nephews. I was excited to go to work everyday knowing that I’d be illustrating a new room or designing the user flow for baking a cake, or improving the interface while thinking like a kid. Needless to say, I was heart broken when our CEO decided to move on for something more cash-focused — but that’s the startup life. (For the record, Instagram made $0 dollars, yet it was still a good product.)
I spent the last few weeks updating this portfolio because I thought it’d help me bring closure to Camp Bears and move on; but no matter how many screenshots I take and freeze, I can’t capture the essence of what our product was and could’ve been if we had just given it a little more time. In fact, the version we currently have in the app store (1.4) doesn’t even include significant upgrades we’ve already designed and nearly finished engineering for (up to 1.7). That’s what hurts the most. Our intricately illustrated bakery, forest, pizzeria, cooking interaction games, wardrobe additions will never be enjoyed — ever.
Camp Bears was a beautiful product, inside and out. From a visual perspective, it was gorgeous. All of our scenes were hand illustrated on Illustrator, down to each leaf and flower petal. We didn’t just keep solids one color, we added gradients and textures and even considered details, like universal lighting. From a design standpoint, it was observant and thoughtful. Most games that have a moving avatar has one that looks out of place (in relation to its setting) because it “walked funny” or “looked flat.” Well that’s because it’s time intensive to create too many sprites, so most avatars just move around the screen (from the same angle/perspective) or walk in two directions (one reflected). We wanted our bears to look natural, so we modeled our bear in 3D with Blender and wrote export scripts to export it in as many perspectives as we wanted. We settled with eight. We always kept our young audience in mind, so actionable objects glow, close buttons for modals (profile, store catalog) are extra big, the heads up display doesn’t block sight lines for walking from scene to scene, and many things are color-coded.
From a technological standpoint, it was ingenius and innovative. Our game supports real-time interactions among players across the world, even over 3G. If someone in China took a step right, everyone else in the virtual world could see that avatar move. If someone changed its bear’s shirt color, everyone else would notice. Bears from who knows where could talk to each other with our pre-defined set of chats and emoticons. If fact, they did so while looking cute and unique (instead of being just a screen name in a chat room). We divided avatar sprites into principle components, so that each avatar’s personal look could be composed of a linear combination of said components, ordered by their depth or z-index. So a bear could be this shade of brown, wear that hat, this shirt, these pants (in any colors we assigned programmatically), with really efficient rendering and the proper layering. We even created a synchronization tool to sync assets like rooms, sprites, objects on the client side, so that we can update on the fly, without submitting another release to Apple and waiting a few days for it to be re-approved.
Oh, and did I mention that our game is actually multiple games in one? There’s a memory card game, a logic puzzle/checkers game, even a snowboarding game. We really try to utilize the iPad’s touch capabilities and accelerometer and use the right tunes and sound bytes to make the games interactive enough to keep kids entertained for hours.
Even though I’m sad we couldn’t spend more time on Camp Bears, I’m still proud of what our small team of three engineers and two designers has achieved these past seven months. *Bear hug!*
I think what makes Caine’s Arcade so moving is not just the flash mob that made his day or the fact that Nirvan felt so much compassion towards this kid and helped him raise nearly 100k in one day (for college), but also the fact that we just have so much to learn from Caine and our childhood faith in make believe.
Caine reminds us how we used to be able to problem solve like a kid with no preconceived notions of what something has to be, no barriers that in fact, limit our creativity as adults. Caine shows how even with no audience, no social or monetary gain (at first), he poured his heart into his arcade, his summer passion project. He felt joy and satisfaction from doing something well, he demonstrated maturity through endless patience (not to mention, wit and intellect), and he brought happiness to the community through a $2 Fun Pass.
When I spend 10+ hours a day sitting at an office desk or standing on the muni, I make sure I’m never home on the weekends, rain or shine fog or foggier. In fact, I barely even get to cook dinner, let alone eat a decent meal that’s not take-out. As a result, there are things I once enjoyed that I no longer do — like blogging.
However, my body has decided to break out in hives after white river rafting on Friday, so I’ve come home to my parents’ to lounge around in a college tee, enjoy the Southeast Bay sunshine, and spend quality time practicing Gilbert’s “dolce far niente”— in other words, eat popcorn and blog.
Considering that such sweet idleness has become a luxury, I figured I might as well share some insights I’ve gained over the last few years as a web and graphic designer and clarify some questions people have asked me via email. Within the past year (as some background), I’ve worked with three main clients and taken on a few more short-term (1-2 month-long) projects, before deciding to sign-on as an employee in April for one company I really enjoyed working for (in-house since September). Since that time, I’ve illustrated a Top 3 word game on the iPad (and dabbled in a few other iPhone apps), designed and coded up well over 50 landing pages and websites, and done seven book talks (unrelated to design but equally enlightening). And for the curious, I’m currently spending all my time illustrating an educational iPad wonderland/gameworld set in the woods.
1. Design is an iterative process and I never know how much I suck until there are considerable changes. With significant improvements, there are previous iterations to compare to, and that’s when the “oh man, that really was ugly…” kicks in. You see, I think designers are blinded by their own pride and dedication, just as parents always think their babies are the cutiest/prettiest ones in the world. Be able to let go of your first design (which you’ve put all your time and energy into) if someone else says it can do better. This is one of the most humbling experiences a designer can learn to embrace and there is always room for improvement.
2. There’s more to design than aesthetics. Although you can (and should) incorporate self-expression, design isn’t art. In fact, there are probably more constraints than there is room to improvise. Trying to imagine the user flow of an application that doesn’t yet exist can be difficult, which is why you have to build a version and just test it then tweak it. A/B test your landing pages over and over again and you’ll realize how important copy-writing, placement of images, even button size and color are to your design. When unsure, I like to surf WhichTestWon and find justifications for why a page or form should be designed in such a way. I learn the most surprising things from A/B tests results.
3. Designers should try coding up their designs, otherwise, they’re just artists. One of the biggest problems I see when people come to me with their “start-up’s mockup idea” (asking for feedback) is that, whoever is visualizing all the Photoshop flares and bubble gloss effects doesn’t understand what’s feasible with or without CSS and how to optimize a website. They even imagine buttons and tabs as images, which is usually unnecessary and tacky. If only the designer knew that you could achieve rounded corners, box and text shadows, gradients and transitions with just CSS, he’d design the PSD template more practically, and make questions like, “Is this layout supposed to stretch full-width or be bounded in a box?” more clear.
4. Acquiring the “web 2.0 look” (or are we at 3.0?) takes a lot of time seeing and proactively searching for new inspiration. It also requires learning the newest CSS3/HTML5 tricks and keeping up-to-date. Just as music tastes are acquired through experience, I feel like design is the same way. When someone says “I like his style”, perhaps she means I like his visual acumen and the visual database he’s built up for himself to draw inspiration from. 1999 designers have a much different aesthetic than 2009 designers, and different audiences (age-wise and globally) have different notions of what “looks good.” I make sure I read up on Smashing Magazine‘s articles and browse through sites like Awwwards and CSSline, every once in a while. You’ll soon realize that something “fresh” looks really appealing (a new font from the Google font directory, perhaps? a neat new jquery trick?) and something “old” or just overused starts to look boring. Something “fresh yet familiar” seems comforting and trustworthy (and many clients like to request that a site looks like Successful Startup A mashed with Awesome Startup B — neither of which will be Digg). Web design is constantly changing.
5. Never assume everyone will understand what you already know and adopt as second nature. This is particularly true for UI/UX design. For example, we designed the Word Seek start screen to show four tiles in a row (forming a bar close to the bottom), spelling out “P-L-A-Y”, with a translucent right arrow overlayed. To start the game, you swipe from left to right, just as you would unlock any Apple mobile device — but many people don’t make this connection and email us asking for help just to start the game. It’s our fault, not theirs. As another example, I once designed a single-page layout with visually separate sections for “about”, “contact”, etc. and a navigation bar on the top that jumped to each section. My boss replied with, “Can we repeat the navigation bar on each page? It’s kind of hard to figure out how to go back…” — I guess scrolling up or down wasn’t as intuitive as I thought.
In conclusion, being a designer is just as iterative as design processes themselves. We constantly have to keep ourselves up to date with the latest technologies and aesthetic trends — but through practice, we’ll mature and become better, wiser designers.
It’s so funny that this video link pops up in my Twitter feed (via GOOD) right after I had just watched Influencers, because this film directly answers the overlying question (in the previous one), “18-24 year-olds are at the top of the influence pyramid,” influencing those who are younger and older than they are. We also seem to be the largest group with the most buying power… and also carry this mindset that we’re somehow entitled to everything.
Having once written an article that introduced the Baby Boomers and Generation X leading up to the Millennials, I found Box 1824′s similar (but more in-depth) historical analyses particularly entertaining. What was most fascinating though, was how our generation was portrayed.
We are characterized by the internet (not surprising), particularly by memes like Double Rainbow and Keyboard Cat (surprising when other things exist on the internet). We like to “unite work with pleasure” (not surprising) but “suffer from general chronic anxiety” (thanks to the internet, but still surprising), which leads to a “non-linear way of thinking” and “hyperbolic languages” aka sarcasm (not surprising). Our identities transcend where we’re from thus globalizing consumerism (not surprising), but our extended social network has resulted in short-term personal relationships (really?).
Despite the analysis, I really like the line, “You can be a surfer, DJ, rocker, nerd, sinophile, designer — all at the same time.” …possibly because I identify with the last three. Go Gen Y!
This film draws insights from creatives living in New York and working in advertising, fashion, and entertainment, to answer the question, “What makes a person influential?”
The answers range from “whoever popularizes a trend first” to being well-respected with valued opinions, not just through words but also from life actions. One stated that trends come from the younger class, “because they’re broke and therefore have to be creative” with their personal expressions. Others countered that trends come from your foundation, meaning your family, particularly your parents who have influenced you the longest. However, another person wraps it up nicely at the end stating that it’s all relative to personal tastes — which I agree with.
When I examine my personal preferences (fashion, music, lifestyle tastes), I can pinpoint three main influences:
Recently, I started working in the Financial District where people eat yuppie custom order salads for lunch and wear Ann Taylor (across the street). My new environment has become another influencer, replacing an old paradigm I’ve created and gotten comfortable with. I’m still learning to walk around San Francisco in heels.
Lately, I’ve been designing a lot of web pages for A/B testing to optimize conversions for a media client, so it has been interesting to learn what works and what doesn’t. For example, seemingly inconsequential tweaks like shortening form fields, changing button colors, and adding lock icons turn out to be surprisingly effective. Crazy.
A few days ago, Digital Scientists wrote up a blog post detailing their top 50 optimization tips, many of which I found particularly useful. Here are a few that may apply to other user interface designers:
Even something as inconsequential as creating entertaining 404 pages or changing the color of visited links seem to help! and the most shocking? The three-click rule is false.
September 8, 2012 - 0 Comments
September 8, 2012 - 1 Comment
May 10, 2012 - 0 Comments
@
serena (at) serenastudio.com
(510) 621-RENA
check out 