Top 25+ Resources for Designing Your Website

Whether you are DIY-ing your Squarespace website or simply want to spice up your site and blog posts on Squarespace, it’s useful to have a resource list where you can go to find design assets. In this post, I’ve rounded up the best, must-see and use resources and tools to have bookmarked when designing your Squarespace website. Without further ado, let’s dive right in!

**Some of the links in this post are affiliate links but I only recommend resources I truly, madly, deeply love and use myself. They are noted with a ** and they come at no additional cost for you but do result in a small commission for me which helps keep the lights on around here.

Whether you are DIY-ing your Squarespace website or simply want to spice up your site and blog posts on Squarespace, it’s useful to have a resource list where you can go to find design assets. In this post, I’ve rounded up the best, must-see and use resources and tools to have bookmarked when designing your Squarespace website. Without further ado, let’s dive right in! #squarespacetips #webdesign #brandedbossbabe

1. Adobe Colors

This is a good place to start when you need some color palette inspiration. The way Adobe’s color generator works is you can choose a default color and then pick if you want it to generate analogous, complementary, monochromatic, triadic palette or a palette that consists of shades. You can also generate colors from an image or simply explore color palettes that were created by other Adobe users. If you have a Creative Cloud subscription, you can also save your palettes for later.

2. Coolors

Similar style to Adobe. This generator will start you off with a palette and all you have to do is press space bar to get more palettes. Once you see a color you like, you can lock it and then press space bar again. You can explore color palettes made by others, save the palette if you register for an account and export it as a PNG, PDF, SVG or SCSS.

3. Canva/Photoshop/Illustrator

You gotta have something to design your graphics with amirite? If you want more control over your designs and love playing around with design possibilities, Photoshop and Illustrator will be your best friend. If you want something simple and straightforward with lots of premade templates and design elements that start at $1/piece, then Canva is a great choice.

4. Pinterest, Dribbble, Behance, Awwwards

While the above sites won’t give you any specific resources that you can use, they are super-useful when you’re in the research and planning mode. You can search for website designs, brand designs, logo designs, and save them to a super secret Pinterest board to use as an inspiration for your own design.

Check them out here: Dribble | Behance | Awwwards

5. Design Seeds

Want to spend your afternoon drooling over some pretty color schemes? Design Seeds will become your new favorite site. I mean… it’s gorgeous, it’s full of color palettes, it’s beyond what I can convey in this post. Go check it out for yourself. (but do finish reading the post first otherwise you’ll never come back)

6. Fontjoy

Font pairing can be tricky, especially if you’re not a designer. Luckily, there are a few websites that can help you with this. Fontjoy allows you to generate font pairs and uses deep learning to improve the suggested font pairings over time. While the full explanation is a little on the geeky side of things, what you must know is that this font pair generator uses actual text and words instead of dummy text like Lorem Ipsum so you can see how the fonts look together. You can also edit the text to use your actual copy.

7. Google Fonts

High-quality fonts that can be used for free? Yes, please! What’s even better, you can download the fonts to your computer so you can use them with say… Canva and they come with Squarespace so you won’t suffer from lack of fonts.

8. FontPair

This helpful website makes it easier to pair Google Fonts together. While you can’t pick and choose which font to use, you can see suggested pairs based on popular fonts or categories such as serif/serif, serif/sans-serif, etc. They also have links to other typography resources so you can learn more about it.

9. Typewolf

If you need typography inspiration or want to learn more about a font, this website more than likely has the answer. You’ll find suggested pairings, free alternatives, and links to where you can purchase/download the font. It also features fonts used in the wild so you can see how others have used and paired a particular font.

10. Typio

Similar to Typewolf, this website peeks under the hood of existing websites to see which fonts are used, which font services are popular, and how the fonts are paired together.

11. Creative Market

If you need design assets such as patterns, icons, fonts, social media templates, chances are you’ll find it on Creative Market. You can pay for each item individually, their licensing terms are pretty simple to understand, and they have a wide range of items you can use. Bonus points: they even offer six free goods each Monday.

12. Design Cuts

Design Cuts** is perfect when you’re bargain hunting. You’ll find patterns, icons, fonts, textures, and more for free or ridiculously low-priced. They often bundle resources and assets together so you can, for example, get access to dozens of resources such as best-selling fonts, graphics, effects packs, and brush sets for $29.

13. FontBundles

This website offers free and premium fonts. Fonts are often bundled together so you can buy hundreds of fonts ranging from script to display for low prices like $14.

14. Envato Elements

If you prefer to get all your stock photos, icons, presentation templates, graphics from one place, then Envato Elements might be worth checking out. This marketplace offers a subscription model so for $29/month you get access to all of the resources they have. There is no limit on how many items you can download and license is pretty simple to understand as well.

15. Pixabay

Looking for free stock photos that you can use liberally on your site? Pixabay is a great place to start. It offers a wide range of photos, a simple license, and you can even choose the size you want to download.

16. Unsplash

Unsplash is probably my favorite place to find free stock photos and I am thrilled they have a Squarespace integration. They also feature a wide selection of photos and you can even make collections based on your interests, style or topics.

17. Pexels

I can’t make this list without mentioning Pexels which is another free resource for finding stock photos. While Pixabay and Unsplash are a bit more artistic in nature, I can often find more corporate-style photos on Pexels.

18. StyledStockSociety

I’m a sucker for a beautiful flatlay, I admit that. Elle from StyledStockSociety** is my go-to resource for all the stock photos used on this website. You can sort collections by color, and by themes (holiday, fall, caffeinated entrepreneur...to name a few.) My favorite by far? The Pink + Navy Collection of course!

19. Dropbox

This one might seem a bit odd but once you go on a downloading spree, you’ll want a place to save all the goodies. Dropbox is a great place to start. I recommend upgrading to a paid plan for more storage space (though you can do the same with Google Drive - a matter of personal preference here).

20. SquareStudio

If you want to add more functionality to your Squarespace website, SquareStudio has you covered. You can find plugins that allow you to add animated counters, timelines, accordions, skill bars, and more. You can buy items individually or sign up for their membership.

21. SQSPThemes

Another plugin shop for Squarespace. Find plugins that make it possible to add a sidebar to your blog (even if your template doesn’t support it), accordion and tabs, related posts and products plugin, and more. Plugins are sold on an individual basis but you can buy the entire bundle here.

22. Subtle Patterns

If you’re in the market for some elegant and minimalistic patterns, stop by Subtle Patterns. The cool thing about this website is that you can preview what the pattern will actually look like when used on your site.

23. Icons8

Icons can add extra flair to your website. With Icons8, you can quickly find icons to spice up your site. They are free to download (although you will have to credit the website) and use; unless you want to pay $19.90/month. Social media icons, arrows, hearts, carts… you name it they have it. With more than 80,000 icons in their library, you’re bound to find the one you need.

24. Flaticon

If 80,000 icons is not enough, then check Flaticon. They offer more than a million (yes, you’ve read that right!) free icons although a link is required here as well. You can also purchase a monthly membership for $9.9/mo to remove the attribution link requirements.

25. Placeit

You know how you see images on social media that show a resource like a PDF or a course on a beautifully styled stock photo with iPhone or iPad? Yeah, those. You can easily make them with the help of Placeit. All you have to do is upload an image or paste the URL to your … whatever you want to showcase in a fancy way and Placeit will do the rest. Download the image for free or pay a one-time fee of $8 to use it without attribution.

26. TinyPNG

TinyPNG is not a resource per se… but it must become a part of your blogging workflow. The thing about Squarespace is that it likes large images -- at least when it comes to dimensions. But when it comes to size of the image in kilobytes or megabytes.. Yeah, no one likes big numbers here. Squarespace recommends your images to be less than 500KB in size. But… even that is too big from an SEO perspective. TinyPNG to the rescue. This nifty little tool will compress your PNGs and JPGs without compromising quality and whittle the size down significantly. If you want my #1 tip to speed up your site and improve your SEO at the same time it’s this -- compress your website images!

27. Pik Wizard

Pik Wizard is another gem for finding great stock photos that are free to download and use. You can find images that are released under CC0 license and they range from beautiful landscapes to gorgeous food and business images. What’s even more, the search bar will even throw in helpful suggestions as you search for images and you can then download them or save them to your favorites (you will need to create a free account).

Did I miss your favorite resource? Know of any other awesome tools and resources that help you with your SQSP website design? Share them in the comments below and please pin this post far and wide!

 
Learn where to go if you want to find the best resources for designing your website. From fonts to colors and patterns, this list has you covered! #squarespacetips #webdesigntips #branding #brandedbossbabe
 
Learn where to go if you want to find the best resources for designing your website. From fonts to colors and patterns, this list has you covered! #squarespacetips #webdesigntips #branding #brandedbossbabe
 
Learn where to go if you want to find the best resources for designing your website. From fonts to colors and patterns, this list has you covered! #squarespacetips #webdesigntips #branding #brandedbossbabe