Table of Contents
Times when designers were condemned to working in graphic editors are long gone. In today’s world, you have the ability and options to build your designs much faster and easier by using technologies like HTML and CSS along with rapid prototyping. You can know this approach of design as designing in the browser and this post will give you all you need to reclaim your freedom from graphic editor and get started with HTML and rapid prototyping.
What is HTML rapid prototyping
In a short, rapid prototyping (not just in HTML) is the process of quickly mocking up the future state of a system and validating it with users (getting feedback). This process include three steps. First step is to create the prototype as an answer to user’s problem or need. Second step is reviewing the prototype by sharing it with users and evaluating their reactions. Third and last step is refining. This means analyzing the feedback and identifying all the areas that need to be fixed or changed.
This three-step process is done in multiple rapid iterations until the maker is satisfied and ready to release the prototype as final version. Imagine it as learning to ride a bike. Rapid prototyping is that phase when you either use the training wheels or / and the usage of patch for injuries is at the peak. You get on the bike, fall, find and fix the flaws and iterate (do it again). Even though it might look confusing, it helps you save time. Also, by creating a prototype (HTML in this case) and showing it to user you will know whether it is viable.
When starting with rapid prototyping, you should start small, focusing only on a few key areas. However, good rule of thumb before moving to HTML and CSS is to create a plan. First, remember the 20/80 rule. Keep the HTML prototype lean by focusing on the 20 percent of the functionality that will be used most of the time. Second, it’s a good idea to include user personas for more realistic simulation. Third, plan your iterations. Split the prototype into smaller parts and divide them into individual iterations.
You should also prioritize these iterations depending on which part of a prototype does they include. In case some of the iterations are too big, split them even more into subsequent iterations, for example individual sections of a website. The speed of individual iterations can vary according to their size and amount of work that needs to be done. Some of them will cycle in a days, while other in terms of hours. Also, you should think about what tools will you use in your project at this stage.
After creating the plan, you should create basic mockup and wireframes. It is much better to put your idea on the paper first and see it in the whole picture. Doing this, you can spot something you might miss before, change the whole idea or even trash it because it does not solve anything. You might as well find another user’s pain that was overlooked before. Remember, you must know what challenge, problem or need will your prototype tackle.
Tools for HTML rapid prototyping
You have your sketches and wireframes prepared, so what is next? When you have all this done, you are ready to jump into HTML, CSS and JavaScript. Now you have to decide whether you want to use some ready-to-use prototyping HTML framework like Bootstrap, Foundation, Skeleton, HTML5 boilerplate, Kube, Pure, Toast, etc. All these frameworks will offer different advantages and also have different requirements, like learning the syntax, and size.
Some of the HTML frameworks mentioned like Skeleton (my preferred), Pure and Toast are minimalistic and contain only CSS for resetting the formatting and responsive grid system. Other like Bootstrap, Foundation, HTML5 boilerplate and Kube are more robust and come with their own design language and often also some JavaScript.
On the other hand, you can ditch them all and start on the blank canvas, building your own framework. If you don’t like this idea neither, there is also a third option that I chose as well. Let’s call this option “The Frankenstein’s way”. This means downloading one or more HTML frameworks, breaking them apart and extracting only what you want and need. For example, taking only some pieces of code from normalize stylesheet, only grid system from Skeleton and so on. This way, you can create your own ideal lightweight framework.
Benefits of HTML rapid prototyping
Agility
This process of HTML prototyping can be far more liberating than at first thought. Think about the time when client or you wanted to change the color of multiple elements in mockup. Back then, if you were working in Photoshop, you had to manually go through countless amount of layers and groups and change every occurrence of that color. I guess that almost any designer experienced moments like this somewhere in the past. Fortunately, This does not apply to prototyping and working with HTML, CSS and JavaScript.
“No more inefficient busywork.”
When you are working with code and want to change something, like the color, something as simple as altering one CSS class will do the work throughout the entire prototype all at once. No more inefficient busywork and hours spent by playing with layers in graphic editor. This example can be applied on anything. In a blink of an eye, you can change the fonts, font size, margins or completely reorganize the whole layout.
Precision & clarity
When designer is working with HTML and CSS instead of graphic editor, he is able to communicate easier with developers working on the project. Unlike with editors, when designing in the browser, the important design details that needs to be understood by developers are less likely to get lost or misunderstood. When you design in an editor, different people can interpret the same elements in a different ways.
“Creating the design in code gives the designer space to use his creativity.”
On the other hand, a properties and values hard coded in prototype are simple and clear. They cannot be misinterpreted or forgotten along the way. Designers are often hold back by the fear, uncertainty or just reluctance to explain various design details to developers and other people on the team or clients. Creating the design in HTML and CSS gives the designer space to use his creativity, explore wildest ideas and indulge in the smallest details while giving her the confidence to do it.
Accuracy
Do you consider yourself a perfectionist? Do you like the design to be pixel-perfect? I don’t know how about you, but I do. If you are on the same boat, I have some good news for you. HTML prototypes allows you to enjoy this obsessive side of your personality as much as you want. With code, you can create more accurate designs and product than ever before. HTML and designing in the browser will give you complete control over all the critical design details such as typography, margins, padding, etc.
“Designing in the browser will give you complete control.”
Another point for building prototypes in HTML and CSS … When you specify values in code, reduces the possibility for a human error because every value will be rendered as you wanted. There is no space left for misinterpretation or unit conversion. What’s more designing in the browser gives you immediate feedback when the code rendered by browser. How can be something more accurate than that?
Honesty
The last benefit to mention is absolute honesty. Believe it or not, an HTML prototype can explain much better how the layout works on various resolution and devices as opposed to a mockup created in graphic editor. Anyone more experienced in web design will tell you that how website looks in editor is not how it will look like in the browser, not to mention more browsers and their versions. Editor will give you fairytale, browser the reality.” This real-ness of a HTML prototype is also advantage for your clients.
“Editor will give you fairytale, browser the reality.”
Do you remember the time when you have to create four or more versions of single design to show the client how it will look at different devices? It was funny theater (not for you) to switch between the snapshot imitating the responsiveness of the design. With HTML prototypes, this theater is no longer necessary. Open the design on your notebook, tablet, phone and watch and let the client play. What is better than when the client can interact with design in the browser by themselves and see the response immediately?
Final words
How can we end this post? What words can we use? Graphic editor is dead, long lived the Graphic editor? I think that this is too strong statement. Even though code and browser offers many benefits and faster workflow, not everyone is willing to learn HTML and CSS (and JavaScript). Some people will rather do business as usual and continue to create prototypes in graphic editors. That’s OK.
What is your preferred tool for rapid prototyping?
Frameworks
Pure framework link.
Skeleton framework link.
Toast framework link.
Bootstrap framework link.
Foundation framework link.
HTML5 boilerplate framework link.
Kube framework link.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
