If you’re searching for some useful resources regarding a website mockup, you’ve come to the right place. Because, yes, every site building should start with a website mockup. This is especially true for start-ups.
Sometimes, you don’t need to bother with online tools. The simplest way to draw the sketch of a website is to use pen and paper. If you’re feeling rebellious, you can even use colored pencils.
However, tools are useful so there’s no need you reinvent the wheel.
Mockup Tools
Mockup Resources
Checklist of what a website mockup should achieve
- How to create an information architecture (the way pages appear within the website, on how many layers the information is spread, and how the different pieces of the message are grouped in categories represented by menu sections)
- The mockup should define the layout (the architecture of elements within a page of the website)
- Practicing skills – you might want to try your hand at combining different elements in innovative ways
- Testing hypotheses – you might want to create a main/bold choice and alternative choices, so you can test what works best for the client
- You’re a good developer, but you want to hone your design skills
- It should tell you how your website behaves at various screen resolutions (in a world where mobile-responsiveness is mandatory, you should test the website display on different devices)
- A mockup should be used to imagine usability tests (how the users will behave once they land on the website, what works simpler for them, which is the clearest path for them to navigate within the website, etc.)
- It should help figure out where to use CSS/JS, etc.
- Give some basic web design guidelines and ideas (settle on color schemes, mood boards, CTAs, what to include above the fold and below the fold, how to use white space, etc.)
- It should integrate a certain style (how the message is transmitted; in a professional or playful tone, by an expert or an artist, etc.)
- The end result should be that you test how users will navigate your site, which click takes them where, what back buttons do, where links drive users to, etc.
- It should integrate specifications regarding the logo (its dimensions, colors, placement).
- It should not include too many details (don’t lose the overall look of the website, because of too many details that make it look crowded)
- You should be careful to avoid wrong colors (you should pay attention to the color scheme that is best adapted to users, also matching the business “personality”)
- Don’t use unreadable text (this is penalized by users and search engines as well)
- Use links that should look differently (this is responsible for respecting basic usability principles)
Website Mockup Tools and Generators
There are plenty of tools out there. Here’s an unexhaustive list of such tools, we gathered for you to choose the best:
1. Mockplus
- It is recommended for beginners in web design.
- It has 200 pre-made components you can use on the drawing surface.
- You can combine the pre-defined components in a unique way and provide different website mockup variants for the client to choose from.
- The components are added by simple drag-and-drop.
- There’s no need to have any coding skills; moreover, it has a very intuitive interface that lets you easily get accustomed to its options.
- It helps create website drafts both for desktop and mobile devices.
- You can find around 3000 icons for you to choose from.
- The paid version amounts to 139.3$/year.
2. Moqups
- It is well-structured, and it has entire pre-made templates you can play with, by drag-and-drop and placing them onto the drawing surface.
- It helps get an overview of how the website pages will be structured, and how its elements will be arranged within them.
- The results can be shared with a simple click and you can provide access to it by managing access permission.
- The application is super-fast to use.
- The template components should be managed in one source just as sketch symbols.
- The paid version amounts to 13$ or 19$/month.
3. Balsamiq Mockups
- There are many ready-made elements you can drag and drop to the drawing surface.
- The elements are structured according to categories, so you can try several distinct website mockups (with elements from different categories) and you can go into the details (with different elements from one single category).
- You can split the UI into different frames. You can place the components into your desired place, to check with the client which version works best.
- It has plenty of predetermined UI options like forms, buttons, menus, pickers, etc.
- The paid version starts from 9$/month.
4. Figma
- Figma is one of the best tools for designer-developer collaboration.
- For a website redesign, you might want certain parts of the website to remain as they are. So, you can make copies of them and paste them into Figma, then convert them into components.
- It allows for real-time interactions and edits.
- It is cloud-based, so you can work from any computer, without fear of losing data.
- No installation package or application is required.
- The professional plan amounts to from 12$/editor.
5. Sketch
- Sketch is preferred by most people instead of Adobe, being a faster and cheaper option.
- It is vector-based, which means everything is scalable.
- Some plugins can be added to sketch, for extended functionalities.
- There are many resources and guides to help you learn to use Sketch.
- Color picker as a magnifying glass – it selects color with utmost accuracy.
- Color panel on the right hand of the screen, for ease of use.
- Images are added by drag-and-drop.
- Every change that you make to a symbol will be carried across every instance of that symbol.
- You can save any style of a shape with the “Shared Styles” dropdown right above the fill and border colors.
- For a personal licence, you have to pay 99$/year.
6. UXPin
UXPin has many items you can use.
- It provides many ways to interact with the website sketch, by clicking over items, hovering with the mouse over them, etc. It has extended options for interactivity with the elements.
- There is a high degree of control over the visual appearance of elements (e.g. you can adjust colors, opacity, rounded corners, etc.)
- It is most recommended for the wireframe and prototyping qualities.
- This tool uses vectors, giving increased scalability of the items.
- It is a collaborative design platform, so sharing elements with the other members of the team is easy.
7. Pixeden
- It has templates you can start your work from.
- Some of the templates are free for use.
- It focuses on vectors, icons, prints, and many graphic resources.
- You can make a free account to benefit from Pixeden features.
- The paid version amounts to 10$/month.
8. Invision
- It is best used for wireframes and prototypes of websites.
- The tool is super easy to use for gathering feedback from your team and your clients.
- It has specific functionalities for creating and presenting mood boards, brand boards and style guides.
- You can start building website drafts by signing up for free.
9. Placeit.net
- It has about 43,512 mockups in its library. You can select some of them and customize them according to your specifications, to present viable variants to your client.
- They are organized by categories, including virtual reality. So, it’ll be easy for you to make a selection.
- An unlimited subscription amounts to 14.95 $
10. Framer
- It is available only for Mac users
- The tool is best recommended for prototyping.
- There are many resources on how to start designing with Framer.
- A personal plan amounts to 12$/month.
11. Principle
- It is useful to create animated and interactive website interfaces, so the website sketch approaches the final product as much as possible.
- With Principle, you can make an object move in a circular trajectory; you can make an object move in a circular trajectory if it’s included in a group of objects.
- The website draft lets you know what elements are clickable in the website.
- You can buy the tool for 129$.
12. Zeplin
- Zeplin is the ultimate collaboration tool between designers and developers.
- Everyone in the team can access the latest resources and get notified of changes.
- With the help of Zeplin, designers can turn their work to specs and guidelines, easily.
- You can’t export assets, so don’t rely on Zeplin for this functionality. Or else, you can export them manually.
- Zeplin is usually used for collaboration between team members and clients.
- Developers can measure the dimensions and margins of elements that will be introduced in the website draft easily.
- The starter plan amounts to 17$/month.
13. Axure
- The pen tool allows you to draw custom vector shapes.
- The point tool allows you to select, add or change any point along the path when the shape is selected.
- You can annotate your drafts to specify functionality, keep track of tasks, or store project information.
- The PRO version starts from 29$/month.
14. Kite Compositor
- You can create timeline animation and add triggers to run the animation (such as events)
- You can export an animation as video (.mov) or .gif
- There aren’t many resources on how to create a website draft with Kite Compositor, which makes it somewhat difficult to understand i.e. animation principles integrated into the tool
- You can buy the tool for 99$.
15. Fluid UI
- The elements are moved with drag-and-drop and they have contextual menus for advanced customizations.
- The tool is adapted to creating mockups for further mobile development.
- It is a good tool for creating user-friendly User Interfaces.
- However, it is a bit difficult to fix UI issues.
16. Adobe Illustrator
Adobe Illustrator is one of the most well-known tools for website wireframes and mockups.
- However, the result will be a PDF file, so double-check with the developer/client if they should be content with a PDF file.
- It is best used for logos and images adjustments.
- This tool is more on the high-end, regarding price.
- It has many professional functionalities, like artboards, text management options, the puppet warp tool, etc.
- The paid subscription amounts to 29.99$/month.
17. Previewed.app
- Take snapshots & create animation scenes, all in 3D.
- Access latest collections of iPhones, iPads, Android Mobile & Tablet devices. Customize shapes, styles, and sizes.
- Tons of templates are available for a variety of niches.
- Render 3D device animation scenes for app promo videos.
18. Futuramo Visual Tickets
- It is a useful tool for a fluid workflow: it enables project communication, including ticketing, request management, feedback, bug tracking, etc.
- You can combine it with Futuramo Time Tracker if you want to keep a record of the time needed for a project to be completed.
- Due to its organizational capabilities, it lets you deal with many projects and many clients at the same time.
- You can attach screenshots and other comments and annotations to a project, for a complete overview of the design process.
Website Mockup Resources
It might be useful for you to look for PSD mockups. PSD mockups are made with photoshop, they provide the frame which you can add any objects into, for a customized website mockup.
Here are some resources:
Freebies
- The resources you’ll find here are available for free.
- You can customize smartphones, laptops, images or templates that will be integrated into a website, by including any objects you want into the respective frames.
Freepik
- You’ll also get free resources on Freepik.
- The resources are organized by categories, for easy search.
- You can also find resources with seasonal customizations (e.g. Christmas).
Livesurface Context
- It’s a downloadable tool where you can play with functionalities such as drag-and-drop, edit, artworks and instant visualization of the results.
- There’s a trial pass you can use for one month, or you can benefit from a monthly subscription for 14$.
Graphicburger
- you can use free files, templates, icons, textures, graphics, vectors, etc.
- For each of the items, the number of downloads is displayed, so you can make an opinion about how much users appreciate that resource.
Icons8
is a massive library of icons you can choose from.
- It actually has over 55,700 items in its collection.
- The icons are downloadable as PNG, SVG, PDF, EPS, or as a font.
- The items (icons) are classified by categories and tags, so you’ll quickly find what you need, despite the massive number of items Icons8 includes.
We hope this information will help you create website mockups clients will approve. So we wish you to have many successful projects, starting from website drafts made with some of the resources above.
