Web-designing upside down

In a regular web-design process a design is created with some sort of graphics tool. After that is finished a web-developer or web front-end developer will take those designs and implement them into a HTML, CSS and Javascript interpretation of that design. This process has been working for years and have been generating great results. But, like in any design process ideas can get lost in translation. Design decision can not always be made in time to look into the limits of the technology.

So, for the past few months I have been working backwards! How is that working out? Actually really well!

About 4 months ago I started designing and creating websites in a different way. Instead if doing graphics design first I started with putting the data in HTML and gradually shaping the data into a design as I go along. I merged the separate processes of design and implementation into one. This would resolve some of the issues you can have with a separate design and implementation process. It could also do the opposite!

Work method

I have actually been changing my method as I was going along. I started out coding a design into HTML and CSS with mock-up data. I found that the mock-up data was fine for stating up but as the design matured better content was needed. So in the middle of my route I worked on getting better data into my design. With this new data I could better see problems in the design as content and design always almost interact with one another in web-design. With the new data I switched a lot between design tweaks and deeper implementation. I also added the interactions that came into the mix and kept on combining them as I was going along.

Combining the philosophy of agile development and a wide array of skills has been proven to be a good combination. That is what I have been trying to do achieve.

Continually switching between graphics, coding and interaction is a whole different ball game then just designing or coding. It requires a better understanding of how web programming work and it requires an insight into both graphics and interaction design. I am not claiming that I am a great designer, or a great programmer. I feel that the magic is in the balance of design and technology working seamlessly together with one understanding of the concept of a web-page.


There are a distinct set of advantages to creating a website in this hybrid process.

  • Time “saving”
  • Integration
  • Environment limits

Time “saving”

It might sound strange… but there is actually time to save. Working as waterfall between design and implementation time is lost on making new iterations of the design that need to get implemented. While in my method design and implementation are done in the same process. This allows for the design to be created during development making iterations and changes almost instant!

I am not claiming that it will always save time in any situation but by bridging the gap of design and implementation it is made easier to make changes with the use of agile methods


By integrating the design and coding aspect of the process you will enhance the way the designers and programmers talk to one another. They may not always have the same skills or specialty but they share knowledge that they can communicate about. Another advantage of this kind of interaction between field is that a better understanding is created between the layers. This can induce productivity and improve the way communication is going. Another advantage is that different mindsets will meet in the middle and share different viewpoint. This can dramatically enhance the end result!

Environment limits

The design will get better suited for the web as the design is created within the constraints of the environment. Things like browser size, page folds and other browser specific needs are easier to deal with when you are actually building your design in a browser. Another advantage is not in the graphics but in the interaction. By creating a design in the browser the interaction with the page can be tested continuously by the designer

Disadvantage and pitfalls

No advantage comes without a disadvantage or pitfall.

  • “Endless” iterations
  • Personnel quality
  • Limiting creativity

“Endless” iterations

If the borders between design and implementation fade you will need to be on the lookout to not over design or over implement your pages. As the design time never really stops it is harder to let it go. It is also not a good idea to over design as that will almost always create a cluttered design. Keep an eye on how far you can go in the tweaking of design and code. After a certain point it is no longer productive to keep on going. The trick is to stop before that happens.

Personnel quality

The job requires personnel to work on your project that can and want to do more then a simple job description. For a project to work you need to have skilled individuals that can switch languages, concepts and fields rapidly. For them to be able to do that they need to be driven, have a solid set of basic development/design skills and want to work in a ever changing environment.

Limiting creativity

Because you are limiting the design options by enforcing the limits on an environment you are shutting down new creativity. It is better to design without limits and allow freedom then to allow for total free creativity. Well, that is what some people might say… Others claim that limiting environments can induce creativity. I tend to keep it somewhere in the middle but in any case it requires a specific approach to creativity.

My experience

In my personal experience over the past few months this is a technique that works well in an agile development process. Working together with driven people  and skilled professionals helps. It does not always have to start out with highly skilled professionals. A lot can be learned on-site and with proper and open communication between the members of the team. On the different projects where I used this method I have been alone and with a group. In a group the communication helps to get a better result by adding different views to the calculation for the best end result, keeping everyone on track is difficult though. When working alone a vision can be kept simple and clean but it is very hard to keep it relative without feedback from others.

With this article I hope to share with you this idea of designing in code. I hope to trigger you into just trying it out and seeing if it is something for you.

One of the first projects I used this method on was my personal portfolio. I worked from what I wanted to show and created a design around it. I found inspiration in how I needed to manipulate the data so that I could make it properly accessible. Going from data to design, back to data and then back to interaction. Switching around gave me liberty and inspiration. All together a good experience!

, , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: