Mockups vs. Reality
Today, I want to debunk some of the misconceptions about mockups when it comes to creating your new custom Shopify store. The truth is, mockups are a great tool for rallying everybody behind a design concept, but they’re seldom an accurate portrayal of the finished product. You might be wondering why that is and why the finished product can’t look exactly like your mockup. Fair enough! You and your design team have put a lot of work into fine-tuning the spacing and functions; unfortunately, the web and all of its quirks have a lot more moving, ever-changing parts.
Let’s use an example. If you hire an architect and a contractor to build you a new house, these two agents work together but have very different jobs. The architect (designer) has a technical background but is less focused on the individual nuts and bolts that go into your house’s construction. When it’s time for the contractor (developer - that’s us!) to come in, they might have to substitute certain parts and materials to compensate for availability, budget, and unexpected construction hiccups.
When it comes to your website, a few fundamental hiccups can lead to the gap between your mockup and launched site. As Shopify experts, we’ve seen our fair share of these and wanted to share them with you today — it’s all part of how we can become the best partners for your business.
Design and Application
Most of the time, mockups are designed and then handed off to the developer. This system has its faults. In the realm of digital design, there’s a fixed boundary, i.e., the edge of a page. But on the web, there’s no edge. It’s more like a lake than a page — which, as I’m sure you can imagine, are not so comparable. Everything on a site is constantly changing to accommodate different dimensions, screen sizes, and browser settings. When a designer creates a mockup without developer input, there’s no opportunity to flag unrealistic design features ahead of time. This can create space for disappointment, which we want to avoid!
Screen Size
We’ve all seen slightly different versions of a website, depending on where we’re accessing it. “Where’s that button I saw on the desktop site? Why can’t I find it on mobile?” A mobile site is vertical, while a desktop site is horizontal. Tablets fall somewhere in between. A user can adjust a browser screen to whatever size suits them best, and all the moving parts of the website have to adjust accordingly. This is why we design sites to be responsive. In some cases, you might even have two completely different sites for mobile and desktop! When images and text get resized to accommodate different screen sizes, this can alter your site’s spacing. Throw in an image with text overlay, and you’ll need another level of responsiveness! Initial mockups typically don’t consider how much a single site can change within a given session, which leads to discrepancies between the design and the site itself.
Browsers
While most of us only use one or two browsers, there are tons out there, and each has its own bugs and plug-ins. When building your site, we take these into consideration, and navigating them all can take some fancy footwork. Our priority is giving your users the best experience on your site that’s possible. So, if we have to alter the spacing slightly to make sure your checkout button is accessible across all browsers, that’s a sacrifice we’re willing to make!
What Does it All Mean?
We really care about your projects and value every bit of work that goes into them. We’re committed to building well-engineered systems that let your business grow, scale, and stand the test of time. Sometimes, that means something a little different than what you had initially dreamed up. The mockup is a great starting point, but the journey to launching your site is not a straight line. Every site is unique, and we’re committed to working together to make all its parts sing. As your web developers, we take on the complex balancing act of site-building to deliver you the best possible Shopify store, which takes a little flexibility from everybody involved.
I’ll leave you with another example: You’re building a shelf. You measure your piece of wood perfectly, drill the holes where your screws will go, and then paint the shelf and its joints. Once the paint has dried, your joints no longer fit — the minor addition of the paint makes it too tight, and you have to adjust. Adjustments happen! We’ll get through them together.