Design Resources for Prairie Mountain Media’s Site Builder

Table of Contents

  1. Getting Started
  2. Site Colours
  3. Site Typography
  4. Site Blog
  5. Traffic and Conversion
  6. Design Resources

This post is a part of the Getting Started series for Prairie Mountain Media’s Site Builder. The information in this post is applicable to all websites but it specifically speaks to the Site Builder. Did you want to find out more about the Site Builder? Email me at justin@prairiemountain.media


There are a ton of resources that we can recommend that will help you with designing your site. Here are some of our favourites.

INSPIRATION

https://www.pages.xyz/
A fantastic inspiration source for products and categories including Pricing Pages, Checkout Pages and App Pages.

https://muz.li/
Design inspirations curated and tailored to you every time you open a new tab.

https://dribbble.com/
Good for colours, small UI details and illustration. Not always the most usable designs.

http://littlebigdetails.com/
The little details in apps that make an experience surprisingly delightful. More UX than design.

https://land-book.com/
High quality, curated design inspiration for marketing websites. Includes a nice tagging feature.

IMAGES

https://unsplash.com/
High-quality free photography. Great for landscapes and travel or coffee shop related images.

https://www.pexels.com/
The best free stock photos shared by talented photographers.

https://pixabay.com/
Over 1.6 million royalty-free stock photos and videos shared by our generous community.

https://gratisography.com/
A quirky (and a little bit crazy) selection of photography by Ryan McGuire.

https://burst.shopify.com/
High quality, useful imagery for most projects.

http://thestocks.im/
The Stocks collates all free stock photography websites in one place. Lots of free stuff here!

https://uifaces.co/
User-submitted avatars for you to use in your projects. Great for mockups of apps.

TYPOGRAPHY/FONT

http://fontpair.co/
A typography site dedicated to helping creators use beautiful typography for their creative projects.

http://typespiration.com/
Free inspirational web font combinations with colour palettes and ready-to-use HTML/CSS code.

http://fontjoy.com/
Generate font pairings in one click.

https://www.reliablepsd.com/ultimate-google-font-pairings/
The ultimate collections of Google font pairings.

http://typ.io/
A great place to find inspiration for typefaces. See them in use on real websites.

https://grtcalculator.com/
A great tool for pre-defined type styles based on the height and container width.

https://nekocalc.com/px-to-em-converter
This calculator converts pixels to the CSS unit EM.

https://type-scale.com/
Generate recommended type sizes for your website using a pre-defined scale.

http://classic.typetester.org/
Test out your typefaces and compare different ones to each other before committing.

WhatFont Chrome Extension
A Chrome extension which allows you to easily see what typefaces and styles a website is using.

ICONS/ILLUSTRATIONS

https://thenounproject.com/
Icons for everything.

https://illustrio.com/
A 100% free icon library.

https://www.iconfinder.com/
Free and premium vector icons.

http://www.flaticon.com/
Thousands of free icons.

https://www.webalys.com/nova/
A play on the Material Design icon set but much nicer than the original.

https://pixelbuddha.net/
A place to find free and premium icons and illustrations. Super high quality.

https://www.ui8.net/
Curated design resources to energize your creative workflow. The Unlimited Pass grants you access to all the assets.

https://streamlineicons.com/
Great icons here by the same people who did the Material Design icon set above.

MOCKUPS

https://mockup.photos/browse
Browse mockup templates and photos.

https://dimmy.club/
Device mockup generator for your screenshots.

COLOURS

https://coolors.co/
A super-fast colour schemes generator.

http://colorhunt.co/
A free and open platform for colour inspiration with thousands of trendy hand-picked colour palettes

https://www.canva.com/colors/
Everything you need to know about colours.

https://picular.co/
Google, but for colours.

https://hihayk.github.io/scale/
A quick colour scale generator.

http://colormind.io/bootstrap/
Bootstrap UI colours. This tool shows your palette in a mock layout.

https://duotone.shapefactory.co/
Upload your images or use free ones from UnSplash and convert them to a duotone effect.

https://rkgttr.com/koul/
A handy tool to help you generate complementary colour palettes with accent colours and greys.

https://dribbble.com/colors
Search for designs by colour. A great way to see colours that are currently in use.

http://paletton.com
A colour scheme generator which allows you to create different palettes and generate tints and shades.

https://highintegritydesign.com/tools/tinter-shader/
Quickly and easily generate tints and shades of your chosen colours in one click.

GRADIENTS

https://webkul.github.io/coolhue/

https://webgradients.com/

https://www.grabient.com/

https://gradienthunt.com/

http://gradients.io/


This is the last post of the Getting Started series. Do you think we are missing something? Let us know at justin@prairiemountain.media and we’ll be happy to add it!

Posted in