You’ve pushed through discovery: user research, stakeholder input, content audits, and more. Now it’s time to put the information architecture together in a responsive design that meets the needs of a hungry audience.
Wireframes are not a new concept in this world. Wireframes set the stage for any final product or invention. Blueprints for homes and buildings serve as wireframes; in prototyping for products, they’re often displayed in three-dimensional formats, like with computer-assisted design (CAD) drawings.
Great software. I have been looking for something like this for ages and have previously resorted to mind map software.
Wendy Saunders, Creative Director of Squiggle Limited
What is Wireframing?
Wireframing or user experience (UX) is the process of creating a layout before user interface (UI) design begins. Often, they’re done with black, white, and gray boxes to signify elements of a page that could include:
- Banners and images
- Blocks of copy
- Promotional spaces
- Form elements
Wireframes help design teams establish the “what” and “how” of a website’s experience, including potential functionality and aesthetics.
When you’re ready to tackle your wireframe,
check out these 15 tips for creating efficient, user-friendly wireframes.
Wireframing & Collaboration Tools
In today’s ever-expanding world of website development, there are many tools that designers and UX experts can choose from, including applications, wireframe kits, and more.
Once you have your wireframe components — the banners, boxes, and more — you can upload these to many design tools to collaborate with your team.
Slickplan offers its
Design Mockup tool, allowing designers and teams to upload prototypes, interfaces, design concepts and more into one portal for easy access and collaboration.
No matter what tool you decide to use to take your wireframe to the collaboration and concepting stage, starting with a comprehensive toolkit is an ideal Step 1.
Sketch Wireframe Kits
It’s not to say you couldn’t develop your own wireframe components, but if you’re looking to save time and stress for yourself or your team, downloading a wireframe kit is the way to go. What’s great about the design community, is many of the kits that are made by real designers are shared for free, as many of them are noted as being created for convenience. You won’t travel far before you see a note like, “I couldn’t find a kit that had what I needed for my project, so I made my own. Enjoy.”
Sketch is one of the most popular wireframe and prototyping products on the market, integrating easily with uploaded wireframe kits.
It’s helpful to know that kits come in many shapes and sizes. You can always start with a desktop wireframe kit, but you can also find handy Apple/iOS kits and Android kits that are specifically for app-first designs and mobile-first commerce.
Fortunately, we’ve got a reliable batch of free and nominal-fee design favorites to get you started.
Website: Basic Wireframe Kit (Free)
This basic kit – just as it’s labeled – has popped up in blogs around the web when it comes to great packages of kit favorites. It’s free, and was developed by a designer who simply wanted to put everything in one package.
[I] realized we didn’t have a good resource for creating quick wireframes. I found some alternative resources online but nothing simple enough for our needs. The Sketch file is what I created for our use internally but I figured the community would also find it handy.
It has the stock basics that every designer needs, but lacks social media icons, so that may be something you’ll want to scope out elsewhere.
Web & Mobile: Teracy Wireframe Kit (Free)
Teracy takes the Basic Wireframe Kit to a little more detailed level, including social media icons, breadcrumbs, featured content, and icons. It’s in black, white, and gray so that you keep your wireframes simple and focused on the functionality and structure. All of its features in the bundle can be easily used for mobile mockups, too.
iOS App: Flow iOS Wireframe Kit (Free)
Looking to put together a prototype specific to iOS (Apple)? Check out the Flow iOS Wireframe Kit from the Sketch community. With a responsive hamburger menu, images, and form fields, it’s a solid kit to start building a user-friendly app. This free resource is a popular one, with more than 20,000 downloads and counting!
eCommerce: Carbon Material Wireframe Kit (Free)
If you’re in the business of ecommerce, your goal should be providing consumers with a responsive, mobile-friendly shop experience that makes the buying process — from discovery to checkout — easy. Enter: Carbon Material Wireframe Kit, a free resource that’s part of the Sketch community. Fifteen artboards and structured layers offer you a robust selection of tools for opening the doors of your digital shop.
Mobile App: Liberty Mobile Wireframe Kit (Free with Subscription)
Like Dribble and Github,
Envato hosts a myriad of Sketch wireframe apps for any project. Mobile Liberty Wireframe Kit is a great solution for mobile-first app design, giving designers access to 125 fully layered screens and Google Fonts. It’s a customizable solution that doesn’t only work in Sketch, but Photoshop, too.
Website: Platforma Ultimate Wireframe Kit ($68)
If you’re looking for everything plus the kitchen sink to give you opportunities for designing a complete user-friendly, mobile responsive website, look no further than Platforma’s Ultimate Wireframe Kit. At a price tag of $68, you’ll have access to more than 200 layouts that work with Sketch, UX Pin, InVision, and more. Choose from 15 popular content categories including blog, e-commerce, footers, hero images, and more. This robust kit, available through ThemeForest, has everything you need and then some.
Website: HEXA Creative Website UI Kit (Free)
Simplicity is beautiful, and in the HEXA Creative Website UI Kit, you get just that. This clean and creative kit is easy on the eyes for both designers and developers. Equipped with Google Fonts and compatible with Sketch and Photoshop, HEXA includes 250 vector icons and 100 percent editable layers. The multiple file types give designers lots of flexibility for any size website project. Check it out with Envato, free of charge.
Templates: Wireframing Template Sketch Resource (Free)
Starting with a template can be an easy way to get creative juices flowing, and the Wireframing Template Sketch Resource, from Sketch, is a great convenient option. Whether you want to start with a 1-column layout or a 4-column layout, interact with buttons and tabs, or just have a lot of tools available at your fingertips, this is an ideal choice for you. This is a reliable kit, with more than 53,000 downloads from the Sketch community.
Dark Theme: DarkDot Wireframe Kit (Free with subscription)
Everything from Facebook messenger to Reddit offers a dark theme to apps these days, and DarkDot Wireframe Kit lets you do the same for sketching out your design. Featuring more than 170 web layouts across 17 categories, there’s something for about every need in web and mobile design. The fully customizable package includes 12 column Bootstrap grid as well as Google Fonts. It’s compatible not only with Sketch, but Figma, Photoshop, and Adobe XD, too. Download this free with subscription.
Share & discuss UX/UI designs
Add mockups from Figma or your computer to ensure UX/UI is moving in the right direction.
Symbols: Wireframing Sketch Symbols Kit (Free)
If you’re ready to start putting some motion around your wireframes to indicate what-happens-when, the free Wireframing Sketch Symbols Kit is a convenient resource to have in your pocket. Change colors of arrows, flip and rotate boxes, and more. This popular kit boasts more than 16,000 downloads. Because it’s a set of symbols, it ages well despite the ever-changing landscape of design trends.
Find What Works for You
Download more than one wireframe kit and give them a try. You’ll likely find one that works best for your project and needs. Designers are not shy about sharing resources they’ve developed, and if you decide to make your own kit, share the love! Sharing and iterating on kits is part of the fun for the design community, so get ready to dive in, collaborate, and make great things happen for users around the world.