At a time when even small businesses have apps, it’s become increasingly important to focus on the issue of correspondence between website and app design. Though we all understand that an app is meant to simplify and narrow the functions of the website, primarily focusing on tools over content, many brands are unsure how similar your app and website should be and how much divergence is allowed.
Ultimately, there are a few factors such as color scheme, branding, and broad organization that should be the same between your app and website. Beyond that, much of the process is up to you – and in many cases, it’s a matter of the service you aim to provide. By analyzing your priorities before setting out on a redesign process, you can determine what factors are most important to keep consistent across platforms. The components you choose should correspond with the essence of your brand.
Branding And Color
Some of the things that make a brand most recognizable are factors like logo, color, and font. These features are so recognizable that even small children can recognize familiar brands, even before they can read. Because they’re highly recognizable, then, these are factors users expect to remain consistent across platforms.
Make sure you’re using consistent Hex colors in all your designs. If you’re uncertain what Hex code corresponds with your website, you can peek at your code or consult your web designer for help, as they’ll know where to look. The same goes for font – and of course you should never use dramatically different logos between desktop and mobile platforms.
A great website should have intuitive navigation that allows users to easily find what they need. It can take a few steps to reach the most sensible organization of information on your website, but once you’ve determined what this organization is, hold on to it. You’ll want to draw on it when you design your app.
While you may think of app navigation as deeply different from website navigation – after all, users probably aren’t greeted by the same elaborate landing page and drop down menus – the navigation process should be essentially similar. For example, your drop down menus may turn into new mini-pages, but the same sub-categories will still be there. Even if you condense a few categories, the general themes and relationships should hold.
Why does consistent navigation matter? If you run an ecommerce service, changing site navigation may lead to shopping cart abandonment if your site is hard to navigate. Design professional Peyton Lindley reports on using an app that stymied all attempts at paying a bill he easily could have paid online. This problem indicates a failure to translate across platforms.
In some cases, failure to translate across platforms and produce an intuitive design structure has more dramatic results. For instance, many medical practices and hospitals now provide patient portals with corresponding apps. A great app that provides easy to find risk assessment tools, medicine management directions, and emergency plans can prevent re-hospitalization. But when patients struggle to access these resources through your app, they may be forced to return for further care. Navigation matters.
Other Visual Factors
While you may use a lot of pictures on your website – often ones that unify any hard copy promotional materials – the use of visuals in app design tends to be more limited. In order to coordinate your app and website, then, you’ll have to make some visual sacrifices. Maybe you want to overlay your logo on a single image while the app loads or maybe you aren’t going to include any images. This factor is totally up to you.
Your app and your website should always reflect consistent branding, but that doesn’t mean they should be identical. The key to bridging these two factors is targeting color scheme, branding, and navigation. But you’re still building something new – take advantage of the innovative tools that apps provide.
Consistent branding is a broad concept and should provide at least as much freedom as it does restriction.