Best Web Design Resources 2024

Summary

This video script offers a comprehensive list of web design resources for aspiring designers and agencies. It covers AI-driven web design tools like Dora AI for generating websites, Reloom for site generation in Figma and Webflow, and Tilebit for cheaper components. The script also includes inspiration sites such as Lambok and Godly, which showcase various web designs and tech SaaS templates. Additional resources include color palettes, typography tools, and design systems, all aimed at enhancing the design process and providing endless inspiration for creating visually appealing and functional websites.

Takeaways

• 🌌 The script introduces AI-powered web design tools that can generate websites from simple prompts, offering a streamlined process for designers.
• 🔧 It highlights the backend dashboard's capability to create and edit website designs, showcasing the ease of customization and layout management.
• 🎨 The speaker emphasizes the importance of using design tools like Reloom and Tilebit for quick generation and customization of web designs.
• 📈 The video script mentions the value of wireframing in web design, with the ability to quickly copy and paste wireframes into design tools like Figma or Webflow.
• 💡 Inspiration is a key theme, with resources like Lambok, Godly, and Mobin recommended for finding design inspiration across various categories and styles.
• 🎨 For color schemes and gradients, the script suggests using resources like Mesh Gradients and Colors.eva.design for easy color palette creation and adjustment.
• 🔍 Accessibility is addressed with tools like Contrast Checker, which helps ensure that text and background colors have sufficient contrast for readability.
• 📚 The importance of typography in web design is underscored with resources like Type Scale and Font Ninja, which help in creating a cohesive design system.
• 📱 Responsive design is considered with the mention of resources that allow for testing and optimization of website elements on various devices and screen sizes.
• 🛠️ The script also touches on the use of Chrome extensions and online tools for identifying and implementing fonts and icons from existing websites.
• 📧 For email design, Email Love is highlighted as a resource for email design inspiration and trends, catering to different types of businesses and industries.

Q & A

What is Dora AI and what can it do?

Dora AI is a tool that can create websites with a simple prompt, generating designs that are fully editable with text, images, and layout sections.

What is ReLoom and how does it assist in web design?

ReLoom is a tool that helps generate site designs for Figma and Webflow, allowing users to create sections like hero sections, feature sections, and more, which can then be customized.

How does Tilebit compare to ReLoom?

Tilebit is a cheaper alternative to ReLoom, offering a limited number of components that can be easily integrated into Webflow for web design.

What is Flowbase and what does it offer?

Flowbase is a component library for Webflow, Figma, and Framer, providing both free and premium components that users can copy and edit for their designs.

What is the purpose of Land-book and how can it be used?

Land-book is a website for web and landing page inspiration, offering a variety of categories and designs that users can view, bookmark, and draw inspiration from.

How can Font Ninja help web designers?

Font Ninja is a Chrome extension that allows designers to identify and inspect fonts used on any website, providing details such as font name, size, color, and line height.

What features does Magnif AI offer for image enhancement?

Magnif AI can upscale images, improve HDR, adjust creativity and resemblance, and optimize for different types of images like portraits, illustrations, and 3D renders.

How does the Contrast Checker tool aid in web design?

Contrast Checker helps designers ensure good color contrast for accessibility, allowing them to test different color combinations and see if they pass accessibility standards.

What is Type Scale and how is it used?

Type Scale is a tool for creating a consistent design system for fonts. It allows users to set scales, adjust line height, letter spacing, and view how fonts look on different devices.

What is the function of the Colors.Eva.Design tool?

Colors.Eva.Design allows users to generate tints and shades for a given color, providing color codes that can be copied and used directly in design tools like Figma.

What resources does Drawkit provide for web designers?

Drawkit offers a variety of 2D and 3D illustrations, icons, animations, and mockups that designers can use in their projects, with both free and paid options available.

What can users do with Blush Design?

Blush Design provides collections of free and paid illustrations that can be downloaded and used in web design projects, offering a wide range of styles and themes.

Outlines

00:00

🌌 Web Design Automation and Inspiration

The speaker discusses the use of AI in web design, mentioning Dora, an AI that can generate websites from simple prompts. They demonstrate the process of creating a website for an observatory with photos of galaxies and space, highlighting the ease of editing and customization. The speaker also mentions Reloom, a tool for generating sites for Figma and Webflow, and compares it to other alternatives like Tilebit. They emphasize the benefits of these tools for quickly creating and customizing websites.

05:02

🎨 Web Design Inspiration and Component Libraries

This paragraph focuses on various resources for web design inspiration and component libraries. The speaker mentions Lambok for web and landing page inspiration, Godly.website for tech and SaaS design inspiration, and mob.com for app screen designs. They also discuss Navbar Gallery for navigation bar designs and Storytale for 3D assets and illustrations. The importance of using these resources for finding inspiration and improving design workflow is highlighted.

10:04

🛠 Tools for Design Optimization and Accessibility

The speaker introduces tools for optimizing and checking the accessibility of web designs. They mention Contrast Checker for ensuring sufficient color contrast and Type Scale for building a design system for fonts. Additionally, Colors.eva.design is highlighted for its functionality in color palette creation and manipulation. Each tool is demonstrated with its specific use case, emphasizing their role in enhancing the design process.

15:07

📚 Curating Design Resources and Inspiration

In the final paragraph, the speaker shares a collection of resources for web designers. They discuss Footer Design for creating stylish footers, Magnific AI for image upscaling, Squash for image compression, and Start Websites for inspiration. They also mention Interface Iname for game UI design, Dark Mode Design for dark-themed websites, and various tools for finding fonts and icons. The paragraph concludes with resources for email design and a call to action for further learning and subscription.

Keywords

💡Web Design

Web design refers to the process of creating, planning, and building a collection of electronic files that determine the layout, colors, text styles, structure, graphics, images, and use of user interaction to deliver pages via the World Wide Web. In the video's context, web design is the central theme, with the speaker discussing various resources and tools that can assist in creating and editing websites, such as using AI for generating designs and platforms like Figma and Webflow for editing and layout.

💡AI

AI, or Artificial Intelligence, is the simulation of human intelligence in machines that are programmed to think like humans and mimic their actions. In the video, AI is utilized to generate website designs based on simple prompts, showcasing how AI can streamline the web design process by creating initial drafts for designers to refine and customize.

💡Figma

Figma is a cloud-based interface design tool and digital design platform within a browser, primarily used for user interface design, user experience design, and website design. The script mentions Figma as a platform where designs can be edited and customized, and as a tool that integrates with other services like Reloom for generating wireframes and designs.

💡Webflow

Webflow is a web design and development tool that allows users to design, build, and launch responsive websites visually, without writing code. The video script references Webflow as a platform where generated designs can be edited and customized, and where components from resources like Flowbase can be implemented.

💡Reloom

Reloom is a tool mentioned in the script that allows users to generate sites for Figma and Webflow. It is used to create wireframes and designs quickly, which can then be copied and pasted into Figma or Webflow for further development, showcasing the efficiency of modern design tools in web design workflows.

💡Wireframe

A wireframe in web design is a visual guide that represents the basic structure of a website or an app. It's a blueprint that outlines where content and features will go. The script describes how Reloom can automatically generate wireframes, which can be easily copied and used in Figma or Webflow, emphasizing the tool's utility in the preliminary stages of web design.

💡Tilebit

Tilebit is an alternative to Reloom mentioned in the video, which is a platform for creating website components. It is described as being more affordable and offering a limited but great selection of components that can be directly used in Webflow, highlighting the variety of tools available to web designers for building and customizing websites.

💡Flowbase

Flowbase is described as a component library in the script, which is useful for web design within Webflow, Figma, and Framer. It provides free and premium components that can be copied and pasted directly into design projects, streamlining the process of creating consistent and functional design elements.

💡Lambbook

Lambbook is a website for web and landing page inspiration, as mentioned in the script. It allows users to browse through various categories of websites for design inspiration, such as portfolios or pricing pages. It provides a way for designers to explore different design styles and layouts, which can be crucial for sparking creativity and finding design solutions.

💡Godly.websites

Godly.websites is a resource for finding inspiration from tech and SaaS websites, as described in the video. Users can filter by categories like Web 3 or AI, and view a variety of designs that can inspire their own web design projects. This tool exemplifies how designers can leverage existing successful designs to inform their own creative processes.

💡Mobin

Mobin is a platform for exploring app screens and designs from well-known brands, as mentioned in the script. It allows users to look at Android or iOS app designs and see how brands approach their app user interfaces. This resource is beneficial for designers looking to understand mobile design trends and best practices.

💡Color Inspiration

The script refers to several resources for color inspiration, such as the 'colors.eva.design' website, which provides color codes and variations that can be used in web design. These resources help designers choose color schemes that are aesthetically pleasing and consistent with branding, which is a critical aspect of web design.

💡Contrast Checker

Contrast Checker is a tool mentioned in the video that helps designers ensure that the contrast in their web designs is accessible. It allows users to test different color combinations to see if they meet accessibility standards, which is important for creating inclusive web experiences.

💡Type Scale

Type Scale, as discussed in the script, refers to the system of font sizes used in a design to create hierarchy and consistency. The 'typescale.com' website allows designers to experiment with different font scales and see how they look on various devices, which is crucial for establishing a clear and readable design system.

💡Footer Design

Footer Design is a resource mentioned in the video that specializes in providing inspiration for website footers. Footers are an important part of web design as they often contain important information and navigation links. The website allows users to filter by different styles, such as 'topographic' or 'illustrative', to find footer designs that match their project's aesthetic.

💡Magnific AI

Magnific AI is a tool for upscaling images, as described in the script. It allows users to improve the quality of images, making them sharper and more detailed, without losing their original resolution. This is particularly useful for web designers who need high-quality images for their projects but may be working with limited resources or bandwidth.

💡Squash

Squash is a tool for optimizing images, as mentioned in the video. It helps reduce the file size of images while maintaining their quality, which is essential for web design as it can improve website load times and overall performance. The script provides an example of how Squash can significantly reduce the size of an image, making it a valuable resource for web designers.

💡Font Ninja

Font Ninja is a Chrome extension highlighted in the script that identifies and provides information about the fonts used on any website. It can be particularly useful for web designers who are looking for inspiration or need to replicate a specific font style in their own designs. The tool offers insights into the typeface, size, color, and other attributes of the fonts.

💡Icon Scout

Icon Scout is a resource for finding icons, animations, illustrations, and 3D assets, as mentioned in the video. It offers a wide variety of design elements that can be incorporated into web projects. The platform includes both free and paid assets, providing designers with flexibility and options to enhance their designs.

💡Email Design

Email design is a specific area of web design that focuses on creating visually appealing and effective emails for marketing and communication purposes. The script refers to 'emaillove.com' as a resource for email design inspiration, where designers can find trends and examples of well-structured and designed emails from various companies.

Highlights

AI can create websites from simple prompts, generating designs for specific themes like an observatory.

The backend dashboard allows for easy editing of generated web designs, including text and images.

Upgrades are available to edit and customize the colors and layout of the generated web designs.

Reloom is praised for its ability to generate sites for Figma and Webflow, with a fast sitemap generation feature.

Tilebit offers a more affordable alternative to Reloom with a limited but useful component library.

Flowbase provides a component library for Webflow, Figma, and Framer, with free options available.

Lamb is a favorite site for web and landing page inspiration, offering categorized examples.

Godly.website offers a vast collection of tech and SaaS website designs for inspiration.

Dark designs are showcased on dark.does, perfect for those interested in darker color schemes.

Mobin is a popular resource for app screen designs, offering a wide range of brand examples.

Mesh gradients offers free downloads of various gradient packs for web design.

Inspo Vault is another website for design inspiration, featuring a wide array of websites and styles.

Navbar Gallery is a specialized resource for navbar designs, offering various styles and categories.

Storytale.io is a great source for free 3D assets and illustrations for web design.

Contrast Checker is a useful tool for ensuring good contrast in web design for accessibility.

Type Scale helps in building a design system for fonts, offering various scale options.

Colors.eva.design provides a comprehensive color palette generator with export options.

Footer.design is a curated collection of beautiful footer designs for websites.

Magnif AI is a tool for upscaling images, improving quality without losing details.

Squash.app is a quick tool for reducing image size while maintaining quality, useful for web optimization.

Start websites.com offers a collection of beautiful and functional website designs for inspiration.

Interface iname.com is a unique resource for in-game UI designs, useful for game-related web projects.

Dark mode design.com focuses on dark-style websites, offering endless inspiration for dark-themed designs.

Font Ninja is a Chrome extension that identifies and provides information on fonts used on any website.

Fonts in the wild showcases fonts from various websites, offering direct links to font sites.

Hero icons.com provides free, handcrafted SVG icons by Tailwind CSS for web design.

Draw kit.com offers a variety of high-quality illustrative assets, including 2D and 3D icons.

Icon scout.com is a comprehensive resource for animations, illustrations, icons, and 3D assets.

Blush.design features a collection of free and paid illustrations that can be used in web design.

Email love.com is a curated collection of email designs, offering inspiration for email campaigns.

Transcripts

I got my top favorite web design

resources that you should bookmark if

you want to be a great web designer Dora

AI now Dora can create basically a

website with a simple prompt and it will

generate for you so let's type in

something like for an observatory that

photos

of galaxies and space so I've created my

promp it takes me to the backend

dashboard where I can generate it using

the token so I'm going to quickly

generate that I have 120 to uh credits

to start off with because it's just free

so you can see we've got a design here

let's um let's just go with the first

one I'm going to click generate boom and

there we have it once we've generated it

the page you can see it's all editable

it's got text it's got images it's

created the layout and the sections for

us which is really amazing so I can go

in here and you got to upgrade to edit

but you can see I'll be able to you know

change this change the colors you've got

layers on the side as well you can also

add data into the ba database you got

design I can add um boxes youve got

constraints so it's all very similar to

figma basically now reloom does an

amazing job at this as well I love using

reloom you can generate um sites for

figma and webflow so I can say um a

gaming company that pu um sells RPG

games

to young men type that and then I can

change the pages to one to five and

click generate sitemap we do it really

fast and it will start to generate all

the sections and I can easily um replace

the sections customize it add text

customize the headings Etc so you can

see hero section feature section uh list

benefit CTA FAQ we can start to generate

the content for these other ones as well

I can add custom sections you can see on

the right you've got Navar Footers blank

sections and what I love is if I go to

the top and click wireframe it will

start to automatically generate the

wireframe and I can literally click copy

paste it into figma using their figma

Plugin or just copy straight from this

from reloom to webflow and I'm done and

I can then I got to just add the colors

the logos and the design um but you can

see here everything is editable I can

ask AI to customize it you know you can

do a lot of different things here

another alternative to reloom is

actually tile bit it's a bit more

cheaper and they do have limited

components but at the moment they've got

some great components that you can use

and I can just pump it straight into

webflow um so you can see here for

example maybe I really love this header

I can left click on it and I can um got

the categories I can share it I can save

it which is cool and then if I want to

copy it I can copy to figma or web flow

so if I just uh yeah framea and webflow

so for example um I can copy let's say

wait let's go figma and I'll just go

into figma and paste and boom there you

go I can go into here start changing the

text you know change the color do

whatever I want to and it's just amazing

like it's just super fast to create

websites next up we've got flow Bas the

flow base is a similar one as well it's

a component Library which is great for

web flow um also figma and framar which

is great they do have some freebies as

well so if I click on components then

you what you want to do is Select say we

just click figma for now and I'll scroll

down to the free license you want to

click on free there is a PR version

obviously um but then say I want

something like this I'll click copy for

figma it will give me the code and I'm

just going to paste it right into there

and then I've got a frame of this um

nice feature section which I can edit so

another great website Plenty of

components and if you want to upgrade

you've got heaps of stuff on that next

one we've got lamb book one of my

favorite sites for web and landing page

inspiration and I love how they got

category goes at the top so if you want

to look at maybe you're working on a

portfolio I'll click on that and then it

will give me all the websites that

revolve around portfolios uh if I want

to look at maybe um pricing ones that

focus on pricing I can look at that left

click on it and I can see the design it

gives me the website on the right hand

side so I can left click on that and it

will take me to that website as you can

see there which is super cool or I can

just view the screenshot here and get

you know gives you the style categories

I can even look at the colors if I click

on the color it will show me other

websites with that similar green color

that I clicked on or whatever color you

select so this is just a great site for

inspiration um and I'm always on here

when I want to do a design uh for a

client next up we've got godly. website

now this is more Tech SAS um type of vbe

as you can see we can filter by web 3 AI

SAS um so if I click on SAS it's going

to give me all these cool ones and you

know I can left click and it's going to

show me the design if I click visit it

will take me to that website as we can

see here

and it looks beautiful this website but

it's just got heaps of different

websites this is completely free and

it's just a great tool to get

inspiration look at what other brands

are doing I can filter by like dark mode

or big background or gradient so if I

click gradient you can see we'll get

some specific designs that use gradients

as you can see here and if I click visit

it will take me straight there next we'

got dark does now if you're a fan of

dark design designs that have sort of

you know darker colors they use black

backgrounds dark Grays dark colors hot

like really um you know whole bunch of

cool really cool like modern websites um

as you can see I'll click on this one

blockchain and it'll take me to the site

like this one is pretty lit look at this

this is some craziness I got a robot and

it transforms like that's pretty dope if

I go back you can see it tells me the

category the framework and also the CMS

so this one's on webflow no code love

that also got mob.com this is another

popular one you probably already know

this one it's perfect for apps and

looking at app screens from Big um

Brands so I can look at websites I can

look at if I go on Android or iOS as

well maybe I want to look at Burger King

look left click and then if I just click

my arrow keys it will take me to the

next brand um but you can see it's an

onboarding if I want to look at more on

bodying I click on that and I can see

the whole

process and then basically that's what a

lot of designers do they just copy what

already works like why try and reinvent

the wheel just look at what other big

brands are doing and then obviously add

your Brand add your flavor to it but

mobin is just another great site for

hundreds and thousands of just sites and

Brands so you got plenty of inspiration

there next I got a color one one is mesh

gradients products. ls. Graphics mesh

gradients you can download the full pack

basically um you can get AI file or a

PNG jpeg so maybe I love this orange

gradient or this pale Chestnut I'm going

to click download and just right click

save image as and I can just download

that file just like that it'll give me a

web P file and I can use that for web

flow Chuck it in a website if I want to

uh it's really easy to download it's

free so why not try it out another

inspiration website is inspo vault.com

now you can see I'm on the website

category it's got staff pcks as well so

website it will show me the screens I

can left click on it you can see some of

the designs here I think that's really

cool you can scroll through the website

you can click view it will take me there

you can also bookmark things as well so

this is another great inspiration plenty

of amazing sites on here next we've got

navb bar. Gallery so this one's specific

to navbar bars you can also filter in

the categor so maybe I want a screen uh

sorry a search bar um maybe I like this

one we just on mobin before so you can

see the mobin version uh we got defi

from unisoft you can see how their

dropdowns look like very clean using

dark Grays with the drop shadow pretty

cool so if you're into navbars and it's

more complex sites definitely check this

out also got storytale doio now this one

is really great for illustration 3D

assets if I click on freebs in the top

left

corner it will take me to the to the

assets so I can filter you can see maybe

I want backgrounds or icons mockups or

3D if I click 3D you can see I just want

to scroll through there um you can get

the upgrade as well to the pro version

you can click on pricing I'm going to go

on illustrations as well theyve got some

scribbles which is call more organic

hand

drawn and bit of mockups as

well or if you want to click on packs

I can look at all their packs here so

it's got a nice variety here next we've

got contrast Checker now contrast

Checker is great for when you're

building website and you want to see if

the contract uh contrast is great so

what I can do is um you know I can

change the Hue it can bring up the

contrast bring down the contrast the

lightness as

well so you can see here it will tell

you if it's a pass on the large um or

normal and if it's a fail so you can see

here the text is now invisible but if I

bring it down back to dark bring the

Blackness it passes it's good to test

out um different colors so it's just

accessibility some people you know can't

see when it's bad contrast so it's just

a good way to deal with that problem and

you can change the fonts as you can see

and you can do a test here at the bottom

next we've got types scale.com if you

want to build out a nice design system

for fonts um you go on the left and you

can change the scale usually I use like

major thir minor thir um or major second

usually so you can see you can increase

it you can really do whichever one you

want depending on the brand and the

strategy and Etc I can look at the

pixels I can keep it on REM as well I

usually work with REM when I'm in

webflow but let's just say we're in

pixels you can see 61 pixels there 48

for the H3 H4 H5 H6 and it goes down to

the paragraph as well p and small so um

you can check it on how it look like on

the phone I click these little icons in

the corners um I can also just get rid

of this as well if I do this one you can

change the text as well you can change

the fonts you can change the line height

as well letter spacing

colors um you really have full control

over what it looks like I can increase

the size but that's on pro version and

it's just a good way to do this for when

a design system for a website next we've

got colors. eva. design now this one

allows me to put in a code if I click on

the color maybe I working with let's go

with like a Tilly color which is nice it

will give me all the tints so it will go

from 100 to 900 and it gives me the code

when I put my mouse over it and if I

left click it will copy it and then I

can go to figma and say I want to change

the color here boom I can easily change

the color of that font and you can do it

for all of these so maybe we you know

whatever brand you're working on

whatever and then what you can do you

can actually lock these

um if you get the updated version you

can lock these and then you can just

save these pallets which is super cool I

can also click on the dark mode and will

change to that and then I can actually

export so if I go to export I can export

as a

JPEG and then I can download that and

then I'll just drop it into figma and I

can copy the colors next one one of my

favorite ones is the footer. design so

this is specifically for beautiful

looking Footers for your websites you

can filter by topographic illustrative

grid so if I click on that it'll take me

to all the websites that have a grid

style footer for example if I click on

this one this looks really Co I like the

lines there you can click view website

it will take you there and it shows you

the Styles and it'll give you some other

um similar sites to that as well we go

to animated click on

that and let's say VI website I'll just

scroll

down that's a cool photo with the arrow

there I think that's really dopee so for

another great design as well and it's

really easy to navigate we've got magnif

magnific AI now it can upscale um images

so I'm going to quickly upload a simple

image let me double click this one and

what I can do I can do like if you go to

four times you have to upgrade but let's

just uh keep it two times and you can

write a prompt and um and you have

limited credits just keep in mind so

I've got the credit there now I'm go

down and you know you can increase HDR

the

creativity um resemblance you bring that

down you got uh practicality as well so

you can read through that I'll just use

uh automatic you can also click optimize

for you can leave it on standard you can

do portraits illustrations video game

assets 3D renders so if you want to do

something specific then click on one of

those categories you can see it's

upscaled it it's way better quality as

you can see this is an image I generated

on Adobe Firefly so it's just made it a

bit more sharper made it a bit better

with shapes um you can do this with like

images you can do this with anything

really and it'll upscale it squash.

apppp now this is a great quick website

it's similar to Tiny jpeg so tiny jpeg

can um do multiple images as well but if

you've got you know something that's

really big um then squash is like for

quick images I can literally um drop a

massive image so if I drop that in there

it will retain the quality and reduce

the size so this one was 8 MB now it's

dropped it by 93% in the right corner to

500 and it literally looks the quality

is pretty sharp you can change you can

resize it you can change the compression

maybe if you want to go to webp as well

we can do that um you can increase the

quality say like maybe 80 you can see

that pretty cool and I left I left click

on that image and I can just download it

and it will give me that image and now

I've got this image there and the size

is reduced so this is great when you

want to optimize images for a webflow

site or whatever website you're working

on next we've got start websites.com

beautiful website ites another great

place for insiration you'll probably see

sites you've already seen on this one uh

let's just click on minimal and you can

see some of these beautiful websites

let's just click on this one equipped

it's got the details on the right and I

can scroll through looks really clean

next we've got minimal. Gallery this one

is another beautiful website and

functional websites as well got a whole

bunch of different categories we can

click through

now this one's a unique one it's called

interface iname.com if you are a gamer

or you're building a website for a game

publisher or game studio uh then or

maybe you're working on UI for a game

itself you can actually you know click

on any of these and it will give you the

in-game UI so if I left click roll

through my with my arrow keys I can see

all the UI I can download it I can like

it it gives me all the game UI which I

think is super dope as well so it's

another great site it's got plenty of

screen screenshots we click on

screenshots in games for example this is

the division even has animations like

it's just really good next we've got

dark mode design.com similar to the

other um website but it's got sites that

have you know dark style websites dark

colors um for example this one basement

Foundry I last time I this bright orange

and just it's actually a font site

really dope website so anything that has

like dark backgrounds has endless

endless inspiration there for you next

we've got font ninja now font ninja is

an awesome Chrome extension I literally

can go on any website so for example

I'll go to um this one and if I click on

font ninja just to turn it

on I can then basically look at the

website fonts and put my mouse over the

fonts and it will tell me jet brains

mono um and it's also telling me inter

but you can see here this is the font

that they're using and then usually

it'll take I can bookmark it or install

it or take me to the website it

literally works for like any type of um

site um for example let's just go on

this website here left click on the font

ninja and once it's on it tells me too

fonty graphic regular it also got semi

bold medium and granite Pro so it even

tells you the sizes the color the line

height uh and even the next we've got

fonts in the wild it just shows fonts

from different websites it's just like

snip Tippets or screenshots it will show

me anic primer I can download it it'll

tell me it's pay which is good so I know

what I'm getting into I left click on

other ones it tells me the font here and

then I can click on it and it should

take me to that font site test there you

go super super cool next got hero

icons.com so beautiful handcrafted SVG

icons by Tailwind CSS these are all free

I can copy an SVG and then you know go

to figma paste it in and maybe I just

want to drop it into there somewhere

doesn't have that much in there but it's

pretty decent to get something started

next we've got draw kit.com now they

have illustrations there also got a

plugin as well for an avatar you got 2D

3D icons animations bit of mockups um

most of it is paid though but say I want

to click on this one you can see they

got some really nice quality

kits um different styles you got an

isometric one here that looks pretty

dope so yeah they've got really strong

illustrative Assets in this one next

we've got icon scout.com they've got a

animations illustrations icons 3D stuff

they got a bunch of different things so

if I want to search maybe Vector icons

you can go through there I can go

through the illustrations they've got a

lot of 3D stuff so I think this would

work really well and they got some lots

of free stuff as well you can use we

also got blush. design I'm in their

collection section they got uh some free

illustrations some are paid but but it's

just cool to You Know download and drop

it into a placeholder for a website

while you're working on for a client and

then you can always invest in some other

illustrations down the track but

beautiful stuff here love the style it's

very lots of variety next we've got

email love.com if you design emails for

clients like say your MailChimp or

something you've got a whole bunch

here and it's really great you got um

Trends or you can do categories maybe

you want SAS companies see what they're

doing at the moment you know we can look

at

Miro and we can see how they structure

their emails like how they design it or

even this

one that's how they do their emails

which is super cool um but yeah plenty

of ideas and inspiration for you there

so those are my top web design resources

for you that's going to help you grow as

a designer as a solo agency owner or if

you're H someone just looking to grow

your asset list I hope this helps you

leave a comment below if this was

helpful and if you want more videos just

like this remember to subscribe because

it helps the channel out it helps me

grow I really appreciate it and if you

do want to get some other resources I

did a video about other graphic design

resources that you can check out right

here and if you want to learn more about

how to create a flow website or design a

brand I'll put some course links down

below which you can get I'll see you in

the next video