Category Archives: Design

4 Tips on How to Simplify Your Website Design And Win Over New Customers

4 Changes You Can Implement Today to Simplify Your Website Design and Make It Better 

You will lose clients faster than the speed of light with a terribly cluttered website design.

I mean, just take a look at the next two examples I’m gonna show you.

So here we have a busy website, with no specific focal point, and you don’t really know where to look, and it immediately stresses you out. You lose the client because he clicks off your site.

But then, we compare it to this…


When I look at this minimalist website design, especially compared to the other, my eyes are immediately set to ease. It’s literally like the inner designer in me just had the most amazing glass of wine and I’m just enjoying myself, admiring the design.

Alright, enough comparisons. Let’s just get things rolling over here.

Into the 4 tips we dive!

1. Simplify the Text


The most important page of all your website will be your homepage.

It’s the page that will set the tone for the rest of your site.

So it’s important that you get across what you’re trying to say quickly, efficiently, and simply.

There’s no need to clutter your website by writing so much text.

Most people just skim your website anyway! So, write your main text in bold headlines, add some details below, but not too much.

Only a small percentage of people will read the entire thing, so use your headlines to your advantage wisely!

2. Stick To A Color Scheme


A good color scheme always warms my heart, like grandma’s homemade apple pie on a summer’s day.

Maintaining a color scheme amongst your text, background elements, and images will automatically make you look more organized.

By using a color scheme, you can also bring focus to certain elements and manipulate the eye to go where you want it to.

By no means do you ever want a green font on a bright red background with orange and silver elements floating around the background. Unless you want you website to look like Christmas got a little wild at the Christmas staff party and vomited all over your website.

Go online or on any design inspiration website and type in popular color schemes on 2020, or color palettes, and save time and effort by finding beautiful palettes!

3. Limit Your Homepage To The Essentials


This kinda goes hand in hand with our first tip about limiting text.

Limit everything on the homepage and only keep what is essential.

Ask yourself, “What am I trying to achieve with this website and the homepage? What am I trying to show the customer?”

When you find the answer to that question, design your homepage accordingly.

Don’t add secondary/tertiary elements to the first bit of the homepage.

That’s what your menu tab and other secondary pages are for!

And speaking of menu tabs…

4. Scale Down Your Menu Tabs


For the love of simple design, keep your menu bar clean.

You don’t need a menu tab for 👏every 👏single 👏 element 👏of your website.

We’ve seen this way too many times than we’d personally like to admit, but some people give you the option of clicking on 20 different tabs.

As an alternative, create drop-down menu tabs where you have subcategories.

This will keep things squeaky-clean and peaceful for the eyes to look at.

No one will be frantically looking around for what they’re trying to find.

When things on your site and aesthetically pleasing and well-organized, your sales will go up.


Collection of Free Design Rersources

Free Stock Images

Photography has been and will always be a key piece of design. Stock photos are no longer what they used to be, luckily. No longer will you be seeing just those awkward group photos of people laughing or two businessmen shaking hands. 

No, there are so many stock photo sites for you to choose from with quality work from real photographers. Check out these 10 awesome free stock images websites!

Photos generated from AI


unsplash free stock images

I want to start this list off with a bang. Unsplash is my personal favorite free stock image website. I use it for everything from article writing to making designs. Unsplash has a huge collection of images, consisting of over 110,000 high-quality free stock images. Just type in a keyword and see hundreds of images that can suit your needs. All images are released under Unsplash’s copyright policy.


stocksnap website free stock images

Stocksnap has hundreds of new high-quality free stock images added to their library every week. They have stock images to fit just about any occasion you can think of. From website building to brochure making, they having everything you need. You can find any image you need by typing in tag words, and you’ll be presented with hundreds of images that will be perfect for you. All images are free for you to use! 


pexels user interface free stock images

Pexels has one of the most beautiful stock images website interfaces I’ve ever seen. Pexels provides tons of high-quality stock images that are free for you to use under their license. With hundreds of thousands of beautiful free images of you to choose from, surely you’ll find what you need here. 


reshot free stock images website

Reshot. Uniquely free photos. Handpicked, non-stocky images. Yours to use as you wish”. That’s a pretty self-explanatory and sweet tagline. They work hand-in-hand with amazing professional photographers and give them a great place to display their work and be discovered. Find amazing free stock images on Reshot!


pixa website free stock photos and images

Pixabay has loads of free photos, but not only. They also have art illustrations and vectors. All images, art illustrations vectors, etc are released under Creative Commons CC0.

Life of Pix

life of pix free high quality images stock

Next up, we have Life of Pix. Free high-resolution photography for everyone. Besides having loads of amazing photos to choose from, they also feature a new photographer of the week. Find new photographers whose work you love every week and in turn, have tons of stock photos to choose from! 


food photography free stock images foodies website

Foodiesfeed is for the foodie at heart. Which gorgeous, appetizing stock images that look so delicious that you can almost smell them just by looking at them. If you have a food blog or just need some inspiration, check out this awesome stock image site. 


gratisography website free unique images

Gratisography is for the non-mainstream person. If you’re looking for the complete opposite of the classic boring stock photo, this website is for you. You truly won’t find photos like these anywhere else.


free stock images foca website

FOCA is a great stock website if you’re looking for a little more than just some stock images. They have everything from free photos to videos and templates! 


kaboompics website free stock images for blogs

Kaboompics is so aesthetically pleasing, it hurts. The amazing blog pictures are everything. According to their about page, Kaboompics is one of the most popular sources of free images for lifestyle, interior design and specialized bloggers in the world. 

Free Vectors 

Creating your own vectors can take up so much of your precious time, and that’s why finding perfect vector art or vector icons can be a major time-saver, but finding them for free is like finding treasure. That’s why I picked out my 10 favorite free vector websites. Check ‘em out.


vexels website vectors free

Vexels has great free vectors for you to use for personal and commercial use. What I really like about their vectors is that many of them are editable. You can get everything from icons to backgrounds and designs that are ready for print. Give them a try!

Vector Stock

free vector stock website

Vector stock has over 300,000 vectors for you to choose from. With such a wide variety of vectors, surely you’ll find something that’ll suit your project and save you loads of time. 

The Noun Project

the noun project website free vectors

The Noun Project can be summed up in icons, icons, icons! They have over 2 million royalty-free vector icons for you to use. And what’s better? You can edit them. That is insane, people. Don’t sleep on the noun-project. They have all those quality things you’re looking for.

Vector 4 Free

vectors 4 free website free vectors

Vector 4 Free has vector art for everyone. Their goal is to share vector art created by professional designers with everyone. They have all sorts of formats, such as .ai format, but also .eps, .pdf, .svg, and even .cdr. All of their vectors are free for personal use, but for commercial use, you have to check each artist’s terms of use, as they all differ. 


Freepik free vector interface

Freepik has over 708,000 free vectors for you to use for personal use and also for commercial use. The styles vary as far as feminine and elegant-looking invitations to vectors that are perfect for backend technology promotion. You’ll find every style you could need here, and you can download everything in .Ai and .EPS formats.

Free Vector

free_vector interface

Free Vector is full of fun and colorful cartoonish vectors. They are basically a world full of free vector art that is simply at your fingertips. Type in your keywords in the search bar to find vectors that suit your style, or scroll to the end of the page and find tons of categories to browse through.


vecteezy free vectors graphic design

Vecteezy has thousands of gorgeous vector art for you to use. Everything is copyright free, so you never have to worry about that. There are tons of free vectors for you to use, or you can upgrade your account to a pro account and have access to everything at your fingertips. 

Flat Icon

free vector website

Flat Icon is the largest database of free icons that are available in PNG, SVG, EPS, PSD, and BASE 64 formats to date! With a free account, you can access thousands of free icons, or you can upgrade your account and get millions of icons for free. 


png tree website free vectors

Pngtree has wonderful vectors for you to choose from, and with a free account, you have access to 2 daily downloads. Get royalty-free PNG images, vectors, backgrounds, templates, and text effects from Pngtree. 

Free Mockups 

Showing real-life visuals of your work to your client is a vital selling point, and that’s one of the huge reasons that mockups are so crucially important. Here are 10 free amazing mockup websites for you to use for your next project.


placeit free mock up platform

Placeit is a site where you can visualize all of your designs on products within seconds. Not only can you just upload your images, but you can also make designs on the platform, and create videos. Create your own design, or try out one of their 32,938 smart templates! 

Smart Mockups

free mockups website

Smart Mockups is the fastest web-based mockup tool out there right now. It’s user-friendly in the manner that advanced designers and beginners alike can use and understand their product. You can use a free account and create 200 mockups and use basic features, or you can upgrade your account and have access to all mockups and features. 


mockuuups website free mockups

Mockuuups will generate tour product mockups in literally a second. The tool is easy to use, as it is drag-and-drop based. Download the app to your computer to start using. You can use a free account and still have access to lots of features and mockups, or you can upgrade your account to have access to everything! 


mckups mockups website free app

Mckups has a beautiful, minimalist interface and beautiful, free mockups for you to use. The mockups are hand-crafted by professional designers and are just waiting for you to use them. 

The Mockup Club

the mock up club website free mockups

The Mockup Club is absolutely free and that might just be my favorite part. It’s a one-stop shop with loads of free mockups for you to use to showcase your lovely designs. 

Psd Repo

free psd mock up website

Psd Repo has every mockup imaginable. From key-chains to shorts, to t-shirts, to protein powder packaging, I think I can safely say they have it all. The mockups are made by talented designers who want to share their work with you for free. Download your favorite mockup as a PSD file and get to designing! 

Mockups Design

mockups design interface free mockup

Mockups Design is an easy-to-use website where designers can find professional mockups for free to use in their next design project. From DVDs and CD to letterheads and brochures. They have lots to choose from.  

Good Mockups

good mock ups website free mock ups

Good Mockups can be summed up about something like this: High-quality, hand-picked, premium mockups for all to use. They strive to have mockups to fit everyone and every design. With an entire list for you to go through, I believe that they are truly well worth your time. 

Mr. Mockup

mr mockups website free mockups

Last but not least, we have Mr. Mockup. They have a team of professional and creative designers working to mockups for everyone. With a vast experience in designing just about anything, you can count on them to find beautiful mockups for your next design project.

Resource: – best way to make a custom web font

Like it says on the intro “Custom built and crisp icon fonts, done right”

Why IcoMoon? / /

Build Custom Fonts

Using the IcoMoon App, you can build your own custom fonts that only contain the icons that you need.

Pixel Perfect Results

Unlike similar services, the IcoMoon app takes grid sizes of icons into account and generates crisp, pixel perfect results. With a proper alignment, the font size you set would directly translate to the size of the icons.

Free Icons, Free App

The IcoMoon app is free. You don’t need to pay anything or give back any credit for using it. IcoMoon’s Library features many high quality icon sets. All of these icons are designed on a grid and they are optimized to be used with the IcoMoon app. Add any set you wish to easily browse and search its icons.

Awesome Iconography Tool

The IcoMoon app is an advanced iconography tool. It lets you sort your icons, manage your icon collections, or make your icons searchable by adding tags to them. In addition to fonts, you can generate PNGs, SVGs and CSS sprites in any size and color you wish.

Import Your Own Vectors

In the IcoMoon app, you can import your own vectors (SVG images or SVG fonts). Importing icons happens locally, in your browser. Your vectors won’t get uploaded to our servers when you import them. Some basic editing options such as moving, mirroring and rotating are available too.

Works Offline

Once loaded in your browser, the IcoMoon app works offline. When you import an icon or generate a font, everything happens locally, in your own browser. Your icons/fonts won’t be uploaded to our servers. You can even load the IcoMoon app when you have no connection if you install it from the Chrome Web Store.

Multiple Ligatures Per Glyph

Instead of assigning single characters to your glyphs, you could assign different tags to them (ligatures). This feature is especially useful for fallbacks or desktop usage of the fonts. Learn More…

Collection of Free Page-Loading Effects (Tiny User-Friendly Animations)

The golden rule of creating great web-based projects that provide online audiences with good user experiences is to not let them wait. It seems like a really simple task, however it just sounds so. Completely upload your content-intensive website that is populated with high-quality, heavy multimedia data in the blink of an eye is simply impossible due to imperfections inherent to modern technologies. All that remains to do is find a way of forcing people to stay while they are waiting. And making use of page-loading effects is an optimal solution here.

Spinners, loading bars, basic counters can do the job perfectly well. They give a notion that something happens in a pleasant, entertaining and enticing manner. With just a bit of imagination, you can transform a plain loading indicator into a real masterpiece that will amuse users by diverting their attention from idle process as well as enrich your website design aesthetics.

Page-loading effects are not just whimsy; they are a must-have for any complex, content-heavy or dynamic project. If your project falls into one of these categories then you should definitely take a look at our varied and fresh collection of free page-loading effects; we hope you will definitely find a perfect match for your website here.

Free Page-Loading Effects

Inspiration for Article Intro Effects

Inspiration for Article Intro Effects

The team speculates about various intro animations that should accompany page appearance thereby enriching user experience. The collection includes:

  • Pushing techniques
  • Fade out effect
  • Slice effect
  • Grid-based solutions
  • Imitation of an effect seen on Jam3

You will be able to freely grab a source file; however it can only serve as a starting point.

Page Loading Effects

Page Loading Effects

The team gives you hints how to transform a boring loading time into an enjoyable and visually-appealing pastime by equipping your website with some fantastic SVG animations based on Snap.svg. The article covers a bunch of different effects, namely:

  • Lazy stretching
  • Windscreen wiper
  • Tunnel vision
  • Basic effects such as tilt, wave, and curtain

Page Preloading Effect

Page Preloading Effect

Unlike the previous two examples, this team has concentrated on producing only one solution that should brighten up an appearance of the page with a help of a simple, small yet fancy animation based on an effective collaboration of CSS3 3D transforms and SVGs. You will be also able to insert your logo into it thereby showing off your trademark from the first second.

Creative Loading Effects

Creative Loading Effects

The project is created in order to provide developers with a sheer inspiration, yet, you can still freely grab several valid code snippets that will enhance your page with some alluring loading effects. The range covers 13 solutions including popular YouTube loading bar, standard expanding box, circular indicators and others.

Display Animation While Page Loading Using jQuery

Display Animation While Page Loading Using jQuery

The tutorial regards a really simple but fundamental solution of how to properly implement a loading indicator in order to engage users. The author offers two ways of resolving this problem:

  • Using loading image in CSS and a HTML div element with jQuery bind function
  • Using loading image inline in HTML with jQuery load function

jQuery Full Page Loading Animation

jQuery Full Page Loading Animation

The developer shows a simple and easy-to-reproduce solution for creating a full page loading animation. You can modify it according to your wishes without hustle and bustle thanks to a really clean code and intuitive technique.

CSS Load

CSS Load

This is a small yet really useful online generator that will assist you with creating visually-appealing preloaders based on new CSS3 features. Thanks to several basic customization options you will be able to:

  • Choose an animation template
  • Set colors
  • Set size
  • Specify animation speed
  • Turn on reverse animation

Page Loading Effects

Page Loading Effects

Rik Roots gives you an opportunity to not only contemplate some interesting and original loading effects but also lets you use this piece of code. Here you will find enticing animations that include:

  • Fog
  • Rolling rectangle
  • Spinning star
  • “Chop from top” technique
  • “Clear with circles” approach



This is another helpful and feature-rich online generator that allows building your own preloading effect. The customization choices will surprise even a sophisticated user; the service offers plenty of categories, where you can find pre-made elements starting from standard loading bars and ending up with zodiac signs. Each category includes its own range of options, opening to you almost endless possibilities.

Display Loading Animation While an External Page is Loading in a RadPane

Display a loading animation while an external page is loading in a RadPane

Those who adore ASP.Net Ajax will definitely recognize the real worth of this short yet useful tutorial that features a basic technique of creating and displaying a loading animation. It is based on several steps that involve working with RadSplitter control, global variables and JavaScript functions.

The script is connected to RadPane that is used for loading external pages, so take it into account.

Loading Overlay

Loading Overlay

This is a tiny, lightweight and pretty helpful jQuery plugin that lets you both add and remove a loading overlay to a selected element. You can use it with any component you like. Available options allow:

  • Adding icons
  • Specifying text
  • Altering appearance through CSS styling

jQuery Loading Animation

jQuery Loading Animation

The author explains how to properly use jQuery in order to create a loading animation with your message. The technique is simple, the code is clean and styling is straight-forward, so you can easily adapt this code snippet to your needs as well as modify it. The solution looks good whether the user has disabled JavaScript or not.

Page Loading

Page Loading

Want to load your homepage gradually line by line or simply make the presentation of your images interesting? Then leverage this effect.

The animation was created by Pedro Ivo Hudson, who has implemented a CSS transitional changing effect based on Bezier Curve that allows controlling the timing function in order to set the required speed.

YouTube Page Load Effect

YouTube Page Load Effect

The developer has quite successfully imitated an elegant page load effect seen on YouTube. Though the solution is based on a quite complex linear interpolation function, yet it works like a Swiss watch: i.e., reliably and accurately. The code snippet is really clean and apprehensible, so even if you are only a newbie you will be able to put it to work.

Animation on “load”

Animation on "load"

The aim of this small project is demonstrate how to correctly initiate an animation when a page loads. Of course, you can add text, set a background color and change timing and duration.

CSS3 Spin Loader

CSS3 Spin Loader

Ricardo Zanutta created a subtle vibrant flat style CSS3 spin loader that will look wonderful on any web page whether it has dark or light coloring. The snippet includes a function for displaying a preload page as well.

Here, almost everything is done with a help of CSS, so you will be able to set your own parameters through the styles file.



Pace is a tiny, intelligent plugin that monitors various elements of your page including Ajax requests and event loop lag in order to decide the progress and switch on a nicely animated progress bar just in time.

It is easy to install with a help of Eager that sorts out all issues. As for modification, the development team has blessed you with dozens of neatly-crafted flat style themes.

Full CSS Ball Loader

Full CSS Ball Loader

This bouncing vibrant ball loader is well-suited for projects with an entertaining atmosphere. The effect is accomplished only with a help of CSS3, so it won’t work correctly on old browsers and on those that do not support new, advanced features.