Rogier Bikker - Articles

1. Idea

Under the shower, while doing the dishes or walking the dog are places where you’re most likely get a brilliant idea. An idea is not more then 2 sentences: the problem and your solution. However, when building an application for a client you can skip this step because you might have a fixed briefing.

2. Research

Now that you’ve got yourself an idea, it’s time for research. Does your idea already exist? Who do you want to target? Is their a market for this idea? A good idea is to create a fictional user, persona, that can function as an example user throughout the following steps. By doing this you can continually ask yourself, will he or she like or understand this?

3. Brainstorm

You might think that brainstorming should be the first step, but without basic knowledge about your target group and market a brainstorm session isn’t that useful. The best place to brainstorm, whether that’s alone or in a team, is not in your daily environment. So get big sheets of paper and some makers and go to an inspiring place.

4. Concept

Define what’s your concept. What’s the scope and who are you targeting? If you’re going commercial this is also the time to make a business plan or model. Write everything down and make sure everyone in your team knows the concept by heart.

5. Information architecture and wireframes

Now that you’ve got a list of features, functions and sections, it’s time to organize them. How is all your content divided? What are your main sections, sub sections and so on? And also think about how to name items in a way that your users will understand them. Although designing wireframes is not the job of an information architect, but rather from an interaction or usability expert, I do want to name it under the same step because it’s closely related. With wireframes I mean black and white mockups of every page of your website that will show how elements are positioned. This can be done in a program like Visio or simply on paper.

6. Design and Interaction guide

The design guide is a sheet of paper, or even a whole book, that shows how elements should look throughout the site. With elements I mean typographic elements such as titles and body text, interface elements such as menus, but also form, border, photo and color usage. So actually you design your whole site at this point, without putting it together in a page yet. The interaction guide is somewhat the same as the design guide, but this guide doesn’t focus on the visual appeal, but rather on how user interactions should behave. For example with forms, will there be inline validation or not? According to Robert Hoekman Jr. every interactive element should first be written down as it’s a scenario, before it’s build.

7. Designing

Before you start with this step: now is the perfect time to get a page online where curious geeks can sign up for beta testing when the site is done!
Now that you’ve already got wireframes of every page and a design guide it’s very easy to start the actual designing. Perhaps you can even start directly in XHTML/CSS and skip Photoshop because you can simply look at your wireframes and design guide.

8. Programming

Get your interaction guide and start with making an UML. Or if you’re like me and don’t like UML’s just get your hands dirty and start coding. Also programming is much easier now because you can look how everything should be done in your interaction guide. And don’t forget to add AJAX if you want to impress your friends ;-)

9. Invite beta testers

It’s time to invite the curious ones that filled in their email address on your site. Try to get the most of them by making it easy to give suggestions and report bugs. Now give yourself some time to improve the details. But don’t make major changes or add big features, you can do that while the your site is up and running. Just make sure it’s completely bug free.

10. Launch

The big day. Give yourself a kick start by submitting your site to digg, reddit and wikio and let the fun begin…or did the fun just ended and are you’re already planning your next web application?