How to start designing a website?

Interface, Place

I was working on my wife’s website for the last couple weekends. She is a wedding photographer and was shooting many weddings with a friend of ours – she came to me and said it is time for her to have a website.

Alright. It was an enough reason to start working – at the end, the boss said so : ) but I was thinking what’s next, how to start. This is what I come up with:

Identify goals: we brainstormed couple hours about why she needs a website. At the end, it was much more than just satisfy the visitors with beautiful photographs. Obvious one was that she wanted to present her work so the visitors can contact her if they want to hire her. In addition, she wanted a website that her existing clients can share their favorite photographs and interact with the site by adding their comments. Like that wasn’t enough she also wanted to be able to share the website with other professional artists to promote or collaborate with them.

Research websites, many of them: We reviewed many websites who are photographers, particularly wedding photographers, and then the fine artists. Looked at the design, the copy and the elements (like slideshow plugins etc)  that they used.

Identify the design elements required: As an architect that’s one of the most important part of the planning phase. There are many tools and technologies out there to do certain interactions on the web, choosing the right one may make your life and (the users life) much easier in the long run. For her I needed to have slideshows, video, contact form, social sharing , connect tools and a blog to begin with. For all elements there are many solutions or tools to choose from, so the tool becomes very important, however I was still far from starting the first sketch for the website.

Design mental models: In this case, it was not a very long process with all the investigation, research and interview process, but rather quick and dirty mental model design to clarify all the elements that each persona will need (in the short and long run). We come up with about 7 different persona who will come to the website and identified the actions each will take or hope to take. This model helped me to plan the design process better and also helped me identify the priorities.

Sketch. For the mock ups, I either use the pen and paper and then the power point to flesh out the design alternatives. Once my client (my wife here) is happy with the mock up, it is time to start directly coding without spending any more time on photoshop or any other design software so I can get feedback quicker and I can adopt the page immediately by making the changes real time on the page.

I will post each section more in detail in the follow up series…

Comments on this entry are closed.