This month we’ve discussed various aspects of the web design process. Things like important questions to ask on the client questionnaire, how to collect content on time and research tips to use when gathering info about the client’s business. Now let’s get into the designing a mock-up stage.
Okay I know I’m being a little silly with the title of this post. But seriously, receiving a well organized and layered mock-up (along with necessary files) would make me happy. The development process goes by that much smoother.
As a designer new to web design, you may be unsure of what a developer wants in terms of how the mock-up should be set-up, what files are needed, etc.
In this post, I’ll break down some key steps on how to create a mock-up that’ll make your developer happy.
Mock-up programs to use
In order to create the mock-up, you’re going to need a program to use. Sure you can always jot down and/or sketch your ideas out on paper but the final results will need to be executed using a program.
There are many mock-up programs and tools to use online. The most popular ones are Adobe Illustrator, Adobe Photoshop, and Sketch. Invision is also an excellent way to create your mockup.
In this post though, I’ll be using a current project of mine to show you how to create the mock- up using Photoshop. But don’t worry, instructions for the other programs will be available soon in my updated Designer & Developer Collaboration course.
Setting the mock-up document and grid
As soon as you crank up Photoshop, you’ll want to set up the document for web design. You do this by selecting File -> New. Or simply click the Create new button. Now it’s time to choose from a few options to get things set up properly.
You'll now see a dialog box with some options to choose from. You can select the web tab and choose from a list of already created presets. Or manually add your own. Oh and don’t forget to give your project a name!
Designing for mobile is a must.
Having your mock-up designed on a grid makes it easy for your developer to build out your beautiful web design.
Here’s how you do it:
In Photoshop CC you can easily create a grid by choosing the New Guide Layout. Do this by selecting View → New Guide Layout.
A dialog box will appear allowing you to add rows, columns, adjust gutter and margin sizes. Use this to setup the web design to work for various mobile devices. You can also choose from a default preset.
If you find you’ll need this layout often, I would recommend saving it. In the New Guide Layout dialog box click on Custom. Then select save preset from the dropdown menu and be sure to give it a name.
Creating folders and organizing layers for the mock-up
In web development folders or what's better known as directories, need the correct files and corresponding assets placed inside of them. Otherwise, the website will not work properly, if at all.
You should create and organize folders to contain things such as photos, fonts, elements etc. This way everything is ready to easily pass off to your developer.
The same thing goes for your layers. Be sure to organize your layers by naming them properly and grouping multiple layers together. For example, group layers that correspond with the header section of the website.
Name this group header. Do this for other layers that correspond to a group such as a footer, sidebar, content, etc. And while you are at it, add any important notes that you want your developer to know about.
Saving Elements Needed For Web Design
Most likely your web design layout will contain elements such as icons, buttons, logo, etc. You’ll need to export and save these so you can give them to your developer.
Follow these simple instructions below to do so:
Export an element by right clicking on a layer and choose Extract Assets. Be sure to choose a format you want to save the element in such as jpeg, png or svg. Then click extract. From there you can save the element to a folder you already created.
If you’re looking for details on how to actually design a website mock-up be on the lookout for my updated Designer & Developer Collaboration course. New modules are being added which will include a guest designer expert that’ll walk you through the design process. Sign up for the course while it’s still free!
There’s nothing left to do on your end but to send over the organized mock-up and files to your developer for the final phase of the web design process - development. At this point, you can relax and/or get started on a new project!
I hope this basic run through of how to create a mock-up will help you craft your first or next web design mock-up.
And if you are looking for more in-depth details on the web design process, be sure to look at for the newly updated Designer & Developer Collaboration course. New modules are being added specifically for web design.
Grab the Design to Development Checklist
Never have a delayed project again. Know exactly what's needed for every designer/developer collaboration.
Download the FREE checklist NOW!