Designing a mockup for your web page, landing page or email is an essential step in communicating your marketing strategy to your client. As you know, the mockup will allow you to create a design for approval that is easily editable before you hand it over to your developers to take to life on the web. It’s your chance to wow your client and fit your design and marketing vision to their brand.
The mockup is a collaboration of strategy, function, design and client wishes, it’s an essential document. We’ve pulled together some tools and tips that marketers and designers can use when creating your design mockup.
Find inspiration in collaboration and with research
Inspiration is what will help you take your digital vision to the next level. We believe that there is strategy behind conducting competitor research and looking across the web for inspiration. Do better, build better and make better decisions by weighing your vision next to those who’ve done well.
Use a tool that is easily editable
Photoshop is a good go-to for designing your mockup, as a designer, it’s a known tool that is easy-to-organize and easy-to-edit. If you do choose to design with Photoshop, make your design easier by using a grid system. Grids will help you to align content, create hierarchy and carefully plan and edit whitespace.
Note: before you start creating your design mockup in Photoshop, it is beneficial to have a wireframe either drawn out or assembled in another program.
Organize your design mockup
Designers the best thing you can do for yourself and for your future developer, is to organize your layers and name your items and groups at each step along the way. This will make your PSD easy to navigate especially if you’ve grouped elements by placing according to your wireframe. For example your footer elements and are all grouped in a folder called “Footer.” Sounds like a no brainer and it should be.
Free online tools are your friend
From choosing your colour scheme to choosing typography it will be to your benefit to use the free tools on the internet. Colour selectors like Paletton and Coolors provide palette examples to help you set your colour scheme. Checking in with Google Fonts will allow you to ensure that your design contains web-safe typography. You may also want to download a free icon kit so that you don’t have to waste time designing icons for your mockup.
The best way to learn to create better mockups is really just practice. The more your create the better the process and outcome will be. Download the designers checklist below to gain valueable collaboration tips for designing mockups that your developer will want to see.
