January 1, 2009
More Seuss-ian Sketching
This one is for my cousin ... it's a long story, but I am now required by law to tease him about moose. So, in a search for Seuss images, I found Thidwick, the Big-Hearted Moose ... and to be honest, this fits Cuz #1 just perfectly for a multitude of reasons. After I was 3/4 done with the penciling on this particular piece, I decided that the style of shading Seuss used was not going to translate as well as I wanted in ink, so I left it pencils. I used my trusty Ohto Promecha .3 pencil from Jetpens.com because I love the precision of a mechanical pencil when I first start a sketch. The strokes can get wide later after I've got the piece sketched out better. I also used a General's Layout extra black pencil in some of the darker areas and a Kimberly 3B for the lighter shading.
The bits of colour were added to better match the original 1948 cover. I used my Faber Castell Art Grip Aquarelle pencils. Yes, they're watercolour pencils and no I didn't use any of the watercolour features in this drawing - I just like the way the colour lays down with these.
I've really been enjoying these Seuss-ian sketches and as usual, I'm learning a great deal from mimicking a master.
Posted by Red Monkey at 6:32 PM | Comments (3) | Sketches
December 27, 2008
Ice & Creativity
So, I had hoped to work through lunch Friday and then take off for Ohio to see my aunt. At 6 a.m., I peeked out the window because there were some flashing lights. A city pickup was behind a city bus in front of our driveway. Spreading bags of salt. Bags and bags of salt.
The bus was diagonal in the street.
We had been turned overnight into a beautiful city of solid, polished-glass looking ice.
I went ahead and started my morning getting ready rituals and then proceeded to wait for a while in hopes that the roads would clear up soon. Not too long after that I heard the splishing of a couple of cars driving up the street. Great, I thought, I'll head out to work now.
I took one step out the door.
Next thing I knew I was sitting on our tiny little porch's steps, my beautiful art pop-up book popped up on the sidewalk and The Mascot laying next to it. If I recall correctly, the leg I broke in June was under me, with the ankle in point position.
Naturally, when I realized I was sitting down on the porch I said aloud, "No, not again." The difference was that I didn't black out this time. I'm not sure how I wound up in that particular position, mind, but I wasn't passing out from pain either. Maybe it was better this time. I looked at the porch more carefully and that was when I saw that everything outside - absolutely EVERYTHING - was polished glass ice. No wonder I couldn't even take one step. I scooted backwards into the house and called in. At the very least the ankle was sprained and there was no way to leave the house on crutches - later in the day the county was declared a road emergency - everyone STAY HOME. Besides, I needed to ice the ankle and take some pain pills and anti-inflammatories in hopes that it would get better fast. After I did that, I went back to the doorway with one of the damn grabber claw things I'd needed when I first broke my leg and was immobile. I hung out the doorway, hanging onto the doorway to keep from sliding down the steps and tried to rescue my books which were being sleeted on. Eventually I was able to grab them both.
The ankle is stretched out and kinda sprained, but all in all it's okay I think. I've been using the crutches around the house and it feels much better today.
Since plans changed and I couldn't go visit my aunt ... and had a very limited mobility yet again ... I decided to work on a sketch for my aunt. When I was small, she gave me a book for Christmas every year and I loved it. Roald Dahl's The Fantastic Mr. Fox one year ... but the first one I remember ... dated 1973, so I was five ... was Horton Hears a Who. So, I decided to draw the frontispiece from the copy of Horton that she'd given me way back then.
Hopefully the roads and weather will cooperate and I'll deliver it next weekend. :)
Posted by Red Monkey at 12:13 PM | Comments (3) | Sketches
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
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
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
