Design Resources for the Non-Designer

Looking to make your presentation a little more pretty, your document a little more dapper, or your proposal a little more presentable?

With a wealth of free stock images, icons and device mockup generators around the web, anyone can improve the look of their documents with ease and without the need for design programs.
We’ve rounded up a list of websites where you can find high quality stock images and icons that are free for commercial use, and websites that allow you to mock up an app or website on devices such as phones, tablets and desktop computers.

Stock images

 

Stock images - Pexels

 

Pexels

www.pexels.com
With over 40,000 images and 3,000 being added every month, there are plenty of images to choose from on Pexels. Each photo is hand picked so the standard of quality is high, they’re all high resolution and are free to use on both personal and commercial projects without attribution.

 

Stock images - Unsplash

 

Unsplash

www.unsplash.com
Similar to Pexels, Unsplash has a large number of high quality, high resolution photos (over 300,000). You can search by keyword or by browsing their collections. With collections such as ‘Workspaces’ and ‘Dark and moody’, it makes it easy to find a selection of images around a certain theme or with a certain feel. The photos are all free to use on personal and commercial projects as well.

 

Stock images - Gratisography

 

Gratisography

www.gratisography.com
Gratisography, by Ryan McGuire, has a smaller range of images, however new images are being added weekly. Overall the images found here have a fun and whimsical feel, so check out this site if you’re after images that will add a fun touch to your project. Ryan has also created a few bundles so you can quickly download sets of images with themes such as ‘Perfect Portraits’, ‘Natural Beauty’ and ‘Crazy Characters’.

Icons

 

Icons - Font Awesome

 

Font awesome

www.fontawesome.com
Font Awesome is a popular icon font that has a decent range of simple single-colour icons, including a large range of brand icons. To use, download the font, install it on your computer, then copy and paste icons from the Fontawesome Cheatsheet. You can then resize and colour the icons just as you might with text.

 

Icons - Icons8

 

Icons8

www.icons8.com
Icons8 has a selection of over 65,000 icons, some of which are free at certain sizes and in certain file types. On top of having a large number of icons, you can customise them further by changing their colour, adding an overlay (for example a + icon), add text to them and add a circular or square background. Sizes and file types are limited for free users, with some icons only available as PNGs. To be able to access all icons, file types and sizes, you can upgrade to an ‘Unlimited Plan’ which costs $19.90USD per month (or $199 per year). If you do use any of the icons for free, you’ll need to include a link to Icons8 somewhere in your document.

 

Editing an icon on icons8.com

 

Icons8 also comes with an app for Mac and Windows that allows you drag and drop icons directly in to documents from the app window. You can set a global colour which changes all the single colour icons to that colour, making it easy to quickly add a series of matching icons to your document.

 

Icons8 app for mac

 

 

Icons - Smashing Magazine

 

Smashing Magazine

www.smashingmagazine.com/category/freebies
If you’re after icon sets that are a little more unique, check out the freebies offered by Smashing Magazine. Most of the icon sets are on the small side, and you might have to do a bit of searching through the articles to find the right set for you, but the icons are fresh and modern and of a consistently high quality.

Mock-up generators

 

Mock-up generator - Mockuper

 

www.mockuper.net/mockups/phone
Mockuper is a website that allows you to mockup your designs on to phones, tablets, laptops, desktop computers, business cards, outdoor signage, billboards, TVs, photo frames and posters. The templates include devices with real-world backgrounds, such as phones in people’s hands, or laptops sitting on desks.

Creating a mockup is easy, just select which template you’d like, upload your screenshot and adjust the crop area if needed. You can even choose if you’d like a reflection on the screen for a little extra realism. Once that’s done, choose the size of your mockup (S to XL) and download the image. Even though it’s super easy, they’ve also included a tutorial so you can’t go wrong.

 

Mock-up generator - Mockups Jar.

 

www.mockupsjar.com
Similar to Mockuper, Mockups Jar’s templates include devices photographed in the real world, including devices on desks and in people’s hands. The templates include phones (iOS and Android), iPads, laptops, browser windows, and even packaging, apparel and photo frames.

To use, just choose which template you’d like, upload your screenshot, use the ‘crop image’ modal window to scale your screenshot up or down if it isn’t already the correct size, and then download the resulting mock up.

 

Mock-up generator - Mockuphone

 

www.mockupphone.com/#ios
If you’d like a no-fuss mock up of your website or app on a device with a transparent background, MockUPhone is a good option. They have a number of options of devices pictured front on with no background, including iOS, Android, Windows Phone, laptop, desktop and even TV. Select a template and drop in your screenshot. Each template lists recommended dimensions for your screenshot, so if you’re taking a screenshot of a website you can use a browser extension like Window Resizer (Chrome) to get the size right.

With the variety of devices available, you can create something like the image above, showing how a webpage looks at various screen sizes.

Bonus

 

Browser Frame

 

www.browserframe.com
Sometimes you might want to go for something simple, skip the device and instead show a webpage within a browser window only. Browser Frame makes this easy, all you need to do is enter the URL or upload a screenshot, and you can choose between several browser types, including Chrome and Firefox for Mac and Windows, Safari, Edge and IE. Then just download the transparent PNG and it’s ready to be placed in to a document.

www.ami.responsivedesign.is
For when you quickly want to show an existing website on multiple devices, you could use ‘Am I Responsive’. Simply enter the URL of the website you’d like to mock up, click go, and the website will appear on the 4 devices (iMac, iPad, iPhone and laptop, though not the most up to date ones). You can even scroll within each device individually so each device could be showing a different part of the page. Once you’re happy with it you can take a screenshot of the page and add it to your document.

That's not all

This is by no means a comprehensive list of free resources out there on the web. It’s just a starting point to help you add a bit more flair to your proposals, presentations, documents and whatever else could do with livening up with some nice images, icons and mockups.

About Speedwell

Speedwell is a full-service digital development and integration agency. Our specialist areas include business analysis, user experience (UX) research, design and technical development. We work closely with clients to design, build and maintain secure digital solutions and applications that align with their business processes and strategy, and integrate with existing systems.