Why You Should Be Creating HTML Prototypes

This is Hour 3 of 12 Hours of Kosmas, our small agency’s marathon of mini research spikes each lasting….an hour! As it’s the season of giving, we’ve decided to write-up about each with a step-by-step, simple project to show a proof of concept. Ho ho ho!

Unlike our previous posts, this one is going to focus more on an idea. I still created a project to prove my point, but exploring the concept behind it is more important than the code. Though if there’s interest, I’m happy to write another post explaining each line in the project.

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

The web, and by default web design, has gone through major changes and advancements over the last couple years, allowing designers and developers more and more freedom to conceptualize and create websites. As of 2015, 64% of American adults have a smartphone, which has sparked the need for responsive websites.

These advancements in web technologies completely redefined what a website needs to do, and what it can do. And, that means the way designers and developers use wireframes need to change with the times, too.

Wireframes are the blueprints, skeletons, and structures for website designs. They allow designers to create page layouts that show content hierarchy, UI functionality, and the overall usability of the website in a way that clients can visualize the final product.

Wireframes are essential to the design process because they act as the visual guide for designers to communicate their ideas with both co-workers and clients. When used properly, they manage expectations throughout the design process and save time by avoiding last minute changes during the final design and development stages.

Current Design Process

  1. Client meeting
    Initial meeting and project brief
  2. Research and sitemap
    Get inspired and find a direction
  3. Lo-fi wireframes
    Possible page layouts and functions
  4. Hi-fi wireframes
    Content hierarchy and placement
  5. Visual Design
    Images, color, typography and awesomeness
  6. Development
    Code that thang

The Problems

  1. High fidelity wireframes are not as effective when incorporating responsive designs and custom interactive elements.
  2. Development is last on the list.

Currently, the design process involves two different stages of wireframe creation: low fidelity and high fidelity wireframing.

Low fidelity wireframes, or rapid idea development, are different concept sketches or renderings used to outline the website structure showing only minimal detail.

Selected mockups are then used to create computer-generated versions that include the finer details for developers to work with. These are high fidelity wireframes. High fidelity wireframes define the visual hierarchy and interactive functions and provide the details for content placement on a website.

If you take a look around Awwwards — a website featuring some of the most modern and contemporary websites around — you’ll see that most of the featured sites use animation, scroll effects, transitions, and other code heavy functions. The standard design process does a poor job communicating these components, especially in terms of wireframes. If you’re a designer, for example, I’m sure you’ve been in this awkward, unfortunate situation:

Designer: This is your homepage, when you scroll we’ll have the header stick to the top of the page and other articles will fade in as you scroll.
Client: Huh?

Before: Panel hover

After: Panel hover

As previously mentioned, websites have become extremely dynamic and use many different interactive elements that create a unique experience for the viewer.

In response the problem above and the advancement in web technologies, tools like Omnigraffle, and InVision have done amazing work incorporating responsive design and UI effects into prototyping tools; but they still lack the real browser experience.

Axure, and Macaw are breaking ground creating tools that generate HTML files from a GUI. (For designers who are unable to code, these tools are extremely helpful for creating an in browser prototype.) The only issue is the code translation from the GUI is horrendous and would be near impossible to maintain or reuse in a production environment.

The Solution

The solution then is to replace static high fidelity designs with hand-coded prototypes. Doing this will create a better experience for clients and allow developers to be involved earlier in the design process. Using the hand-coded HTML prototype process allows better communication and collaboration between the client, designer, and developer resulting in a well designed, functional, and user friendly website.

New design process

  1. Client meeting
    Initial meeting and project brief
  2. Research and sitemap
    Get inspired and find a direction
  3. Lo-fi wireframes
    Possible page layouts and functions
  4. HTML prototype and visual design
    Site functionality and aesthetics
  5. Finalize development
    Touch ups here and there

Heavy use of JavaScript — and other library tools — requires a high level of collaboration and debugging from the development and design team. Coding the prototype is like a warm-up lap for the front-end developer. The code may be usable, but after multiple changes the code may be unorganized and unmanageable (but still better than Macaw and Muse).

Is It Really Worth It?

Bringing development to the focus of the design process gives the opportunity to efficiently implement the visual design and properly organize the code when starting final production.

The hand-coded prototype makes HTML wireframes the center of the design process because functionality and structure will be developed in the prototype. By giving developers more time throughout the process, the site will be coded more efficiently and reduce the time needed for testing at the end of development.

Unlike generated code, the hand-coded prototype can potentially be reused for production, which also saves a step in the development process. And, over time, elements from old projects can be used in a new prototype again, saving time and creating an extremely efficient workflow.

If you don’t code, this all may sound intimidating but there are some great tools around that should help relieve some of the stress of coding websites.

Using a custom or open-source framework and CSS pre-processing requires a fair knowledge of HTML/CSS but handles most of the technical details. Utilizing a CSS pre-processor is necessary in this process because of variables, extends, mix-ins and easier responsive coding. Tip: More information about Sass

Not all clients will be able to understand the faux-interactions presented in static wireframes. The hand-coded HTML prototype is a very straightforward and immersive solution to the problem that keeps clients, designers, and developers involved and informed during the website design.

So, as a designer/developer who uses wireframes every day, I say that HTML prototypes can and should be used by any and all web design teams. Whether the evolution to HTML prototypes takes place in an agency, for a freelancer, or in-house teams, design teams everywhere can improve their workflow and quality using an HTML prototype save time in the process, and work more efficiently altogether.

Click here to see one in action!