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:

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

Posted by Red Monkey at 7:10 PM | Comments (2) | Design | Sketches | 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.

So 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:

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:

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 | Comments (1) | Design | Sketches | 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 | Comments (0) | Design | 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:

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:

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.

But the new Content Aware Scaling does this:

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 | Comments (1) | Design | 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 | Comments (1) | Blog | Design | 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.

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 | Comments (0) | Design | 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:

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

Posted by Red Monkey at 6:22 PM | Comments (2) | Design | Sketches | 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 | Comments (0) | Blog | Design | 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 | Comments (1) | Blog | Design | 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)

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:

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 | Comments (0) | Blog | Design | 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 | Comments (0) | Blog | Design | 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 | Comments (4) | Blog | Design | 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 | Comments (4) | Blog | Design | Never Underestimate the Power of Human Stupidity | 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:

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 | Comments (1) | Design | Sketches | 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 | Comments (2) | Design | People Say I Have ADHD, But I Think - Hey Look, A Chicken | 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 | Comments (1) | Blog | Design | Stumble

October 21, 2008

Puppy Love

I often cruise through iStockPhoto for ideas. I stumbled across GollyKim's excellent little dachshund the other day and immediately thought of my other half, whose birthday is the 26th. And, since the end of October is Birthday Season for me (my mom is the 20th, my sister is the 22nd, my aunt is the 24th and then other half is the 26th ... and I trail behind on the 4th), I thought I'd whip up my own birthday cards this year. But, instead of using GollyKim's image, I should draw something closer to our little Dappley-Scrappily. Yeah, I know. His name is Scraps. I have taken away his manhood by calling him Scrappily-Dappley. He'll live.

At any rate, GollyKim's doxie is a gorgeous chocolate and tan baby, but Scraps is a black and tan dapple. So, I got out my trusty new Ohto .3 pencil and began sketching out the character. Then I scanned in my drawing and re-created it in Adobe Illustrator. I transferred the vector drawing into Photoshop, added the dapples and the birthday text, and VOILA! Instant set of birthday cards for this season.

Posted by Red Monkey at 6:36 AM | Comments (2) | Design | Sketches | 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 | Comments (4) | Blog | Design | 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 | Comments (3) | Design | 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 | Comments (6) | Design | 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.

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 | Comments (2) | Design | Sketches | 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 | Comments (1) | Design | 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 | Comments (7) | Design | People Say I Have ADHD, But I Think - Hey Look, A Chicken | Sketches | 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 | Comments (3) | Design | Stumble