Web prototyping: tools and tips for awesome UI design
Prototyping can help you create jaw-dropping web and mobile designs. Here are our tips everything from parallax to material design prototyping!
The time we spend online is growing exponentially. From 2013-2015, digital media time grew by 50%, according to ComScore’s 2015 reporting. And 75% of that growth was down to mobile device use; apps alone now account for over half the time we spend online. And that’s not to mention the wearables market, set to hit $25 bn by 2019.
So why bother with web prototyping?
This might lead you to think that designing websites or desktop apps is a dumb idea. But hold on: there are currently over 1bn active websites worldwide, with over 70 million desktop devices sold in the US alone in 2015. Designing user interfaces for webpages or in-browser apps is very far from a moribund endeavor.
Web prototyping – building interactive prototypes of webpages and sites – is an integral part of ensuring digital product success. After all, it’s a lot cheaper and faster to iterate on a non-coded prototype than it is on a piece of coded, polished software. Web prototyping, whether for individual pages or whole sites, is a skill all of its own, presenting challenges and opportunities to any design-development team.
Let’s check out some of the top features and tricks for web prototyping, and the best tools to make sure you create awesome UIs.
Download Justinmind today and start material design prototyping now!
Web prototyping for individual webpages
When prototyping webpages, it’s likely you’ll want to include trending features (beware of following trends just for the hell of it, obviously). Luckily, the majority of prototyping tools are regularly updated to incorporate recent trends, including the big ones from 2016 below, which you’ll definitely want to consider when prototyping single webpages.
Parallax scrolling – in which the background moves more slowly than the foreground as you move down the page – is one of the biggest web trends right now. It can be too overwhelming for mobile devices, but creates depth when used in browsers. If you do want to try out a parallax scroll effect, it’s important to follow some basic precepts: use it sparingly, combine it with subtle animation and make it entertaining.
Prototyping tools such as Justinmind give you the chance to experiment with parallax effects in your web prototypes (read our 5 step guide to parallax scrolling in web prototypes here), enabling you to boost your page’s sense of narrative and visually emphasize calls to action. These 50 shining examples gathered together in Creative Bloq will provide ample inspiration.
Some of the most trafficked websites around are using card layouts, a design brought about by the paucity of space on mobile screens. But card layouts – a design pattern displaying information in movable chunks – is ideal for responsive webpages as well as mobile-specific apps. In card design, pages get split into constituent blocks and reshuffled according to screen size and orientation; a large amount of content can all be organized and displayed on an equal hierarchy, making cards a popular layout in container design.
Using a card layout, however, requires you to have a firm handle not just on your page hierarchy, but also on the type of content you’ll be including. It’s hard to predict how users will react to a card layout – build card layouts in your web prototypes using data lists or grids, and then run user tests on the prototype to ensure comprehensibility. It’s advisable to include realistic content and images in your high fidelity prototypes, because the non-hierarchical nature of card layouts means users rely heavily on content to guide them.
Material design prototyping
Google’s 2014 design language has had a huge impact on the look and feel of web and mobile experiences. Giving depth to flat designs though the use of highlights and shade, material design – like card layouts – is based on grids, with a little responsive animation thrown in.
How to create a material design prototype. Tools like Justinmind come kitted out with UI elements and libraries specially designing for material design, which can be combined with animation techniques to simplify navigation and enhance page narrative. You can find inspirational material design examples here, and some tips on adding rich animations here.
Web prototyping for entire websites
The main difference between prototyping a single webpage and prototyping a whole website is the navigation. Navigation flows and maps are different on a website to on a mobile device – whereas mobile navigation must be above all “discoverable, accessible and take little screen space“, when prototyping website navigation you’ve got a little more room to play with.
Full screen navigation menus
What about when your design is in itself the navigation nexus? Fullscreen navigation like we see in the example from Timelikes below is a great way to create modern-feeling UIs that bring something of the intimacy of mobile browsing to the web. Fullscreen menus jump out when users press a navicon, and the navigation menu takes over the whole screen; it’s basically the opposite of hidden navigation patterns, which can have a detrimental impact on UX. For fullscreen navigation to be intuitive, the navicon itself must be obvious, and exiting the fullscreen must also be easy. You don’t want users getting lost in a navigation wormhole. You can create check your full screen navigation patterns in a prototyping tool easily with dynamic panels.
For users to be able to navigate your web prototype without thinking, there has to be an underpinning logic to the information flow. Obvious, right? Yeh, but sometimes it’s hard to know exactly how to convey your logical information architecture without hanging out massive ‘click here’ signposts all over your wireframe. Luckily, navigation logic has, well, it’s own logic: group related objects in specific spatial formations that convey their relations (ie left-right grouping imply causality); use color connectivity to subtly group UI elements that have cognitively similar functions; and most importantly, don’t reinvent the wheel – established navigation patterns (eg having a ‘forward’ button on the right hand of the back button) have earned their longevity for a reason.
A good prototyping tool will come with specific UI kits or libraries, which will facilitate building user interfaces with tried and true navigation patterns. Justinmind, for example, has different web UI kits with pre-built screens and interactive UI elements.
Basically, when it comes to navigation logic, web prototyping is an opportunity to learn how to build for the fewest clicks, and to design intuitive mental models.
Breadcrumbs are another surefire way to make sure users can keep track of their location within the navigation flow of your web prototype and, most importantly, can get back where they came from in one click. Without breadcrumb navigation clues, many websites fall foul of the wormhole problem, leading to high abandonment rates – that’s why breadcrumbs are indispensible if you’re wireframing an e-commerce site, for example. Find out how to to incorporate breadcrumb navigation into your web prototyping here.
While they may look pretty, animated transitions aren’t just there for the hell of it. Crucially, animated transitions – those dynamic effects that follow an action – provide users with feedback about what is happening within your website. Instant feedback equals instant engagement, and engagement is good. Transitions are essential in menus, when hovering, when inputting information and more – basically, when the user moves between any element or screen, an animated transition of some sort is probably called for. UX designer Adrian Zumbrunnen gives a great overview of transitions in Smashing Magazine, and almost all the effects he mentions can be simulated in web prototyping.
Parallax and material design prototyping wrapped up
Web prototyping is a powerful way to validate your assumptions about navigation and user needs. Getting it right means that, when it comes down to coding, you’ll have fewer surprises waiting to jump out at you. Awesome web UIs are just a prototype away.
- The ultimate mockup tool to design websites and mobile appsOur powerful mockup tool lets you create and share highly interactive mockups, while getting feedback on every aspect. Your whole team can benefit from enhanced collaboration and seamless developer-designer handoff. And best of all? It's absolutely free to download.