HTML Wireframes

Mar 20, 2014


If you’ve been anywhere near the production of a website in the past decade you have probably heard the term wireframe thrown around. If you haven’t, wireframes are one of the first iterations of a webpage, and a great initial step in showing clients basic layout and content areas of said page. A prototype concept, if you will. This is done primarily in an attempt to help clients wrap their heads around basic user interface, order of content and layout. Most importantly, they are fast and cheap to produce when compared to a full design concept. Something like the following…


…wireframes are usually done by the project’s designer in Adobe Photoshop, InDesign, or any of the number of wireframing tools available today. Herein lies the issue. Anything that a designer creates with any of these tools is essentially a static document that is thrown away after it is presented to a client. Most clients now want fully responsive sites (even if they have no real understanding of what that means.) With static wireframes, there is ZERO ability to show any aspects of responsive design without creating completely separate wireframes for different device sizes, and now you are creating even more work for your designer.

Enter HTML5 and CSS wireframes. Clients are eager to ensure their site functions on all Web-enabled devices, but they often don’t understand how this translation works until later in the development process. This is often too late in the game, and can cause confusion, miscommunication and project delays.

HTML wireframes solve most of these issues, and with great responsive frameworks like Bootstrap and Foundation, and new rapid development tools like Yeoman, the ability to rapidly develop fully responsive wireframes is faster and easier than ever. Even better, this process easily translates into the first HTML page templates that can then be used in your project. There is ZERO throwaway, and zero inconsistency between wireframes and what is actually capable in HTML/CSS because you are already working on the Web.

Developers will also get involved earlier, allowing your coders and designers to hash out larger design/development concerns early in the project , and it gives your client something real and tangible to view on the Web to provide feedback against. I’d call this a win/win for clients and agencies alike. Here at Curiosity, we’re very excited to be able to bring this type of innovation to the table when meeting with clients, and we have seen very positive feedback so far. It makes sense that a static wireframe like this…


…has little impact on clients compared to showing them a fully responsive page with live, working, resizable elements like this. The proof is in the concept.