19 Sites for Wireframing Inspiration

19 Sites for Wireframing Inspiration

Nine-Teen Sites for Wireframing Inspiration

19 Sites for Wireframing InspirationCreating wireframes of your designs is similar to producing a blueprint before you construct a skyscraper — it helps you develop and fine-tune the vital structural components before it’s too late in the construction process. Designers are spoiled for choice when it comes to picking wireframing tools. There are dozens of tools in the market, some online, some desktop-based, some free, and some paid. We’ll take a look at some of the most popular tools below:


1. Wireframe Showcase

Wireframe Showcase features wireframing projects contributed to the site by designers. You’ll see a variety of wireframes on this site, from quick-and-dirty pencil sketches to full-blown software-generated wireframes.

2. I ♥ wireframes
Since 2009, this Tumblr blog has been featuring inspiring design wireframes. You can only imagine how much content — 5 years worth, and hundreds of posts — is yours to be seen on this site. If you love Flickr, check out the I ♥ wireframes Flickr pool too.

3. The Iskeletor
This site features user-contributed design wireframes (the site refers to them as “Skeletons”).

4. Dedesign the Web
Rather than being a wireframes gallery, Dedesign the Web is a trivia game where you guess what the site is by looking at its wireframe. It’s fascinating how sites can make such a big impression on us that we’re able to tell them apart from other sites just by seeing their wireframes.

Baca juga yuk :  Mengatasi Error Pada Kode 0x80070422 Di Windows (Store/Backup)

5. MOObileFrames
If you’re looking for wireframing inspiration for your mobile UI design projects, this is the site for you. MOObileFrames showcases a few excellent mobile app wireframes.

6. Wireframes Magazine
Wireframes Magazine is an inspiring blog about the art and science of prototyping user interfaces. You’ll find tools, resources and examples related to wireframing on this site.

7. web.without.words
web.without.words deconstructs a site by covering up the site’s text so that we become focused on its layout and interface design, just like when we’re wireframing.

8. Mockups To Go
Mockups To Go is a gallery of community-contributed user interface wireframes. You’ll find wireframes for things like login screens and e-commerce product pages on this site, which you can then choose to import and use in the Balsamiq Mockups software (if you have access to it).

9. UI Wireframes Portfolio Samples
UI Wireframes is a design agency that specializes in providing wireframing design services. Their online portfolio features a lot of their own wireframing examples.


If you need wireframing ideas and inspiration tools software, look the below;

1. Balsamiq Mockups: Long held as the gold-standard in wireframing, Balsamiq is immensely popular with web designers and comes in both desktop and web-based avatars. Although it is packed with features, including many plugins, it does cost a pretty penny – $79 for the desktop version, and web-based plans starting at $12/month.

Baca juga yuk :  Bagaimana Cara Ping Laptop Windows? Mudah!

2. Pidoco: Pidoco is a web-based wireframing tool that’s quickly rising up the popularity charts. It boasts an extensive library of drag-and-drop web elements. Finished wireframes can be easily shared with clients, who can also leave notes and comments on the designs. Prices start at $9/month for a basic package.

3. Visio: Visio, a part of the Microsoft Office family, is more than just a wireframing tool – it is a complete diagramming software that allows anyone to create powerful, data-linked diagrams and flowcharts. Of course, it can be used for wireframing as well, though the interface does get a bit clunky, especially for large, more complicated websites. Prices start at $599, making it a poor choice for most web designers.

4. Axure: More than a simple wireframing tool, Axure is a powerful mockup software that helps you turn your wireframes into interactive, HTML websites. It is available for both Mac and Windows with prices starting at $289.

5. Adobe InDesign: InDesign, as you might be familiar, is Adobe’s flagship desktop publishing software. While the software is primarily used for creating magazine/book layouts, it can also be used for creating wireframes. But with limited functionality, you’re better off using a dedicated wireframing tool, especially considering the price.

Baca juga yuk :  Edit Foto Dengan Efek Bintik? Begini Caranya!

6. iPlotz: iPlotz is a simple, web-based mockup tool with drag-and-drop functionality. Although somewhat limited in features, it’s a great tool for creating wireframes on the fly. You can also leave notes and discuss design elements with other team members. iPlotz offers a free version, though you might want to at least get the single-user license ($15/month).

7. PencilProject: For a free, open-source alternative, look no further than PencilProject. Available for both Mac and Windows, PeincilProject is feature rich, powerful, and most importantly, completely free!

8. OmniGraffle: OmniGraffle started out as a Mac favorite before making the transition to the iPad. It’s a great looking, feature-rich wireframing tool priced at $49.99 that’ll help you create website prototypes, conversion flow charts, sign-up process charts, etc.  The only downside is that it’s not available for Windows.

9. MockFlow: MockFlow is a web-based wireframing tool you can try for free online. Besides the familiar drag-and-drop model, it also supports extensive collaborating capabilities, making it a great choice for larger teams.

10. Adobe Photoshop: Last, but not the least, is Adobe Photoshop. Every designer worth his salt is already familiar with the software. Which is why it works quite well as a wireframing tool (although larger websites can get a bit cumbersome). On the price side, however, Photoshop doesn’t exactly come cheap.

Tinggalkan Balasan