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