A Beginner’s Guide to Designing Website and Mobile App Mockups

by Caroline Mercurio on February 21, 2017 3 comments

As a designer, you’re really good at what you do. When a client comes to you with a clear vision for their business but zero idea of how their website should look or function, you know how to deliver amazing results that double or even triple their ROI. Yet sometimes your clients need a little more convincing—a little extra push—to really seal the deal. Or maybe you’ve got quite the collection of website or app designs for your portfolio, but want a flashier, more engaging way to present these designs to your future employers and clients.

Enter product mockups. By providing important visual context for your designs, mockups are key to helping your client fully grasp your collaborative vision when a simple screenshot or Photoshop file just isn’t quite cutting it.

Mockups provide context for your designs and help clients envision your final product in a real world setting. They can also help model your responsive design solutions—allowing you to showcase your ability to design for mobile screens, tablets, laptops, and desktops. Using mockups to showcase your designs is an effective way to highlight your talents. Luckily it’s easy, too—which is why we made this beginner’s guide to show you how it’s done.

For this example, we used this mockup kit along with resources from our library of stock graphics.

 
MockupsDownload the stock graphics used in these designs.

 

Step One: Download a Mockup Kit

 
Mockups
 

The internet boasts a plethora of design resources all at your fingertips—and often for free. Our suggestion? Simply google “free photoshop mockups.” You can also use well-known resources like Mockup World, which is what we used for the designs in our guide to designing swag and our Pantone spring color guide.

Once you’ve chosen your desired mockup, simply download the file, unzip it, and open it in Photoshop. Most photoshop files for mockups have highly organized groups and layers, and should be easy to decipher. Take a moment to understand the layers of your chosen mockup kit—a good kit will name its layers clearly.

 

Step Two: Insert Design

 
Mockups
 

Most kits will name the layers you want to edit something obvious like “Put Your Screen Here” or “Edit This Layer.” The editable layer will be a linked smart object, so double click it and it will open another Photoshop file.

 
Mockups
 

After you create your design and export it as a jpeg or png, simply drag and drop it into this photoshop file, resize it as needed, save it, and then it will automatically populate the the original composition.

 

Step Three: Save and Export

Now you simply save the composition to whatever file type and size you desire. It really is that easy to elevate your designs so that your clients or future employers will be that much more impressed.

 
MockupsDownload the stock graphics used in these designs.
 

Need new stock graphics to inspire and amp up your next designs? Check out our top 20 graphics for web design.

 

Start Designing with Stock Graphics

 

Caroline MercurioA Beginner’s Guide to Designing Website and Mobile App Mockups

Related Posts

Take a also a look at these posts

3 comments

Join the conversation
  • Cathy Grimaldi - February 26, 2017 reply

    I’m new to these graphic sites and am not totally clear on what is considered legal and what isn’t. What I need to know can I legally use these graphics and/videos as part of a educational magazine and website? There is a product and membership fee.

    Caroline Mercurio - February 27, 2017 reply

    Hey Cathy! That’s a great question. GraphicStock differs from other stock image sites because the licensing cost is included with the subscription. We offer a 100% royalty-free commercial license for worldwide perpetual use. The main caveat is that we require substantial value to be added to our content.”

    “What does adding “substantial value” mean? Essentially, we want you to take the images from our site and incorporate them into your own work. You can achieve this by adding our images to an article you’ve written, a book you’re publishing, or a website you’re designing. Other customers choose to make modifications to the image itself, including adding, changing or removing design elements within the image, colors, borders, text, etc. As long as you are not simply reselling or distributing our images as they appear on our site, you’re in the clear. I hope this helps!

    -Caroline

  • Victor Andres Maza Hernandez - March 28, 2017 reply

    gracias por su sitio wep

Join the conversation

Or