DEV Community

Cover image for Free illustrations resources for the web - Make your next project cooler!😎

Free illustrations resources for the web - Make your next project cooler!😎

Kedar Kodgire on January 02, 2020

Illustrations - whats that? It's a versatile means of expressing a message which helps to provide a visual representation or example of ...
Collapse
 
shaijut profile image
Shaiju T

Good post :) , First Save forest design was good. Below are some more to check

  1. stackbit.com/
  2. jamstack.org/examples/
  3. gatsbyjs.org/starters/?v=2
  4. portfolio.smakosh.com/

Bring more ideas...

Collapse
 
andrewsmith289 profile image
Andrew Smith • Edited

Illustrations make the web a beautiful place, but remember for some they can mean the difference between a page that is usable or not.

In some parts of the world bandwidth is still very expensive, and without proper consideration some viewers can be excluded by large page sizes!

Much like we must consider people with accessibility concerns we must consider those who aren't able to enjoy the internet as freely as others.

Collapse
 
samelawrence profile image
Sam E. Lawrence

This is a great reminder. I'm hoping to continue seeing accessibility taken seriously in the 2020s as regulation and community standards continue to push the web to accommodate everyone.

Collapse
 
shtefcs profile image
Stefan Smiljkovic

There is post on Vanila Community about top illustration resources community.vanila.io/uiux/resources...

Be check to check the comments as well.

Collapse
 
shaijut profile image
Shaiju T

Hi, I have seen lot of website design layout with rounded div corners recently like below.

dribbble.com/shots/8509427-Smart-H...
dribbble.com/shots/13819210-Task-S...
dribbble.com/shots/6914699-Smart-H...
dribbble.com/shots/14707518-Web-UI

Is it rounded corners reveal design or Neumorphism or card ui design ?

What is the name of the trend ?

Collapse
 
dgihost profile image
Gurpinder Singh

Rounded corners play an essential role in design aesthetics, especially in UI/UX design, particularly in the context of Neumorphism and card UI design. Here's how rounded corners contribute to these design styles:

Neumorphism:
Neumorphism is a design trend that emerged as a softer, more realistic version of skeuomorphism. It involves creating designs that resemble physical objects with soft shadows and highlights to give a sense of depth. Rounded corners play a crucial role in Neumorphism by enhancing the tactile and realistic feel of the elements. The softness of rounded corners mimics real-world objects and makes the user interface elements appear more approachable, friendly, and visually appealing.

Card UI Design:
Cards are a fundamental component of modern UI design, especially in responsive and mobile-friendly interfaces. Cards are typically rectangular or square-shaped containers that hold specific content like images, text, or buttons. Rounded corners in card UI design help soften the edges, making the cards visually pleasing and more accessible. They also contribute to a sense of continuity and flow, making it easier for users to focus on the content within the card without distractions from sharp corners.

Revealing Design Elements:
Rounded corners in UI design can also serve the purpose of directing attention and guiding the user's focus. By rounding corners selectively, designers can emphasize certain elements or create a hierarchy within the interface. For instance, buttons with rounded corners might draw more attention compared to other elements with sharper edges. Rounded corners can also create a sense of unity and coherence within the design, contributing to a more harmonious overall visual experience.

In summary, rounded corners play a significant role in enhancing the visual appeal, usability, and overall user experience in various design styles like Neumorphism and card-based UI design. They add a touch of elegance, realism, and user-friendly aesthetics to digital interfaces, contributing to a more engaging and inviting user experience.

Collapse
 
kedark profile image
Kedar Kodgire

This is just one of the way for designers to show there design. But while preparing the real website there wont be any rounded corners.

Collapse
 
seniru profile image
Seniru Pasan Indira

Very useful stuff! Bookmarked !!

Collapse
 
kedark profile image
Kedar Kodgire

Glad you found it useful!!

Collapse
 
michellescrux profile image
michellescrux

This is so cool! I never knew those resources exist! Thank you so much for this! :)

Collapse
 
kedark profile image
Kedar Kodgire

Glad you liked this! Recently wrote a part two of this which includes more illustrations resources and free quality patterns too. You can check these out.

Collapse
 
michellescrux profile image
michellescrux

Amazing! I'm interested on Part 2 and thanks again for putting the time and effort for this! :)

Collapse
 
gilbishkosma profile image
Gilbish

I created a site called IllustrationHunt. There you can find more free illustration resources
link: illustrationhunt.com

Collapse
 
dgihost profile image
Gurpinder Singh

That sounds like a great initiative! Offering free illustration resources can be incredibly valuable to designers, artists, and anyone in need of visuals for their projects. Creating a site like IllustrationHunt can provide a centralized platform for people to discover and access a variety of illustrations.

To make your site successful, consider these tips:

Content Curation: Ensure you curate high-quality illustrations from various artists. Organize them into categories or tags to make navigation easier for users.

User-Friendly Interface: Design an intuitive and easy-to-navigate website layout. Users should find it simple to search, browse, and download illustrations.

Legal Compliance: Verify that the illustrations are offered with the appropriate licenses or permissions, especially if they're labeled as "free." Clear licensing information will prevent any legal issues.

Community Engagement: Encourage users to engage with the platform. Allow them to contribute, comment, and possibly submit their illustrations, fostering a sense of community.

Promotion and SEO: Implement strategies to boost your site's visibility. This includes using relevant keywords, promoting on social media, collaborating with influencers, and engaging in SEO practices.

Feedback and Improvement: Gather feedback from users to understand what they like and dislike about the site. Use this information to improve the user experience continually.

Mobile Responsiveness: Ensure your site is optimized for mobile devices since a significant portion of users accesses the internet through smartphones and tablets.

Remember, building a user-friendly platform and continually adding valuable content will contribute to the success and popularity of IllustrationHunt. Good luck with your project!

Collapse
 
adabru profile image
Adam Brunnmeier

Free & royalty free Photos, Illustrations, Vectors: pixabay.com

Collapse
 
shawnrubel profile image
Shawn Rubel

What? No love for Vecteezy.com? 😅

Collapse
 
dgihost profile image
Gurpinder Singh

Vecteezy.com is a platform that offers a wide range of vector graphics, illustrations, and other design resources. Here are some of the advantages and disadvantages associated with using Vecteezy.com:

Advantages:

Vast Collection of Vector Graphics: Vecteezy.com offers a large library of vector graphics, illustrations, and design elements that can be used for various creative projects.

Free Resources: Vecteezy provides a significant portion of its resources for free, which is advantageous for individuals or small businesses with budget constraints.

Premium Subscription Option: They also offer a premium subscription that grants access to more exclusive content, higher-quality files, and additional features, which can be valuable for professional designers.

User-Friendly Interface: The website is designed to be user-friendly, making it easy to search for specific graphics or browse through different categories.

Customization Options: Users can often customize or edit the vectors to suit their specific needs using vector editing software like Adobe Illustrator.

Disadvantages:

Limited Free Options: While Vecteezy offers free resources, the selection might be limited compared to the premium content, which may prompt users to opt for a paid subscription.

Copyright and Licensing: Users need to be cautious about the licensing terms associated with each graphic, as not all vectors may be free for commercial use. Some resources might require attribution or have specific usage restrictions.

Quality Variance: The quality of free vectors might vary, and some may not be suitable for high-resolution or professional projects. Premium content often offers better quality, but it comes at a cost.

**Dependency on Internet Connection: **Vecteezy operates as an online platform, which means users need a stable internet connection to access and download the resources.

Competition and Overuse: Since many users have access to the same pool of resources, there's a chance that some graphics might be commonly used across different projects, reducing their uniqueness.

Before using any resource from Vecteezy or similar platforms, it's crucial to carefully read and understand the licensing terms, especially if you plan to use the graphics for commercial purposes. Always ensure that you comply with the licensing requirements to avoid any legal issues. Additionally, for professional projects, consider investing in premium content or creating custom designs to maintain uniqueness and quality.

Collapse
 
mauro_codes profile image
Mauro Garcia

Thanks for this post Kedar! I was looking for resources for my upcoming landing page and these sites are exactly what I needed.

Collapse
 
kedark profile image
Kedar Kodgire

My pleasure...
And good luck for your upcoming landing page.

Collapse
 
seanmclem profile image
Seanmclem

Awesome job. This is the kind of stuff I have trouble finding when replicating dribbble designs for fun

Collapse
 
kedark profile image
Kedar Kodgire

Thanks.

Collapse
 
tranghh07 profile image
Trang Hoang (Tiana)

Thank you for sharing.
I've also rounded up some resources in this post:
bootcamp.uxdesign.cc/top-10-websit...

Some of the sites mentioned:
Highlights
Isometric
illustAC
Scale

You might want to read and find out more.

Collapse
 
blushdesign profile image
Gaby

You should checkout Blush illustrations blush.design/collections :)

Collapse
 
kedark profile image
Kedar Kodgire

Thanks for sharing!

Collapse
 
moritzrupp profile image
Moritz Rupp

Thanks for sharing those resources with us!
They are very helpful.

Collapse
 
thisnugroho profile image
Dede Nugroho

Thank you for this nice post :) , i've been searching for those vector

Collapse
 
kedark profile image
Kedar Kodgire

Glad to see that it was helpful for you😃

Collapse
 
codeperfectplus profile image
Deepak Raj

Thanks for sharing.

Collapse
 
scriptify profile image
Maximilian Torggler

isometric.online/ is also an awesome resource!

Collapse
 
martinoffiah profile image
martinoffiah

Thanks for sharing, this is very helpful

Collapse
 
andregtz profile image
André Gtz

thank you so much! I've been searching for ages where to find these and never found them.

Collapse
 
michaelcharles profile image
Michael Charles Aubrey

What a great list of resources! I knew about unDraw, but the rest are new to me. At first I was bookmarking them one by one, but then I realized the whole article deserved a bookmark!

Collapse
 
kedark profile image
Kedar Kodgire

Cool!
Hope these will be useful for your Upcoming projects.

Collapse
 
engagepulse1 profile image
SUD

Thanks for sharing @kedar . We are using freepik but this is so good to expand the options.

Collapse
 
kedark profile image
Kedar Kodgire

You're welcome!

Collapse
 
abdullahsajjad026 profile image
Abdullah Sajjad

You are surely gonna bookmark it.
resourcesmark.vercel.app/

Collapse
 
bkmacdaddy profile image
Brian McDaniel

Thanks for this list! Have you checked out design.dev? They have free design resources, including illustrations.

Collapse
 
marthaelax profile image
Angeiͥͥͥͥͥͥͥͥͥͥͥͥͥͥ

Love unDraw illustration :D

Collapse
 
jtojnar profile image
Jan Tojnar

RIP Openclipart and also Bassel Safadi.