Website or interface wireframe (also called wireframing) is actually a schematic presentation of content blocks or parts of a web interface or an app. Wireframe is a visual guide that represents the skeleton of a website/interface.
Using the wireframe one can easily depicts the page layout, arrangement of content parts, site navigation, etc. In wireframes images and texts are usually omitted, since main focus lies in functionality, behavior, and priority of the content.
Web Design Essentials for Non-Designers: Free Ebook
In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or produced using thirdparty software or applications. Wireframes mainly focus on:
- Types of information displayed.
- Range of functions.
- Rules for displaying certain kinds of information.
- The effect of different scenarios on the display.
Here is a metaphorical use of wireframing, the site is called webwithoutwords.
From the first sight there seems to be no other content except for those squares with crosses, but when you hover each of them content reveals.
Probably you are asking yourself: "Why would I need wireframing kit for Photoshop, if there are special programs and apps for that?"
- If you're using Photoshop day by day, there is no need for you to learn the new app, just drag into the PS window one these PSDs and start making the mock-ups.
- In Photoshop you are not limited with the restriction or limitation of some other app functionalities, in PS you can make almost anything with you mock-up, save it and use later or whenever you may need it.
- Having more than one wireframe page, you can keep them in separate layers and then use "Layer Comps" and "Smart Objects" to save your time.
- You can easily customize your wireframe, give it an original look or design the layout, you were mocking, based on it.
- Generally Photoshop wins in all parameters, comparing to other apps.
Now you know why wireframing in Photoshop is much better than in other apps, time to get some free wireframe PSDs. We've made a list of awesome resources where you can get free photoshop wireframe kits and use them in your design mock-ups.
All of these kits contain similar design elements, (including buttons, navigation, content blocks) but they all look different. There are also several kits for mobile interfaces, there you will find even the slightest elements of iPad, iPhone interfaces.
iPad Sketch Elements AI
* * *Free Sketching Wireframing Kit
* * *Free Photoshop Wireframe Kit
* * *The Ultimate Wireframe UI Kit
* * *Mini Wireframing Kit
* * *Web Design Wireframe Kit PSD
* * *iPhone App Wireframe PSD
* * *Flat Wireframe
* * *Apple Device Wireframes
* * *Wirekit
* * *Flat UI Kit Free
* * *Webpage Wireframe Stencil
* * *Wireframe Blueprint
* * *iOS7 Wireframe Kit
* * *That's it guys, if you're using wireframes in your daily works you are free to share the stills of your mock-ups in the comments below. If you have seen other wireframe kits, and you think they need to be in this round-up share some link and we'll gladly add them.