Do you find yourself designing the same screen over and over? HTML prototyping may help!
Recently I’ve been spending less time in tools such as Sketch and InVision, and more time on going from sketches on paper or whiteboard, and then directly to HTML and CSS. In this article I will share with you how I do HTML prototyping, and why you should care.
Personally I recommend HTML prototyping, because I think the benefits outshine the drawbacks. If you find your current UX process works well, don’t change your process! This is merely another way of thinking about the UX process, which may or may not work for you and your team.
Please note that this article assumes that you design some kind of product for the web. It may be far more difficult to prototype directly in code for other programming languages and platforms.
Some benefits of HTML prototyping
By prototyping in HTML and CSS:
- You reduce the need for specific UX deliverables (e.g. detailed wireframes or mockups with tons of annotations and/or states to keep track of).
- You can create templates for the most common screens (e.g. a login, or a dashboard), thus saving a lot of time for you, and a lot of money for the company you work for.
- You will find it easier to test responsive design behavior (e.g. what happens at various resolutions, what happens if a certain column or element overflows, what happens if we get more than X items in this table, and so on).
- You will be in high demand, since it’s rare with designers who can both design and code.
- Your clients/stakeholders will see a much more accurate version of what they will get by end of the project.
- You will find improvements (e.g. usability issues, responsive design issues) earlier in the process.
- Front-end developers will love you as you have done a lot of the groundwork for them, which gives them more time to focus on other things (e.g. complex JavaScript logic) :)
- The handover (from design to implementation) becomes much clearer, because you are actually handing over code!
A few things to consider when doing HTML prototyping
In the beginning of this process:
- You may need to create basic UI components and patterns. Having a CSS framework at this stage (e.g. Bootstrap, Foundation or Bulma) can save a lot of time.
- You may be less efficient at prototyping in the beginning (as you are learning HTML and CSS at the same time), but over time this new process will be faster than going through tons and tons of mockups. It’s important to be patient in the beginning, and to not give up.
- Depending on the company you work for (or you are applying to work for), you may confuse the recruiter by mentioning that you code instead of design. Please ensure that you do not oversell your coding skills, and instead focus more on your design skills and the process leading up to your design decisions.
Some tools for HTML prototyping
I recommend to go with basic HTML prototyping tools in the beginning, and then expand over time (when you feel you actually need more advanced HTML prototyping tools). It’s more important to just get started, than to try to find the perfect set of tools.
Personally, I use:
- Codepen for basic HTML & CSS prototyping (e.g. prototyping one screen, for instance just prototyping page1.html).
- Sublime Text for advanced HTML & CSS prototyping (e.g. prototyping multiple screens linked in a flow, for instance when you prototype a flow going from page1.html to page2.html).
- Chrome as my web browser.If you are interested in some useful Chrome plugins for web designers, please see my article called 10 best chrome extensions for web designers. If you are going to use Chrome, I also do recommend to inspect web pages (on Windows: right click and choose Inspect element). This way you get to see the HTML and CSS code “behind the scenes”, and you can change the code directly in your browser to see what happens. This is nice when for instance doing small changes to an existing implementation and you just want to change something small, e.g. a label, a color, or the placement of a UI element. Perform the changes, grab a screenshot, and you’re done!
If you want a more advanced development environment, here are a few alternatives:
- Visual Studio Code (available for Windows, Mac and Linux, free to use / Open Source)
- Code Kit (available for Mac OS X only, costs 34 $ per license)
- Brackets (available for Windows, Mac and Linux, free to use / Open Source)
HTML prototyping — it’s time to code
We are now ready to start coding! I recommend to start by going through some of the courses at Codecademy, in particular:
There are also paid courses such as Livetyping, but personally I find it’s good enough to go through some of the free courses at Codecademy at this point.
As a next step, I recommend to learn by doing. Start recreating designs (go to Dribbble, search on UI design, find a design you like and start recreating). By doing this, you can then learn at the same time. If you get stuck I do recommend to use Google to try to find the answers yourself. StackOverflow is also a good option. It is very likely someone has already encountered (and solved) the same problem before. :)
Here’s an example of mine:
- Original concept / mockup, by Ghani Pradita
- CSS / HTML implementation based on the concept, by me
Don’t forget to test your design!
Once you have your HTML and CSS prototype, it is now easy to perform some “hallway usability testing” — grab someone nearby, have them sit down and test your prototype, and observe what works and what doesn’t. Since you now have your design in HTML and CSS, you can very easily make changes and improve the design, without updating lots of mockups over and over...
Where do we go from here?
If you want to learn more about HTML, CSS and JavaScript I do recommend the article series From Zero to Front-end Hero, those articles cover everything from basic HTML and CSS, up to advanced JavaScript:
Happy prototying, and thanks for reading!
