Late last year, we decided to standardize on Sketch as our tool of choice for creating low-fidelity wireframes. Previously we were fans of Balsamiq, mostly because it had a number of pre-built app elements that could be dragged and dropped into a mockup. While we enjoyed the polish and precision of Sketch, not having a similar feature required us to spend valuable time on creating and recreating the same elements in our wireframes.
A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches. But first, you might be wondering why the heck you should create a wireframe sketch of your web design. From pixel-perfect icons and scalable vector graphics, to full user flows and interactive prototypes, Sketch is the perfect place to design, create, test and iterate. Build designs that scale Lay the foundations for your product's design system with reusable, responsive components that automatically scale to.
*Update April 11, 2017 — We updated the Savvy Sketch iOS Wireframe Kit to support iOS 10 styling and included Touch ID alerts, Smart App Banners, Apple Pay components, tab bar variants, and bottom cards. See the changelog in the instructions file for details on each item.*
Sketch App Sources is the largest collection of icons, UI kits, wireframes, and free design resources for Sketch. All the best Sketch Wireframe 33+ collected on this page. Feel free to explore, study and enjoy paintings with PaintingValley.com.
At the start of 2016, we started working on an internal solution to to this problem. We decided to make a kit for Sketch that would already contain the main elements we usually require starting with iOS. Since then, we've tried out and modified the kit based on our own experience using it in customer projects. Believing it would be useful to others, we provided it to colleagues and other industry designers who provided ample, valuable feedback.
Today, we're releasing the Savvy Sketch iOS Wireframe Kit into the wild. We're confident that it's an extensively vetted, solid resource for doing UX work on iOS. We hope the community finds it has a similar impact to what it's done for us at Savvy Apps.
Download the wireframe kit at the bottom of this article.
What Makes This Kit Different
Our kit is all about speed and flexibility. We've organized our file so you won't have to click into multiple levels of groups to get to the component you need. All components are grouped as symbols, ensuring you won't have to select all elements and can simply quickly insert them. Also, instead of focusing on entire screens our emphasis is always on individual components. This approach makes it easy to grab elements as needed and quickly copy, paste, or edit them.
The kit takes advantage of Sketch Symbols because they're a powerful, easy way to reuse and apply changes to the same components. You can quickly insert them from the Insert > Symbol menu, and easily update all of the instances of a particular symbol at once. Instead of having a long list of Symbols we've broken them into categories within the Symbols menu. Now it's not nearly as overwhelming to find the particular Symbol you're looking for.
We also utilized Sketch Artboards because it keeps us organized, maintaining fixed frame sizes for all of our iPhone 6 screens. With Artboards, it's really simple to export individual screens and to send individual Artboards to our prototyping tool of choice, Marvel.
How the Kit is Organized
This kit is organized into three pages. The first page, 'iOS - iPhone 6,' contains blank iPhone 6 Artboards at a 2x scale. Each Artboard has a default status bar (as we tend to start with that in our internal wireframes) and is numbered to help us stay organized throughout the entire app creation process. The second page, 'iPhone 6 Wireframe Elements,' provides all of the wireframe elements organized by type, allowing you to easily select and copy components as needed. You don't need to touch the third page, entitled 'Symbols,' unless you wish to make edits to the master Symbols.
Sketch Wireframe Toolkit
Remember, this kit makes heavy use of Sketch Symbols, including Sketch's more newly released nested symbols, so keep that in mind when editing components. We suggest using Sketch's new overrides feature to edit the content so that the master symbols are not affected. Also note that all elements were designed for use in screens at a 2x scale (750x1334), as that is typically the size we design in. If you design at 1x, you may need to scale elements down by 50 percent. This kit works with Sketch 3.7 and above and requires Apple's San Francisco font.
How to Use the Kit
We generally start using the wireframe kit once we've worked out some general user flows and sketched some high level ideas. In our wireframing workflow, we begin by duplicating the wireframe kit and renaming the file something relevant to the project (for example, AppName_Platform_Wireframes). We like to tackle the first step of the user flow for our first wireframe. These first few wireframes include the splash, onboarding, and authentication screens. We try to keep those all within the first row of Artboards, titled accordingly (e.g., 0.0_Splash, 0.1_Onboarding_Feature-1, 0.2_Onboarding_Feature-2, 0.3_Login).
As we create each screen, we access the iPhone 6 UI Elements page and quickly copy and paste the element we need into the corresponding Artboard. You can also use Insert > Symbol and select the element you need while on page iOS - iPhone 6. If we need to update the content of a Symbol, we'll use Sketch's override feature instead of editing the master Symbol itself. We prefer this 'do no harm' approach, rather than worrying about adjusting a Symbol that may be used in other instances.
Sketch Wireframes Mobile
Once our wireframes are in a good place and we're ready to create a prototype, we'll export all of our Artboards. The great thing about having your Artboards numbered in the manner described above is that upon export, they're still organized sequentially rather than by random titles in alphabetical order. This helps carry the organization through the visual design phase as well as the development phase.
Get the Savvy Sketch iOS Wireframe Kit
Download our Savvy Sketch iOS Wireframe Kit now. We're also listening to feedback.
All of us extend a special thanks to our reviewers, especially Ena De Guzman of NBC Universal, Jennifer Morrow of Ellucian, Marko Vuletič of @SketchTricks, Derick Anies of Weebly, Zoe Tran Do of Pivotal Labs, and Philip Amour. Follow us on Dribbble or Twitter for updates including when Android support is available.
Late last year, we decided to standardize on Sketch as our tool of choice for creating low-fidelity wireframes. Previously we were fans of Balsamiq, mostly because it had a number of pre-built app elements that could be dragged and dropped into a mockup. While we enjoyed the polish and precision of Sketch, not having a similar feature required us to spend valuable time on creating and recreating the same elements in our wireframes.
*Update April 11, 2017 — We updated the Savvy Sketch iOS Wireframe Kit to support iOS 10 styling and included Touch ID alerts, Smart App Banners, Apple Pay components, tab bar variants, and bottom cards. See the changelog in the instructions file for details on each item.*
At the start of 2016, we started working on an internal solution to to this problem. We decided to make a kit for Sketch that would already contain the main elements we usually require starting with iOS. Since then, we've tried out and modified the kit based on our own experience using it in customer projects. Email nintendo com. Believing it would be useful to others, we provided it to colleagues and other industry designers who provided ample, valuable feedback.
Today, we're releasing the Savvy Sketch iOS Wireframe Kit into the wild. We're confident that it's an extensively vetted, solid resource for doing UX work on iOS. We hope the community finds it has a similar impact to what it's done for us at Savvy Apps.
Download the wireframe kit at the bottom of this article.
What Makes This Kit Different
Our kit is all about speed and flexibility. We've organized our file so you won't have to click into multiple levels of groups to get to the component you need. All components are grouped as symbols, ensuring you won't have to select all elements and can simply quickly insert them. Also, instead of focusing on entire screens our emphasis is always on individual components. This approach makes it easy to grab elements as needed and quickly copy, paste, or edit them.
The kit takes advantage of Sketch Symbols because they're a powerful, easy way to reuse and apply changes to the same components. You can quickly insert them from the Insert > Symbol menu, and easily update all of the instances of a particular symbol at once. Instead of having a long list of Symbols we've broken them into categories within the Symbols menu. Now it's not nearly as overwhelming to find the particular Symbol you're looking for.
We also utilized Sketch Artboards because it keeps us organized, maintaining fixed frame sizes for all of our iPhone 6 screens. With Artboards, it's really simple to export individual screens and to send individual Artboards to our prototyping tool of choice, Marvel.
How the Kit is Organized
This kit is organized into three pages. The first page, 'iOS - iPhone 6,' contains blank iPhone 6 Artboards at a 2x scale. Each Artboard has a default status bar (as we tend to start with that in our internal wireframes) and is numbered to help us stay organized throughout the entire app creation process. The second page, 'iPhone 6 Wireframe Elements,' provides all of the wireframe elements organized by type, allowing you to easily select and copy components as needed. You don't need to touch the third page, entitled 'Symbols,' unless you wish to make edits to the master Symbols.
Remember, this kit makes heavy use of Sketch Symbols, including Sketch's more newly released nested symbols, so keep that in mind when editing components. We suggest using Sketch's new overrides feature to edit the content so that the master symbols are not affected. Also note that all elements were designed for use in screens at a 2x scale (750x1334), as that is typically the size we design in. If you design at 1x, you may need to scale elements down by 50 percent. This kit works with Sketch 3.7 and above and requires Apple's San Francisco font.
How to Use the Kit
We generally start using the wireframe kit once we've worked out some general user flows and sketched some high level ideas. In our wireframing workflow, we begin by duplicating the wireframe kit and renaming the file something relevant to the project (for example, AppName_Platform_Wireframes). We like to tackle the first step of the user flow for our first wireframe. These first few wireframes include the splash, onboarding, and authentication screens. We try to keep those all within the first row of Artboards, titled accordingly (e.g., 0.0_Splash, 0.1_Onboarding_Feature-1, 0.2_Onboarding_Feature-2, 0.3_Login).
As we create each screen, we access the iPhone 6 UI Elements page and quickly copy and paste the element we need into the corresponding Artboard. You can also use Insert > Symbol and select the element you need while on page iOS - iPhone 6. If we need to update the content of a Symbol, we'll use Sketch's override feature instead of editing the master Symbol itself. We prefer this 'do no harm' approach, rather than worrying about adjusting a Symbol that may be used in other instances.
Once our wireframes are in a good place and we're ready to create a prototype, we'll export all of our Artboards. The great thing about having your Artboards numbered in the manner described above is that upon export, they're still organized sequentially rather than by random titles in alphabetical order. This helps carry the organization through the visual design phase as well as the development phase.
Get the Savvy Sketch iOS Wireframe Kit
Download our Savvy Sketch iOS Wireframe Kit now. We're also listening to feedback.
All of us extend a special thanks to our reviewers, especially Ena De Guzman of NBC Universal, Jennifer Morrow of Ellucian, Marko Vuletič of @SketchTricks, Derick Anies of Weebly, Zoe Tran Do of Pivotal Labs, and Philip Amour. Follow us on Dribbble or Twitter for updates including when Android support is available.
