iDevie
August 2018
M T W T F S S
« Jul    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Categories


Wireframing. User journeys. Content maps. User-centered design. Information architecture. Animated prototypes. Conversion paths. Iterative features. Sitemaps. Uhh, what?

Let’s be honest, the world of UX (user experience) and UI (user interface) is full of jargon and overcomplicated terms. Take, for example, this real line I copy-pasted from a job description for a senior content specialist position at a university:

“Creates templates that produce a consistent content strategy approach including guidelines for site maps, content inventories and audits, data analysis and user experience exercises.”

That’s a lot of fancy phrases that could be simpler. But if you work in web design or content strategy, you’re probably too familiar with these terms. The irony of this is that the goal of UX (that’s user experience) is literally to make things (aka content) easier to understand (aka more navigable) for people (aka users).

Wireframes and UI kits are two industry terms that sound complicated, but are actually super simple to understand.

Wireframe icons
Image: Wireframe icons

What’s a Wireframe?

Have you ever brainstormed a new website idea with a colleague at lunch, or with a friend at a bar? You feel inspired, grab a napkin and a pen, and start sketching out what the site might look like: that’s wireframing. Essentially, wireframing is an outline or sketch of what a website (or app) will look like. It’s the blueprint, the map, the bare-bones concept.

Of course, a sketch on a napkin will only get you so far. Therefore, designers have created templates for wireframes that are easily transferred to presentations or design software. (I recommend this article, A Beginner’s Guide to Wireframing, if you want a more detailed and resource-heavy breakdown of wireframes.)

What’s a UI Kit?

UI stands for user interface, in other words: the thing you’re making that people are going to interact with.

A UI kit contains helpful files and graphics that you’re likely to need, like checkboxes, icons, and more. Essentially, it’s a kit that exists so that you don’t have to build every component of your website or app from scratch–and the standardization means that it’ll be well–designed and easy for your audience to use.

There’s no single “right” way to design a button, but there certainly are ways that are better than others, and lots of design research. By using UI kits, you’re trusting the experts and making sure the details of your site are polished and professional.

The Best Wireframe Templates and UI Kits

Wireframe templates and UI kits are two different things, but the content of these templates often overlap. So, we’ve put them together in this list of the best and most useful wireframes and UI kits to add to your collection:

1. molo Mobile Wireframe Kit

molo Mobile Wireframe Kit
molo Mobile Wireframe Kit

The molo wireframe kit is made for apps and mobile development. There are nine categories, including login, walkthroughs, social, blogs, and navigation. Everything is made with Google Fonts, which means you’ll never have to deal with broken typefaces or unexpected design issues.

2. Codama iOS Wireframe UI Kit

Codama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit
Codama iOS Wireframe UI Kit

Codama is an iOS wireframe created with Sketch, a top design software. It’s well-organized and the files are named in ways that make sense to use in Sketch. The font choice is Montserrat, which is a classic for Apple design.

3. Greyhound UX Flowcharts

Greyhound UX Flowcharts
Greyhound UX Flowcharts

Greyhound is a unique kit that comes with 100+ mini flowchart cards, plus action blocks, arrows, and more.

4. WeDot – Wireframe UI Kit

WeDot - Wireframe UI Kit
WeDot – Wireframe UI Kit

WeDot is a popular wireframe kit with 170+ layouts. It’s especially good for dashboards, data, and charts.

5. Blokk Wireframe Kit

Blokk Wireframe Kit
Blokk Wireframe Kit

Blokk is an awesome wireframe kit for one-page websites. All of the content blocks are based on Bootstrap, so it’s easy to go from a Photoshop or Sketch outline to a real, live website.

6. UX Workflow – Wireframe and Sitemap Creator

UX Workflow - Wireframe and Sitemap Creator
UX Workflow – Wireframe and Sitemap Creator

A sitemap is an outline of all the content on your website; from the home page, down to your pages, blog posts, contact page, etc. It all links together in some way. A site map is a visual representation of that. The UX Workflow sitemap creator is a great tool, especially if you need to present a website idea in a visual way.

7. Collector Wireframe Web Kit

Collector Wireframe Web Kit
Collector Wireframe Web Kit

The Collector Wireframe Web Kit is made for AdobeXD, a free UX design software from Adobe. It’s bootstrap-based and organized by popular categories like headers, portfolio, blog, contact, and price tables. 

Note: it sells for nearly $40 on other design websites, which is more than the cost of an Envato Elements subscription (at time of writing)! It has a useful video demo on YouTube.

8. Wirey Wireframe Kit

Wirey Wireframe Kit
Wirey Wireframe Kit

Aside from having a fun name, Wirey is a wireframe kit for websites and digital projects. Categories include navigation, headers, features, blog, and footers.

9. Turbo iOS Wireframe Kit

Turbo iOS Wireframe Kit
Turbo iOS Wireframe Kit

Designing an app that will have a sign-up page, walkthrough tutorials, a user profile, and social components? What about news, sales, or video? Try out this Turbo iOS Wireframe Kit, which has an Instagram-like look.

10. 6 Ecommerce Wireframes

6 Ecommerce Wireframes
6 Ecommerce Wireframes

The UI of e-commerce sites can be complicated: there’s item size and color options, purchase buttons, logos, images, cross-promotional items, and more. The last thing you want to do is confuse your user out of making a purchase!

11. Google Fonts Combinations

Google Fonts Combinations
Google Fonts Combinations

Okay, this might not technically be a “UI kit”, but when I’m designing a new website, the first thing I get stuck on is typography choices. It’s such an important element of design, but there are so many options. It’s easy to overthink, and suddenly you’ve spent an hour debating the pros and cons of Open Sans vs. Lato… don’t be like me! Just download this kit of Google Font combinations, pick a designer-chosen font combo, and move on with your project.

12. Basement Wireframe Kit

Basement Wireframe Kit
Basement Wireframe Kit

A kit for simple websites, especially for companies and online sales websites. Comes with Photoshop and Sketch file versions.

13. Clean UI Kit for Rough Sketching

Clean UI Kit for Rough Sketching
Clean UI Kit for Rough Sketching

A distraction-free UI kit, so you can make a website plan without getting too bogged down in the details.

14. Paper Wireframe Kit

Paper Wireframe Kit
Paper Wireframe Kit

“Like a sketch on paper”, Paper wireframe Kit is a simple, grid-based design tool.

15. W1 UI Kit for watch Apps

W1 UI Kit for watch Apps
W1 UI Kit for watch Apps

Here’s one that’s a little different: a UI kit designed just for Apple Watch apps. Designing for such a tiny screen is tough, so it’s important that your design is precise and easy to follow!

16. Dashboard UI Kit

Dashboard UI Kit
Dashboard UI Kit

Creating a dashboard for reporting and project data? Don’t use screenshots from Excel or your Google Sheets. Design a dashboard that’s actually useful with this UI kit, which can be resized to a wide range of screen sizes.

17. Awesome Web UI Kit

Awesome Web UI Kit
Awesome Web UI Kit

A popular UI kit built on the Bootstrap grid, with Photoshop-ready files. It’s especially easy to change to adapt to your brand colors, which is a helpful feature if you already have a color scheme in mind.

18. Heavy UI Kit: Music

Heavy UI Kit Music
Heavy UI Kit: Music

Play buttons, album artwork, pause: this UI kit is built for music apps, and has every component you’d need to design one. Comes with Photoshop and Sketch files. This designer has a few specialized UI kits in their portfolio, including ones for online magazines, travel apps, and Instagram stories.

19. Creative Mind UI Kit

Creative Mind UI Kit
Creative Mind UI Kit

Less minimal than a traditional wireframe, the Creative Mind UI Kit is designed for blogs and big headlines.

20. Social Media Kit

Social Media Kit
Social Media Kit

Planning a social media campaign, or architecting the look and feel of a new brand? Try out a kit like this Social Media Kit, which comes with graphics, banners, quote templates, and more.

More UI Kits, Wireframes, and Helpful Graphics

Looking for more to add to your collection? Check out the full Envato Elements library of nearly 2,000 UX and UI kits, including templates for landing pages, quiz apps, and subscription plans.


Comments 0
There are currently no comments.