I can’t stress how important it is to do the design of your product first and then code it.
When I was working on my startup(bizteen.net) I first started coding it and then came to the stage that a lot of startups come to(“uuh should I add x here? should users be able to update statuses from one page or everywhere?:) the questions you ask yourself are definitely linked with the actual software infrastructure.
After a failed attempt with BizTeen I decided to do it all over again, this time start by designing the entire User interface. After I was done designing and slicing the PSD into XHTML/CSS I started the coding. Marvelously this worked perfectly. The application was created in no time.
After surviving that I really don’t understand when teams start the coding of a web app. first. It can definitely mislead the entire product into something you didn’t expect. My tip would be do the Design first and then code.
…what are your thoughts on this? have you had similar experiences?
I find this very interesting. I think that people should also be very good designers while making good product.
Hey Anon. Thanks a lot for the reply, I’m glad you like the article. I totally agree with you there. I mean if programmers where good designers then one-man bands would definitely be much more successful!
What we’ve found successful in at least two projects at uni is to first make a rough prototype of the user-interface, but it should be detailed enough to know which interfaces etc has to be accounted for. After one or two weeks programming (depending on complexity etc etc) we revise the UI and ensure that we’re providing the functionality necessary. Gradually we’ve begun linking UI and back-end components and it has all worked out real well!
The interesting parts of this is also to see how the user interface develops over time. There’s nothing more fun than contemplating early design decisions and thinking: “uh, who came up with that?”
Ultimately, whilst design should be with you from the start, it is however also important to leave detailed design decisions until you really need. Premature optimisation and the like is not really what we want is it?
/Marcus
Hi Marcus. Thank you for the feedback. I agree with your statements, I know what you mean cause when I was designing bizteen we had this design that later on evolved after brainstorming with the ideas. One important notice is that: The design MUST be a design that’s easy to change in the near future(if you add new features etc).
I don’t fully agree with you. Sure, having an idea how the user interface should look like very early is very important. However, requirements changes will happen anyway. My tip – make iterations, create a flexible architecture (software and design wise) and do constant refactoring.
You’re 100% correct Emil. In all the startups I’ve been a part of (many of them funded with $millions), every successful web application building process started with a design. In fact, the best client (now that I’m running my own dev house) I’ve ever had came to me with a prototype, which is usually better than letting them design it all out. Prototypes are key because you don’t have to spend the time to put everything pixel perfect. You worry about functionality and placement first, then you design the prettiness around it and finally start coding. Once that’s all done, review and revise quickly in iterations. No more long processes.
FWIW, the client who brought the functional prototype to the table, did that using a site called ProtoShare. If every client brought me one of those, there would be so much less confusion and communication issues.
Wow, well I first gotta give you a big congrats on the success. I see what you’re saying. Yeah, when you look at it, the clients/customers/users end up looking at the design, not the code! So I definitely support you on the philosophy you follow!!
I’ve heard of ProtoShare. Really awesome stuff!
I’ve had similar experiences designing websites for myself. If I do a quick drawing of the site, and mock it up in HTML and CSS first, I find that I can actually finish the project. On the other hand, if I jump right into coding, I’ll usually not finish the site, unless it’s really simple.
Cool. If you feel like sharing the project, please do. I’d be glad to take a look at them!
Experienced developers have been saying this for decades now. They’ve written books, blogged, given lectures, held classes, and shouted it from the mountaintops fer cryin’ out loud.
I remember a cartoon from 20 years ago where the project lead said to his group, “You guys start coding, I’ll go find out what the product is supposed to be.” The scary thing is, it’s not much of an exaggeration. It makes you laugh because the only other response is to cry. Or run around killing people or something.
There have been fights between fanatics of various coding standards, design standards, documentation standards, you name it. But which standard is “best” isn’t important. What’s important is having standards, doing the design, planning the product, building in quality from the start. Don’t like iterative design? Fine, use the waterfall method, but give me a freakin’ spec!
I’m constantly amazed and aghast at the fact that this still has to be said. I’m not criticizing you, if anything I thank you for saying once again what should be obvious but apparently isn’t. Every voice added to the choir helps. What I’m appalled at is the fact that it still NEEDS to be said, that it’s still being discovered by people who should have been taught it as a basic principle.
Me, I work as a firmware engineer for a flight simulator company, so we start with existing real-life examples. My boss has a habit of pointing to a piece of equipment and saying “Make it work like that. Nothing could be simpler, there’s one that works, make it work that way.” So far I’ve been totally unable to convince him that documentation is necessary. But he’s pretty stuck in his ways.
(The reason I stick with the job is that a) it’s a paycheck, which counts for a lot in this economy and b) Actually, overall I enjoy the job enough that I put in extra (unpaid) hours because I want to. And who knows? Maybe someday he’ll learn. He’s not stupid. Just a bit conservative.)
My question is, would the design have gone so smooth without the first iteration?
First design buisness logic! It’s very important and you can read about that in many book about software development. User/Client wants to see pretty User Interface but, I think, it’s not the hardest and the most important part of your web app.
Yeah..HTML Mock is best way to conclude Client Requirement …
Keep up the good work Emil. I think you are doing an excellent job.
Thank you.
i totally agree with your point. design is thing that the user i gonnna see at the end. and coding depends on the type of design u need therefore it is best to design first
Exactly!