At Orbit, we are always actively keeping our eyes open and ears to the ground when it comes to current trends in both web and print design.  One trend that seems to be evolving is the idea of designing websites in the browser in lieu of first creating hi-fidelity website mockups composed with traditional design tools such as Photoshop and Illustrator. While we think there are benefits to both methodologies we still feel traditional hi-fidelity mockups are an important step in the web design process when done correctly…

So what is a hi-fidelity mockup?

At Orbit Design, a hi-fidelity mockup is usually the first visual glimpse the client gets of their new website design based on the structure laid out in the wireframe.  For better or for worse, it’s really what most clients are patiently waiting for after all the project scope and discovery meetings are completed … they want to know what their new website actually looks like and see all of the brainstorming meetings come to fruition!  Cue the hi-fidelity mockups. Font choices, brand color usage, iconography, hover states, and image treatments are all part of the initial mockups. Additional mockups are also provided to represent how the site will appear on smaller screens such as phones.  But here’s the caveat – we like to present “non-perfect” mockups, meaning our designers have a solid understanding of the strengths and limitations of HTML and CSS and consider that when making design decisions within the mockups.

What are some of the benefits of hi-fidelity mockups?

Taking the client feedback and implementing changes is one of the main reasons we still prefer traditional design mockups. Often times you don’t know if a suggested change will work without actually making the change.  Pushing some pixels (or vectors) around in a design program is still more time efficient than changing lines and lines of HTML and CSS code, just to find out the suggestion isn’t really working visually and needs to be reworked once again.

So, when would designing in the browser be a good idea? 

The main benefit of presenting the design to a client in the actual browser is that you are allowing them to fully see the design that will ultimately portray their brand to the world – on screen, in a browser.  There are always little nuances that a design mockup never truly represents – like how type is rendered and breaks a word or how the page changes when responsively scaled to smaller screens, etc.

The landscape of web design is ever-changing and we are always refining our processes and methods for the optimal website design/redesign process.  But for now – we’ll still be creating mockups for you, the client when it’s time for your web refresh.