15 amazing wireframe & mockup sketches

The first step to a successful project is a plan. Research indicates that even behind the 4,500-year old Great Pyramid of Giza, there must have been the presence of a grand blueprint. Today, wireframes and mockups have become the primary planning tool for web development projects of all sizes.

Web designers develop websites on their client’s behalf and have to make certain that the expectations and requirements of the client are met. This is where the role of wireframes and mockups comes in. These models demonstrate the layout and functionality of the site and help designers give shape and form to the ideas they have in mind. After presenting the models to the client, the team can immediately act upon the feedback and address problems early in the process when they are easier to fix. In development projects that don’t make use of wireframes or mockups, clients often don’t get anything tangible until the first preview release is available. At this stage, changes can be difficult and expensive to make.

If you intend to use wireframes or mockups for your next project, then this article provides you with 15 amazing wireframe and mockup sketches to help inspire your designs. Make the best use of these and you’ll definitely earn accolades from your future clients. Enjoy!


1. UI Wireframe Sketches

wireframe & mockup sketches 01


2. Early Ember Sketches in Color

wireframe & mockup sketches 02


3. Sqetch

wireframe & mockup sketches 03


4. Oddity

wireframe & mockup sketches 04


5. Coastal Capital Partners Wireframe Sketch

wireframe & mockup sketches 05


6. Web Sketch Interface v2

wireframe & mockup sketches 06


7. Mobile Design Wireframe Sketches

wireframe & mockup sketches 07


8. Buienradar Sketch

wireframe & mockup sketches 08


9. Dinosforhire

wireframe & mockup sketches 09


10. Links

wireframe & mockup sketches 10


11. HBO True Blood site

wireframe & mockup sketches 11


12. Dew Tour

wireframe & mockup sketches 12


13. Librespeak Interface Sketch

wireframe & mockup sketches 13


14. Ask People Wireframes

wireframe & mockup sketches 14


15. Janko at Warp Speed Composite Sketch

wireframe & mockup sketches 15


Going Digital

Wireframe sketches on paper work great as a brainstorming tool at the very beginning of a project. Once the ideas mature, however, it’s advisable to turn the sketches into digital wireframes. If you are looking for an easy-to-use wireframing tool, I suggest you to take a look at PowerMockup, an add-on for Microsoft PowerPoint. PowerMockup provides a library of UI shapes and icons that you can simply drag and drop onto a PowerPoint slide. A sample wireframe for SmashingHub.com that was created using PowerMockup is available below:

powermockup-sample for SmashingHub


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub

Comments are closed.