Greetings WOW Members and Web Professionals everywhere!
For today’s podcast, I’d like to introduce you to A Website Named Desire. This creative and interactive website project was spearheaded by Nishant Kothary, Web Designer and Evangelist at Microsoft.
Originally intended to support the Microsoft annual MIX conference, Nishant took it a step further to share his findings regarding the complexity of the Web design process involved to create, develop and launch the website. The interactive site outlines the role and responsibilities of those on the Web team and it’s definitely worth taking a look at close look. In fact, show it to your customers and to those that employ you so they will better understand and appreciate the multi faceted skills that comprise of today’s practicing Web professional.
I met up with Nishant in Boston a few months back and I was impressed with his understanding of the Web design process and his passion for the Web profession. I’d like to give Nishant a shout out for his effort to walk us through the complexity and for the cool poster of the site that I have hanging on the wall.
Whether you work independently by yourself or within the enterprise you owe it to your self and your customers to check is interactive illustration. Vendor sessions typically are product oriented, so I was particularly impressed with the fact that Nishant outlined the in depth process Web professionals experience everyday including an honest assessment of the trials and tribulations of Web design.
Check out today’s three minute podcast on the Web Professional Minute website.
A complete transcript will be available in twenty four hours. I’ll also be adding my notes from Nishant session where he talks in depth about the lessons learned ranging from workflow, personalities, CMS, the late nighters and the many Red Bulls that were consumed while putting the site together.
Today’s Web Professional Minute is sponsored by Peach Pit Press. Peachpit has been publishing top-notch books on the latest in graphic design, desktop publishing, multimedia, Web design and development, digital video, and general computing since 1986.
Session Notes:
In his session, Nishant describes how “web design workflow as we know it today is hardly an exact science. Getting a web site off the ground – from concept to execution – often requires the maneuvering skills of a Spanish matador because of all the moving pieces and types of personalities involved. A Website Named Desire is an honest exploration of the web design process through the lens of a recently launched site for web designers and developers: MIX Online.
Nishant walked attendees of his session through notable experiences during the design and development of the site from sketch to full-featured CMS. The poster he handed out” doesn’t prescribe the process according to Nishant, but it is something I think a lot of us will actually connect with when we actually go through this entire visualization, because we’ve had those scary experiences.
According to Nahant’s the many hats that we wear as Web professional including the role include:
•project manager, and she has a little circle next to her with a pi on it.
•creative director or whoever is sort of leading the project pitching this whole thing to the client.
•web developer,
•pulling all-nighters. We’ve all seen the stack of Red Bulls lining up our windows or our desks.
•war room meeting or a war team meeting, which is where all the stakeholders get together on a daily basis or maybe sometimes twice a day. Then they just quickly realize how close the project is to launch.
•This usually happens whenaccessibility testing going on.
•IT department, entertainment,
A few of the lessons learned from his session include:
•We’ve come to assume certain parts of the process. Now is when you do wire frames. Now is when you do comps. Now is when you do interaction maps, right? And we have stopped questioning how we do certain things, and my contention is it’s because of the environment we’re in.
•We’ve all been struggling for respect, and I have always taught web design as part science, part art. And when you throw art into the equation, into a production equation, then it introduces a lot of functional ability.
•So I actually want to walk you through how I designed the site over the past three months, and hopefully, we can extract a few lessons from that if nothing else, just some practical lessons.
•The thing that was very different in this project, when I worked on this project, was I spent a lot of time actually gaining the trust of all the people I was working with. I’d never done that on some of the other projects that I worked on.
•You know, I’ve spent most of my life actually in the corporate environment. I almost went into teaching. I spent a lot of time talking to the devs, talking to the stakeholders. I talked to VPs about it. And it wasn’t talking about pixels, it was talking about ideas, trying to get everyone on the same page is kind of what we were trying to do.
•So I think that’s a major prerequisite. If you’re trying to build something that’s sort of outside the box that’s going to make people nervous, that doesn’t fall into the general mold of things, you need to spend time communicating and gaining trust.
•Typically, we get thrown into very dysfunctional environments. I’ve been in on a lot of dysfunctional teams and worked with complete bozos for half of my life
•And something that I learned on this project was you can fix that, right? Because our tendency is often to try to still do the right thing even if you are working with this really weird environment.
•In hindsight, I say you can do all the things you can possibly do, but make the trade offs and move on because really if you want to build something excellent, then people around you need to understand that and they need to want that too. They need to care about the site. They need to care about design. Those are just some things that if you don’t have on the project, you just don’t have a good environment to work with them.
•Mix brand.” So we created this brand and most of you have probably either heard of it and you might want to think of it as maybe an event or something, but it’s actually a brand where we actually want to talk to web designers and developers.
•So, around this frame, we actually have a community, the Mix online community, where we want to actually build some line share. This was the old website that I was thrown into. This is the one that I needed to redesign. To me, it reeks of really corporate look and feel, and it’s really nothing more than a blurb of text in some sort of a blog format. We did have really good content. We had a great writer by the name of Joshua Allen, but outside of that, there wasn’t much to it.
•So we spent an ample amount of time trying to figure out what the site was going to be about, and we whittled it down to three things. Number one was content. Instead of doing this blog format, we decided, you know what, we like what A List Apart does. We like what a lot of the online magazines do. We were talking to web designers, not just people who care about building standards-based websites and stuff. As web designers, we have a wide array of interests. We’re interested in things like micro formats, visualization, all sorts of topics on the Internet. So we said, “Let’s actually think hard about what kind of content we put up there, and let’s invite people to write content that has a long shelf life, that doesn’t just expire in five days, that’s just not a gimmick to get views and visits. It’s something that people can refer back to year over year.” So content was one.
•The last point was really a meta-point that was super important to us, and it was practicing what we preach. So we wanted to do it right, for lack of a better phrase. We wanted to care about standards because we talk about them. We wanted to care about micro formats because we talk about them. We wanted to care about having a good design both inside and out, which means when you view source, you don’t just fall on the ground, frothing from your mouth saying, “Oh, my God, what is that selector?” Right? It actually makes sense.
•The point I want to make is we didn’t have a fancy vision document. In fact, that thing I was just showing you, we wrote that up five days before launch. That was the first time we actually saw our vision on paper so to speak. I think it works really well because the web changes so fast and scenarios change so fast and your needs and requirements change so fast that sometimes you’ve got to put a stake in the ground and move on. So it might be a very obvious lesson, but that was practical lesson one that we learned.
•Number two: paper. When I went to school, one of the degrees I got was kind of graphic design. Well, it was called interactive multimedia, if you can call that media, if you remember those days. It was some confluence between, there were a bunch of art students and there were a bunch of computer science students. In school, they tell you to sketch everything, right? You always had to sketch before you go up, and I was definitely one of those kids who developed a dislike for it very early on. And I’ve spent years at it; this is a thing I’ve tormented over for years, and I think I finally know why. It’s because every time I saw concept sketches on TV, that my peers did, saw in books, they were beautiful, and I was like, how do people actually do that? How do you actually visualize something and then turn out with this beautiful sketch that actually looks like the damn thing? So I got really turned off very early on. I was like screw that, and I would jump straight into Photoshop and let whatever happen. And very recently, I actually started picking up sketching again, and the reason I did was because I went to UX week, which was at the [indecipherable]. I don’t know if any of you have been to that event. They have the best conference giveaway I’ve ever seen. They actually gave one of those black moleskin notebooks. You know, the ones that if you work with MBAs, they most likely carry one of those. They have a black hard cover, and it was a graph paper notebook.
•And I don’t know how you guys are but every time I get a new notebook, I look at it and go, “This is going to be the book that will document all my ideas. It’s going to be well formatted and it’s going to be beautiful.” And you plan around that. You’re like a kid. I tend to do that all the time. I did that to this book, and sure enough by page two, it was chicken scratch, but for some reason, I still kept it around. I started doodling again.
• I started getting my ideas back on paper again, and it was mind blowing. And again, this may be super obvious for all of you, but it helped me tremendously to actually take my ideas and put it down on paper.
•These are actually the five pages of notes that I took over the lifespan of probably five weeks or six weeks of the project. It’s really ugly and most of it doesn’t make sense anymore. I can’t read my own handwriting. But for some reason, that was extremely instrumental in what the site turned out to be. It helped me filter out a lot of ideas that I would have generally never thought about until I actually went through the comping phase or the wire frame phase. OK, don’t look at the screen. You’ll get dizzy.
•So clearly the lesson here is get back into using paper if you haven’t. Don’t worry about formatting. Don’t worry about how pretty it looks. You don’t have to show it to anybody. Just start using it again. If you’re conceptualizing a project, what I’ve learned to do is I just take any thought I have in my mind and somehow translate it onto paper. I find the best way to format it, I try not to get blocked on it, and I just try to get the thoughts out. It just seems to open up a world of possibilities.
•The next thing I want to talk about is framing. Yesterday, I was actually Googling around for the definition of a wire frame, and this is what I found: “A wire frame is a visualization tool for presenting the proposed function, structure, and content of a web site.” So, read that again: function, which is functionality; structure, which is the layout, at least to me; and content, which you expect that.
•Now, my contention with this is layout is such a big thing on the web. If you think about it, it is the only medium in which the user doesn’t clearly know everything that’s available to them when they hold it out in front of them. In a magazine, in a book, you know, in this finite space, is all the stuff that’s available to you. On the web, that is not the case. I don’t want to get into above the fold and below the fold arguments. In fact, I’m not someone who believes in the fold, but the point is you have a very finite amount of space and time to actually convince someone to look at your site.
•The layout also determines how people actually sift through your content, what they find first, where their eyes are drawn to. I’ve found, at least every project I’ve worked on, we’ve had to hammer out layout very early on in the phase, because when we go into that wire frame review meeting, we’re like, “Here are the eight wire frames. Don’t worry about the fonts. Don’t worry about the colors. Don’t worry about the content, but the boxes – they are all in the right spot.” Then everyone argues about what to move above the fold and what to move here and there. Then you finally sign off on it, and you go, “OK. Great. I’m going to go be a kid with a color pencil and take color and fill up all those lines and put fonts in there.”
•So I didn’t do that this time. Instead what I did was … well, the other point I want to make was I think the reason we do that is because we’re conditioned to. I don’t think it comes naturally to think about it. For a lot of people, it does. They want to think about that in a structural way and it’s good for you, but for a lot of us, we actually want to think about the layout when were doing the visual design, right, because it’s such an integral part of the visual design. The reason we do that is because there are a lot of people who are generally involved in going off and building a website, especially when you work at a corporation. A lot of backend developers that need to go start building features; a lot of business people who’ve got to start to write the content and so forth.
•So what I did was I created a bunch of feature wire frames, and if you look at them, they look exactly like wire frames. In fact, a little secret is that they are wire frames. But it’s just how you frame them. Because when you walk into the room and you show it to the people in the wire frame review meeting, now I’m telling them to focus on one only thing: what features are on the page. Inevitably, someone goes up and goes, “Well, I don’t want the recent posts up there. I actually want to move them down. Why can’t we move the Mix conference down?” Don’t focus on that. We can change all that later. Right now, focus on the fact that this page has recent posts. I’m assuming you want recent posts on this page. “Well, yeah.” And if you’ve spent some time gaining the trust early on, this conversation becomes a lot easier. Because at that point, the stakeholders in the room, despite the fact that they feel uncomfortable, go, “I can go with that.” Right?
•So, I created a bunch of feature wire frames. We read through it and we signed off on what features this site needed to have. Right? So these are all of them. Actually, let’s go back there. Now, don’t worry about taking notes. I actually wrote an article about this on CloseEnoughDoesn’tMix.com.
•All these assets are up there. So are all the comps, all the wire frames, all the sketches. Everything I’m talking about is pretty much up there, and there’s a bunch more too.
•I guess my lesson here that I want to throw out to you guys, and someone can benefit from it, is that layout is actually extremely important to web design.
•We’ve done it one way. If you have the ability to try this other way, it opened up a lot of doors and a lot of possibilities for me to actually think about layout within the context of the visual design.
•Number four is inspiration. Everyone has a different way to go about this, but I found that every time I work on a project, I need to spend hours just browsing stuff: looking at what other people have built, getting inspired by colors, photographs, whatever. I can’t get into a project without doing that because sometimes it’s four or five months between these projects that I do, and the web changes so fast too. I also wanted to know what users are used to seeing out there, right? The visual styles change. Now, I’m not telling you to try and be a copy cat and just steal stuff that’s going on. I just think it’s nice to have the creative juices flowing, and I actually use a specific process to get that going.
•So I found this designer’s site, Tanya Merone, and if you go to CSSMania or one of those CSS showcases, I think I found their site there. I thought it was a very interesting design, and she’s clearly a good illustrator too. If you go down to the favorites section, she has these neatly bookmarked CSS showcases and design inspiration links. So, every time I start a project, I actually go there. She’s probably wondering who the heck hits her up so often, but every five months, I’m just always on her site just clicking these links and then I use this as a jumping off point to go look at showcases of sites, like what people are doing. It worked for me. It may not work for you, but I think the key point is go find something that works for you and incorporate it into your process. Right? I was speaking to a gentleman yesterday who said he goes to Flickr and he uses images from Flickr to actually get inspired. The colors inspire him and he comes up with templates using them. Whatever it is, find something and make it a part of your process. It’s actually pretty liberating. How are we doing on time? Twenty? OK. Pretty good. OK.
•So the next section I want to talk to you about is … sorry. I’m just rushing through this because we started about 10, 15 minutes late. We’ll have time for questions later.
•Prototypes is another part where fortunately I slept well last night so I won’t get jumpy and bouncy and punchy, but I get really pissed off that as designers, we don’t often get time to prototype, to do a bunch of comps that we can just throw away. The expectation I’ve always had of the environment of me is, “OK. Wire frames are done in a week. You’re going to have all the comps, right?” “Sure.” But if you go into the traditional development environment, and I’ve worked as a developer as a long time too, I always get to say, “No, you know what? I need to figure out the technical feasibility of doing that.
•Right? That’s what the argument always is. Prototyping is all about finding the technical feasibility. Well, why don’t we do the same thing for web design, where we actually test the technical feasibility of the web experience, or the feasibility of the web experience?
•So, fortunately, I’m on a great team. They believe in it, so I actually set up time to do that. At some point, I didn’t find that right inspiration, so I said, “I’ve got to jump into actually doing some prototyping.” This was one of my prototypes and it’s not even finished. There are parts of it that are just blank that you can see up there, and some parts just aren’t working out, so I start another one. I actually did two prototypes of this project, and I played around with all these different ideas that I had in my head. This one didn’t work out either, but what was great was while the whole prototype didn’t actually translate to the final design, I was actually able to extract a lot of elements from that. I was able to try out a lot of ideas that I actually took into the final design. See that bottom part? The footer’s not done at all.
•So what I discovered was that I can’t do the right thing, the right design, the first time. I can’t come up with it. Trying it a few times, each time, I get better. Now this doesn’t mean you iterate forever, but if you scope it within your project, you can actually get to a much better solution the second time you try it. At least that’s my anecdotal argument.
So this is one that makes a lot of people nervous when they talk about it. This is the Aha moment section. I was reading an article about the Aha moment because I’m just intrigued by it. Because sometimes when you’re solving brain teasers, you try all these logical paths. Like if there’s a duck and a fox, and the duck is circling the fox and the fox is running around, what does the duck need to do to escape? There are all these crazy things written, and at some point, you decide to throw away all traditional wisdom and something clicks. That’s the Aha moment. All of us have had it on something or the other.
I actually rely on it for design because it’s just something that works for me. Now, your obvious question is going to be: when does the Aha moment going to come? You’ve spent all this time getting inspired and thinking about the project. If the Aha moment doesn’t come yet, you’ve got to be realistic and take the best solution you can come up with and actually ship it. Most likely, nine out of ten people are going to go, “That’s awesome,” but as designers, we’re our worse critics, so we’re probably going to go, “Damn. It didn’t do the exact thing that I want it to do.”
For me, the Aha moment came when I was actually I read a blog post on Veerle Pieter’s blog, and she featured an artist by the name of James White. Look him up. He has some phenomenal art work. So, he did this piece called “Commodore 64,” and if you were to visualize what happened in my mind, at that point, I had all these design ideas in my mind on one side, just laying on the floor marrowing, just a big pile of them. On the other side, there were all these user requirements and things that I learned from showing people prototypes and stuff. There was a lot of data. Then I saw this and just the right things flew up from both piles and it was a flash of lightning. A unicorn flew across.
It was just a surreal moment. Everything just clicked. I can’t explain it, and that’s the part that I think is just intuition. It’s that right brain saying, “This is it.” I know it doesn’t fit any logic, but there’s some part in your right brain that says that.
If you look at it from a physiological standpoint, the Aha moment is actually, scientists have studied this, right before it occurs, about a third of a second before it occurs, there is a big electrical surge in your right lobe, the right side of your brain. And what’s interesting is right before that, the left side of your brain stops working. So, it’s almost like your mind is blocking out all logic to say, “Let’s focus. Let’s get that intuition to work for us.” So embrace it if you can. You can’t really scope for it. You can’t plan for it. I’m a believer in if you think hard, it just comes to you. So think harder, I guess, and if it doesn’t come to you, then you have to make the best of what you have.
The next item is composition. Once you have an Aha moment, it’s pretty easy. At that point, just take the time out, and I bet if you don’t sleep for three days, you’ll be able to crank out all the comps that you need and all the visuals, every detail of your site non-stop because it’s all flowing at that point. At that point, you have all the stuff that you need in your head. So that’s what I did. I started comping, and this was quite a departure from the other comps that I had. I came up with about eight or nine comps in the span of nine days.
This is actually an article page because I talked about how we wanted all these articles. I comped out every detail of it. What would happen if someone wanted to include a code block in the article? What would happen if they wanted to float an image to the left and add a caption to the image? How would we render block quotes? What do the comments look like? How does the comment form work? This was the ‘about’ page. So essentially, I just spent a few days after that Aha moment and I just cranked these out.
The thing that I’d say about comping is the devil is really in the details. I think Dan talked about this yesterday, but at this phase, you have two options. You can either work out every detail about your design, or someone else will work it out for you later on. Right? That’s what usually happens. People find issues, and then you may not have control over it. So I actually comp out all the stakes for uniforms, basically what happens when you interact it with a pixel on the screen. I want to answer that question, and if you have the time and you scope for it, you are able do it.
Next phase is clearly coding. As you know or may have already guessed, I was far behind by my schedule, so at this point, we’re like, “Oh, crap! We’ve got a shipment in 10 days. What do we do? We’ve got to actually turn this into a good website.” So like any starting start up, we did what we do best. We outsourced to the cheapest person who could put a bid on this thing. We actually went out to a PSD slicing service, which Jeffrey talked about in his keynote yesterday. Give us your comp, and we’ll turn it into symantic HTML with great CSS. And it’s all going to just work in eight hours. There are a lot of services like that. So I paid two grand, went in on Monday to this company that I won’t name, and I said, “On Wednesday, I want my site all done.” Sure enough, they came back on Thursday. They were a day late, and they gave me the code.
Now, I will say that it validated, which to me doesn’t mean jack, the CSS validated, but if you actually scroll a little lower on the CSS validator, there were 442 warnings for redundancies, and I’ll show you why. How many people actually do CSS in this room? I imagine there are quite a few. Yeah, quite a few. That is what we got back. That second selector just targets a word on the page, and then just [indecipherable] somewhere. So, obvious other issues with the CSS that we got back was it says “orange layout.” That is actually the articles section. And I was like, “Goddamn. If I actually change that orange to purple one day, I’m going to have to create that mapping in my head.” It was just horrible code. They even spliced, if that’s not enough for you, but of course they went all out there too, and they named our images. I don’t know what this name convention is, but it seems like it’s easy for them to name it that way.
So essentially what we got back was this. I actually asked my wife, “What do you think this looks like?” yesterday, and she was like, “Is that a beaver coming out of the water?” I was like, “Go back to sleep.” Do you even see that? You do? Seems so unreal. I’m just going to hide that. So I guess I don’t have a practical lesson here, other than clearly you want to scope for cloning, and we didn’t. I’ll be honest about it. But the key is, and this is really obvious, take the time to actually write good code.