natalievi

Live What You Love

nat-baby

I remember hearing the sharp sounds of static billowing from the second floor of our 2-story house. I listened carefully, dancing up the stairs towards an unfamiliar sound, where I found my brother, his back turned, staring directly into a computer monitor. Then there was silence.

“Welcome to America Online”.

That’s when my life changed forever.

We adopted AOL 1.5 into our lives sometime between 1994 and 1995.

My brother had accrued $200 on Prodigy (remember Prodigy?) and decided to sign up for AOL. From there, I got addicted and it happened fast. I signed up for names that I can no longer remember but I’m certain it had either a Sanrio or Winnie the Pooh character in it. For now let’s just say it was “Pochacco817”.

When I think back on my career, that was my turning point. I’ve had numerous thoughts about changing career paths earlier in my life but then again, I’ve had trouble committing to a bottle of shampoo.

From the age of 10 onwards, my timeline goes a little something like this:

1995
The addiction to the internet begins. Thank you AOL 1.5.

1996
After witnessing my brother play with shapes, I too started playing with shapes thanks to Photoshop 3.0.

1997
 I joined AsianAvenue and started blogging, while simultaneously signing up for Geocities so I could have a creative outlet for my newly found Photoshop skills (or lack thereof). I eventually, like most teenagers, ended up doing weird highly-saturated black and white self portraits like this:

natalievi-bw

1998
My love for blogging and design led me to Xanga, where I had the flexibility of designing my own blog. Because of this, I learned HTML and CSS.

2003
With 5 years of blogging, designing, and reckless coding under my belt, I was hired professionally to design and develop a website. It looked something like this:

MyMegg

2005
After questioning my career path as a creative, I looked in to becoming an anesthesiologist, an architect, or a pharmacist. I was grasping for any idea that would gain acceptance from my critical asian parents.

2006
With brand new clarity and a tiny rebellious streak, I decided to feed my existing love and knowledge of design and became an intern at a local Dallas design agency. After a few months and a lot of deliberation, I left college high and dry to gain real world experience.

At the end of the year, with a lot of reasons as my ammunition, I ventured off to New York City.

2008
I gained enough experience and was able to land a job at R/GA, where I had a boss that trusted me so much he gave me work in a space I’ve never touched before: mobile design. That’s where I started doing things on Blackberry and Android before ever touching iOS.

2013
After 5 years of designing for mobile, I can confidently say that this is what I want to be doing for the remainder of my life. I’ve talked a little about that here:
Mobile Design? Sure, Why Not
I want to wrap this up with one little nugget of advice for those who are young and seeking out career paths:

You might not get it right the first time but the key is to follow your passion and never give up.

 

Mobile UI Pattern Libraries

Monday was the 2nd year anniversary of iheartmobiledesign.com, which still sits stagnant and abandoned in it’s corner of the internet.

My intentions seemed easy: start a collection of screenshots from mobile apps to reference for patterns. As always, it was easier said than done.

Since then, there have been many of these that have sprouted up and they offer a deep library of patterns that I find very useful and inspiring. While I rework my own project, I thought I’d share the links of the ones I know and use.

(Please feel free to comment and share yours if you don’t see it on my list.)

Mostly iOS:

Strictly Android:

Ipsum Generators

Lets face it.. after years of using “lorem ipsum” dummy text, we’re probably all a little tired of it.

Luckily for us and our witty designer colleagues, there’s a little more variety these days. Feeling a little adventurous? Check them out below.

New: Tea Party Ipsum

Samuel L Ipsum

Bacon Ipsum

Hipster Ipsum

A Gowalla Concept for Windows Phone 7

After designing the Flickr for Windows Phone 7 and Slate app and the first version of the foursquare WP7 app, I was definitely on a little Microsoft kick. I found it highly enjoyable because it was a departure from the typical touch interfaces that are normally loaded with the same navigation, tab and button patterns.

39Argyle enlisted my help earlier this year to design a quick home screen concept for Gowalla that could communicate a potential application and brand on the WP7 platform.

I thought it’d be nice to dig it up and share the design. Maybe one day we’ll be able to design the whole thing. I’d imagine it’d be pretty dope.

Panorama Home Screen

In Device

Oh my, Grande!

When we moved to Austin, we thought long and hard about which internet and television provider to sign up with. After signing up for both, Time Warner and Grande Communications, we ended up choosing the local underdog: Grande Communications.

They promised higher internet speeds, more channels and better customer service. That works for us.

Until we saw their television interface.

I can’t remember my exact reaction but I assure you it was nothing less than horrified. I feel like I’m running Windows 1.0 on my television every time I turn it on. Note: it’s not a good feeling. The pixelation! The horror!

I was going to add notations to these screens but they’re so horrible, I think they can all speak for themselves.

“Welcome to the mid-80’s!”

Video On Demand

DVR Playback Channel

Channel Guide

When a customer service representative was questioned by my husband about their outdated interface, they told him that based on customer surveys, the customers preferred more channels than a slick interface. With that said, I hope these customers never end up at user testing for anything I ever design.

Grande Communications lacks much more than a pretty face, but an entire holistic experience. There is no evidence of anything remotely up-to-date about it, including supporting services like an iPad or iPhone application. This might bode well with the elderly but I can’t imagine how they will ever gain new customers without updating their software.

Give us something, anything! Or, please, just match all the corner radii and we’ll call a truce!

Mobility and the Mobile Device

I’ve read many articles debating the use of the term “mobile” and its antiquity. Some, coining their own terms and arguing their own takes, make really valid points. My thought?

Don’t try replacing a term that isn’t broken.

The technology and devices have evolved and as a result of mass production and a growing market, the device landscape has been segmented into many different categories: one hand (smart phones), both hands (tablets), single focus (Kindle), multi-function. That’s only scratching the surface. No matter what kind of splits these devices face now or in the future, they carry one similarity: mobility.

A mobile device should not constitute the notion that someone has to be going somewhere with their device for it to be “mobile”. It is the idea that they can go anywhere. Whether or not the user chooses to go anywhere, what the user does with the device, how they use the device, how often they use the device and which devices they use remains irrelevant. The method, behavior and context of each user is unpredictable. The possibilities: endless. The only constant in the equation is that the device has the ability to travel with its user. To me, that’s as simple as it gets.

We can’t back ourselves up in to a corner by trying to reinvent terminology based on something specific. What we know now may not be what we believe in the future. With the speed at which we’re developing new devices, interactions, and technology, these new “terms” will be rendered obsolete before it even catches on.

We should relinquish the idea of what “mobile” used to mean and accept that it’s meaning evolves in parallel with the technology itself. Rather than calling “mobile” outdated, I find myself thinking it’s all-encompassing.

In summary, I’d rather change my perception of the definition than to try and replace it with something new (and temporary) unless it’s super catchy. Like “snarf!”.

File organization sucks!

Three words in and I’m sure you can already relate.

File organization sucks. It’s worse than having hangnail, a paper cut and a twisted ankle happen all at once on a rainy Monday morning. I wish it were possible to expunge any sort of file organization from my life, but unfortunately (and rightfully so), I deal with this situation on a day-by-day basis. The countless hours that have been spent naming and renaming files and folders puts the time I spend working to shame.

A couple of years ago, I thought I found the perfect structure. The structure, which at the beginning seemed to operate in such an efficient and organized fashion, rapidly succumbed to entropy. I gave up hope for some time which resulted in stealing other people’s conventions. Unfortunately, I don’t think they knew what they were doing either.

After signing up for Dropbox last month, I finally buckled down and tried again. It’s been successful thus far (knock on wood), so I thought I would brag about it.

Folder structure:

File naming convention:

I opted out of adding the version number to the end of the file name once the files are moved into production. The reason is that if there were multiple people working on one file simultaneously, having version numbers could get confusing and it would only be a matter of time before people started tacking on their initials. In lieu of version numbers, I find it easier to memorize dates. If there’s a file that’s drastically different from the last, I create a new folder with a new date and copy all of the existing files into the new dated folder. Of course, there are rules and regulations I put forth to keep the space on my Dropbox (or harddrive) to a minimum (like instances where there are 100+ files), but that’s just too much detail! Onward!

There was once a suggested naming string a friend offered to me that I find way too long and strenuous to memorize:

projectNumber_clientName_projectName_contentType_date_version.ext

Rather, I decided to use a straightforward, shorter and cleaner naming string:

Design/Conceptual Phase:

Because the conceptual phases are usually rapid and short, I assign each concept with only a number.

projectName_screenTitle_concept_conceptNumber.ext

e.g. foursquare_homePage_concept_1.psd

Presentation Phase:

These files are the ones that are presented to the client, therefore I tag it with the company name, version number and date.

companyName_projectName_VD_versionNumber_date (MMDDYY).pdf

e.g. fjord_foursquare_VD_v2_032111.psd

Production Phase:

Once the design/concepts are approved, the finalized files are copied into production. I order them based on their order in the wireframe document and give it a device tag at the end (if the batch is too little to justify segregating them into respective device folders).

projectName_order_screenTitle_deviceType(if applicable).ext

e.g. foursquare_1.1_login-details.psd, att_2.0_messaging_tablet.psd

And there you have it. For now.

Showing WordPress malware who’s boss

I have a love/hate relationship with WordPress. The security stinks, no matter how many plugins I install and sometimes even the security plugins are the culprit to the malware attacks.

I finally found a site that does a pretty darn good job at scanning for malware and wanted to pass it along in case anyone suffers the constant heartache and failed battles with the little malware monsters.

http://sitecheck.sucuri.net/scanner/

Photo from Artlure: 50 Cute Monster Illustrations