A Web Design Process That Makes Sense

18 Dec 2010 - 10:31am
5 years ago
6 replies
2316 reads

I've looked at a lot of process charts in my life and a lot of them seem very confusing, impractical and airy-fairy. I decided to map out the design process that I follow and that I believe in. It's simple, practical and easy to follow. It contains all the steps needed to successfully build a website. A journey would not be a journey without its twists and turns, so this design process is meant to guide you along your way, and of course, is not the only way to arrive at your destination. But for me, it's been the best way, so far at least.




19 Dec 2010 - 7:27am
Yohan Creemers


A process model is a representation of reality (one of the many possible representations). The more detail in a model, the more it resembles reality, with the risk of becoming less powerful as a model. it's a wobbly balance, and subject to personal taste. With this in mind I still would argue that the process in your blog post is over simplified.

Content, functionality, communication and technique influence each other. In a good design these parts are balanced. Iteration is a way to reach this balance.

In many webdesign projects the content is not available up front. Content is a dynamic part of the product. Look at discussion lists, blogs, photo sharing sites, web shops and so on. Most content is created after and according to the design and even after development.

I would argue that you need to go through two phases before making any final design decisions. First a strategy phase to define product goal, audience and user goals. Then a scope phase to define requirements and formulate design principles.

Your model uses the term information architecture for activities I would rather split up in two levels. A global level to design the overall abstract structure with the relationships between the large chunks (application architecture, sitemap, and so on). Then a lower, concrete level with navigation design, screen lay-out, user interface design.

In every step more detail is added, often revealing gaps in the previous steps.The process should facilitate this advancing insight with iteration cycles. The purpose of the visual design is to communicate the product's purpose and functionality to the audience, but it also clarifies whether the design succeeds in meeting the product and user goals.

I rather see the phases in the design process as defining different levels of detail, than as a sequence of activities or subdisciplines.

- Yohan

P.s. The model I'm advocating is developed by Jesse James Garrett, see http://www.jjg.net/elements/pdf/elements.pdf for the complete picture.

19 Dec 2010 - 8:57am
Matt Nish-Lapidus

I mostly agree with Yohan. The model in the original post doesn't really offer a process, is very specific to web design, and is very linear.  Yohan's point about missing strategy is crucial, and I would add that it is also missing any type of research/understanding phase. Either your own primary research, or secondary research in well established areas, is important form informing your design throughout the remainder of the project.

Iteration is key to all design, and a design process model will most likely be cyclical, even if each cycle leads into another separate cycle in a linear way. It's also important to consider that each project, even if they are all websites, coule need different methods and tools to be successful. 

At the company where I work we currently use a very high level three phase model to think about our work (this also changes at times): Learn - Think - Make. Within each phase there are many iterations and activities that feed into each other. 

Each of those three phases is composed of a myriad of methods and activities that are chosen based on the needs of the project. "Learn" often includes primary and secondary research; "Think" includes creating a strategy based on research, as well as some tactical design work; "Make" is comprised of activities around actually making things based on the understanding, strategy, and tactics that come out of the first two phases. The end result could be a website, application,service, process, physical objects, or any number of other things.



22 Dec 2010 - 4:03pm

Hello!  I've been lurking the forums for a while and I feel like I'd like to chime in to this topic.  Process has been on my mind for a while now, and this discussion gave me the impetus to create an infographic for how I approach web design.  The intended audience is potential clients.  I'd appreciate any feedback you all might have.


24 Dec 2010 - 7:06am
Gerard van Os


I like the graph as it also easily translates to more physical
products as well (more my line of work ).

What I do miss however is the explicit mentioning of users. It
does say market research and (internal) needs analysis, but in
my experience (at least with physical products and to large
extend with software-type products) ther is a large difference
between the paying customers and the actual users. Market
research seldom includes the latter, but usable products are
especially intended for them.

My two cents.

Gerard van Os
Saxion (school of higher education)
The Netherlands

24 Dec 2010 - 5:04am
Yohan Creemers

Hi Shenoa,

Really nice diagram!

What do you mean by 'interactivity' in the Development phase? I would expect that term under Design - as a distinctive layer defining the way people interact with the system. But maybe you mention Prototype as a way to show the interaction design to the client.

How fits visual design in your diagram? Do you reckon it as part of the Page Layout or as part of the Prototype?  

- Yohan

24 Dec 2010 - 1:05pm

In answer to both Yohan and Gerard, I'd like to place my diagram into context.  The purpose of this diagram is really to demystify my process to my clients and potential clients.  This graphic will be on a web site in which I describe my services.  I'm hoping that it conveys enough of my process to stand on it's own, but I do plan to add a little explanation below.  I also plan to use it during my initial consultation as a reference point.

Gerard, I do heavily take the user's needs into account during my process, and the "Web Site Goals" usually are written to both serve the company and fulfill customer needs.  I'd welcome any recommendations to be more specific; I've been struggling to find the specific language that is clear to clients with varying levels of business background.  I sent the model mentioned above to a few people outside the industry and received comments that made me think even that voice is too innaccessible.  I made another revision, as seen here:


Yohan, the term interactivity is used to indicate that this is where the pages come together in a workable, clickable system.  I've been experimenting with fully working wireframe models earlier in the process, but I'm not yet ready to push that out into my initial discussions with the client.  As this is only a process model, I want to be a little generic so I have some flexibility to make changes as I see fit along the way.  Prototype is the word I'm hoping conveys the design of the site functions. Visual design (I hope) is an implicit part of the category of DESIGN.  But again, as I mentioned above to Gerard, the language I used isn't necessarily viewed as accesible to those outside our profession.  So, I hope the new link above still conveys enough of my process to be informative, but is a little more easy to understand for clients without a lot of business background. 

Getting back to the context of this graphic, the main thing that I'd like to convey is the importance of strategic planning in the web design process.  I find that clients have a really easy time finding "3 Sites You Don't Like" and really hard time finding "3 Sites You Like," as I ask on my questionnaire.  I want to explain that many sites that fail, do so because they've neglected the top half of the process in my graphic.  They just Design, Build, and Launch and only if they're just plain lucky do they have a nicely functioning site that serves business and customer goals.

Don't get me wrong, I'm guilty of cutting corners sometimes when time or budget constraints start to encroach. That's why I also intend to use this is an ideal for sticking to a stated standard.


Syndicate content Get the feed