Comments - Web Design from the Gut - Articles - MIX Online

Re: Web Design from the Gut

Robert — Sat, 06 Dec 2008 19:37:58 GMT

Great article!

Re: Web Design from the Gut

Jake Scott — Sun, 07 Dec 2008 02:56:06 GMT

Nice article too bad you have to have that ugly Microsoft Communities navbar at the top :P What software do you use to make the wire frames? Cheers Jake

Re: Web Design from the Gut

Nishant Kothary — Sun, 07 Dec 2008 08:00:18 GMT

@Robert - Thanks. :) @Jake - Funny how those things work out. I used to look at that and go, "Man, I'd like to do something to that navbar." Now it's barely noticeable to me. As for wire frames, it's Visio 2007 and I used the resident shape libraries; I believe I also used some combination of "stencils by Nick Finck, Garrett Dimon, and Jesse James Garret":http://nickfinck.com/stencils/. I have found myself using Fireworks (yes, Fireworks) for wire frames lately because of its "frames" feature (let's me capture states). Not to mention, I've found the drawing tools are just right for wire framing.

Re: Web Design from the Gut

Jonathan Snook — Tue, 09 Dec 2008 06:00:44 GMT

That was a really thorough overview of the process and is close to the process that I go through and similar to the process that I've seen others go through. Personally, I skip the sketching process and do all my initial wireframing using a graphics editor. This lets me drop in blocks of actual content and get a sense for how each of the UI elements play off each other, as well as determining how I want to structure the design hierarchy. At this stage, I've already got a grid to play with and I can go on to the next stage of graphic design. PS: it was a surprise to see my name linked up in the middle. Thanks for that. :) Hope to catch you at a conference soon.

Re: Web Design from the Gut

Craig P. — Tue, 09 Dec 2008 15:22:29 GMT

Nice! Excellent explanation of the process/struggle that we web designers go through to come up with good work. Also thanks for pointing out Tanya Merone. I have a feeling I'll be frequenting her site from now on for inspiration, too!

Re: Web Design from the Gut

zJoker — Tue, 09 Dec 2008 16:59:59 GMT

very useful article, thanks. asp is our future :)

Re: Web Design from the Gut

Nat Ring — Tue, 09 Dec 2008 21:42:11 GMT

Nishant - Great article and presentation at World of Web Design Boston. I thought it was one of the better ones at the conference. Considering the time constraints you were under when you developed the throwaway prototypes, I was wondering if you would be willing to make the PSD files public. I'm interested to see the structure and detail of the layers and accompanying styles of both the prototypes and resulting comps. Hopefully this can my own design process. By the way, any extra Website Named Desire posters leftover at the Mix office? -- Nat

Re: Web Design from the Gut

Nitin Garg — Fri, 12 Dec 2008 05:18:39 GMT

Hi Nishant. Great Article here, starting with a paper is must for any sustainable design. I am going to send this article to some of my print-design mates who says that webdesign is just about phtoshop and some lines of code. By the way, two thumbs up for the MIX Site and i just loved the Oxite page.

Re: Web Design from the Gut

Dan Harrelson — Fri, 12 Dec 2008 16:11:00 GMT

Hey Nishant, congrats on the refreshed site design. Thanks for giving us such thoughtful and detailed insight into your process.

Re: Web Design from the Gut

Thomas Lewis — Fri, 12 Dec 2008 16:38:18 GMT

Hey everyone, Nishant is taking a little time of but will answer your questions when he is back!

Re: Web Design from the Gut

Nishant Kothary — Mon, 15 Dec 2008 20:13:04 GMT

Thanks for all the comments, folks. @snookca - The sketching part is something I've started lately. It's more about capturing random thoughts and ideas than sketching wire frames with a pen; but if I feel inspired, that's OK, too. My mind drifts at a crazy pace and picking up a pen and paper seems to help slow it down. I shall be there at SxSW, and possibly WDN. You going to either? @Craig - If you find a better list of links, let me know. @Nat - Are you interested in the PSD's for the prototypes or the final comps? I'm sure I can clean them up and share them. As for the posters, we have a boatload. Email me your address - I can't promise that I can get them to you right away, but I'll put you on the list. Be sure you subscribe to the "twitter":http://www.twitter.com/sitenameddesire/ feed. That's where we post giveaway announcements. @Nitin - Thanks :) @Dan - Thanks, dude. FYI - I mentioned you guys (Adaptive Path) in my talk at Web Design World (Boston) last week. I owe my love for Moleskin notebooks to Adaptive Path; you folks handed every UX Week attendee one of those last year.

Re: Web Design from the Gut

Jim Pietrangelo — Sun, 21 Dec 2008 16:01:39 GMT

Very nice article, Nishant. Many people have a very difficult time putting down into words the process by which they 'create' or 'do' anything. Processes evolve, sometimes naturally, but nearly always as the result of outside influences that push and pull on them over the course of their evolutionary phase. To give structure to the final result takes talent and a very good understanding of what it is you do. You've done an outstanding job of laying out a framework that any current or budding web designer can use to hone their craft. I, for one, look forward to reading more of what you write.

Re: Web Design from the Gut

Nishant Kothary — Mon, 22 Dec 2008 21:50:23 GMT

@Jim - Here's what I think is interesting - before this article, I always found myself stumbling to explain why I was doing what I was doing, or why it was going to take as long as it was going to take to stakeholders on a project. Thinking in meta about this process and writing it down really even helped me understand why the heck I do what I do. I've always been a bit hard on myself and externally apologetic/defensive about asking for time to "get inspired". That's a thing of the past since I wrote this article: I finally understand why it's nothing to be apologetic about. On the contrary, it's necessary and justifiable. I'm glad I was able to share my revelation, though. And thanks for the compliments. Way too kind. :) @Nat and others interested in the PSDs - I'm currently working hard on our next release around data visualization, but it's on my radar. I want to make sure I do the necessary clean-up before releasing them and will get to it next month. Hope that's cool.

Re: Web Design from the Gut

Greg Chingwe — Sun, 28 Dec 2008 02:07:36 GMT

Nishant, Awesome advise. I am planning to get serious with my web development. In the last 9 years I have primarily focused on databases but I want to branch off. Your advise is great. I like your idea of brainstorming. I am planning to develop my sites in .net using c#. Any advise on this? Thanks.

Re: Web Design from the Gut

Peter Craddock — Tue, 30 Dec 2008 07:26:32 GMT

Very nice article, though I have to say that the "brown + white" combination makes it very hard to read in one go (I had to squint to reach the end of the article, and I now have a headache). Kind of tells you that the content was very interesting, but the format killed half of the benefits. Might I suggest testing a few other colours, for the text or for the background? The green you have in the "opinions" section, for example, makes for a much more pleasant read. Perhaps a slightly different shade of brown and white will make it easier.

Re: Web Design from the Gut

Nishant Kothary — Tue, 30 Dec 2008 23:36:18 GMT

@Peter - Yeah, the brown has reaped some mixed reactions and I'm convinced its time to go with something a bit more saturated. The brown in the comments section, for instance, is much better, I think. We're planning a release around mid-Jan, so I'm hoping I can push some tweaks then. Maybe I'll squeeze something in next week when I'm back. Thanks for the feedback and for muscling through the content despite the color issues.

Re: Web Design from the Gut

Michael Garmahis — Mon, 05 Jan 2009 15:52:08 GMT

Here are my thoughts about Web design process

Re: Web Design from the Gut

Michael Garmahis — Mon, 05 Jan 2009 15:52:40 GMT

http://garmahis.com/tips/web-design-process/

Re: Web Design from the Gut

Amit — Tue, 06 Jan 2009 10:28:24 GMT

Gr8 this is only thing i can say

Re: Web Design from the Gut

Music Critic — Thu, 08 Jan 2009 18:24:48 GMT

This is the best article I've read in a long time. It's funny how every once and a while you need to take a step back from what you are doing and evaluate how things are done. I work for a software company looking after some divisional sites, not allowing me the most creative freedom but I have just been asked to develop a brand new site based on something completely different. It's been a while...

Re: Web Design from the Gut

Chiangmai web design — Tue, 27 Jan 2009 06:18:51 GMT

Looking good! start my idea. Thanks.

Re: Web Design from the Gut

Nathan Pearson — Thu, 12 Feb 2009 23:40:50 GMT

Best article on the subject so far.

Re: Web Design from the Gut

Tom Sayer — Sun, 08 Mar 2009 10:19:44 GMT

WALSAQ makes it easy to find what every business owner needs: High-quality Ecommerce Design services at the most competitive price. Having a ecommerce website designed doesn't have to be hard or expensive to accomplish, and WALSAQ proves it time and again, which is why WALSAQ is called the Next Generation of Freelance Services.

Re: Web Design from the Gut

Koistya `Navin — Sat, 14 Mar 2009 22:20:11 GMT

Good article and great job! High five!

Re: Web Design from the Gut

Rajesh Lal — Mon, 16 Mar 2009 07:20:58 GMT

The design is good 7/10 I would say . A dark background comes hard on eyes though. The 'aha' moment was really good and the preparation was awesome but the translation from the 'aha' moment to the final design left something to be desired.

Re: Web Design from the Gut

maui — Mon, 06 Apr 2009 19:18:31 GMT

I appreciate your writing style and open thought process. Web design from the gut - loved it.

Re: Web Design from the Gut

Hawaii Designer — Fri, 08 May 2009 06:19:51 GMT

I like the design, I specially like the fact that you got inspired by commodore - makes me remember the good old days :) Well, keep it up - also could you please shoot me a not if you used omnigraffle for the wireframes / and is it a custom stencil or some of the shelf?

Re: Web Design from the Gut

mubshir — Wed, 13 May 2009 20:11:37 GMT

Very informative artical.

Re: Web Design from the Gut

Alex Morris — Fri, 15 May 2009 09:01:05 GMT

Quite a timely article for me, as we're just trying to nail down some process here. Generally really well put but I'm surprised you make no mention of bringing in any kind of IA or UX consultation at any stage of your process? Prototyping is great in theory but only if you're testing them against something tangible - did you set some goals? I think your prototypes were actual more visual iterations (eg designing backwards until you are happy with results) Also how were users were involved in this design process? Think you've represented visual design really well, not Web/Interaction Design.

Re: Web Design from the Gut

Jonathan Lackey @zuno — Fri, 15 May 2009 09:09:06 GMT

I have to agree with most of the other comments, great article. Very well written. A fun read.

Re: Web Design from the Gut

Neon — Fri, 15 May 2009 14:26:49 GMT

Great to know that I'm working in the right way, and I'm a developer! I tend to do most of these things already. Can't promote the use of getting ideas out of your head and onto paper and more than this. It's a fabulous jumping off point. Plus in 10 minutes you can do maybe 5-8 ideas! Good article, bookmarked for later :)

Re: Web Design from the Gut

Nick Norris — Fri, 15 May 2009 15:39:52 GMT

This is a great walkthrough. I used to skip the wireframing step, but I tried wireframing with one of my current clients and it turned out to be a really good and important step. It gave them the idea of how the site will navigate, and they wanted a couple of changes that would have been hell if I didn't wireframe the site first. Great article!

Re: Web Design from the Gut

Naina Redhu — Fri, 15 May 2009 15:47:03 GMT

Thanks for sharing Nishant. Well-written. Captures the meaty stuff well. The re-design turned out well too. I recently re-designed my own design studio website - did not capture the process along the way - but I'm sure if I went back to it, I would not be able to write in such detail - mine was a more amorphous process - lots of back and forth, lots of iterations and finally the 80/20 principle - I did not wait for perfection to arrive. I simply launched. Feedback came from friends in the design space, students wanting to be designers, family, from people who have NOTHING to do with design. I implemented most suggestions and realized that they DID make the design better - in terms of intuitiveness.

Re: Web Design from the Gut

Union Room — Fri, 15 May 2009 15:48:41 GMT

Fantastic article and a great insight into designer methods!

Re: Web Design from the Gut

Rory — Fri, 15 May 2009 15:56:30 GMT

Fantastic article, very well written and an excellent read!

Re: Web Design from the Gut

Nishant Kothary — Fri, 15 May 2009 16:14:23 GMT

Thanks for the latest round of comments, folks. Much appreciated. @Alex - I actually allude to IA in several parts of the article (requirements gathering, feature wireframes, layout during comps, etc.) The IA for this project was spread out over the span of the project, so it's not as obvious. We didn't follow the typical process where IA is it's own front-loaded phase to lock layout of information. We didn't need to do this because (a) we were our own client (b) requirements were evolving because this was as v1 as was our team (c) we had a designer (me) who can do both visual and interaction design. (d) I just wanted to try a new way to get from point A to B. The point I'm making is that this article is about an alternate process that blends certain aspects of the typical process together and offers some advantages over its rigidity. When you have a small team and a client that "gets" it, you can allow yourself some flexibility. About user involvement, I think you're asking - did stakeholders and potential users have a chance to review different aspects of the design? Yes - at multiple points in the project (after feature wireframes and we also had a couple of review passes after the comps wherein IA changed a bit). It was a pretty simple exercise since this is a pretty straightforward site; feedback came during the review sessions and also followed in email. Having said that, the real user feedback comes in after the launch; right now I have some very good and actionable feedback since the site has ben out there for around 6 months; both in terms of visuals and interaction and we are scoping a plan to to do a site refresh in the near future that hopefully addresses all the issues (like the one @Rajesh points out above) and also evolves the site to meet some of our new business needs. Don't get me wrong, there's still tremendous value to the classic IA phase in web design. Aside from the widely documented benefits like focusing on content/information layout without getting distracted by visuals, the thing that a traditional wireframing phase offers you is the ability to herd a large number of stakeholders and that's an amazing tool for a web professional. I'm currently leading the redesign of a project that has around 30 stakeholders and I'd be nuts to run it the same way I ran the MIX Online project. It's just not feasible. The last 3 weeks have been all about locking the information architecture of the site through three rounds of feedback of wireframes created in "Omnigraffle":http://www.omnigroup.com/applications/OmniGraffle/. I managed to find a way to create a very transparent feedback loop that gives everyone a chance to chime in (sounds crazy, but it works really well and I will probably write about it at some point). Fortunately, I have the help of another phenomenal information architect (who shall remain unnamed for now) on that project. But yes, I didn't do such a great job talking about all these points in this article. I had to watch word-count, and figured I'd share the more unique stuff. I spend more time talking about topics like how to build trust within the stakeholder group, how to solicit requirements and feedback, etc. when I present on the same topic (I've delivered a presentation version of this talk at Web Design World, CRE8 and MIX). And yes, the prototyping was purely a visual exercise. I experimented with a few different layouts, but that was a byproduct of what I was trying to get out of that phase. Hope that provides some more context. Thanks for calling it out; gave me an opportunity to set the record straight about my opinion around IA/UX :-)

Re: Web Design from the Gut

wizely — Fri, 15 May 2009 17:00:26 GMT

I love this article so much! Whenever I read an article about web design that starts by talking about content and the aims of the site long before reaching for PhotoChop, er sorry... PhotoShop I know it's going to be good! And then you sealed the deal your 'Feature Wireframes'. All-in-all what an intelligent and effective way to design presented in a well-written and highly valuable article - top points all round! Right... now to have a nosy round the rest of your site!

Re: Web Design from the Gut

Marcel — Fri, 15 May 2009 18:57:11 GMT

Thank you very much for this article. Truly inspiring.

Re: Web Design from the Gut

Mike McCready — Fri, 15 May 2009 20:46:44 GMT

A great post with real insight into the design process. Thanks for sharing.

Re: Web Design from the Gut

Jedilady — Sat, 16 May 2009 02:25:27 GMT

Hi! Don't know if anybody have said this but, despite I think this is a Really GREAT article (and I'm really thankful), I couldn't read it all just because one thing: white letters over a dark background produces vibrant texts, and it becomes more and more uncomfortable as long as I read, so I had to take my sight off the text. That worries me because this site is intended for readers, doesn't it? :( That's quite sad because the design made me feel so free and comfortable, a really good (and needed) sensation on internet. Best wishes for you all!!! BTW, sorry if my English is not quite good, I'm a Spanish native speaker.

Re: Web Design from the Gut

Nishant Kothary — Sat, 16 May 2009 22:20:35 GMT

@wizely, Marcel & Mike - Danke! :) @Jedilady - Yes, this has been called out before. I'd have to say it is the most popular constructive user feedback provided about the design in the last few months, and it's spot on. The color scheme is not conducive to readability; we gave it a shot, and lesson learned. Instead of doing a quick and dirty fix, however, I'm tabling this feedback for our next major refresh to the site. Glad to hear that the design makes you feel free and comfortable, though. That's by design :) I do appreciate you chiming in, and hope you'll stick around to provide your feedback when the new design launches in the next few months.

Re: Web Design from the Gut

Himanshu Kapoor — Tue, 09 Jun 2009 07:36:52 GMT

Thanks. It's a kind of quick reckoner.

Re: Web Design from the Gut

Davi Ferreira — Mon, 15 Jun 2009 16:58:55 GMT

Fantastic article, I loved it! Thanks.

Re: Web Design from the Gut

Hernan Valencia — Mon, 15 Jun 2009 17:12:14 GMT

Quipped! June 2009 No. 41 http://www.underconsideration.com/quipsologies/#610631

Re: Web Design from the Gut

letscounthedays — Mon, 15 Jun 2009 21:58:06 GMT

This is a great article and really outlines the entire design process well. You also touched on a few points that I have previously been skipping, or quickly running over, during a lot of the work I do as a Chicago freelance web designer. Again, thank you for the insightful article !

Re: Web Design from the Gut

sara — Mon, 24 Aug 2009 11:29:24 GMT

code can be done by lots of psd to xhtml companies . i got my done by www.designxhtml.com. i think i have all the css and w3c standard complaince. i did check w3c compliance online

Re: Web Design from the Gut

bluray to mp4 converter — Sat, 26 Sep 2009 15:31:58 GMT

Thank you so much for this post, it was very insightful!

Re: Web Design from the Gut

Beast Marketing — Sun, 04 Oct 2009 05:06:00 GMT

Well, I saw your article and after I got done reading it I had to comment on this. I am a professional web designer myself and I don't give out my compliments much, but I wanted to tell you that your an excellent web designer and writer. This article kicks butt, plain and simple. http://www.beastmarketing.net/blog/category/web-design/

Re: Web Design from the Gut

prophet666 — Wed, 07 Oct 2009 05:57:37 GMT

thia article is very helpful and practical and gives ideas for designers.

Re: Web Design from the Gut

Yasir Atabani — Tue, 29 Dec 2009 06:09:30 GMT

I used Fireworks myself for drawing wireframes since version 4 of the product it's very powerful and easy to use. I find that it gives you the flexibility of drawing random shaps and seeing how they will fit together. I personally sketch afterwards if I don't get anywhere with fireworks, of if it will take me great amount of work. I will switch back to fireworks though when I have a good idea to try.

Re: Web Design from the Gut

Umer Tahir — Tue, 12 Jan 2010 18:22:26 GMT

great article! loved the design process and attention to detail.

Re: Web Design from the Gut

ne-web design newcastle — Fri, 15 Jan 2010 09:15:27 GMT

I think you've got this one pretty much spot on, it's never as simple and straight forward as you'd hope it to be! I look forward to reading more of your web design articles.