June 13, 2012

Yeesh

So. Movable Type is re-installed temporarily. Comments are still non-functional for now. If this installation is hacked again, I'll kill the damn comments permanently and just write posts manually. If that happens, I'll have to kill the reader feed as well. I'm not going to manually write HTML for posts and then edit a second file as well. I'll use MT to post one last time before that happens, so if you do only read me in your reader, you'll get a warning.

The nice folks at JetPens sent me an awesome brush pen to review. I've used it a bit over a couple of days. I want to see how the ink does before I publish my review, though, so expect that to happen soonish.

Other than that, I've been working my behind off lately. Still loving my new job even though I've started getting into the politics that inevitably occur when you have an organization of more than 10 people. I don't have to like politics and the games people play (even at a place where they try REALLY hard to limit such things), but it's all good. We're all heading in the same direction, just different ways of trying to get there! I'm good with that.

I've taken over the emailer program there (don't worry, it's not spam, it's opt-in!). It's wonderful to be running something, looking at the metrics and trying to adjust things to get better responses. The copywriter I work with is great - we've managed to knock it out of the ballpark several times this year and sell out of product in a short time. In fact, today, we actually sold out in something like 4-6 hours!

At the same time, producing and sending 3-4 HTML emailers is exhausting. I barely have time to do anything else and I really fear that my HTML and CSS coding skills are getting rusty. Making HTML emailers is a lot like coding in 1999. It's all tables and very little of the stuff that makes being a web designer/interaction designer fun. I'm trying to crank through a month's production in two weeks, giving me two weeks to do other things.

I did get one landing page re-done and it's something I'm proud of. We had a problem with needing a landing page that showed family groupings of tote bags and merchandise bags/envelopes. However, these items turn over quickly as certain patterns or materials are discontinued. Photo simply couldn't keep up with all of the requested re-shoots and it really wasn't fair to them. Nor was it fair to the customers to leave these family shots with 3 of the 4 items discontinued so that when they clicked through to look at those bags, they'd see 1 that was on the previous page and maybe another 2 that they'd not seen. My solution was to use illustrations which clearly showed the most important features - shape, handles, etc. Then there's a "sidebar" showing the available colours. An example is here on Dribbble. It's easy for me to add a new colour swatch when things change - much easier than it is for Photo to get all of the items in that family, re-stage, re-shoot, re-colour-correct, re-submit, etc, etc. I'm hoping that the customers dig it and find it useful.

All right. Kind of boring post. Thanks for hanging in with me whilst I get all this software and hacking mess cleaned up.

Posted by Red Monkey at 8:27 PM | Blog | Design | StumbleUpon Toolbar Stumble

May 24, 2012

Diet Coda

Downloaded Diet Coda today and I'm trying it out. Hope to re-install the blog software this weekend and make comments active again, not that anyone really comments here any more.

Gotta say, for the HTML/CSS editing that I do via iPad, this Diet Coda will be a godsend. Still have to see if I can stand for it to replace Dreamweaver. Probably can, but $50 (today only) for Coda 2 seems hefty. And if I wait, it'll be $100. I don't tend to use more than TextWrangler any more, though, so that makes me question whether I really need anything more complex than a text editor any more. Of course, it's always nice to be able to see where in the page I am ... but with responsive design, is that really viable anymore? Maybe it's time I give up the visual cue of the page and just code.

Meanwhile, back when I was attending the Neilsen Norman Group's Usability Week, I tweeted:

Eventually, the theory of responsive design (however it plays out), will finally get stakeholders to realize web is not print. It will get them used to the fact that a site design can't look the same in every screen and thus will also mean it won't look the same in every browser. I see progressive enhancement/graceful degradation & responsive web design theories blending together eventually. #webdesign

I've been thinking a lot about how my work has changed so much in such a short time. After all, the web as a mainstream entity didn't really exist when I graduated from high school and was only starting to gain traction outside of computer nerds as I graduated from college. I started designing websites haphazardly in 1997, I think, although I had a site a year or two earlier. I mean, if you can call it a website....

I have "grown up" as a designer as the web has also "grown up." When I started, the "best" way to make a site was shove images into table cells. It was a hack then and everyone who cared about how the site rendered  (users, designers) hated it. Everything was boxy to the user and kind of annoying and designers hated keeping everything boxy and hated marking up the page even more.

But the worst was "This site looks best in..." which was practically required if you had a complex design - it always seemed that a complex design simply was never rendered "the same" from browser to browser. You'd think that this fact alone would have been enough warning to us to realize that we were not working with the same media as print, the same constraints and rules. But, of course, we are creatures of habit far more than creatures of innovation and change. And our stakeholders were often even more convinced that this was just electronic print.

In the mid 90s, I was teaching first-year writing. I was one of the first in the department to put my entire syllabus on the web. I begged the head of the department to let me take over the department's site design from the undergrad who'd originally built it. The site was not bad by the standards of the time, but each page was different. Without any class in human computer interaction, no lectures on usability, no formal training in information architecture, not even a single design class under my belt, I knew that websites needed more coherence than the department's name up at the top of each page.

I threw up a site more quickly than I preferred using a piece of free software called NaviPress, an early "WYSIWYG" program. The intent was to go back and learn HTML as soon as the spring semester was over so that I could "do it right." The first site was ugly, simple and usable enough. It was a backup of the paper syllabus. My students were, by and large, privileged and most had computers with them. The school had multiple 24 hour computer labs for those who did not have computers and all of them had computers at home. I was smug in the thought that my students could never claim to have lost their syllabus - it was online.

I had the entire site backed up on disk and the first day of class, two IT guys wheeled in the cart with the computer setup but were unable to connect to the internet.

No problem, I was practically giddy with my foresight. I whipped out the disk and proceeded to get through the class, showing them the website saved locally. The IT guys were surprised and grateful. The students were curious. 

That summer, I taught myself HTML a little more systematically. I didn't buy a book, I didn't take a class. I simply viewed a lot of source code. I chatted with a few people in the rec.toys.misc newsgroup who were also interested in the web. For the longest time, I thought web guru Eric Meyer and the Eric Meyer from RTM were one and the same. By the next summer, my website's ugliness embarrassed me. I had taken "staff classes" at the university where I taught as an adjunct and learned a little Photoshop, a little Dreamweaver and a fair amount of Fireworks. I was also starting to pick up Flash as well. I was well and truly hooked.

As a teacher, I strove to know my audience. After all, the clarion call of the writing world has always been to know the audience. You must pitch your writing style, your vocabulary, your points to a specific audience in order to reach them, persuade them. I saw teaching the same way. Yes, I had a slew of topics I was supposed to cover, but every semester was different, presenting different people with different skill sets, different needs. I was always a semester "behind," spending any time in between semesters tweaking the class according to evaluations and other feedback from the students. More than once, I completely stopped class to get feedback as to why something wasn't working and what we as a class needed to do to get things back on track.

It was not long before my website embarrassed me. I had learned so much in a short time and I was beginning to truly understand the power inherent in the medium. I could do more for my students. So one summer not long after I began putting the basic syllabus on the web, I planned out a new version. I spent time first deciding what should be on the web, how it should be organized, what types of formatting the different pieces of content needed. I agonized over how my students thought, how I could best present the most important information like due dates and daily schedules. I wanted them to have no excuse for not knowing the information they needed.

Then I went to work on the look. I don't recall now if I did a full mockup in Fireworks; I do remember that some pieces (like the buttons) were template specials, not created from scratch. I was so proud of the finished product. I'd used everything I'd learned about my past students. I'd provided multiple routes to the most important information in order to catch their different ways of thinking and processing and searching.

And two-thirds of the way through the first semester using it, one of the students finally blurted out that he couldn't find a damn thing on the site.

I'm pretty sure that my jaw actually fell off of my face and hit the ground.

I wish I recalled that student's name and I hope that he got half as much from my class as I did by his single statement, because he taught me the most important maxim of my web career:

Your website is never done.

You will always be tweaking your designs, your architecture, your content, your layout. Always. The web is a living document in a way that your print syllabus is not.

The web was much the same as teaching a class. The best instructors were fluid, adjusting to their students' needs on the fly and still striving to reach all of the curricular goals, but tailoring them as they went. It was a philosophy I embraced whole-heartedly, but I had originally made the mistake of thinking the essential layout and architecture were somehow exempt from that. 

That was my first lesson in what I have come to think of as holistic web design. The second lesson revolved around a tension between design, usability and audience. 

And I think that stakeholders are finally starting to learn the same thing now. You can view a site on a multiplicity of phones, tablets, computers. They all use different operating systems and different screen sizes. None of them looks exactly the same — at least, not without spending a ridiculous amount of time and effort and extra code to get that effect. Whilst I know that some poor managers simply assume that a coder's "inability" to get a page or detail to look exactly the same in all browsers is either laziness or incompetence on the coder's part; I firmly believe it's becoming easier to convince them that you don't WANT the site to look exactly the same on every screen. You want a comparable experience. You want it to be easy to do whatever task the user wants. But the context is as different as the screen size in most cases. And the more we push for well thought-out responsive design, the more I think they will agree with us.

That said ... it's past time for me to redo all of my sites. None of them are responsive. All of them adhere to fixed pixel designs. I need to make time to practice what I believe.

Truly, your website is NEVER done.

Posted by Red Monkey at 8:21 PM | Design | StumbleUpon Toolbar Stumble

April 10, 2012

Don't Hide Your Light

Made primarily from Sculpey, includes a light pack inside, glow-in-the-dark paint inside and the bodies of both butterflies are glow-in-the-dark Sculpey.

Sorry, blog software still uninstalled, so no comments. You can hit me up through the contact form at the top if you want to let me know what you think. I'll manually publish comments if you indicate you want me to do so. Click to look.

Posted by Red Monkey at 9:15 PM | Design | StumbleUpon Toolbar Stumble

February 8, 2012

Flick It

The touchstone for a popular mobile app has, in the last two years, become Rovio's Angry Birds. Mention that game to most iOS developers and you'll either see Angry Birds induced anger froth forth, or an earnest explanation as to why their app will be even bigger than that.

Introduced December 11, 2009, the app seems a ridiculously simple concept, and on the face of it, it doesn't sound like much. Some green pigs have stolen the eggs of a variety of birds (Green Eggs and Ham, anyone?). You control the birds and you fling those birds via a stationary slingshot at structures of stone, glass and wood that the pigs have built around them. The birds either strike the pigs directly and destroy them or they knock down bits of the structures on top of the pigs and destroy them that way. A level can be completed (or failed) in well under a minute.

That's it.

The game has succeeded because while the characters and visual design are not the greatest, they are cute and reasonably well rendered and displayed. The extreme number of levels (and Rovio is constantly adding more levels at no additional cost to the player) and speed at which levels can be played are key points to its repeat playability. In addition, Rovio taps into the competitive players and the completionist players by including levels of winning. You can go on to the next screen if you kill all the piggies, but ... to unlock certain levels you have to have gotten a score high enough to earn you three stars. But, that's not all. Many levels have golden eggs hidden in them. Some are easily visible, some are not. You can play the game and succeed without ever hitting a golden egg, but to be competitive or completionist, you have to go back through and hunt down the golden eggs as well. For most people, new levels come out before they can complete all levels, including golden eggs and the three star level.

The game is constantly enticing players back with new levels or by social media (hearing about a golden egg for example).

Another level of engagement is the game physics. Honestly, the game seems to personify the definition of insanity: doing the same thing over and over again, but expecting different results. The game physics are reasonably reliable, although if you talk to anyone who plays the game regularly you'll inevitably hear frustration that "there is NO WAY a damn pig would survive having four stone blocks on top of it" or "there is no way in HELL that piece of wood would not fall down in real life. Don't the game makers understand basic physics?"

The game physics, I have grown to believe despite my occasional frustrations, are this way very much on purpose. Players become convinced that they are "almost there" and if they "just do this a little bit differently" it will work. In addition, adding some random element to the physics means that no two players are getting precisely the exact same results on levels. I know I have attempted to count pixels before releasing my bird - expecting that if the physics are completely consistent, I could expect that bird to land in the same spot every time. That doesn't happen. It might be close, but it's never exactly the same. I suppose we could chalk up this random element as the air speed we can't see or feel, but it's become one of the elements I believe makes the game most addicting because you can do the same thing over and over again and it's not insanity - you don't get exactly the same results. It's not so far as to be inconsistent - it's small variances. I find this important to note since inconsistency will frustrate players and cause them to reject the game.

Combining the game physics with the rapid level plays, the plethora of levels and the various goals, the "addiction" level of the game tends to be quite high.

There are only a handful of games I continuously go back to and Angry Birds (in all its permutations) is one. The two other favourites are Iconfactory's Ramp Champ (developed very much prior to the release of the retina displays) and Tiny Wings by Andreas Illiger.

Both of these games are essentially designer-driven and as such are drop-dead gorgeous. The design certainly caught my eye, but the game play on both are also quite well thought-out. Ramp Champ is essentially either Skee-Ball or a target gallery game, depending on the level you play. You roll the balls up the ramp, hit targets or holes and get points. The points earn you tickets, just like in physical Skee-Ball and you exchange them for virtual prizes. There's a set of shelves for you to display (and interact) with your goodies and there's also 3 goals for you to hit per level with trophies received (and displayed in your trophy shelves) as well. You have fast play and lots of incentives to keep coming back to the game. After all, you have to save up to get some of those nifty prizes!

At first blush, this game should have gone just as viral as Angry Birds, but it didn't. It was certainly attractive enough to catch the eyes and attentions of people. Game play was fast and it was a variation on a well-loved and established game.

I believe it didn't achieve the same popularity for an extremely frustrating reason. In Angry Birds, the graphics are reasonable and cute, but they're not drop-dead gorgeous. The backgrounds from major "chapter" to major "chapter" change, but the individual levels within a "chapter" don't change much. The game pieces don't really change much either, other than the occasional addition of a new bird or new complication. Development time for Angry Birds is primarily devoted to level design, not visual design.

Ramp Champ's development time focused both on level design and drop-dead gorgeous, intense-focus-on-the-little-details visual design as well. The result was far fewer levels. They added in-app purchase of additional levels and did seasonal levels before Rovio added Angry Birds Seasons to the mix, but it was one level per season whereas Rovio had one "chapter" per season with 15, 30 or more levels to it.

Ramp Champ has a loyal and devout following and when the retina display iPhones came out and especially when the iPad came out, players begged for an update to the game. Several of the Iconfactory designers said it would never happen. The graphics would have to be recreated at the different resolutions in order to maintain the standards they'd already set in the visual design of the levels. The ROI for the update, which many users would insist should be free, was just not worth the time. The same went for the additional ramp packs - it wasn't worth the time and effort to produce more levels if the purchases weren't forthcoming. Without continuing support for the ever-changing world of iOS and without adding more levels, the game essentially flat-lined.

Similarly, Tiny Wings also had fast game play with multiple goals per level and also had gorgeous graphics. It got quite a bit of buzz in the design community when it first came out, but I rarely hear about it now. The basic gameplay for this game is you have a bird with tiny wings - he can't fly far, but if you land him just right in the valleys, you essentially slingshot him high up in the sky and give him a speed and distance boost. You have various basic goals, gathering coins, getting to a further island before night overtakes you and more specific goals to each level.

I eventually lost interest in the game because despite the fact that the colour, textures and arrangement of the hills and valleys differed (along with the goals), the basic background was essentially the same. Combining that with the increasing difficulty of the levels and I eventually got bored. (Granted, I have a low threshold of boredom, but I can also be quite obsessive about completing all goals.) It became the same look and the same goals in my mind as the game progressed. There was not enough change to keep my interest. I'm sure that Andreas Illiger kept the backgrounds relatively similar in order to cut down on development needs, but that trade-off is a portion of what finally made the game boring to me. I understand that Tiny Wings was voted iPhone game of the year for 2011 and even landed a top spot in the App Store until Angry Birds Rio was released. Still, despite its success, the buzz around it has not reached the viral levels and penetrated popular culture in the way that Angry Birds has.

Angry Birds is not a brilliant game in and of itself. It is a brilliant understanding of why we play games. It fits a need for us to have something to do whilst we wait in line at the store, wait for a plane or unwind before bed. We don't have to make much of a time commitment to the game in order to succeed at it. It's constantly introducing new things - environments, characters, complications. Its random elements ensure the game is never exactly the same and its incredible wealth of levels ensures that even if you replay a level you've not only beaten, but three-starred, you'll most likely have forgotten just how you did it last time. It understands our need for constantly challenging ourselves, our propensity for boredom and our desire to compare our achievements to others.

It also understands the fine balance between design and business practicality.

It's not a choice I would prefer to make. As a designer, I want stunning graphics all the way through my game. But I have to admit that what truly keeps me coming back is both the challenge of "almost getting it" and new levels. If Angry Birds had stopped releasing new levels and challenges both, I'd have deleted it long ago.

Posted by Red Monkey at 8:25 PM | Design | People Say I Have ADHD, But I Think - Hey Look, A Chicken | StumbleUpon Toolbar Stumble

October 5, 2011

R.I.P.

R.I.P. Steve

Stay hungry, stay foolish.

Posted by Red Monkey at 11:00 PM | Design | StumbleUpon Toolbar Stumble

July 10, 2011

My Adventure Book

It's no secret that I love animation and particularly enjoy Pixar movies. I particularly love the storytelling in Up. The first, what, 10-15 minutes of the movie is just amazingly done storytelling. You get all this back story into the life of Carl in a short amount of time and with very little dialogue. And that story speaks to everyone - the kids (and the kids inside us adults) love the explorer theme - the kid beginning I think hooks the kids in the audience and gets them through the silent backstory that the adults mostly cry over. And then Ellie's bright paintings also keep the kids focused on what is important to the story. It's just masterfully done.

But what really spoke to me was Ellie's My Adventure Book with its page "ripped right out of a library book!" As I was re-watching it a few months ago, I thought ... that book would make a great desktop wallpaper. So I took a couple of screenshots and waited until I had some free time.

In the meantime, I planned it out in my head which led to my designing it a little differently from the screenshots. Despite the fact that the letters look like Ellie cut them out, I kept seeing them as stitched onto the leather cover. And almost every crazy little homemade or scrapbook I had as a kid had a kind of canvas-y looking material that created the binding. So ... that's what I went with.

Click the small image for a 2560x1600 1.8MB desktop wallpaper version:

petroglyph story

Let me know what you think!

Posted by Red Monkey at 12:58 PM | Design | StumbleUpon Toolbar Stumble

June 1, 2011

Beginning Summer

In May of 2002, I was a college teacher of first-year writing. The semester was winding up and I was preparing to go to a different kind of teacher's conference - one that focused on teaching rather than on subject specialty. I felt like I was hitting my stride professionally. The Wakonse Conference on College Teaching is really a lot like summer camp for teachers - it's held at the American Youth Foundation's Camp Miniwanca on the shore of Lake Michigan and it's an absolutely magical place. Having missed out on any kind of overnight summer camp as a kid, I was pretty much in heaven. I needed the back-to-nature time just as much as I wanted the discussion and stimulation of other college instructors/professors dedicated to the craft of teaching. I encouraged a few graduate teaching "assistants" to go the following year and we all had a wonderfully renewing time. The following year my partner protested: I'd spent two Memorial Day weekends gone in a row and she wanted to share the holiday with me. Little did we know that was my last chance to go as my position was eliminated at the end of the school year, 2004.

Wakonse Conference, on the shore of Lake Michigan

Fast forward to May of 2007. I was working as a web designer (and sometimes copy writer) at a large-ish dot com. A good friend offered me a chance to jump over to a junior design position at the agency where he worked, but I was afraid my portfolio was still weak (in print work) and I thought if I hung on a few more months where I was, I would have the chance to add quite a bit of print work as well as my web work. Alas, planning something doesn't always make it so.

A mere two months or so later, the company unexpectedly shut down and we were all out of work.

Fuzzed Version of an Ad

(Sorry for the poor quality - had to mask the company and couldn't find the original room image)

Still and all, it was a good summer to hone my craft - and I still felt that I needed a lot of honing.

Since that time I've held jobs in-house and freelance both. I've read a ton of books, studied a lot of designers, tried to immerse myself in theory and in practice ... and kept striving to better my craft on personal projects when the paying gigs weren't necessarily places I could stretch my wings. I found myself coming back to usability again and again - whether talking about web design, or even how a room is constructed, a shop set up, the design of a car's cabin. Don't get me wrong, I love illustration and print design both and enjoy doing them. But invariably, my brain circles from artistic to practical and back again. Last summer, I attended An Event Apart ... and I knew I'd found my people.

I don't believe that artists are flighty and designers have their heads in the clouds. You get flaky and reliable folks there just as you do with any other profession. I think that stereotype that an artist only thinks of some unattainable aesthetic goal and not the needs of the person requesting the piece is a load of hooey that does artists, designers, illustrators and the like a huge disservice.

But here I was at this conference and I was hearing people espouse my pet theories as fact. Many of them had had the resources to do actual studies or tests to back up these theories. And even whilst I learned from them ... I mostly learned that I needed to trust myself more and I needed to really start acting on my ideas. It was definitely a confidence booster.

Fast forward to this summer:

I got a gig with a company that is absolutely amazing. We are going to do great things with the website. I have some gifted, passionate co-workers who get it. I'm in a state I adore. The only thing that would make it better would be if our house sold and we could get a house here in the next month or two. (A pretty impossible timeline, to be sure.)

All I can think about is when I was a kid and summer marked glorious things to come. Everything is fresh and warm and bursting with possibilities.

Petroglyph National Monument

Posted by Red Monkey at 8:01 PM | Blog | Design | StumbleUpon Toolbar Stumble

February 13, 2011

Designing Me

My little sister loved the show Bosom Buddies. I'm not sure if she liked Tom Hanks' character or Peter Scolari's character more. The show always kind of disturbed me because I just didn't understand the premise. Why should anyone have to hide who they were just to rent an apartment?

I do recall being utterly fascinated by their jobs at the ad agency, however. Those big tables. The markers. The ideas bouncing back and forth. People did this for a living? Really?

I was hooked.

I had always analyzed adults' commercials - not quite so much the ones targeted at me - and found myself fascinated by the way ideas were pitched. About the same time I became very aware of how my toys were packaged ... and how the toys or playsets were designed. I began rattling off what they should have done in order to do it right. Well, right in my eyes, anyway.

I realized I was utterly fascinated with well-designed toys. I didn't even have to be terribly interested in the subject matter to be interested in the toy. For example, My Little Ponies disturbed me greatly. They didn't DO anything. Their accessories were non-existant or lame (to my mind). Pointless toys. Now, if they'd come with markers for "painting" them, maybe that would have been a concept. (Again, to me - I realize a lot of girls loved them - I obviously was not the target audience.)

Smurfs didn't interest me as a toy, but the packaging and the marketing did. There were tons of these little statues and you could also get houses, a ship, tons of stuff that would make playing with them more intriguing.

And, of course, Fisher Price Little People and Adventure People utterly fascinated me. (I won't go into Star Wars - I wasn't allowed to have them and I tried not to covet them too much. Not that I was successful.)

Early packaging was a mix of product shots with elaborately, but realistically staged pieces. If the product was a house, you had the house opened up and all of the pieces arranged where you could see them. Another shot might be a close-up on those pieces in the appropriate rooms. And the early boxes always seemed to include a child posed "mid-play" with the toy. At least three sides (flaps and perhaps the bottom) had blue line art of the toy in different configurations.

Who decided what went on the box? Who picked the little kids in the pictures? Why draw the toy when photographs would do?

My mother loved art. We had Prismacolor markers in the house, various types of paints, pastels and watercolours. She tried explaining once that full-colour photography was more expensive than 1-colour line art. This didn't really compute for me until I finally understood that we're talking paying an artist to draw the line art and paying to have thousands upon thousands of these printed vs. a full-colour photo shoot plus paying to print thousands and thousands printed more expensively.

I began looking at my toys the way I looked at mom's art supply packaging - malleable. Mom's Liquitex paints came in the most WONDERFUL container! It was silver/grey extruded plastic shaped a tiny bit like a rocket - more narrow at the top and with two "wings" at the bottom. It was rather squared off instead of rounded, but still. And the top piece of the box was perfectly clear. And, even better, my Fisher Price Adventure People fit inside - I had plenty of one-man rockets!

My toys could change as well! For example, why didn't the Fisher Price Village get re-used as an adobe pueblo? It seemed a no-brainer to me. You could re-use practically the entire original mold which had to be cheaper than making a new playset from scratch. Why had they not jumped on this opportunity? I mean, they released the house under several variations. Same with the farm. And the parking garage. Even the houseboat was eventually retooled into a ferry boat.

I was well-known for critiquing how things worked and now I was critiquing how things were packaged and marketed as well.

And yet, I did not immediately go into design or advertising. Why?

Simply put, my sister was the musician and my mother was the artist. I read incessantly. I played with toys longer than most of my peers - largely because I was continually lost in stories of my own making. I assumed I would become a writer. To make a living whilst I wrote, I'd become a teacher.

I completely ignored my own art style, my sense of design and my constant fascination with how things are designed. The family roles were not lines to be crossed.

Ultimately, then, it's not surprising that all of these things converged while I was teaching freshman writing. I built a website for my students to fill a specific need: you can't lose a syllabus that's online if you live on campus and have a computer. (Which 90% of students had at that time, at that school.) They also had the standard-issue paper syllabus because what works for one student, doesn't work for another. I went with function first as I was under time constraints and because, let's face it, the web in 1996 was not exactly a beautiful landscape. It was filled with tacky hit counters, under construction signs and the obligatory 8-bit style of animated gifs.

I was ultimately appalled with what I first put up. It was functional, but it was fugly. Surely there could be a better balance on the web of form and function?

As much as I loved helping my students learn – and I did love that – I found the puzzle of designing "the perfect class website" for them even more fascinating. I was in a constant cycle of not just teaching the class and grading papers, but constantly asking my users for feedback. And finally I realized I would always, always be a semester behind in design of the website because my users were subtly different every semester, always having new needs that weren't there the semester before.

Your website is never "done."

It's never finished.

A print piece generally has a finite deadline and purpose. To hand out to this audience at this situation. A website is often a far more complicated creature which often serves a much, much more broad audience. It's not just a Sears catalog for shopping. It's not just an enticement. It's not just about educating your audience.

Don't get me wrong, print design can be very complex – I'm not saying it's easy-peasy.

But a full e-commerce or business website? So very complex. So much to think about. Who is your audience, what are their goals, what are your goals, how do they access data, what data do you want them to access, how can you make them comfortable finding what they need, how can you make it easier, how can you make it enjoyable?

And how do you balance function and form with all of those details?

And that's why web design has such a diverse number of job positions, from visual designer to user interface designer to user experience, content strategist, architect, front-end developer, back-end developer ...

Ultimately web design incorporates so many of the fascinations I had as a kid - from how you "package" the site, how the pieces fit together, the look, the enticement, the whole enchilda.

I consider myself lucky that I live in a time where I can work on projects so complex. It was a career I couldn't imagine the first time I logged into a bulletin board on my neighbor's Commodore 64 ....

Posted by Red Monkey at 2:35 PM | Design | StumbleUpon Toolbar Stumble

December 4, 2010

The Box Lid

All right ... here are some picture of the now-finished box lid for the Plants Vs. Zombies game. Click the images for a larger version.

Box Lid for Plants V Zombies game
Box Lid for Plants V Zombies game
Box Lid for Plants V Zombies game

Posted by Red Monkey at 6:34 PM | Design | Sketches | StumbleUpon Toolbar Stumble

November 28, 2010

A Little Overboard

I get these wild hairs from time to time. Something just strikes my fancy, and on a whim, I have suddenly committed myself to a huge project. Last year, it was making a Sculpey piece for everyone in our department. This year it was another Sculpey project ... but a little bit different.

I watched a few friends on Twitter conversing with someone who sounded intriguing. So I followed her. She was having a rough year. Her body was attacking several organs and things were looking serious. After several surgeries and more tests than you could shake a stick at, she finally had a diagnosis of Lupus, something I've rather feared for most of my life. (I've been tested for it from time to time and had doctors bandy the word around since I was in high school.) Through it all, her kids seemed so sweet and loving.

So one day, she's tweeting about the kids playing their made up game of Plants Vs. Zombies in the backyard and she's just basking in their imagination, ingenuity and sense of fun. I mean, Plants Vs. Zombies is an iPhone game. Kind of a strategy game somewhere between board game and video game. And they are making up their own version to play in the backyard. Later on, she tweets that her two kids had asked Santa for Plants Vs. Zombies toys. I'm sure that PopCap is planning on making some at some point, given how wildly popular the game is ... but as of mid October when she tweeted that, there was nothing.

This sounded like an excellent Sculpey project to me. Two sweet kids. Imaginative. Hard year. Yep, just the kind of project I like.

I looked around the web for some screen shots, since I'd never played the game. Found out what their favourite characters were ... and went to work.

And ... umm ... I went a little bit overboard.

I kinda built them a board game version (they'll have to make up their own rules, though).

The full project isn't quite done - I'm waiting to get something back from the printer, but you'll get the general idea from these pictures:

An overview of the whole - the box is just a mockup, printed in tiles (that's the piece I'm waiting to get back from the printer):

Picture of sculpted characters from Plants vs Zombies

And then there are the watermelon-catapult things - these are apparently the kids' favourite plants:

Picture of sculpted watermelon catapults from Plants vs Zombies

Then there's an angry "Wallnut" and a pair of zombies that are only loosely based on the game. As much as I love working in Sculpey the stuff is amazingly soft once you start working with it. Which means every time you touch it the slightest bit, you affect the sculpture. And if I've mixed colours to get a specific hue, I can guarantee the stuff is so soft, I'll never be able to get my finger prints off of it completely:

Picture of sculpted Wallnut and Zombies from Plants vs Zombies

Then a couple more zombies which are more directly based on the game:

Picture of sculpted Zombies from Plants vs Zombies

Then there's the peashooters:

Picture of sculpted pea shooter from Plants vs Zombies

Then there's the snowpea shooter and a trio of mushrooms:

Picture of sculpted snowpea and mushrooms from Plants vs Zombies

And finally, a quartet of sunflowers to round everything off:

Picture of sculpted sunflower from Plants vs Zombies
Picture of sculpted sunflower from Plants vs Zombies

And because I can't leave well enough alone, I ordered some custom cut foam and built a box for the whole thing. Sculpey is fairly sturdy if you don't drop it on a hard surface, but why not stress that this is a little fragile?

Picture of the custom box interior with pieces

And then a final image - this will wrap the box lid and make it look like a board game:

Game box lid

I should say a few things:
One, I respect copyright. This is a one-off art piece made specifically for these kids and I made it clear on the box that Plants Vs. Zombies is PopCap's baby.
Two, I won't make another one.
Three, I've accepted no money for it. I did this on a whim for some kids who needed an extra-bright spot in their lives this holiday season. That's it.

Posted by Red Monkey at 12:25 PM | Design | Sketches | hobbies | StumbleUpon Toolbar Stumble

July 29, 2010

An Event Apart

Fair Warning: I'm going to write this without looking up more than names of presenters & their presentations ... so I guarantee some details will be fuzzy and quite likely not fully accurate. This post is more about overall impression - the flavour - rather than the specific details. You want details, check out Luke Wroblewski's excellent summaries dated July 27 and 28. Also, Marc Drummond has some absolutely wonderful summaries.

The infamous Jeffrey Zeldman kicked off the conference with a brief history of computing and the web and between some of his comments and being surround by young whippersnappers, I suddenly felt quite old. I knew most of what he covered (this was to become a theme throughout the conference), but his style was very engaging and I thought it set a nice tone for later pieces both for those who already knew the information and for those who weren't well-versed in computing history.

There were three talks in particular that were particularly important and meaningful to me and the second talk is one of those. Whitney Hess talked about user experience and user testing - something that I harp about constantly. Seriously, people are tired of listening to me bring this up. A lot of what Whitney had to say resonated with me because I've been saying most of it since my teaching days. The first website I built was for my students - and I was stunned when each individual did not find it the most easy to understand website they'd ever seen. I'm not kidding, I was really shocked to discover that certain elements had been easy for some to pick up, but difficult for others. I asked for feedback, I adjusted the site ... and then the same thing happened the following semester which led me to realize the most important lesson about web design:

Your website is never done.

It's never perfect, not everyone will get everything, and you should always, always, always listen to your current users and continue improving what you have.

My favourite tidbit from Whitney, I think, was her insistence that you need both anecdotal evidence and analytical numbers in order to do a real examination of what's working and what's not. I feel strongly about this myself, but wasn't sure how to really quantify or prove that to others, but Whitney pointed out that you must use anecdotal evidence to help interpret the raw data of analytics. I think that's true in a lot more disciplines than web design ....

Of course, the most difficult task is paring down a site, or even a page of a site, to what the user really needs. There's a lot that goes into figuring out who your users are, what additional users you want to attract and how to fight off the various departments who insist what they have to say HAS to be on that page - usually in 48px h1 ... and can you make that red and maybe blinking so it attracts their attention?

Next up was Jared Spool. I was half afraid he was going to give the Amazon talk, which is utterly delightful and really well done, but I've seen it online a handful of times already. (Tuscan whole milk, anyone?) Instead, he talked about the different kinds of design strategies - like the 37 Signals guys do "self design," that is, they design for themselves. They do it quite well and while it's quite off-putting to some people, it is a legitimate way to to design. To be honest, at this point I started enjoying Jared's style and stories so much, I managed to stop retaining information. I'm going to have to go back through the slides, notes and Marc Drummond's excellent notes in order to really absorb Jared's talk.
I got to meet Jared for a few minutes later on in the conference - really nice guy. Wish I was a lot better at small talk and schmoozing because I came across as a clueless schmuck, I'm sure.

After lunch was Luke Wroblewski's talk about the mobile experience. I knew how mobile was exploding, but some of the raw numbers still surprised me. This has been an issue I've been fussing about recently ... but haven't had the time to address. I feel like I'm overwhelmed by all I need to get done! Once upon a time, you coded a site. Now you code the site, the mobile version, the print version ... and to really do it right, it should be a flexible grid ... but that's bleeding into another talk that came later on. I'm afraid I've given Luke short shrift here, but I really do need my notes for this one.

Next up was Aarron Walter talking about human interaction on the web - this was definitely a favourite presentation and something I've always felt strongly about. There is just no reason that a site can't be engaging and admit the human element. You can still have a professional site and be engaging and full of personality. Of course, you also must have a solid site architecture, excellent user experience (from the functional point of view) as well as the element of engagement. Aaron works at Mail Chimp as a user experience designer and I have to say, that has always been one of my favourite sites in terms of its personality. It does what it is supposed to do ... it is easy to use ... it is well set up ... and it's fun. People log in just to see what the chimp will say on certain pages. They'll log in to see what the login page looks like today. They'll hunt pages (when they have the time) for easter eggs like the width of the page "tearing off" the chimp's arm.

That's this unquantifiable "essence" that I think a lot of business-oriented types don't get. There is a human, emotional, non-quantifiable benefit you get to having people enjoy using your site. That warm, fuzzy feeling when they find something new and relate to it is most likely going to make them more patient when something goes wrong - as it inevitably does.

The last talk of the first day was Dan Cederholm's talk on CSS3. I'm afraid I'm going to give Dan short shrift as well because really, I pretty much already knew the bulk of what was covered in Dan's presentation. It was a good overview and it was important to have the first day of the conference, but because his flight had been delayed (canceled?), he came as the last main presentation of the day. He was scheduled to go just before lunch, when people could focus a little better on the nitty gritty and then Jared was to have been the last main presentation of the day - and given his speaking style, this probably would have worked better. But, it is what it is. Dan's talk on CSS3 covered the basics of rounded corners, RGBA, transitions and the like. There were some good details in there that I need to go back over and make sure I've internalized, but it was mostly a basic CSS3 grounding.

That's a heck of a lot of material and that was just the first day! I'll try to summarize the second day some time over the weekend.

Posted by Red Monkey at 10:04 PM | Design | StumbleUpon Toolbar Stumble

July 27, 2010

An Event Apart, Day One

Earlier this year, I was thinking it would be nice to go to a web conference. While I'd love to hit SXSW, I never seem to have the vacation hours to go and I didn't think my company would find it a proper conference, I mean, SXSW is really it's own beastie.

No, if I were to attend just one web conference, I knew what it needed to be ... An Event Apart by the A List Apart folk. I'd been following Eric Meyer since my newsgroup days on RTM (rec.toys.misc ... I am a toy geek) and the Raving Toy Maniac website/web-mag. No, the two Eric Meyers aren't the same guy, but I was into web design already and that's just how I discovered web standards.

So here I am ... at An Event Apart in Minneapolis, getting ready to start day two. Day one was wonderful - I enjoyed all of the presenters - Zeldman and Jared are always both informative and helpful (even if Zeldman made me feel old with the history lesson of stuff I already knew - it was still a delightful presentation and refresher). Whitney Hess spoke about user experience and usability which just validated everything I already thought I knew - and I needed to hear that validation. I'm determined to try again to push user testing ....

Luke Wroblewski's presentation on mobile was another session that was wonderful. Again, I knew the theories and reasonings behind much of the presentation and it was good to glean a few more details and get that validation.

The presentation that made me the most wistful (probably fitting), was Aarron Walter's talk on the emotional web. It was well done and despite what many non-web corporate types would think, very practical. This is the hardest sell where I am, harder than even convincing anyone that user testing is a necessary aspect to our HUGE ecommerce site. Sure, it is in some ways the sprinkles on top when everything else is done right ... but that doesn't mean it's not an important part of the experience ... the problem is that it's not immediately quantifiable. The mere fact that Mail Chimp created a "party pooper" version of their site without all of the funny charm ... and only .007% of their users actually used that version, does tell me that it is quantifiable to some degree.

This post is just a very quick overview before I head down to breakfast, but I'd like to make a particular THANK YOU to Marc Drummond for doing some wonderful 140char notes during all of the presentations. Marc's notes were an invaluable resource to me as it freed me from feeling really pressured to frantically take notes.

Today I think we dive into code just a tad more than we did yesterday (we were mostly hearing about process and such yesterday) and I'm looking forward to a little more nitty-gritty.

Posted by Red Monkey at 8:00 AM | Design | StumbleUpon Toolbar Stumble

June 27, 2010

Dear Adobe

Seriously? What is unexpected about File>Quit? I'd say that was pretty definite. I mean, it's not ambiguous like File>Ummmm, I think I might want to-OH LOOK! Shiny!

I mean it just does not inspire confidence to spend over $1000 oil-soaked clams on your software when you can't even get the programs to understand that the Quit command means quit.

Waaaaait. I get it. Every time I send in a crash report, I'm added to a list, right? And then you guys randomly send a beachball or "unexpectedly quit" command the los interwebz for every time I send in a crash report. Just identifying us troublemakers, eh? Well, I'm too smart, I just won't - hey! That's the idea, innit? You think that'll make us complain less? Well, you won't win that ...

I think this is what they call a vicious circle.

Posted by Red Monkey at 7:41 PM | Design | People Say I Have ADHD, But I Think - Hey Look, A Chicken | StumbleUpon Toolbar Stumble

June 17, 2010

And That's About Standards

While I do wish that IE6 would die a horrible and LONG overdue death, this image just reminds me of the bad ole days where every other website had a "Use My Favourite Browser" button and all sorts of proprietary code.

Amazon urging users to use IE8

Amazon? Can you please only show this if someone is using IE6 or IE7? Would be VERY much appreciated!

Posted by Red Monkey at 9:53 PM | Design | StumbleUpon Toolbar Stumble

June 10, 2010

hOily Whale - desktops

By popular request, I have two sizes of computer desktop version of the poor beleaguered Fail Whale for those who are interested.

Some have asked, and there are various discussions about t-shirts as well. If you are interested in a t-shirt, please leave a comment below.

BP killed the Twitter Fail Whale!

1680x1050 Desktop
1280x1024 Desktop

Posted by Red Monkey at 5:34 PM | Design | Never Underestimate the Power of Human Stupidity | Sketches | StumbleUpon Toolbar Stumble

June 9, 2010

hOily Whale!

I have a lot of "internet friends," people I've never met face-to-face. A good many of them happen to live in the New Orleans area. I've got a friend who used to live up here who used to work on the oil rigs out there in the Gulf of Mexico. So when the Gulf exploded, I was following the goings-on closely. Getting unbelievable details from those in the area, friends with family who fished for a living.

It's gotten so that I expect every other tweet or email to contain oil. It's permeating everything down there - from the smell of the ocean turning to the stench of crude oil to the feel of it in the air. So when NOLAnotes tweeted that seeing the Twitter FailWhale yesterday was a little startling because there wasn't any oil on him ... I had a little brainstorm.

BP killed the Twitter Fail Whale!

Originally, I'd wanted to do the green, green/yellow, yellow pattern inside the birds, but they're just too small for that to work (unless I wanted to do another huge illustration!). I chose to keep it very, very simple, hinting at the oil on the birds (in their eyes and wings - those black areas are usually white) and a nice, happy sun on poor Mr. FailWhale. I wanted to match Twitter's clean simplicity, so I didn't go for the amount of oil that really ought to be coating everything ... the key to parody, of course, is changing just enough to get your point across without beating your audience over the head with your point. In that respect, I think this turned out pretty well.

What I didn't expect was the attention this got - even landing on the Maddow Blog where it was called "instant folk art."

The world is a strange place sometimes - for some reason, I expected more response from the Adobe/Apple illustration which took weeks (and therefore, really wasn't as topical by the time it was done, I know), and this little parody was just something I whipped out when I couldn't sleep Tuesday night.

I'm not complaining ... just noting that the world is a strange, strange place.

Which, of course, is evidenced by the fact that oil has been gushing into the Gulf of Mexico for over a month while BP tries to polish their image and protest that their safety records are perfectly fine.

All that just smells a little fishy to me.

Posted by Red Monkey at 10:39 PM | Design | Sketches | StumbleUpon Toolbar Stumble

June 5, 2010

The Zax Stopped in Their Tracks

Finally.

I've been drawing semi-seriously and now seriously for just five years. It started when I first saw Mike Rhode's sketchtoons. I owe a lot to Mike for his early encouragement.

Recently there's been a very public kerfuffle between Adobe - the leading software in design - and Apple Computers. Adobe wants the Flash software they purchased from Macromedia some time ago to be ubiquitous on the web. Actually, I think they want Flash to be synonymous with the web. I'm no Flash hater myself - it's good in small doses for some things on the web. Whole sites? Uh, no. It's buggy, it's unreliable, it's a resource hog. But I enjoy using it to do animations ... it has its place.

The standoff between Apple insisting on HTML5's ability to do everything Flash can do, only better, and Adobe's insistence that Flash is the supreme gift to the web is a bit ludicrous. There are always shades of grey.

And this battle reminded me of a favourite Dr. Seuss story: The Zax. You see, there were South-Going Zax and North-Going Zax and one day one of each met up. Neither one would move a step to the east or a step to the west to allow them to continue on their way. No, each insisted that the other must move. And so the world just continued on around them, eventually building a bypass over the two stubborn creatures.

Please click through for the full version where you can see other references to the Sneetches and the Lorax as well.

Sneak peek of Adobe and Apple as Zax from Dr Seuss

So glad to finally have this piece done. If it'll stop raining around here, I'll take it in to get matted and possibly framed to go above my desk here at home. The final piece is about 29"x30" and is the first major piece I've ever done and is only my second foray into India inks.

Process:
Sketched on copy paper, scanned, cleaned up a little in Photoshop. Then I reprinted a neater copy, traced it onto medium-weight cold-press illustration board and sketched a few more details. Then I went over that with Speedball India ink. Once that was dry, I used Copic sketch markers for the colour details. I chose a palette very similar to the one Dr. Seuss used on his Zax bypass drawing. I was nervous about the india ink bleeding, but since it had dried for about four days before I got time to do the colours, the ink had dried and set well and I had very little issue with bleeds (although I tried not to go over too many of the lines just in case).
Both the Apple logo and the Adobe logo on the Zax' t-shirt have been painted white with a Marvy DecoColor extra-fine paint pen.

Update - 1:40 PM -
I should add, that I'm not really bashing Apple or Adobe at this point. I think the standoff is the ridiculous part. (I also think Flash is buggy as hell, but it's not evil.)

Posted by Red Monkey at 1:03 PM | Design | Sketches | StumbleUpon Toolbar Stumble

June 2, 2010

Eep!

Sorry, for some reason I always underestimate how long something will take me. I've pretty much done nothing but some fast client updating and working on this illustration. Had a large catastrophe Friday night which necessitated a trip to the art store for more illustration board and starting over. Had another minor set back Monday which meant more wasted time Monday, Tuesday evening and this morning, but looks like things are back on track now.

Not the world's best picture, but it's still in progress anyway. I've got to add colour to the vehicles and then decide if I'm going to leave the rest b/w or mimic the Dr. Seuss page further with colour on the overpass columns and the background. I'm definitely leaning toward b/w.

Zax stopped in their tracks

Hope you enjoy! Remember, if you want to leave a comment, the "Captcha" I use is actually a bit different and easier than most. All you have to do is put the first LETTER of the word, not the whole word.

Posted by Red Monkey at 6:03 AM | Design | Sketches | StumbleUpon Toolbar Stumble

May 22, 2010

Preview

This was to be the practice piece for the center of the piece I'm doing right now. Since I had kind of noodled around with ink once before, I thought I should practice quite a bit before tackling the nearly 30x30 insanity I've got planned. As it turned out, I quite like this piece enough to think I'll get it matted this week and put it up at work.

It was a bit larger than the scanner, so there's a tad of blurring around the edges - but here's the preview. I hope to start the large piece tomorrow, but might have to wait until next weekend, darn it.

Zax stopped in their tracks

Don't worry - the larger piece will set the context a bit better. Frankly, it was taking so long to get this done, I wanted to get at least a portion of the drawing out there before someone beat me to the punch.

(Added 20:45 - Oh yes, this is Speedball ink & pen with Copic R29 for the red on coldpress illustration board.)

Posted by Red Monkey at 7:17 PM | Design | StumbleUpon Toolbar Stumble

Dear Adobe

Today's Crash Report (because there's always a new crash report in the making ...)

How to replicate the problem? First, cover your drawing table with 10 sheets of copy paper in order to draw the rough for a large piece of art. Tape everything carefully down, so it doesn't move while drawing. Next, draw a picture. It's best to stay away from stick figures. I prefer to do roughs with a 3B pencil as they generally erase nicely. Use a Tombow Mono Zero eraser for detail erasing in tight corners. When you've done that, scan all 10 pieces of paper in utilizing Photoshop. Of course, Canon uses a TWAIN Acquire method which Adobe doesn't like any more, but I'm on a Mac, and so it's force Photoshop to use it (open system anyone?) or don't use a scanner. Stitch all 10 scans into one big document at 300DPI and about 34"x38". Save after adding each piece. Save in between just because. Cry when it beachballs. When all pieces are placed, press Save again. Now Quit. Upon quitting, Adobe will detect that the application Adobe Photoshop CS4 has unexpectedly quit.

Amazing how selecting File > Quit is so unexpected.

Posted by Red Monkey at 9:46 AM | Design | StumbleUpon Toolbar Stumble

April 13, 2010

Chrome Sticker

It's no secret I'm a Mac person. I also love the iconfactory, a company of designers responsible for things like CandyBar, xScope, Twitterrific and my all-time favourite game: Ramp Champ. I discovered the iconfactory many moons ago when I wanted to change the icons on my Mac. They make the nifty program CandyBar which will change icons for you. In addition, they make tons of absolutely gorgeous icons and icon sets that you can use. In fact, with CandyBar, you can install either an entire set of icons onto your Mac, or you can select a few to change and mix and match. I've got Dia de los Muertos, Totem Poles, Sticker Pack, Ravenswood, Petroglyphs and a slew of others from them.

Today, after getting irritated that Firefox was constantly crapping out on me today - displaying long beachball of doom spinning time or simply not being responsive when I was typing, I finally downloaded Google's Chrome browser. Only problem is that it sits next to other icons in my dock that have David Lanham's sticker treatment. So, I popped open Illustrator and created my own sticker version of Chrome based on David's look. Now, the look of the sticker icons is very flat - these ain't some Sanrio puffy stickers here - these are good, old-fashioned flat stickers. David's done a wonderful job of using a desaturated colour palette for these icons and keeps everything very simple looking. I think he uses at least a subtle gradient on most of the stickers - in order to keep the art simplistic and clear and yet still add some depth to the icon.

Google's Chrome icon is very 3D looking. I studied several of David's icons and really saw no attempt at fool-your-eye for this particular pack of stickers. It didn't make sense to keep the 3D look for this icon. I should, however, revisit this icon at a later time and I went back and added a little bit of gradient to some of the pieces to give it a little more "pop." It's still not perfect, but I have got to get some other stuff done - can't play all day!

The Apple icon is located here: download

Free to use for personal use - not for commercial use. Enjoy!

Posted by Red Monkey at 12:46 PM | Design | StumbleUpon Toolbar Stumble

April 12, 2010

iPad, iPhone, iPod Touch and Flash

I've really grown sick of the constant whinging about Apple's iPhone OS not supporting Flash. There are actual real reasons that don't have to do with some spat with Adobe (who now makes the Flash program) or making cold, hard cash.

Think about the websites which are currently built in Flash. Many of them rely on a programming event "mouseover." On a touchscreen, where is your mouse? Can you hover over something with your mouse on a touchscreen? How sensitive does the touchscreen have to be in order to differentiate between hovering your finger lightly over something and pressing down for a button action?

Touchscreens are an awesome thing to me, but they are still a fairly young technology and simply don't have all the capability that we have via a computer. It's not so much a fundamental flaw of the modern touchscreen as it is a developing tech - we're just not there yet. (And should we be or should we be searching out new paradigms?)

Now, what would be more frustrating to you as a user? Seeing a little brick icon on a bunch of sites because they use Flash or attempting to interact with a site, but not being able to make it work - and having no idea WHY it wasn't working? Frankly, I like Apple's solution once I thought about it.

Maybe I get this because I'm a web designer who knows Flash. I'm no great ActionScript programmer, but I know the basics and have made my share of animated Flash banners using ActionScript rather than keyframes. But I've heard a lot of grousing from other web folk who really ought to know better.

All of the grousing that iPhone doesn't support Flash, the iPad's mere existence on the face of the planet, Adobe's premature development of a Flash to iPhone conversion ...

... it all sounds like sour grapes from people who couldn't tell the difference between a shriveled, sour grape and a plump, sweet grape if the good grape ran off the vine, onto the table and did a dance routine right in front of them.

Instead, they'd complain that now even grapes want their fifteen minutes on So You Think You Can Dance and begin naming all the reasons why the grape should be smashed and made to feel inferior instead of marveling at the fact that the grape is freaking dancing in front of them.

Thoughtful criticism is an important part of life.

Constant complaining because every little thing doesn't suit your every little need shouldn't be a part of our lives at all.

Criticizing the iPad for not being "as good as a netbook" is lame. It's not a netbook. It's an iPad. It's not really an e-book reader; it's not really a computer or laptop or netbook; it's kind of but not really an overgrown iPod touch. It's a new thing. There's not exactly a comparison for it just yet. Relax. What does it matter to you if this product fails or becomes the new big thing? Why the hatred?

Why snap to instant judgments?

That said, I'm also sick of Adobe's attitude. (For the non-designers, Adobe makes the Flash program)

When Apple first launched OS X, they did it in a way that really impressed me because it offered both users and developers time to get used to the OS before requiring upgrades to all of your programs. There were three ways to develop a program - but at first, this didn't impact users at all. You could load a program in "Classic" mode and continue to use all of your old programs you'd already bought and paid for. Developers could use an intermediate way of producing code that would make a program work in OS X without relying on Classic. And finally, developers could write a program "native" to the new operating system. The best choice would be a native program because those would run the most smoothly. Classic programs would have to be "translated" to run and like a kid's game of "Telephone," that usually leads to odd snags. The same with the intermediate solution.

But Adobe waited forever before finally writing their software native to OS X.

The iPhone OS / Flash debacle is honestly more of the same. Adobe seems to believe that "translation" is a good and acceptable way to code rather than writing programs in native languages. Personally, I feel that's a flawed way to code.

Let's put it this way - all computers speak machine language, a series of 0s and 1s indicating "on" and "off." A particular type of computer uses a language optimized to the hardware to translate from human coding to machine language. So, we have human thought to programming language to machine language to action. Plenty of room for translation mistakes already. But if you choose to write your program in a format not native to that machine and its hardware, you're introducing yet another translation to the equation and increasing the likelihood of mistranslations and errors ... or just slow-downs as the machine tries to translate so many levels.

So Adobe thinking that a Flash to iPhone export option was a good idea was, in my opinion, a fundamentally flawed thinking process. At best, it would create a flood of mostly-functional apps for the iPhone (and iPod touch and iPad). More likely, it would flood the marketplace with bug-laden, slow apps which did not please the customer, partly due to the translation issues and partly due to the number of additional non-programmers who would have access to a fairly easy way to slap some pieces of programming together and calling it an app.

Is Apple's move about the bottom line? Yeah, it's about money. Is it about some long-standing dispute with Adobe? I don't think it is, at least not in the way that some think. It might be a reaction to Adobe's perceived programming philosophy, but I think that's rooted in bringing about Apple's tag line ... "it just works."

And you can't say, "it just works" if the software is terribly buggy and mistranslated ....

Posted by Red Monkey at 7:37 AM | Design | Never Underestimate the Power of Human Stupidity | StumbleUpon Toolbar Stumble

March 15, 2010

New Look Coming

About two years ago, I designed a totally different look for Red Monkey and have had too many other projects going to ever implement it. Yesterday I got a bee up my butt and coded most of it for the main page. I need to finish up the footer and then decide what I'm doing on the archive pages (I'm thinking of dumping the category pages as they're just too damn long and useless - unless someone knows a *good* MT plug-in for pagination?). I'm guessing I'll have it up by the end of the week.

If you want a sneak peek at the work in progress ... check it out here.

Posted by Red Monkey at 5:17 AM | Blog | Design | StumbleUpon Toolbar Stumble

March 9, 2010

My First Munny

So, there are these things called Munnys which are just vinyl "shapes" that you can buy and decorate yourself. Or, if you're more into collecting than doing it yourself, you can collect various artists' renditions of Munnys. (Or Dunnys or any of the other critters they make.)

There's a huge Flickr group of customized Munnys if you want to click through. But here is a regular white Munny ready for customizing:

Munny at Kid Robot

So I decided it was time to try my first foray into the fine art of Munny-making. My first one is quite simple, but something that was quite meaningful to me. I still have a larger white one to decorate as well as a large glow-in-the-dark one. I'll get more creative with those, I'm sure. I'd like to do some sculpting on one of them, at the very least.

This one is based on a Sunface Kachina doll. We lived in Albuquerque for all of three months when I was three years old, but I was fascinated by the culture then and remain so. The face is a typical Sunface - eagle feathers bordering and the red and yellow quarters. The face is sometimes white, sometimes turquoise. On this Munny, the eagle feathers are white leather. A leather loincloth and belt have also been glued on. I've contemplated doing a kind of "sandpainting" design on the back of the head ... that seems to be a Munny tradition of sorts to do an elaborate paint job on the head ... but in the end, I think I prefer the simplicity of this design as it is. Maybe I'll do another Pueblo/Hopi/Navajo-area-inspired design later on.

Sun Kachina Munny

Posted by Red Monkey at 4:15 AM | Design | Sketches | hobbies | StumbleUpon Toolbar Stumble

March 7, 2010

The Designer Man

The Designer Man
(sung of course, to the words of the immortal Billy Joel's Piano Man)

It's 7 o'clock on a Saturday
The regular crowd's still in bed
Photoshop's sitting next to me
Making love to the beachball of doom.

He says, "Son, how good is your memory
Are you really sure how this goes
Which filters you used on which layers to complete
This logo of a dog wearing clothes.

{Bridge}
La lala didi da
Lala didi da, da dum dum dum

{Refrain}
Make us an image, you're the designer man
Make us a website tonight
Well, we're all in the mood for drop shadows galore
And you've got Photoshop, right?

Now John at the bar was a friend of mine,
He got me my wifi for free.
And he's quick with a joke or Clients from Hell quote
But there's something he'd just rather see

He says, "Dude, I believe this whitespace must go"
And the smile ran away from my face
"Well I'm sure that you could fit more up in here
Like a picture of my bar out in space"

{Bridge}
La lala didi da
Lala didi da, da dum dum dum

Now Paula's a real estate agent
Who never has time for a brief
And she's talking brochures with Comic Sans headers
And printing it all on a leaf

And my kid sister is practicing Illustrator
As the businessmen slowly get stoned
Building contests and spec work for crappy designs.
WIthout Twitter I'd feel damn alone.

{Refrain}
Make us an image, you're the designer man
Make us a website tonight
Well, we're all in the mood for bevels and gloss
And you've got Photoshop, right?

It's a pretty good gig when clients behave
And the AD gives me that smile
'Cause he knows that it's me they're all coming to see
And I won't have weekends for a while

And their brief reads like a carnival ride
And the Art Director smells like a scotch
And clients smile their best, and refuse to write checks
And say "Dude, we should pay you HOW much?"

{Bridge}
La lala didi da
Lala didi da, da dum dum dum

{Refrain}
Make us an image, you're the designer man
Remove this skyline tonight
Well, we're all in the mood for rotating logos
And you've got Photoshop, right?

Posted by Red Monkey at 8:11 AM | Design | StumbleUpon Toolbar Stumble

July 18, 2009

Amazon.com Critique

I have grown to have a love/hate relationship with Amazon.com over the years. I refused to use them at first, because, frankly, why pay to have a single book shipped when I could pick it up at Barnes & Noble? Seemed silly to pay for it being delivered and for having to wait for the book. I can remember a time when I liked the layout of their website - it was cutting edge. And it seems that the more Amazon.com has become a site for everything including the kitchen sink, the more I shop at Amazon.com and the less I like the website itself.

Their search feature is good. Their so-called AI which makes recommendations for you based on your purchases and browsing history is pretty good. (Hey, for all the complicated code that has to go into building that, I think it's a minor miracle, myself. Even when it suggests that I might want to buy an iPod after looking at cases for the iPod I just bought from them - it's still pretty damn impressive overall.) Their main homepage is nice. The nav is mostly decent.

But two things irritate me to no end about the Amazon site. One is their product pages SUCK. I cannot emphasize that enough. It's like every executive with their pet theories got together and laid out the page ... and then allowed the designers and UX folks make it look purty. My biggest gripe is the page is just too long. Yes, people have learned to scroll down a webpage to find further information (there is often a great fear at e-commerce companies that users do not scroll and thus anything important has to be "above the fold," or within roughly the top 600 pixels of the webpage), however, needed information should be close at hand.

In my opinion, for a site like Amazon, their first block below the persistent navigation bar is good - they have the product image, stock status, purchase options, price - and then a right hand block with Add to Cart, Add to Lists (wishlists), more purchasing choices, lists, share. To even out the left side block with the right side, Amazon has chosen to put "Frequently Bought Together." Now, this is a good feature and I like seeing it. It probably should be up near the top. But I really think given the range of products they have, that block should be further down and the paragraph product description should be there instead.

The problem for Amazon is one that plagues the web in general - it's more than information overload, it's like trying to cram all of Wikipedia into your head at once (with all the good and bad of Wikipedia). Tech details, mechanical details, What Do Customers Ultimately Buy After Viewing This Item?, short form product details & average customer review & Amazon sales rank, related products, Customers Who Bought This Item Also Bought, you might be interested in these sponsored links, tags customers used, huge section for reviews, customer discussion and forums.

Wait, we're not done. I just thought we needed a paragraph break.

Then there's Amapedia Community, Listamania, So You'd Like to ..., Look for similar items by category, Advertisement, feedback, a section encompassing Where's My Stuff, Shipping & Returns, Need Help?, then Your Recent History and finally now ... the footer.

As I said, a big part of Amazon's product page issue is information overload on steroids. Their product descriptions come from the manufacturers or from the marketplace sellers which means some are two sentences ... and some are literally a full web page's worth of information in and of themselves. In my opinion, Amazon needs copy writers employed to specifically standardize a short-ish paragraph about the product and put it up at the top of the page next to the product image. If there's a plethora of additional information to be had, they need to have a "read more detail" link and put that information somewhere else - preferably not actually on this ridiculously long page.

Or, of course, they could use Ajax or any one of a number of javascript libraries to allow the information to be hidden until the users clicks something. Target does this with their little tabs. An example is when I used their top navigation menu and hovered over Electronics and then chose PS3. In order to maximize that space "above the fold" Target has given you three tabs. PS3 games, PS3 consoles, PS3 accessories. You can very quickly, at a glance, choose what you're looking for. Now if I click on the PS3 console link, I'm given a further choice - a Quick Info choice, or the standard click the title of the item to go to the main product page.

Quick Info pops up on the page immediately. No real load time to go to a whole new webpage. Now I get a larger image of the item, pricing, add to cart options along with add to wishlist options (and the option to find it at your local Target). You also get the stars rating for reviews and a tab of details, which scrolls down for everything you need. And, should this Quick Info not be quite enough - or just enough to wet your whistle, there's a link to View Full Details.

It's all quite sleek, it looks clean and easily understandable.

Amazon's on the other hand, drives me up the wall every time I'm looking for information on a product I want to purchase from them. First, I have to scroll down the left nav to find Electronics and then Video Games. That page leads me to a cacophony of stuff. The left nav again saves the day and I can click under Consoles to choose Playstation 3. But that landing page is primarily a cacophony of stuff for PS3 and not the game system itself. Instead, I have to use the left hand nav again, look under Hardware and click Consoles. Isn't that what I just did in the previous step? Apparently not quite. Now, I'm finally presented with the choices to buy a PS3. Lots of steps. And, then, of course, the product page is quite long as I've already mentioned.

A screenshot of an Amazon page reveals that it is a whopping 7,419 pixels in height. Most people are running a monitor with a screen resolution of about 1024x768 pixels, which tends to make the average browser's window perhaps about 650 pixels high. That comes out to about 11.5 "pages" of information to scroll down with Amazon.

Target's product page is perhaps half the length of Amazon's, with about 3578 pixels in height, which comes out to about 5.5 "pages" of information to scroll through.

Think about the old Sears catalog that we all loved to pour over as kids. Yes, we get more information now, that's true. But is it all really useful information? Just because we don't have a perceivable bottom-line price on publishing a web page versus publishing a catalog on paper and mailing the durn thing out doesn't mean there is no bottom-line price. I think there's a huge toll taken on people looking at those pages. When you want the information, you go looking for it and certainly want it at your fingertips. But I think Amazon's 11.5 pages of information is excessive and ridiculous. The page looks busy and overfull.

Target, while giving a lot of the same information, uses space more efficiently. The layout contains a lot of whitespace and feels less crowded.

Amazon, on the other hand, has a website that reflects a very messy way of thinking, which I think is reflected in the company itself. They've grown too big to know what they are any more and so they try to be everything to everyone. The end result is things like the Kindle suddenly yanking books that were paid for OFF of people's devices (and returning their money as well) in order to keep publishers happy, but not their customers. (In fact, look at the mindset of Target's "guests" vs. Amazon's "customers" - it seems to make a corporate difference in the thoughts behind the sites.) Amazon is simply juggling too many balls and trying to continually add in the balls from all the jugglers around them. And that kid down the street. And you, do you have some juggling knives, rings? Amazon would like to juggle those too. And bowling pins. And maybe even some chainsaws like the guys who are The Passing Zone.

And now, here's a breakdown of Amazon's product page. I have taken a screenshot of an actual product page and then covered the various blocks with a solid colour. I then reduced the width to 400 pixels so it would fit here, and that scaled the height. I did the same for a Target product page.

Amazon

Snapshot of Amazon product page, breaking sections down to solid colour blocks

Target

Snapshot of Target product page, breaking sections down to solid colour blocks

Posted by Red Monkey at 8:31 PM | Design | StumbleUpon Toolbar Stumble

June 8, 2009

Live Long and Prosper

So, what have I been so busy with that I had to give short shrift to my Hugo Awards logo entry?

Well, back in January a dear relative of mine announced his wedding intentions and I instantly volunteered to do the invitations. Click the image to see the invitation itself:

Wedding Invitation

Oh, and it's actually not a Star Trek themed invitation ....

Posted by Red Monkey at 7:10 PM | Design | Sketches | StumbleUpon Toolbar Stumble

June 6, 2009

Rocketship Hugo

When we moved from Austin to Arlington, I was bored. The teachers apparently didn't believe my old school, my mom or me that I was far ahead of their students and so they put me in the second high groups in reading and math. Cuz you know, that's what you do with an advanced kid - bore the crap out of them.

I quickly realized that my new school's library sucked. I was going through books at a ridiculous pace and my teachers were already getting tired of letting me go to the library after I finished my schoolwork and homework before class was over.

Space Cadet CoverSo I searched until I found the thickest book in the library. It was called Space Cadet by Robert Heinlein.

I had found a new obsession. I read every Heinlein book in our library, devoured Asimov with abandon and dabbled in Andre Norton and then Katherine Kurtz. As our selection began to expand, I eventually discovered Tolkien as well.

But I always went back to Heinlein, who was for me then, the end-all be-all of science fiction. Eventually I branched out into other authors ... but the one time I wrote a paid-academic piece, it was about Heinlein's novella Waldo.

So when I heard that the Hugo Award was looking for an actual logo to use - something the organization could use in print and use on stickers for the winning books and materials, I knew I wanted to throw my hat in the ring.

Unfortunately, I was rather swamped with two other projects at the same time and really didn't get much beyond the sketch stage. Here's the first two rough sketch ideas that I did not submit to the contest:

Hugo Logo concept with critter
Hugo Logo concept with critter

I wasn't fully sure that I wanted to let go of my little creature there ... so I did not even attempt to vectorize those sketches and turn them in to the contest.

Instead, I did work up the second concept I came up with. Unfortunately, I really didn't have time to do the concept the justice it deserved, but here's the image I finally turned in:

Hugo Logo concept with rocket-sword

I thought for the printed pieces, the rocket portion of the logo should be a silver foil, preferably embossed. I wish I'd had time to work up a font closer to the one I sketched in the other concept, but ... *sigh* you do what you have time for, right?

Posted by Red Monkey at 9:04 PM | Design | Sketches | StumbleUpon Toolbar Stumble

April 23, 2009

Announcing ...

Well, the freelance job I took back in September? October? has finished the first phase. We still have several pieces of the original plan to accomplish, but Sherry K's new website is up and running. Check her out at http://www.sherryk.com/ and take a moment to listen to her music.

Meanwhile, I've got several refinements to make to the site still, mostly on the programming end, which is certainly the slower aspect for me.

Her music is available at iTunes, CDBaby, eMusic and directly from her through PayPal. I'll tell you, I'm not usually big on instrumental music, but I really love Sherry's stuff. I wasn't sure I'd ever totally enjoy hearing piano music again after listening to my little sister practice Fur Elise at 6 a.m. whilst I was in high school (sorry, sis, wasn't your playing so much as the time you chose!)

Anyhow, go check out her site - leave her a comment and let her know what you think of her music.

Posted by Red Monkey at 5:57 PM | Design | StumbleUpon Toolbar Stumble

March 22, 2009

Creative Suite 4

I've been limping along with Macromedia's MX04 for Dreamweaver, Fireworks and Flash. Fireworks - once a beloved staple of my web designing process - had become somewhat unstable and I've grown so proficient in Photoshop that I just didn't use it much anymore.

I had also purchased - on a last gasp student discount - Adobe's Creative Suite 2 for Photoshop, Illustrator and InDesign. Love, love, loved it.

I skipped the update to CS3 ... design software is just so damn expensive and many artists just don't make the moola to hit every upgrade. Generally I strive for an every other upgrade, but after the events of the past couple of years, I was considering waiting for CS5 ... or maybe even 6 (or whatever it morphs into by then). Then I attended one of Mogo Media's CS4 launch demos and oh man. Let me put it this way. The rest of the designers were laughing at me the whole day as we watched the presenters put CS4 through some paces - some showing stunning brand-new features, others showing some features that were introduced in CS3 (or even CS2) that not everyone knew about.

Then I realized that since I'd gotten CS2 with an educational discount ... it was not eligible for upgrade pricing. CRAP! I frantically looked to see if Adobe was still offering upgrade pricing from Macromedia products ... yes! Chances are, though, CS4 will be the last opportunity to upgrade to Creative Suite from the Macromedia suite. So, I bit the bullet and killed my tax return on an upgrade.

Holy cow, I'm so glad I did. First, Photoshop has some just freaking incredible changes. I do a lot of web design and it's difficult to count pixels in a design sometimes. For example, I might want to crop an image right along a particularly fine line. To do that, I'll pump up the view to 1600% (which used to be as high as you could magnify - you can go bigger now, too). But, even at 1600%, if you wanted to count pixels to make sure something was even on two sides, it could be difficult. Now, though, it's a snap - the pixels are clearly defined, even when seeing a solid colour. Check it out:

Photoshop file at 1600% with grid

It seems like such a small thing - and really it is. But it makes a HUGE difference when I'm doing detailed work. It makes using the magnetic lasso easier, makes pathing something easier, it's just amazing what a difference it makes. We did have a situation at work where one designer had an image that did not do this ... and we've yet to figure out why. But luckily I've not had that happen to me yet.

The other new feature of Photoshop that is just freaking incredible is Content Aware Scaling. Basically, let's say you need a picture that's 400 pixels wide. And the image you do have is 300 pixels wide. That's 100 pixels you have to figure out what to do with. If you just stretch the image, it's going to look all stretched and distorted. So, you can attempt to use the cloning tool or something and kind of fake a background extension. Or you can add another image there to fill up the space - maybe make that area black and then put some type in there. Or, maybe you just leave that area white.

Here's an example from crondeau at sxc.hu:

Photoshop file at 300 px width with 400 px canvas

The gridded area represents the area that you still need to fill up somehow. If you just use regular stretching, you get a rather stetched out looking adult and kid. The buoys are really weird looking as well. Not the best effect.

Photoshop file at 300 px width stretched to 400 px - looks awkward

But the new Content Aware Scaling does this:

Photoshop file at 300 px width stretched to 400 px canvas

As magic as it looks, if your background has too much detail, it won't really work. Likewise, it's not going to be able to triple the width of your image - maybe not even double it. But it's an absolutely amazing tool.

There were definite improvements in other programs as well - most joyously for me was the ability to sketch with my Wacom tablet in Illustrator. Every time I've tried to sketch before, Illustrator would simply re-draw lines that it thought were too close to one another. Now? Now you can sketch on the computer like you do by hand, making the Wacom tablet an even better tool. WOOHOO!

Posted by Red Monkey at 5:21 AM | Design | StumbleUpon Toolbar Stumble

March 17, 2009

Whatever Happened to Dreamweaver

When I first started building websites, back in the days of completely grey backgrounds, Mosaic and that upstart Netscape, I coded a site "by hand," that is, I used a simple text editor and wrote all the code myself. It wasn't hard. You put < p > at the end of every paragraph (I know, I know!) and animated GIFs were the height of kewl. As the web left kindergarten and moved on to junior high, coding a design meant using tables to contain chopped up bits of images and the tables could get pretty complex. It was easy to get lost in the code trying to figure out which cell you were in now if you'd spanned 3 rows and 2 columns ....

And then there was Dreamweaver, Macromedia's way to make web design easier.

For most web professionals this meant you could visually design a table - and then flip back into the code and clean up the mess that DW had made. Not perfect, but much faster than trying to code a complex table completely by hand. Basically, you'd design the site in Fireworks (think Photoshop but instead of editing photos, you edited shapes and buttons and such). When you had the design looking all purty, you began thinking, "Okay, I want text to go here, here and here. So, let's cut these images here and here and then code a table to make the images "glue" back together and put the text where I want it."

What made this work was the fact that you could flip from the visual look of a site (WYSIWYG editing) back into the code, make a change and then flip back to the visual to make sure it still looked right. You see, most designers are visual people. That's kind of why they're into design.

As the web graduated and headed off for college and then the big bad corporate world, it matured. Both those who coded and those who designed wanted the language of the web to be more semantic, to make more structural sense.

Back in the day, the code to make a word bold, was < b >. When you wanted to turn off bold, it was . Pretty simple and semantic, but it could be better. You really wanted a strong emphasis on that word or phrase and that's why you made it bold. So today, the code is < strong > instead. Italicized text's code is < em > for "emphasis." But looking at the code: < td colspan="5" > is not really very semantic. What does that mean, really? The web began using something called CSS to structure pages, a way of styling different elements in a semantic way.

The first time I ran across CSS, I was webmaster to four university sub-sites, plus my own webspaces. I discovered it in Dreamweaver's interface - I could suddenly style text! I could declare a style .times14 and then every time I wanted to use that typeface and size, I could just click a button and Dreamweaver would make it happen. Wonderful!

The truth of the matter was that I had grown far too reliant on Dreamweaver and I wasn't keeping up with my handwritten coding as much. This was the smallest portion of what CSS could do even then.

Today, many sites (particularly most blogs) take full advantage of CSS, although the "quirks" of how it displays from browser to browser still cause as many headaches as the "quirks" of how tables once displayed still making coding a site a challenge. Now, you can create a "div" to contain a section of the site. For example, a div might be called "content" and you put all the styling you want for your content into that div (and its specific components). In other words, maybe the main column of your blog is your content div. You (or the person who wrote your theme) coded that div to tell the browser, "Hey, we want this to be 400 pixels wide and to appear about 10 pixels to the right of the left sidebar. Also, the background of that content area should be this particular nifty image (that is contrasting enough that the text can still be read easily.) In addition, every paragraph should be in the font Arial (or, failing that, Helvetica or some other sans-serif font). Also, the title of a blog post should be about 18 pixels high and dark blue and italicized."

In other words, using CSS meant you could place sections of your site, set backgrounds and even code the look of the font just one time instead of for every paragraph.

When I first started really utilizing CSS, I learned it the same way I did HTML: I looked at websites who used it and figured out the code that way. I began coding my websites by hand again, partly because I enjoy knowing I can do that (I am, after all, a major geek), partly because coding for the web was suddenly semantic and easy again, and partly because Dreamweaver's support for CSS seriously sucked. The "design view" portion of the program just didn't display CSS very well.

Now, I've been using Dreamweaver since oh, version 2, I think. I loved it for years. It beat the socks off Microsloth's FrontPage and Adobe's GoLive left me cold at first.

Today?

Well, Adobe purchased Macromedia back in 2005 and I wondered if it would be GoLive or Dreamweaver that would "win" the merge. I was rooting for Dreamweaver ... and then I used GoLive. It actually rendered CSS in the design view! I had never managed to get Dreamweaver to do that (except for some textual stuff - but never the placement of a sidebar, content, sidebar kinda thing). I wasn't an instant convert as I had far too many sites being maintained in DW and I didn't want to migrate everything, but I was definitely thinking of starting new sites in GoLive instead.

Dreamweaver, it seemed to me, had grown old and stale and was no longer really conversant with what designers wanted. Its original big draw was the ability to visually design something ... and have it write the code ... and then have the ability to go in and "correct" or simplify that code. (And then go back into design view to verify that you had not, in fact, screwed something up with your simplified code.)

So when I began working somewhere that used GoLive instead of Dreamweaver, I was not really concerned about it.

Unfortunately, GoLive is no longer being produced - Adobe has thrown itself fully into Dreamweaver. Even more unfortunate, they've left the best things about GoLive behind instead of integrating them into Dreamweaver.

Just one quick example before I head out to work:

The place I work now owns about a bazillion websites. All of the designers work on all of the sites at some point or another. Hence, we have a Websites directory from which we work on Brand A site, The Music Site, Brand B site, Our Main site, etc ad nauseum. This makes sense to me. We use a versioning software to keep conflicts between designers to a minimum and, in fact, merges our changes (in other words, I might be working on page x in Brand A for a project ... and another designer may be working on a project which also means he has to edit page x). We do not include our images folder on our hard drive or in our versioning software. Those are stored on an images server, and it serves out those images to all of the sites.

GoLive understands that our images are out on another server. And when we flip to design view, it knows where to get those images and display them for us so we can make sure the code we just changed still displays everything correctly.

Dreamweaver doesn't get it. It cries. It cries piteously and repeatedly, "HEY! HEY! HEY! You put the images folder outside of the main folder! HEY!!!!11!"

In addition, GoLive understands that when we pick harddrive/documents/websites/OURCOMPANY/brandA/ as the root directory for the Brand A site, that it's the ROOT directory. In other words, when a page is coded to refer to an image or a stylesheet (that's what a CSS file is called), it knows that it should look on the website at the top directory for it. Likewise, when it's looking on my hard drive to show me how a page will look, it will use the root directory I set as the "top" directory - instead of using harddrive/ as the top directory. (Basically your computer's hard drive is the top directory for your computer. When you code a site, you often code it to refer to the top directory of the website - so any design program you use needs to be able to say, Oh, you mean the top directory of the website, not the top directory of your computer.)

Dreamweaver doesn't get it. It won't find your stylesheets if you coded them: /stylesheet.css. Instead, it looks for your stylesheet in the top directory of your computer.

This means that NONE of the styling in the sheet will work in Design View.

Which makes the visual editor pretty much useless.

And the Dreamweaver team seems to think this is actually a selling point - you can see your page uninhibited by all that pesky design.

And if you absolutely insist on viewing it with the stylesheet, well, you can manually add it. Manually. Add. To. Each. Page.

And, if you're unlucky enough to be working on a huge e-comm site wherein different pages use multiple stylesheets? Add each stylesheet manually. Separately. You can't even multi-select from the dialog box!

So now we seem a bit stuck at work. GoLive is old enough now that it is pretty common for it to crash. Dreamweaver totally screws up our workflow and doesn't understand much of what we need it to understand. Do we limp along with crashes for now and hope Dreamweaver gets it eventually? Do we bite the bullet and make the switch now? Do we completely change the way we code AND the way IT has all of our sites set up?

I don't know.

But I no longer think that Dreamweaver is the best WYSIWYG web program. In fact, I'm thinking right now, that it's more than a little over-rated.

Too bad our sites are too complex to just code by hand all the time.

Maybe now is a good time for us to simplify ... of course, that would mean a total redesign of every site ....

Posted by Red Monkey at 5:38 AM | Blog | Design | StumbleUpon Toolbar Stumble

February 17, 2009

Illustrated MP3 Player - continuing

Working on this particular MP3 player skin has mostly been an exercise in design choices. I have the programming pieces in another file and have simply been taking my time to try to think through how this will display as both an illustration and a functioning MP3 player.

The original idea had the controls for forward and back located in the headlights of a car and the volume slider on the fender. It very closely matched the client's first CD cover, with the exception that the car was coming toward the viewer instead of away. Sherry K, however, adores her motorcycle and wanted a cycle instead of a car. Now, I can draw people in the "this is a distinct person" kind of way, but I can't seem to caricature someone I know (even from a plethora of reference pix). Perhaps I'm too hard on my own attempts, but they just never seem to work to me. At any rate, I used the dog who is the major feature of her logo on the motorcycle instead of attempting to draw Sherry K herself. (I think she's more comfortable with that anyway.)

Of course, changing from a car to a motorcycle completely changed the metaphor for a functioning MP3 player as well! Cycles have just the single headlight, afterall, and the front fender does not lend itself to a volume slider. After playing with several angles, I settled on this slightly angled view where both turn signals could be seen.

I took my time with the volume slider, trying to put it on the exhaust pipe ... and well, it just made the composition too busy, so I finally dropped the idea of making all the controls integrated into the vehicle and placed the slider down at the bottom and put the play control on a sign as well.

Illustrated MP3 skin - dog riding a motorcycle in the southwest

My next concern was working in a reference to her tagline with the lime and salt. I have it in here temporarily, but now I'm thinking that I may just enlarge the player as once again, it's getting a bit too crowded. I had originally thought that her CD covers would make up some little signs around the larger billboard - and if you've ever driven through a small town, you know those little signs do become busy and crowded, vying for space and attention as you shoot down the road at 70 mph. But, I like the idea of the saltshaker extending from the small billboard ... which means that the foreground with the slider down below now, is becoming more crowded more quickly than I had anticipated. Besides, I want that "Listen to Sherry K" sign to look more like an actual advertisement rather than a bunch of junk stuck in that spot. A little more height and perhaps a tad more width to the right of the billboard and I should have enough room to expand that area with her additional CDs as she puts them out - as well as have a little more room to make that smaller billboard look more like a real 50s billboard.

It's coming along. Not as quickly as I'd like, but I think it will really be worth the extra time when it's complete.

Posted by Red Monkey at 4:59 AM | Design | StumbleUpon Toolbar Stumble

February 8, 2009

Illustrated MP3 Player

Last time, I posted the rough sketch of the MP3 player for a client. After talking with the client, she indicated the car was cool, but she preferred motorcycles. I'm still in the process of adapting the various buttons to work on a motorcycle, but here's the current update:

MP3 sketch

Hopefully I'll have this completed and working by the end of next weekend.

Posted by Red Monkey at 6:22 PM | Design | Sketches | StumbleUpon Toolbar Stumble

December 23, 2008

House Made of Web (segment five)

House Made of Web is a series of posts explaining the web design process. Many seem to think it's a kind of arcane, magical process ... but it really shouldn't feel like some secret thing. This series of posts should help the non-designer and non-coder understand the process by which a website comes to life without getting too terribly techincal.
The previous posts in this series are:
House Made of Web - the backstory
House Made of Web (part dos) - Information Organization
House Made of Web (chapter tres) - Beginning Mockups
House Made of Web (numero cuatro) - Beginning Mockups

House Made of Web (segment five) - Development of the Mockup

In my last post, I spoke about the problems inherent in giving a client two mockups and how that can be a good thing or a bad thing. In the case of my client, Sherry K, this worked out well and I came up with a more refined design that she really liked.

The process of building the mockup is, for me, the really fun part. Generally speaking, I start out in Photoshop and begin building the various pieces of the site. I tend to start in one of two places: either the themed colour palette for the site or I go looking through the client's images searching for something to build around. In this case, I started with the splash of lime, thinking about pianos and her Kirby Lu Productions logo. I flitted around on iStockPhoto to get some ideas ... but I found a nice vector piece which I thought I could adapt to help create a really nice banner piece for her.

Using a stock piece is a risky thing in design. Anyone can buy a stock piece (vector or photo) - which means you often wind up with a design that looks a lot like every other design. There's not enough style which speaks of the client because it's something that was created specifically to be general (and thus the most use to the most people).

You'll notice in the mockup that the banner has a piano which is kind of grainy, fuzzy and has iStockphoto's watermark across it. Mockup 1c

When you're building a mockup, you do not want to purchase stock photography (or, in this case a vector graphic) before you know if the client likes it. Instead, you take a "comp" version of the image and insert that into the design. A comp image is one that you are allowed to use for a mockup in order to sell that image to the client, but it's provided in a smaller format to protect the copyright owner from theft. Obviously, I wouldn't want to use that comp image in all of its graininess - I want a sharp, clean look which I can only get from purchasing the image.

In this particular case, the stark white piano with the dramatic angle was something I thought could work really well with Sherry's site - and I thought I could add that splash of lime to the piano to further personalize it to my client. After getting approval from Sherry, I purchased the image and began editing it in Adobe Illustrator, adding the bit of green to the black keys and a hint to the front of the piano as well.

The Sherry K branding to go across that piano was also created in Illustrator.

For those who don't know much about graphics, you've probably been wondering about "vector graphics" and Illustrator. Why not just use Photoshop?

An image in Photoshop is essentially a lot of little pixels. It's great and you can do a lot with it ... but only if you have the right size image. You can't really enlarge the image much ... because there are only so many pixels.

A vector graphic sounds complicated, so hang on whilst I explain it. A vector graphic is a series of points and a mathematical formula to determine the lines and fills and shading. But a lot of artists are definitely NOT math majors - so how do they do the formula? Illustrator does it for us. We draw the image with our mouse or a graphics tablet ... and Illustrator does the math. What this means is we're not limited to a set number of pixels. We're only limited by our own precision. A vector graphic can be made larger almost infinitely.

So, I built the treble clef/Sherry K branding in Illustrator so I could continue to use it in multiple sizes and not have to re-create a large version in Photoshop later.

I also knew that the logo designed by Cary Zartman at Z Factory was not just important branding for Sherry K, but also personally very important to her, so I wanted to use the Kirby dog in the banner as well. Like most great designers, Cary had created the logo in Illustrator, so using Kirby was easily done. (Most logos are vector graphics so that they can be printed on a banner or billboard as well as they are printed on business cards.)

Also in Illustrator, I created the lime for the background image and the little juice drops. Then, I brought everything into Photoshop and began laying the pieces out and fine-tuning details. By the time I was done with Mockup 1c, I was pretty happy with it.

So was my client.

The next step for a small web design house is a complete flip in thinking. The pure design is done at this point. Next up is coding the thing into a real website - right brain/left brain flip time. Larger design houses will hire a designer for the design segment and a coder for the second (and possibly a programmer as well depending on what the site needs). Tiny places use one person for everything. I wind up spending a fair amount of time researching different nuances of code so I can make the design come to life.

Next time ... the fun of coding!

Posted by Red Monkey at 5:03 AM | Blog | Design | StumbleUpon Toolbar Stumble

December 21, 2008

House Made of Web (numero cuatro)

House Made of Web is a series of posts explaining the web design process. Many seem to think it's a kind of arcane, magical process ... but it really shouldn't feel like some secret thing. This series of posts should help the non-designer and non-coder understand the process by which a website comes to life without getting too terribly techincal.
The previous posts in this series are:
House Made of Web - the backstory
House Made of Web (part dos) - Information Organization
House Made of Web (chapter tres) - Beginning Mockups

House Made of Web (numero cuatro) - The Problem with Mockups

In my last post, I spoke about creating two mockups for my client, Sherry K. I had planned to spend this post talking about some of the drawbacks of submitting two mockups (which I alluded to in the last post) ... and then I got a tweet from the delightful Mike Rohde, who was pointing out a fantastic article on Fadtastic about the perils of the industry standard (submitting 2-3 mockups).

Despite the fact that the industry standard is to offer clients multiple mockups in order to better allow them to make choices ... it often doesn't work very well. As Darren Hoyt (in this Fadtastic article) states, allowing the client to pick bits and pieces of your designs can mean that the client "settle[s] on a mishmash Frankenstein product" and that they get "bogged down with a maze of choices" rather than the unified design you intended.

In my case, I've worked with clients who were single entities - a website for one person. Generally speaking, offering a single client two to three mockups and asking them to choose or to mix-and-match is often not quite as dangerous as when dealing with a larger entity with multiple people who will be making the final decision.

The few times I've worked with large e-commerce companies, my fellow designers and I generally pitched only a single design at a time - or two variations of essentially the same design. Design by committee - the default when you have multiple people making the final decision based on several mockups - almost universally yields a Frankenstein design.

The key in both the case of a single-person site and a company's website is listening to the client BEFORE the design process begins so that you really understand what they're looking for. If they can't tell you, it's your job to elicit responses from them before you begin the mockup process. Darren states they show clients "select sites from CSS Beauty or Most Inspired or Best Web Gallery" and they pay close attention to aspects of various sites (colour, layouts, mood, etc) that the client responds to.

Basically, I'm saying you've got to adjust your process to your client and know the pitfalls of working with a group approval (as well as the benefits) and the same for single clients. The key to both is to spend a fair amount of time in the beginning really getting the feeling for them, who they are and what they want.

In the case of my working with Sherry K, for the first mockup I spent a tremendous amount of time creating a workable e-commerce style site for her. I then spent some time working on a second mockup which worked with her personality a bit more and played with color. I was pretty sure that neither mockup in their entirety was precisely what she was looking for. Even with as much time as we'd spent going over her needs, I'd not been able to get a good sense of what she wanted in terms of look - and we ran out of time before we could look at a site like CSS Zen Garden or Most Inspired. That fact, combined with the fact that I was working with a single person led me to offer her two mockups - I needed a better idea of what she wanted and since she couldn't spare the time at that moment, I took the time that I would have spent discussing design with her and made a second mockup.

Flexible. Particularly as a freelancer, you've got to remember that there is no one, right way to go through the design process of a website.

So, last time, I showed the two mockups - both of them quite rough. Sherry loved the use of colour inherent in the second design, but liked the layout of the first ... but she didn't want either design as it was. That's okay, neither did I. From having her look at those designs and answer some very specific questions, I got a much better feel for what she wanted.

First off, a better green was fine with her. She wanted some colour and didn't mind the green. If I hadn't been so fearful about using my favourite colour on her website, I might have nailed the look and the layout with the first mockup. D'oh!

The next version changed up the look in some places, adding accents and refining ideas. For one, I swiped the nav bar from the second mockup and included it in the tweaked version of the first mockup. I changed up the backgrounds of the major elements ...

... and I decided to use a splash of lime for real.

No thumbnail this time, but the full image will pop up in a new window (or tab, depending on your preference set). Mockup 1c

This version energized the client. She really liked the splash of lime (and I still need to work in a shaker of salt somewhere). Her favourite part, I think, was the bright green gloss button in the promo area.

Next time ... an overview of how the mockup was concepted and created.

Posted by Red Monkey at 7:54 AM | Blog | Design | StumbleUpon Toolbar Stumble

December 19, 2008

House Made of Web (chapter tres)

I've spent the last two posts getting into the backstory of my history in web design ... and then the beginnings of design process - the information organization. In order to walk you through the process of site design, I'm taking you through the re-conception of Sherry K's website.

I really like the kind of lengthy tag line she uses in her emails and newsletters: Sherry K: piano with spirit, piano with soul, piano with a hint of lime and salt. Since she originally had no direction to give me in terms of iconography, colours or the like, I actually had a bit of a harder time coming up with a concept. I knew I liked the lime and salt piece and wanted to use it. I spent a lot of time thinking through where I wanted various pieces of the site to go ...

She's got three CDs for sale, each with a CDBaby and iTunes option for purchasing. I wanted to have some kind of promo area to advertise her availability for booking. She has a paragraph she's fine-tuning to let people know who she is - and for SEO purposes. Then of course, there's the navigation which took a little tweaking to make manageable ... an MP3 player and she wanted her email list sign-up to be very prominent.

A bit of terminology before I explain the next step I took. A mockup is an image of a website. For me, I'll open up Photoshop and begin building pieces of the site in the places I want them to be. I'll mess with the font (staying within the realm of the "web-safe" fonts) and sizing and begin choosing colours, images and different effects to get close to the look I want. This gets saved as a plain image ... just to give an idea what the site can look like.

So as I began working on the first mockup, I did what I always do - spent too much time perfecting the layout of the first design. The aesthetics of the first mockup I forced myself to not spend too much time making exactly perfect. The whole idea of a mockup is that it WILL change. It's an approximation and both you and the client (and if you're working with company, chances are there are several people who need to approve the mockup) - you're all going to change bits of it. Spending time making it exactly perfect is mostly a waste of time.

On the other hand, you want it to look good enough that with minor tweaking, you could publish it as is and be happy. It's not an easy balance and I know a lot of designers who pour their heart and soul into a single design ...

... and then don't want to change a single pixel. (Which always reminds me of the Cyrano deBergerac quote: "my blood runs cold,/ To think of changing even one small comma.")

In most cases, you want to present a client with two or three designs to choose from - different takes on their needs. Then, either one design can be tweaked, or some mixing and matching can go on. (Or, you've completely missed the mark and have to start over completely.)

My first take on Sherry's new site was one I really liked the layout ... but I was still wavering on the execution of the aesthetics. My hesitation was over a very simple matter ... I seized on the "lime and salt" and wanted to work that into the design. I love green. I also love virulent lime green. Most people ... not so much.

So, I wound up with this for the first mockup: (click to bigify)

Design 1

I was trying not to make the site overwhelmingly green - after all the tag line is a "hint" of lime and salt, not a nuclear explosion of neon green. My love of green led to a fear of overdoing what I liked instead of what the client wanted. Because I was fearful of overdoing it ... the colours here were, frankly, just all wrong. I did like the use of Kirby (the dog in her Kirby Lu Productions logo - designed by Cary Zartman at Z Factory).

And, of course, I overdid it on the layout. This, I was sure, was darn near the perfect layout for her site. So, when I went to do the second mockup ... I was stumped for a bit.

And then I decided I was really tired of the boxy look so many websites have. Sherry's music kind of bursts some boundaries ... maybe her website design should as well. Also, while the white with hints of lime was a nice look, I wasn't happy - Sherry's a colourful person and that design just didn't fully encompass that.

So this was mockup number two:

Design 2

I liked some aspects of this ... but the layout just wasn't as good. The whole design was just not very coherent, although I did kind of like the border of the top banner being broken open by Sherry's music. I had a LOT of tweaking to do on those lime eighth notes ... but I was pretty sure this design was not going to cut it, so I forced myself to not waste time perfecting it.

What I did really like was the navigation bar. Several ideas suddenly popped into place there.

I wrote up an explanation of each design and sent that text plus the two designs over to Sherry, explaining positives and negatives of each design, different aspects of the layout, difficulties we might have in the coding process and so on. Then I invited Sherry to spend at least a day or two thinking about the designs and my explanations before getting back to me.

Some of the issues I pointed out included critiquing the use of gradients on the first image (the green fading into white at the top & bottom of the various boxes). I wasn't convinced of that shade of green ... and I didn't think the promo area was quite right yet. I pointed out the colour flaws in the first mockup and felt that the second one could be made MUCH less boxy (particularly since the original idea had been to disrupt boxiness) if that was a feel or look that she liked overall.

Next time I'll go into the changes we discussed ... which design was picked, tweaked ... and where the project stands now.

Posted by Red Monkey at 6:43 AM | Blog | Design | StumbleUpon Toolbar Stumble

December 18, 2008

House Made of Web (part dos)

While I said I was done with the back story last time I lied. But this will be short. Wanna see an UGLY 1998 website: here's my old syllabus. Key word - OLD. Web.archive.org has loads of old gems. Scary stuff.

At any rate, I said I would discuss how a website is conceived and constructed today. This is obviously my process, although I'll also be talking about how other professionals work as well.

Generally, the conception starts out as the easy part. It gets a little more complex, but of course, they all start with something like: I want a site where I can show off my talents, career, thoughts, hobbies, whatever. I want to tell people something or I want to sell something. (Sometimes it's selling people what you want to say!)

I'll use one example to walk us through this process. I happen to go to church with an extremely talented musician, Sherry K. She recently decided that she wanted to completely revamp her online look. She wants a website similar to what she has in terms of content, but she wants something that will really reflect her personality and style of music. We sat down one day and discussed her needs in terms of what the website should be able to do, what her goals were for the site ... and what her level of computer and website skills were.

In Sherry's case, one of her goals is to be able to update the site herself - and not just in a "content management" kind of way, but she wants to be able to understand at least some HTML and CSS (the most common and basic "languages" that websites are written in) herself so she can apply that to MySpace as well as her website. Like many people who want to advertise themselves, she doesn't want to have to rely on others to fix every little thing or make every tiny adjustment.

Most graphic designers and web designers have a "creative brief" they use to understand the creative project - be it a website or a company logo. David Airey has a short form he uses on his site, which you can read here. A portion of it gives the designer the feel for the customer/company requesting the work - who their competitors are, what their company is about, project timeframe, colours, icons ... various little details that the customer might not have thought about beforehand.

In my case, Sherry had some distinct ideas about marketing and SEO (search engine optimization) ... and she knew a few sites that she liked their marketing techniques - but she hadn't given a lot of thought to the aesthetic component of the site. I took a couple of pages of notes during our discussion - and she sent me another few pages of marketing notes that would affect the design process in some way or another.

My first goal was to organize all of these notes. Sounds like studying for a test, doesn't it? A great deal of web design revolves around information systems. How do you organize your information to meet a certain goal?

Sherry has two major goals: sell her music and get people to book her for gigs.

After looking through the notes, I listened to her music again, looked over the design of her CDs and her MySpace, and studied the language of her current site and some of her email newsletters - all to gain a mental picture of who Sherry K the performer was.

Now, depending on the complexity of the site, a designer can do one of two things - build a wireframe or actually begin both the organizational building and the aesthetic design all at the same time.

A wireframe is essentially just a map of where different elements of the site will be and how everything fits together. On the e-commerce sites I've worked on, this was an absolutely crucial element of the design process. Different people in the company had distinct ideas of what information should be seen "above the fold" on an 800x600 sized monitor - although many sites now design as if 1024x768 is the smallest (and most common) size monitor. On an e-commece site you want the logo and tagline, search feature, the most important shopping buttons, the cart button and at least one "specials" or "ad" area to show within the top of the page so they're seen first.

When you have several people who need to approve the design, it's best to figure out this information puzzle before adding the complication of aesthetics to the issue. So a wireframe generally is a series of boxes - here's the area for our promotion, and it's going to be this size. Another box shows where the navigation will be, another the exact space for the logo and tag line. The barest of wireframes won't include colours or fuss over font - it's literally just a jigsaw puzzle map.

Once that wireframe has been approved (likely things have moved around and changed sizes during the approval process), then comes the thematic design.

Sherry's site was simpler than an e-commerce site and I had some pretty good ideas from her excellent organizational notes where things were going to need to go. So, I decided to work both the wireframe and the design all at once. I latched on to the line she uses in all of her newsletters and emails: Sherry K: piano with spirit, piano with soul, piano with a hint of lime and salt.

I had a pretty good idea what I wanted to do ...

... and I'll get into that next time.

Posted by Red Monkey at 7:00 AM | Blog | Design | StumbleUpon Toolbar Stumble

December 17, 2008

House Made of Web

I saw a little tweet from David Airey the other day: "@davidairey Ever wonder how your website is constructed? http://www.sitonomy.com/ " - and I clicked through, thinking this was perhaps a web designer talking about the process by which a site is built. Instead, Sitonomy is a nice little app which breaks down the various pieces of technology used to build a site.

But that got me to thinking ... perhaps I should explain how websites get built.

I know a great many folk who think it's some magical or terribly arcane process - but it shouldn't be.

First, a little backstory. Because I enjoy backstory and by golly, you wouldn't be my reader if you didn't enjoy backstory too. (Right? you like backstory, right? Crap. Just me. Well, there are people STARVING for backstory somewhere or another, so you just eat this all up and enjoy it and think about those poor backstory-starving people in Narnia. You're the lucky one, remember?)
I got my start in web design back in the Mosaic age. (Think Neolithic period of the web.) It was 1996 and I thought the web was a great place to store my class syllabus so my students couldn't lose it. Most of the students at Notre Dame in 1996 had computers in their rooms - and those who didn't seemed to constantly be in one of the computer labs scattered all throughout campus - so this seemed like a nice "bonus" I could do for my students. It also gave them the added benefit of being able to access their syllabus from home - or show it off to their parents.

Of course, I came up with this brilliant plan most of the way through the fall semester and decided I'd have it up and ready in time for Spring semester. I had been reading the source of most web pages and it looked pretty simple to do. In the end, however, I had to use a program called Navipress in order to get the site done in time for the semester to start.

Over the course of that semester and the following summer, however, I began writing all of the code for my site myself ... and it quickly expanded beyond just a syllabus site for my students.

This was, of course, the days of grey backgrounds everywhere ... horizontal line dividers marking divisions in pages that went on for screens and screens and screens ... and, for that matter, screens that weren't much bigger than 800x600 for most people. Oh the excitement when we could make text BLINK at you. And change colours! OOOOOOH! and looky at that nifty animated gif of a man digging a hole at a construction site.

Yeah, even "Under Construction" pages on a website were fun and exciting back then (instead of the incredible no-no they are now).

So, I learned HTML through looking at other website code and the crappy HTML that Navipress had written for me in my haste to park my thoughts on the information superhighway. I eventually found my way to the HTML Writers Guild and started learning how to code well.

A guild! My geeky Dungeons & Dragons heart overflowed. I was joining a real-life modern-day freaking GUILD!

I learned a lot over the next few years and became a very strong web advocate within my department, encouraging our publication of more and more department materials and resources on the web and very much encouraging our instructors to put their syllabi on the web as well as handing them out the first day of class.

As much as I loved teaching, I was utterly fascinated by the web and how we were starting to use it. My first lessons in user-interface were not through some book about good design - my first lessons were the tough ones handed out by my students. It seemed no matter how hard I tried to organize the growing amounts of information I had on the student segment of my site, the more complaints I heard.

Actually, I think the harder I worked on trying to make the site better for all, the more I took complaints and criticisms to heart.

All of my students used the site in different ways. One wanted the site to tell him when everything was due in one big list. Another student wanted it broken down by assignment. Another wanted it listed day by day.

And none of them were wrong. They simply had different methods of processing information and differing ways to parse logical data.

As much as it could sometimes frustrate me that I had "gotten it wrong" yet again, I found this real-life course in information systems to be fascinating and endlessly engaging.

How DO you put together a site so that every single user will find it - if not easy to use, at least understandable and logical once they get the hang of it. (And get the hang of it quickly.)

I hope that I taught all of my students something useful and positive about writing and about reading. I hope that I didn't kill anyone's interest or discourage them.

I know they taught me a great deal in return - even when I was discouraged by their apathy. (I mean come on, doesn't everyone just LOVE taking first-year writing classes?)

Next time I'll go into the modern process of how a website is conceived and constructed.

Posted by Red Monkey at 4:17 AM | Blog | Design | StumbleUpon Toolbar Stumble

December 16, 2008

MS Recommends Using Another Browser

(Well, duh. I've been saying THAT for years. Nice of you to jump on the bandwagon, Microsloth.)

Mention Internet Explorer to any web designer and watch that person begin ranting, gnashing their teeth and wailing.

There's nothing worse than fine-tuning the code of a website to match your design ... only to realize that YET AGAIN, the non-compliant Internet Explorer has totally bolloxed the whole thing up. Works fine in Firefox. Looks sharp in Opera and Konquerer and Safari. You're a frigging genius of the ether ...

... and it looks like pants in every version of Internet Explorer. And we're not talking some Red Monkey Jeans hip pants that all the cool kids are spending $300 a pop to look just as cool as everyone else kind of pants. No. We're talking hideous 1970s plaid pants from Herb Tarlek at WKRP kind of pants.

And. Every. Single. Version. of. IE. Has. A. Different. Problem.

Every. Single. One.

It's enough to make me go utterly stark-raving mad.

So the fact that today the BBC has an article wherein apparently Microsoft has discovered a security flaw so bad they have not yet released one of their crappy-ass half-complete updates, makes me laugh.

Instead, Microsoft suggests that you download and use another browser.

Lemme tell you something. Once you download Firefox, just keep using it. Please. Don't go back to IE. Import all of your bookmarks and preferences and passwords and all that good stuff.

And then just delete IE from your computer and never use it again. Please. PLEASE? I'm begging you. Do it for the children. Do it for the good of standards-compliant browsers around the world.

Do it before I go bald trying to write a new stylesheet for EVERY SINGLE VERSION of IE instead of writing just one stylesheet that works for all browsers the way Los Interwebz intended.

Posted by Red Monkey at 4:43 AM | Blog | Design | Never Underestimate the Power of Human Stupidity | StumbleUpon Toolbar Stumble

December 5, 2008

Staying Inside the Lines (or not)

So, if you've been around here very long, you know well that I very much enjoy cartoons and comics.

I don't recall what I was looking for at Amazon one day, but I discovered this:

Book cover for Hi-Fi Color

Hi-Fi Color for comics by Miller and Miller.

The book is simply put - amazing. Included is a CD of Photoshop scripts and a myriad of different comic art for you to follow along with in the book - or colour your own way. The book makes it very clear that Terry Moore and others donated their comic art to the book and that you do NOT have permission to post your colourings online anywhere (except for the very nice HueDoo forum), so unlike some of my other experiments in art, you won't see me posting anything from the book here or at Oppositional Design.

Wait,

before you run off! The stuff in this book is excellent - so much so that you do not have to be some Photoshop wizard or even consider yourself an artist to enjoy this book. If you don't have Photoshop, a good portion of the stuff in the book can be done with Photoshop Elements (comes with many digital cameras) or even the open source GIMP. Yes, the scripts and brushes are specific to Photoshop itself, but you can benefit from the book without those extras - particularly since Amazon's selling the book for a bit over $16 instead of $25. The first script, which "processes" art for you, is something you can recreate with the instructions in the book. The second script is an fx script which looks like is pretty Photoshop specific and perhaps not explained in the book. (But I bet someone on the HueDoo forum has probably explained it by now.) I haven't gotten to what the third script is yet.

Even if you simply enjoy art or comics, you'll get a deeper appreciation as you read through the book and look at the art on the CD. The instructions are clear and step by step - and leave plenty of room for your own creativity. It's the nicest blend of "how-to" which still leaves you to your own creativity I've seen in a long while.

I talk to people all the time who insist they can't draw or they are not artistic and it infuriates me, largely because I was one of those people just three years ago. I drew a lot as a kid - I wanted to go into cartooning way back then, but the only books that I could lay my hands on were simplistic cartooning for kids things that really weren't too helpful. I did enjoy my Mercer Mayer's Little Monster activity book which showed you how to draw all the major characters in the book ... but because I couldn't get the hang of grid drawing (which was supposed to simplify things) ... I got frustrated and quit trying.

As far as I was concerned, my mom was the artist and my sister was the musician ... and I guessed I was a writer. It wasn't until I was fairly deep into web design before I started also trying to draw again. A lot of it was crap ... but then I discovered the Cartoon Cool by Chris Hart and started noodling around again. And, the words that I used to tell my students in first-year writing came back to haunt me: professional writers DO have to work at writing. They don't get it magically right the first time and come downstairs with some finished masterpiece.

Oh.

Yeah.

Umm, gee, I guess the same thing goes for artists, huh? That would be why there are pages of sketches done before an artist tackles a big painting. That's why a comic book artist might do pages and pages of sketches blocking the story out before drawing a comic "for real."

It's simply work that an artist or a writer either enjoys doing or feels compelled to do.

It also helped that I worked with a very talented artist who said he often gets frustrated because what comes out on paper (or canvas or whatever) often doesn't look like what he had in his head.

Oh. So it's not just me, then?

Huh. Who knew?

The trick, really, is turning off that internal editor, that internal critic - or at least muting that voice as much as possible - and enjoying the process of making something turn out better than you thought you could do. In my opinion, both Cartoon Cool and Hi-Fi Color for comics are books which encourage our inner artists, however talented we might be.

You, personally, may not have the patience to draw exactly what you see on the page or in your head ... you might not be great at seeing the geometry of every day objects and converting them into a drawing. That's okay. But a little creativity is good for you. Keeps the brain limber and trying to see things in new ways.

If you're at all interested in drawing or art, I really recommend you give at least one of these books a try - just for a little relaxing fun. You might just surprise yourself. I know I have.

.

(And no, this is not a paid ad for this book. I've never met nor spoken with the Millers. I'm not signed up at Amazon to do referrals. I get nothing monetary or in kind from this post. I simply want to spread the word about something I enjoy and I think more people ought to try.)

Posted by Red Monkey at 4:23 AM | Design | Sketches | StumbleUpon Toolbar Stumble

December 3, 2008

This is Whack, Yo

So, because I'm just essentially a very irreverent person who enjoys a sick sense of humour just a little too much ... and probably because I went to high school with one of these dudes (well, two of them, but I only knew one) ... I bring you ...

Whack A Santa

This was an early Flash project for me ... one of these days I keep intending to go back and clean up the graphics a bit.

Posted by Red Monkey at 5:11 AM | Design | People Say I Have ADHD, But I Think - Hey Look, A Chicken | StumbleUpon Toolbar Stumble

October 28, 2008

Change Is Coming ...

Change is afoot here ... and I want to thank HaikuTimes.com for giving me the inspiration to do some sketching needed to finally get around to revamping the look here at The Red Monkey Blog. Be prepared for a completely new look ... soonish. I will try to give you a warning at least a day or two before the new template goes live.

And - to Lisa - I haven't forgotten my promise to return to the excellent conversation we were having on trans issues - particularly in light of some research I saw on BBC the other day.

Posted by Red Monkey at 6:59 PM | Blog | Design | StumbleUpon Toolbar Stumble

October 10, 2008

Monkeehub?

All right, people, quit dropping off the face of the earth.

The latest hit to my favourite links is Monkeehub. Laith Bahrani began Monkeehub as a portfolio site which quickly became a freaking web icon. Laith is the man behind the awesome video to the brilliant "The JCB Song" by Nizlopi. He's also behind the incredible video to Radiohead's "Creep."

Now, every domain I know to be Laith's is only a domain parking page. Monkeehub is down and has been for a few weeks. Low Morale is down as well. And Everloving is actually timing out completely. He's not logged in to MySpace since June, I think ... and he also hasn't had anyone leave him any comments since then, either.

This dude is simply too talented to suddenly drop off. Running a Google search showed scores of articles about him and interviews with him.

So ... anyone know what's going on with Laith? Is he so busy he forgot to pay the hosting bill? Is it rampant xenophobia which has made him deny access to Amuricunz?

Seriously, I need my Monkeehub fix.

UPDATE 10/13/2008
I've heard through the ether that the issue is simply a crashed server and, of course, crashed backup server. Laith Bahrani has apparently been working on an involved project and hopes to get the server issues worked out soon and get his wonderful presence back on the web again.

*phew* I'm glad that's all it was.

As for the rest of you, consider yourself on notice. No more disappearing.

Posted by Red Monkey at 2:37 AM | Blog | Design | StumbleUpon Toolbar Stumble

September 29, 2008

jQuery

WARNING: This is a post about website creation. I am keeping the jargon and such to a minimum and I think there's content in here for non-techie people, but if you're a non-techie person, just know that you'll want to scan bits of this post to get to the non-tech stuff. (I swear I'll keep it short and intelligible!)

I have known that I need to sit down with a couple of Javascript books and learn to program a tad for quite some time now. But, I just never seem to have the time I need to devote to it. There's just always some other project that takes precedence.

I am responsible for the basic building of our church's website and it's been a while since the last design. In fact, the last design was probably around 2001 or 2002 - and it involves the old style of site building - using tables instead of stylesheets. I built a prototype design that I kinda liked and then I got all excited. What if!

What if I could make the site so the church office manager could update one file which stored our upcoming events and that would automatically update a little box on the homepage AND also update the larger events page? That would be cool! It would minimize typos and conflicting information and it would look COOL. (Our office manager is excellent and meticulous - but EVERYONE gets interrupted and forgets that they updated one page with some information and forgets that they didn't get a chance to update the other area. This would just simplify things.)

I know, in theory, that I can build a type of file called an XML file and we could store all of the event information there. Then, I knew there was a way to tell the various webpages, "Hey, go get this information and put it on your webpage." I was pretty sure this involved Javascript ... but like I said, I've never quite gotten around to learning Javascript. So, I hunted around online a few times, looking for a script which would do this and generally experienced EPIC FAIL in attempting to find what I wanted.

At one of my job interviews last week, I was asked if I knew Javascript. "Crap," I thought to myself. "I really need to learn this!" The interviewer shrugged and asked if I knew jQuery.

"I've looked at it a few times, but I haven't used it yet."

"Well," he replied, "that's really what we use. You should pick it up quickly."

"It's a Javascript library, isn't it? So you don't have to know Java superwell to use it anyway, right."

Pretty much. (For the non-techie who are still reading - all this means is that bits of Javascript code are already written for you - and stored in a library. It's better to think about it in terms of LEGOs. These snippets of code make up different LEGO bricks. So as a non-programmer, all you have to do is put the bricks together to build the program you want.)

So this morning, I was sitting at the computer, surveying my now beautiful and clean living room - my project Friday and Saturday had been bulldozing the living room - and wondering what my next project should be. With my allergies, I can't clean house too many days in a row or I'll wind up sick and in bed. I firmly believe dust should be left in place because cleaning it just throws it all back into the air and into my lungs and nose until I can't breathe.

At any rate, I looked around the clean room ... realized I had no projects pending really ... and I thought, hey! This is the perfect time to look at jQuery.

Oh. My. Word.

One of the first things I see is a tutorial on using jQuery to parse (read) an XML file.

The library itself is only about 54kb ("The minified version, while having a larger file size than the packed version, is generally the best version to use on production deployments."). I had expected from their quote that the larger file size would be a lot more than 54kb.

There's a great tutorial session which has already given me what I need to build a prototype for the church website. I can have the homepage show the event, date and time ... and the events page can show those items plus show a longer description. It will take me a little time to finesse the script to display everything the way I want, but I'm really excited to be able to add some dynamic functionality to the church website -- and to know that I can add that to my own sites or new creations as I move forward.

Now, of course, I have a major project! Seriously go to town on the church website.

Even if I don't get that job (and boy oh boy oh boy am I hoping that I do get it!), I've learned something useful and will probably springboard me into finally really learning javascript.

Posted by Red Monkey at 5:19 AM | Design | StumbleUpon Toolbar Stumble

September 4, 2008

#RNC08

First, this is not really a political post.

So, when my friend Techfun mentioned on Twitter that he was so used to get his news through text or audio that he needed some Republican Trading Cards to keep all the players at the convention straight -- I thought, now THERE'S a project!

So, I took a day off of working on Oppositional Design and cleaning house and came up with a couple of designs. The first one required a bit too much work for a quickie project (I was contemplating the really old style cigarette cards), so I went with a more modern version.

These are simple cards and they are NOT partisan. They are simply a nice design on the front with a photo of the politician. The back of the card states the name of the politician, a little about their political position and which day they spoke. I also included the day's theme and McCain quote as well.

So, if you want to print these out and frame 'em or throw darts at them, it's up to you.

Warning: These are print quality PDF files approximately 5mb apiece. Each file includes two pages, a front and back. You should be able to print these out on cardstock and cut them out to have your very own complete Republican Convention Trading Card set!

Sheet One
Includes Lieberman, the Bushes, Cheney, Giuliani, Huckabee, Ridge and Palin.

Sheet Two
Includes Huntsman, Marin, Thompson, Lingle, Steele, Coleman, Whitman, Fiorina and Romney.

Sheet Three
Includes Cindy McCain, Jindal, Pawlenty, Brownback, Martinez, Crist and McCain (plus two bonus cards!).

Front and back sample:

Let me know if you enjoy them!

Posted by Red Monkey at 7:44 PM | Design | StumbleUpon Toolbar Stumble

August 29, 2008

Baby Book Complete

So, I've been working on a baby book for my baby sister's baby for the last ... well, let's not go there. Finally, the book is done and ready to be shipped out to mi sobrino in the morning.

Interior of the baby book

Click through to thumb through the whole book.

And, if you're interested in having a custom baby book made for you, use the contact link here on the blog. I'd be happy to discuss your needs with you.

Posted by Red Monkey at 3:44 PM | Design | Sketches | StumbleUpon Toolbar Stumble

August 21, 2008

Oppositional Design

What's up around here lately? I'm swamped trying to get the baby book finished for my sister and simultaneously getting really serious about setting up my freelance website, Oppositional Design. (Why didn't I link to it? Cuz it's nothing more than a placeholder at the moment!)

I finally wrote a mission statement today and now I'm working on a tag line. Some of these are shite, some are all right. I'm putting them here more so folks can take a look at the process of coming up with a good business tagline.

  • Oppositional Design - not argumentative, just different Yeah, that one sucks - gotta start somewhere
  • Oppositional Design - creating what's right for you
  • Oppositional Design - Discover your design
  • Oppositional Design - Bringing the unexpected to life
  • Oppositional Design - unexpected. sleek. motivated.
  • Oppositional Design - You, re-invented.

Random related notes:


  • oppositional 1: a configuration in which one celestial body is opposite another (as the sun) in the sky or in which the elongation is near or equal to 180 degrees

  • oppositional culture

So, why did I go with Oppositional Design as a name when it presents some challenges just within the name? It was one of those flash of inspiration moments for me. I was speaking with someone who wanted me to write with my left hand - then she looked at me for a second, her intuition working overtime, and asked if I was left handed. "No, but I practiced writing left-handed as a kid because it was different." She shook her head with a small smile and said, "Oppositional."

To a certain extent she was right. I was not and am not someone with Oppositional Defiance Disorder (though I adore that the acronym is ODD). I'm not a confrontational person, but if there's a way to do something different, I usually find it - or find it more interesting than the "normal" way. So, calling my freelance site Oppositional Design seemed a natural despite the challenge of spinning "oppositional" into something valuable. Probably because of the challenge.

So, when coming up with a tagline, the first one was simply a literal definition of the problem, not a real competitor for tagline. "unexpected. sleek. motivated." has more to do with the crappy tagline on my business card right now - the typography of the ascenders ("tall letters like L, lowercase D and to a certain extent the lowercase K) just looked beautiful in the font I was using. So, I'm still playing with a three word tagline in which all three words end with an ascender.

It's an ongoing process and one I must complete before I can even begin the design of the website and the re-design of all my identity paraphernalia (look of the letterhead, business card, invoices, etc.).

Posted by Red Monkey at 12:48 PM | Design | StumbleUpon Toolbar Stumble

June 15, 2008

Done Right

When I was born in 1968, my mother thought she was getting a nice, docile Shirley Temple child. A daughter she could bond with, could dress up, teach to dance and sew and sing and be a delicate flower of baby-woman-hood.

Instead, she got a wild li'l red monkey baby, whose first words were practically, "I can do it myself."

In short, we were at odds from day one.

We fought about the length of my hair - my scalp is sensitive and I had very fine, very straight, very fly-away hair. My mom insisted on combing my hair with a very very fine tooth plastic comb. This meant screaming, crying rebellion every day.

We fought about appropriate toys. I wanted airplanes and cars and trucks and six-shooters and drums. And a banjo, but that's something of a digression.
Mom wanted me to have pretty dollies and Barbies and play dress-up princess.

We fought about clothes. I preferred to live in jeans and t-shirts. Mom wanted me in if not frilly dresses, at least cute li'l jumpers. I came home in tears on more than one occasion in kindergarten because some little boy tried to look up my jumper whilst we were on the jungle gym or slide or swings or what have you. Mom's solution was to not do those things in a jumper - my solution was not to wear jumpers.

The problem was more in the time period than anything else. Parents at that time had been led to believe that children could be told this is how things will be, and so mote it be. At the same time, however, it was the time of "Free to Be You and Me" - where kids were encouraged to be themselves.

I also grew up with two very creative parents. My father played honky tonk piano for hours, completely losing himself in the music he generated. I never heard him play anything other than "his" song, but it was an endlessly mutating and developing creation.

Mom also played piano, although she played less frequently and always played from sheet music - not because of any lack of skill or desire, but, I think, because she feared doing it "wrong." And, in addition to her piano playing, my first memories of her are of her painting and drawing and sketching. Whether it was Toll painting some wooden box or serving tray or actually doing a pastel portrait or acrylics on canvas, Mom was always creating something new.

But like with her piano playing, Mom seemed scared of somehow "doing it wrong." She laboured over every detail, often stressing herself beyond belief to get every detail exactly "right." And, she was far too hard on herself when a shadow wasn't perfect or some tiny detail was out of alignment just the slightest bit. I would watch her scrape paint off, in tears, sure that this was another example of her failure as a human being. And I would watch her, once she was finally done - put herself and her work down. I didn't get it. Her stuff looked easily as good as things I saw in the stores.

I think it was sixth grade when I took a serious interest in drawing myself. I was interested in cartooning, in comic strips, and in technical drawing. I enjoyed drawing fictional maps and would spend days creating new lands. In social studies, we had an assignment which included drawing - and I discovered a latent talent for drawing flintlock rifles ... and then more modern rifles ... swords ... and airplanes. (I have no recollection where that jump came in except I loved F-15 and F-16 planes.)

So that summer, when told I needed to take a summer enrichment class, I picked a class on drawing. I had a blast with it - it was mostly just a scheduled time to draw with the teacher critiquing us gently and there was little actual teaching of technique or theories of perspective or something along those lines. The class went along swimmingly for quite some time.

And then we had to do a still life.

I set up an apple on the kitchen table and scrawled something. Erased, re-drew. I hated it and I couldn't get the chiaroscuro to make the apple look 3d instead of flat. I finally got it "done enough."

Mom looked over my shoulder. I don't remember our exchange, but the gist was "You'll sit here and re-do it until you get it 'right.'" I sat there for what felt like weeks, and I think I switched from pencils to pastels or pastels to pencils. Eventually after much temper tantruming and fussing, I had something that did resemble a decent still life of an apple.

But the shine had gone off of it. I didn't see it as an exercise in improving my drawing eye. I didn't see it as a learning experience in shading or use of colour. Drawing had become just another thing that I didn't do well enough to please my mom ... and so I stopped sharing that with her ... and eventually decided that I simply could not draw since it didn't come easily and perfect the first time I attempted something ....

Instead, I turned to writing stories and novels - and simply didn't share most of those with my mother. The bulk of them involved children in peril from kidnappers or evil parents - not things Mom would actually approve of.

I doodled now and again ... I reveled in Chaim Potok's My Name Is Asher Lev - kind of the Jewish Portrait of the Artist as He Develops. But I had stopped drawing "seriously."

Then, in the mid-90s, I discovered this nifty thing called the world wide web. For ten years, I learned digital art in the form of creating website designs with Fireworks and then Photoshop. And I re-gained my interest in art and creating imagery.

But I still insisted that I couldn't draw.

Then, I took a job as a copy writer who was to also help with web design at a large e-commerce company. I worked with a gentleman who'd had his own design company at one point ... and another with a degree in graphic design. And as I observed them working, I realized something. The skills I had honed over the last ten years were comparable to theirs. I didn't have all the techniques nor all the same knowledge and theory - but I had the skills and the instincts. I started reading theory and observing more - asking more questions, learning more programs, growing more confident.

And then I picked up pencils again.

I'm still more confident with my digital art than my sketching, but both have improved dramatically over the years. There is no doubt that web design is more forte, at least for now, but my ability to create brochures, flyers, layout manuals, create signage, all of that has suddenly exploded - because I stopped being afraid about how to do it "right" and began studying theory, studying good design and began trusting my self.

I'm tickled to be in the process of designing a tattoo for a friend over at Cre8Buzz. I started out sketching it by hand until I had the design the way I liked it - and then I transferred the design to the computer to clean it up. I'm beyond flattered that she likes the design so far.

Tomorrow, I'll take a copy or two of the design to the hospital with me so I can continue to tinker with it whilst I wait three freaking hours for them to prep me for surgery on my leg. (Will someone explain to me WHY I need to be at the hospital at 6:30 a.m. for a 9:30 a.m. procedure???) Over the last couple of years, I've taken artwork to the hospital to keep me busy whilst my other half had surgery ... it's a wonderful way for me to focus on something other than the stress at hand.

Like my mother, I do still worry about doing my art "right" ... but I think of that a lot less nowadays than I used to. Instead, I'm spending time looking at what other artists do "wrong" which actually gives them their own distinct style - and then working on my own style.

Today, if I sit down to draw a still life, I'm still not going to enjoy it. It's not the type of art that I really enjoy. But today if I sit down to draw an apple, it's because I know that really concentrating on capturing the form and essence of an apple will help hone my eye and my hands and that I'll apply those skills to my own way of doing things.

Meanwhile, I have to laugh at all the times I told my students who were afraid they were not writers simply because the first draft of their essays were not perfect ... no one is perfect on the first draft. There isn't a writer today who completes a short story or novel or academic essay or even speech writing in a single draft. What makes you a writer - or an artist - is a passion for what you do so that you are willing and wanting to do it over until you get it as close to that picture in your mind as you possibly can.

I get that now. There's no way to do it "right." There's just the way you enjoy doing it.

Posted by Red Monkey at 6:06 PM | Design | People Say I Have ADHD, But I Think - Hey Look, A Chicken | Sketches | StumbleUpon Toolbar Stumble

May 24, 2008

Marketing Tava

I discovered that Pepsi is putting out some new products ... and I found their website and marketing concept REALLY interesting. For those of you not so interested in design - this is probably not a post for you.

The site is for Tava, a new drink which looks to want to capture a young and Latin market. Let me break down the site and marketing design.

Technology
The site is Flash, which definitely targets a younger audience as most oldsters don't want to mess with a fully Flash based site. It includes a nice amount of movement in order to keep attention focused whilst other parts of the site load - even the cursor develops a little "loading" icon when you've clicked something - and that little loading bit follows your cursor around the window. There's a nice MP3 player located at the bottom of the site - or, if you click the Music link, you'll get a better MP3 player that lets you make more choices.
All of this says, young, hip audience which has certainly been Pepsi's target audience from the beginning of their company advertising.

Look & Feel
The site is a nice, spicy red - taken from what they apparently consider the flagship flavour of this line - Mediterranean Fiesta. They make a nice use of the current trend toward the shiny reflection of product and the background area utilizes a really nice, understated background image in a darker or lighter version of the background red, depending on the image being shown. Those background images are particularly nice as they are simply "primitive design" icons - each one matching one of the products in this Tava line. The first one we see as the site loads corresponds with the flagship flavour, but as we navigate through the site and other flavours come to the forefront, the background also shifts and changes so we can see the iconic design for that particular flavour. The colours of the bottle labels pretty closely match the colour of the drink - I don't even wanna think about the artificial colours injected to achieve that effect.

The site is framed at the top and bottom with a wallpaper which utilizes a small version of the main Mediterranean Fiesta icon (which appears to also be the main logo for the product since it appears in a small form at the bottom of each bottle's label design). The wallpaper fades into a lighter, brighter red at the bottom of the page (to match the HTML background colour).

The links at the top of the Flash piece indicate the marketing emphasis: Products, Events, Music, Art. Again, given that Pepsi's campaigns always align themselves with "the young generation," this makes sense. Products is the first link since the main goal is to sell their new drink. But, the way they're going to do that is to align themselves with fresh, hip, new music ( and you can even download some of the music) and by using young or "edgy" art.

There's also a distinct graffiti/grunge feel to the site - and yet it's also a really nice, solid and clean design. I like to think that's a blending of the audience - grunge/grafitti - and tasteful design (and I think a lot, if not most, of the younger people targeted do want a clean design so they can find what they need from the site).

As you click each link, you get a little bit of nice movement and then the short, pithy phrases in the background change, keeping you visually occupied whilst the new portion of the site loads. Some of the sayings include:

  • "admire art history. experience art present."
  • "set your mind to shuffle."
  • "keep an eye out for the invisible"
  • "if you travel off the beaten path, you're on the right road."
  • "open the window of opportunity"
  • "what if you had never tried your favorite food?"
  • "sometimes it's good to let the world pass you by."
  • "cultivate yourself and see what grows."

These phrases seem to set a tone for trying something different, something edgy and creative. It's a bizarre and yet very slick mix of "hey, we're different just like you" and encouraging people to expand themselves.

Music
The site features a nice array of up and coming bands (yet another clue that the site is mostly targeting a younger audience). But the bands? I didn't hear a single one which sounded either international or Latin. When I went back and really looked at them for this post, I saw LA, Orange County, Vermont, NY (but in the UK now), Virginia and NY. With a product and a look which seem to cultivate a young, Latin following, I was really surprised to see NO Latin music here at all. Granted, I think Pepsi wants to market this product to everyone, but with this looking to compete with both Fanta and Jarritos for the Latin market, I was honestly shocked to not hear any Latin or even international music in this small line-up. Perhaps those bands are coming later when they see where the marketing is taking their demographic?

Edgy Art
Now, frankly, one person's edgy art is another person's kindergarten squiggles the way the phrase generally gets bandied about. In this particular case, Pepsi is leveraging "edgy" in a nice way. Just as the music is from "up and comers," the art also purports to be from up and comers. (I'm not sure Amy Guip is up and coming - she sounds pretty darn established to me - but her art does have an edge and a distinct style to it.) I only saw Amy Guip listed under Art and I found that curious. Did she design the site's look? The logos? The look of the bottle? I found nothing at all about her connection to Tava or the site except she's listed under Art. And she's the only artist listed there.

Why use multiple musicians but only one artist? I've got to say, if their little mottos are talking about exploration and experimentation and seeing the world around you - the use of a single visual artist seems ... well, rather stupid and inconsistent.

Product
The product looks like it's positioned to compete with both Fanta and Jarritos. With flavours like Mediterranean Fiesta, a black cherry citrus combo, Brazilian Samba, a passion fruit and lime combo, and Tahitian Tamure, a tropical berry blend - these certainly evoke the same feel as Fanta and Jarritos without actually copying their flavours wholesale.

In an effort to remain more hip and edgier than Fanta or Jarritos - possibly a nod to a kind of yuppy or up-and-comer demographic, Tava lists recommended food pairings for each drink. Honestly, I thought this was a pretentious wine-lover's nod, particularly in the way the copy is written here. For the Tahitian Tamure, the food pairing text goes like this:

Fruit forward, with a bold, round sweetness. The perfect fire-quencher. Try it with spicy food from warm weather climates. Suggested Food Pairings: Santa Fe Steak | Jamaican Chicken Wings

Interesting. Why suddenly leave hip and edgy behind for the stolid and rarefied air of wine terminology? "Fruit forward"??? Come on!

What I find really interesting, however, is the choice of the made-up word Tava evokes (in most Americans, at least) a Spanish feel. The spicy look of the site, says probably Latin America. The flavours are Mediterranean Fiesta, Brazilian Samba and Tahitian Tamure - two of which definitely evoke Latin America (with a flavour of Italy as well which maybe explains the wine phrasing?) and the third is from the South Pacific.

Conclusions
To me, the product and look seems to imply a Latin or somewhat international flavour. However, the music does not and the weird language on the Food Pairings section of each drink's description also give a mixed message. This speaks of an interesting inconsistency in a site/marketing theme that really looks cohesive and coherent and I have to admit I'm really confused by the music choices. Frankly, I think they ought to add Alejandro Florez and Ricardo Gallo to the music mix.

I've gotta admit, I'm impressed with the site and would love to know what design house came up with this concept. It's an intriguingly beautiful site. I'm wondering if some of the inconsistencies, however, don't come from some Pepsico executive deciding to use bands and artists they'd already signed rather than purposefully select bands for this demographic. All that said, I'm curious to see how this works for them - I find it a very intriguing site and strategy.

Posted by Red Monkey at 1:53 PM | Design | StumbleUpon Toolbar Stumble