Our top 10 favorite wireframing and prototyping frameworks to help you create the ultimate web and mobile app designs this Summer.
Summer’s here and it’s sweltering! To keep your mind off the heat and on those web and mobile designs that need finishing we’ve scoured the web for the most creative and unique wireframe, clickable wireframe, mockup and prototype ideas. We’ve covered everything, from banking, beauty and healthcare apps to travel, leisure and weather app ideas. Check them out below!
Banking and eCommerce innovation
Innovations in online and mobile banking and eCommerce are paving the way for users to perform advanced operations, such as national and international transfers and receipt tracking on the go. Getting mobile apps and websites right the first time is essential, and we’re seeing tons of great wireframe templates and design models as a result. Below is our pick of the bunch. Built by Jacopo Spina and showcased on Behance, this wireframe is a great representation of a custom eCommerce mobile website. The use of blue and white provides the necessary contrast between visual elements. Jacopo has used real content, such as the bottom navigation list to give users a realistic view of how the end product might look. In his own words: “The wireframe has been designed as a default template for an e-commerce website, respecting the classic interface design, usability, call to actions, break lines but dividing the content for a perfect, smooth and crisp design on mobile and tablet devices.”
Upgrading Online Travel services
Siddhartha Pandey has created a clickable travel wireframe. His interactive ‘My Journey’ wireframe comes complete with all the trimmings. After being prompted to sign in with social media sites, such as Facebook or Google+, you will select your travel dates and destination from the calendar and drop down respectively. After passing through the usual screens that other online travel apps and sites require us to fill in, Pandey’s wireframe offers nifty – and optional – extras to fill in, such as the purpose of your trip, inventory filters and the option to purchase travel items ahead of the trip. Nice one!
Beauty and Fashion
The fashion industry is known for stunning aesthetics, glossy magazines and, arguably, a whole lot of critique. Websites catering to these fashionistas have a lot to live up to! Egyptian UI Designer, Mahmoud Khaled Deiab presents his fashion eCommerce design here, starting with some sketches, and working up to a visual wireframe representation of the final design. What we find most interesting in this wireframe design is the use of space. Deiab has used the grid layout, allowing for easier readability and scannability. His use of whitespace helps to establish visual hierarchy between elements. Additionally, his carefully chosen typography is an interesting, realistic compromise offered in the otherwise static, grayscale wireframe.
Brand design at the wireframing stage
Another wireframe that we’ve had our eye on from the world of beauty and glamour is Authentic Style’s website redesign for Beauty Salon, Skinmaze. The Digital Strategy company understands the importance of creating wireframes before moving on to the development stage. In their words: “Wireframing the key pages of the new Skinmaze website allowed us to work with Skinmaze to ensure they were absolutely satisfied with our plans for structuring the website and laying out all it’s information.” Authentic Style’s wireframe focuses on brand design above all else – en exceptionally important attribute in the world of web design, further heightened within the fashion industry.
Download your FREE copy of Making an Enterprise UX-Friendly
When it comes to every day chores, you might think that things are pretty simple. Well, think again. Sure, going to the store is easy enough, but what happens if they just don’t have that laundry detergent you like? Digital grocery shopping has soared in recent years, stamping out the drudgery and inconvenience of in-store browsing. But that means that the sites that we buy from need to be quick and easy to use.
Based on UX research and testing, Volodymyr Melnyk’s clickable online grocery shopping & delivery service mobile app wireframe is very impressive. With helpful feature descriptions on the homepage, a smart side-menu, quick login system using social media and latest search options, this wireframe looks like it could compete with many of the online grocery stores currently in place. Melnyk’s inclusion of the user journey from start to finish.
Social Networking at its best
ResMed Senior Visual Interaction Designer, Marc Caldwell presents his sensual ‘Logic ‘n’ flow’ online dating wireframe, and it’s everything we hoped it would be. His designs are complete and easy to follow, with forms, labels and content placeholders to provide additional – if somewhat raunchy! – hints to the user. He’s also mapped out the flow from screen to screen, in a logical Snakes & Ladders format. Check out more unique wireframing ideas on his personal blog.
Did you know that social networks are now visited more often than personal email is read? Woah! Below is a social network design model. With a Facebook-feel to it, this is a wonderful example of how wireframes should be used to give viewers an overall outlook of a design, and focus on the big picture. The use of simple lines and boxes enables the viewer to visualize the core structure of the screen, without getting distracted by ads and other details, as we’re all guilty of on social media!
How about a smart weather app that allows you to demonstrate descriptive weather statuses such as the temperature, pressure, and humidity. In the app wireframe below, we can clearly visualize each feature that the final weather app will contain. Helpful stats, graphics, and history charts can be put in place, as well as interactive maps the forecast around your area.
When presenting a weather app to colleagues or stakeholders, we would recommend showing them a clickable wireframe, or mid-to-high-fidelity prototype so that they understand the functionality as well as the visual structure and attributes. Weather is pretty interactive!
University Library Homepage
Designing a homepage or landing page is arguably the most important part in the web design process. Why? Because it’s the first thing that users will see when ‘landing’ on your website. Apart from helping you to organize and visualize information hierarchy, such as where you’ll place your Call To Action (CTA) and navigation menu, but ideas about the rest of the site’s features will likely spring to mind during the process.
Below is an example of a high fidelity prototype that was created using Justinmind. The team started out wireframing the basic feature and grid structure of the homepage. After this, they started to create mid-fidelity prototypes, importing real data and graphic elements to make the design more realistic. Having spoken to the team ourselves, they counsel that starting with static, gray wireframes meant that they had little rework towards the end of the design process.
Sports and Leisure
And last but by no means least, is the Boosted Boards iOS mobile app wireframe! If you’re unfamiliar with the company, San Francisco-based Boosted makes skateboards with light and powerful electric motors. The team used Justinmind to wireframe and prototype their iOS mobile app last year, and their feedback was awesome!
“Closing the gap between my simpler wireframes and interactive prototypes. I chose Justinmind because it strikes a balance and it’s nailed what I need from prototyping” Emilio Gonzalez, Boosted Board’s Senior UX Designer
Working closely with the Product Engineering team, the designers created a series of paper wireframes before “taking it to the pixels”. After this, the team moved on to create wireframes with detailed user navigation flow. these helped them to fully define each design element, and make sure that everyone – software engineers included – was on the same page. You can read more about their journey and how the final app prototype came to be here in our Boosted Boards case study.