by Ramona Nemeth-Csoka on February 24, 2022

Where to Find the Best Design Resources for Creating a Slider?

Got an awesome Smart Slider project in mind but not sure where to start? You’re in luck, as in this article we’ll help you get everything you need to start building your slider. Following our 5 point checklist you can create a well thought slider. Additionally, we listed our favorite places to get images, videos, fonts and colors. So, let’s see the best design resources for creating a slider!

1. Look for inspiration

Before you start building your slider, it’s worth taking time to look for inspiration. You can browse sites that have the same topic as your project to see what kind of content they add. I’ve collected four design resources to inspire you in your slider creation journey.

Smart Slider 3 Logo
The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.

Smart Slider templates

Of course one of the first places to go before starting your next project is our template page. We’ve got more than 100 sliders to browse for ideas. Additionally, you can import any of them and edit it to match your project.

Slider design resources: Smart Slider template page

Visit Smart Slider templates

Dribbble

Dibble is one of the best places to find and showcase creative work. You can find all kinds of content there from website layouts to product designs. So, you can be sure to find inspiration for your project.

Slider Design Resource: Dribble

Visit Dribbble

One Page Love

One Page Love is a website design gallery showcasing the best Single Page websites, templates and resources. What’s great about One Page Love is that you can only find website designs there that were actually developed by someone. So the inspiration you can find here is an actual website, not only an image file.

One Page Love design resource for sliders

Visit One Page Love

Behance

Behance is a social media platform to showcase and discover creative work. Like on Dribbble, you can find much more than just website templates here. In fact, you can find illustrations, logo designs and digital drawings as well.

Design resource for sliders: Behance

Visit Behance

2. Choose your color palette

After you get inspired for your project, it’s time to find a color palette. Choosing the right color can be easier if you’re a designer, but if you’re not, don’t worry. There are plenty of super cool sites which offer ready to use color palettes. All you need to do is choose the one you like the most.

Also, don’t forget to make sure it fits your project as well. Here are some of the best sites to choose a color palette for your slider.

Coolors

Coolors is a fast color palette generator. You can generate a new palette by pressing the space key on your keyboard. If you get a color you like, clicking on the lock icon on it will make it “stick”. So when you press space the selected color will not change, but you’ll get colors that match your selection.

Slider Design resource for color palette: Coolors

Visit Coolors

Colormind

Colormind is a color scheme generator that uses AI to generate the perfect colors for you. It can learn color styles from photographs, movies, and popular art, which is really cool. You can lock colors you want and generate new colors instead of those you don’t.

Colormind: a site for finding color palette for your slider

Visit Colormind

Colorhunt

You can find hand-picked color palettes on Colorhunt. You can filter the palettes by category. For example, if you’re looking for something modern, you can look in the Pastel category. However, if you need attention-grabbing colors, you can have a look at the Neon color section.

Great color palette resource for your slider desing

Visit Colorhunt

3. Decide which font(s) you’ll use

Creating a slider is often a lot more than just putting images together. Although pictures say more than a thousand words, it’s always a good idea to add text to clarify your message. Obviously, you need captivating text for your visitors to enjoy. But it also matters how the texts look, so which font family or families to use.

These are our favorite resources to find font design ideas for the sliders we create.

Typewolf

Typewolf helps you choose a great looking Google Font for your website. Additionally, it shows fonts that look great with your selected font. In fact, it includes visual examples of why these fonts harmonize so nicely.

Slider Desing resource for finding matching Google Fonts

Visit Typewolf

100 days of fonts

100 days of fonts is a special project to design and code a creative showcase of a Google Font pairings for 100 days. It’s a great way to find great looking Google fonts and inspiration about how to use them in your project.

100 days of font helps you find great fonts for your slider

Visit 100 days of fonts

4. Select images and videos

Now that you know what you want to create, what colors and fonts to use, it’s time to pick images for your slider. Of course, it’s always best to use your own images on your website. But if that’s not possible, there’s nothing wrong with using stock photos. Here are our favorite design resources to find stock images and videos for your slider.

When you download a stock image, it usually has high quality and resolution. As a result, the image has a large file size. For this reason we recommend resizing the image before you upload it to your website. As a result, they won’t slow your site’s loading time down. You can also use Smart Slider’s built in optimization options to optimize the image size.

Pexel

Pexels is a free stock photo and video website that helps everyone who is looking for visuals. Their huge library includes both photos and videos you can download and use in your slider. So, it doesn’t matter what you’re trying to create, you can find great materials on Pexel.

Visit Pexel

Pixabay

Pixabay has over 2.5 million high quality stock images, videos and music. You can also find illustrations and vectors as well. So, it’s a great way to find slider design resources for your project.

Visit Pixabay

Unsplash

Unsplash helps you find beautiful, free images that you can download and use for any project. What’s cool about Unsplash is that they list the most popular image categories. As a result, you can browse pictures fast.

Visit Unsplash

Freepik

What makes Freepik stand out from the other resources is they don’t only offer images. In fact, they offer both hiqh-quality photos, vector images, illustrations and PSD files. So, Freepik is a great place to find slider design resources for everyone. Additionally, it has a huge library so you can surely find great images for your slider.

Visit Freepik

Mazwai

Mazwai is a resource for free stock videos. So, if you’d like to present a background video on your slider you’re in the best place. Although all videos you can find on Mazwai are free to use for any project, you must credit the author.

Visit Mazwai

5. Browse icons

Icons are easy to understand and can grab the attention of the visitor. Additionally, they help to sum up what your text is about. For this reason it’s worth using icons on your website. We love using icons in the slider templates when possible. These are the best resources to get great icons for your slider.

Flaticon

Flaticon has more than 6.5 million vector icons and stickers for your projects. Additionally, all icons are available in PNG, SVG, EPS, PSD and BASE 64 formats. So, you’ll surely find the icon that fits your project the most.

Visit Flaticon

Iconfinder

Iconfinder is an icon marketplace. In other words, there are some icons you can only access after payment. Of course, there are still tons of free icons to choose from. In fact, you can browse 216,774 icons for free! However, if you want to access all 6 million icons, you have two options. First, you can pay for only those icons you need. Alternatively you can buy a subscription and use any paid icons as part of your subscription.

Visit Iconfinder

Font Awesome

Font Awesome is one of the most popular font libraries. Additionally, it’s one of the font icons you can find in Smart Slider’s icon layer as well. So, integrating Font Awesome icons to your slider is super simple.

Visit Font Awesome

Conclusion

There are many awesome places where you can get inspiration or stock photos and videos for your slider. So, before you rush into the slider creation, take a step back. Look for inspiration, find great colors, font families and images for your slider. To help you work faster, we’ve listed our favorite design resources to create sliders. Feel free to go through the checklist when you start your next project!

Ramona Nemeth-Csoka

About Author

Hi, I’m Ramona and I’m a member of Nextend‘s awesome support team. You’ve probably chat with me if you’ve submit a support ticket. When I’m not answering support emails I read a book or go cycling. I enjoy writing as well, both for our blog and for my private projects.