in Design / Development

15 Useful Sketchbooks And Mockups For Web Designers

Unless you are like these guys,  before you start working on a brand new website or on a redesign, you must put all your ideas on paper starting from how will the main menu look like and all the way to page interactions or usage scenarios.

As the technology evolves, these days you have more than a simple piece of paper and a pen. You have sketchbooks, mockups, paper browsers and so on. If you are not familiar with this tools then this article it’s a great knowledge base for you.

Web Design Sketchbook

This is the first tool on my list and now you will find out why. The Web Design Sketchbook is a carefully crafted set of website tools to help you through the process of planning and designing your web projects. The Sketchbook starts with a set of design and content planning questions that cover everything from site objectives, design tone to the information architecture or sitemap. The book the features a series of design and layout brainstorming pages with full browser chrome and grids to better plan how your site will look and operate when it is finished. The book features thumbnail, detail and full page sizes for more effecient brain storming and detail development.

Stencil Kits

Using a pencil and paper is often the best way to get ideas down. Revolutionary products have been conceived on a napkin before taking shape digitally. Our stencil kits pays homage to the fact that ideas flow naturally with pencil and paper. The kits are designed to quickly sketch user interface, user flows, and ideas for how your app might work.

960 Sketch PDF template

This PDF template is very useful especially in meetings or anytime you need to draw something fast. It is based on the 960 grid system so you this can ease your work a lot. For more info about 960gs, take a look here.

Grid Paper made by Konigi

This 8.5 x 11 inch graph paper is made for visual designers, interaction designers, and information architects. You’ll find styles for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. Plus you’ll get a basic grid for drafting sitemaps or anything else that might come up. These pages are great for sketching, but also work well when producing high fidelity drawings. The title bar and grid lines are non-photo blue, so you can easily remove them when scanned. The thick black lines for boxes will show in scans and are 2px wide to match the weight of Pentel Sign Pens.

Paper Browser

The goal was simple — To create a wireframe tool that would enable designers to have that perspective. Providing you an actual viewing resolution of your potential user. Looking your site on what the user sees. Paper Browser doesn’t only provide you with that perspective but adapt on how you work. Enabling you to focus on what you do best – Design.

Wireframe template

This template is suitable when you need to develop web site documentation for web design and planning.

Dot Grid Book made by Behance

The Dot Grid Book was designed by the Behance team in response to requests from graphic designers testing the Action Method. The Dot Grid was developed as an alternative to traditional lines and boxes. The light geometric dot matrix serves as a subtle guide for your notations and sketches.

App Sketchbook

Quickly create app mockups with the original App Sketchbook. 3 real-size iPhone blueprints per page, notes area printed on #60 bright white paper and spiral (wire-o) bound.

iPhone Application Sketch Template v1.3

Grid squares are equivalent to 10px, and tick marks indicate the heights of the Status Bar, Navigation Bar, Keyboard, Tab Bar and Toolbar, both vertically and horizontally.

MockFlow

MockFlow allows you to design and collaborate (in real-time) user interface mockups for your software and websites. It comes with numerous built-in components & icons. MockFlow is hybrid, so you can design seamlessly from anywhere & even with no net-connection.

Mockingbird

Mockingbird is another web app with a focus on collaboration. It allows you to link multiple mockups together and preview them interactively to get a feel for the flow of your application.

Balsamiq Mockups

Using Balsamiq Mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. With 75 pre-built controls to choose from, you can design anything from a super-simple dialog box to a full-fledged application, from a simple website to a Rich Internet Application.

iPlotz

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.

Cacoo

Cacoo is an online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.

HotGloo

HotGloo is completely web based with lots of features that let’s you drag and drop and scale items easily. It also has support for realtime collaboration.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.