# Design and UI Tools for Frontend Development — Part 2

In this post, we will see some of the best Design and UI Tools for Frontend to ease your development work

#### #1 GradientOS

Makes choosing a gradient fast and easy.

[**Gradientos**  
\*Gradientos makes it easy to find gradients.\*www.gradientos.app](https://www.gradientos.app/)

#### #2 IconHorse

Get the highest resolution favicon for any website from our simple API.

[**Icon Horse**  
*Get any site's icons on demand, with confidence*icon.horse](https://icon.horse/)

#### #3 Icons8

Icons, illustrations, photos, music, and design tools. Free Plan offers Limited formats in lower resolution. Link to Icons8 when you use our assets.

[**Free Icons, Clipart Illustrations, Photos, and Music**  
\*Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made…\*icons8.com](https://icons8.com/)

#### #4 Invision App

UI design and prototyping tool. Desktop and web app are available. Free to use with 1 active prototype.

[**Collaborate better | InVision**  
\*Brainstorm. Plan. Collaborate. Actually get stuff done. A workspace for teams to get work done in real-time or…\*www.invisionapp.com](https://www.invisionapp.com/)

#### #5 Landen. co

Generate, edit, and publish beautiful websites and landing pages for your startup. All without code. The free tier allows you to have one website, fully customizable and published on the web.

[**Umso - The Website Builder for Startups**  
\*The fastest way for startups to go live. Design, edit and publish a beautiful website with absolutely no code.\*www.landen.co](https://www.landen.co/)

#### #6 Loreum Picsum

A Free tool, easy to use stylish placeholders. Just add your desired image size (width & height) after our URL, and you’ll get a random image.

[**Lorem Picsum**  
*Lorem Ipsum... but for photos*picsum.photos](https://picsum.photos/)

#### #7 LottieFiles

The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and the Web.

[**LottieFiles: Download Free lightweight animations for website & apps.**  
\*Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create…\*lottiefiles.com](https://lottiefiles.com/)

#### #8 MagicPattern

A collection of CSS & SVG background generators & tools for gradients, patterns, and blobs.

[**Tools by MagicPattern**  
\*Hi fellow creator! I'm Jim, the founder, designer & engineer behind the MagicPattern toolbox. For many years, I was…\*www.magicpattern.design](https://www.magicpattern.design/tools)

#### #9 MarvelApp

Design, prototyping, and collaboration, free plan limited to one user and one project.

[**Marvel - The design platform for digital products. Get started for free.**  
\*The collaborative design platform. Wireframe, prototype, user test, design and inspect designs in one place, for free…\*marvelapp.com](https://marvelapp.com/)

#### #10 Mindmup.com

Unlimited mind maps for free, and store them in the cloud. Your mind maps are available everywhere, instantly, from any device.

[**MindMup**  
\*Structure writing Use notes and attachments to quickly create a structure for an article or a writing assignment, then…\*www.mindmup.com](https://www.mindmup.com/)

#### #11 Mockupmark.com

Create realistic t-shirt and clothing mockups for social media and E-commerce, 40 free mockups.

[**Online T-shirt & Apparel Mockup Generator | Mockup Mark**  
\*Mockup Mark is an online T-shirt & apparel mockup generator. Find the perfect T-shirt, hoodie or other apparel mockups…\*mockupmark.com](https://mockupmark.com/create/free)

#### #12 Octopus.do

Visual sitemap builder. Build your website structure in real-time and rapidly share it to collaborate with your team or clients.

[**Octopus.do, Visual Sitemap Tool, Website Planner, Architecture**  
\*FREE visual sitemap builder with lo-fi wireframes for prototyping website architecture & structure. Use our website…\*octopus.do](https://octopus.do/)

#### #13 Pencil

Open source design tool using Electron.

[**GitHub - evolus/pencil: The Pencil Project's unique mission is to build a free and opensource tool…**  
\*The Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that…\*github.com](https://github.com/evolus/pencil)

#### #14 Penpot

Web-based, open-source design and prototyping tool. Supports SVG. Completely free.

[**Penpot - Bring Design Freedom to your Product Team**  
\*Penpot official release! - See what's new Designers and developers can finally work in unison to build beautifully…\*penpot.app](https://penpot.app/)

#### #15 Photopea.com

A Free, Advanced online design editor with Adobe Photoshop UI supporting PSD, XCF & Sketch formats (Adobe Photoshop, Gimp, and Sketch App).

[**Photopea | Online Photo Editor**  
\*Free online photo editor supporting PSD, XCF, Sketch, XD and CDR formats. ( Adobe Photoshop, GIMP, Sketch App, Adobe XD…\*www.photopea.com](https://www.photopea.com/)

### Congratulations!

In this post, we have seen some of the best Design & UI tools for Frontend development will catch up in another post with more crafts. Till then Happy Learning:)