Trong thiết kế UI/UX bên cạnh việc làm ra sản phẩm đẹp và sáng tạo, các sản phẩm thiết kế đó phải dễ sử dụng. Các nhà tâm lý học đã đặt ra các nguyên tắc từ lâu, và điều thú vị là chúng vẫn còn giữ nguyên giá trị cho các nhà thiết kế UI/UX hiện đại.
Bộ tài liệu chiasefree.com chia sẽ dưới đây sẽ giới thiệu cho bạn các thư viện miễn phí UI/UX Graphic Designer’s khổng lồ, giúp bạn nâng cao kỹ năng và tạo trải nghiệm người dùng tốt. Chúng ta cùng nhau tìm hiểu nhé!
Nội dung chính
Thư viện UI/UX Graphic Design là gì?
UI là gì?
UI (user interface) là thuật ngữ dùng để chỉ giao diện người dùng, bao gồm những yếu tố mà mắt thường chúng ta có thể nhìn thấy và cảm nhận được trên website như màu sắc, hình ảnh, bố cục, video clips, giai điệu, font chữ…vv
UI được xem là bộ mặt của website. Thế nên, nếu muốn thu hút được sự quan tâm của khách hàng, bạn cần thiết kế UI thật ấn tượng. Đồng thời, UI cũng giúp cho việc truyền tải thông điệp đến khách hàng một cách trực quan, dễ dàng hơn.
UX là gì?
UX (user experience) là thuật ngữ dùng để chỉ trải nghiệm của người dùng. UX có nhiệm vụ chính là quan sát, dõi theo cũng như ghi nhận các phản hồi từ phía người dùng. Sau đó, bộ phận này sẽ không ngừng cải tiến và nâng cao chất lượng để tối ưu hóa trải nghiệm của khách hàng.
UX sẽ tập trung vào việc nghiên cứu về thói quen, hành vi khách hàng để đưa ra các chiến lược, mục tiêu phát triển nhằm đem lại cảm giác thoải mái, thích thú mỗi khi người dùng truy cập vào website.
Tóm lại, UI là những gì mà khách hàng có thể nhìn thấy về website, còn UX là những suy nghĩ, phản hồi của khách hàng khi truy cập tại website.
UI UX designer là những nhà thiết kế nhằm nâng cao chất lượng cả giao diện lẫn trải nghiệm của người dùng để mang đến kết quả tốt nhất cho doanh nghiệp.
Tổng hợp thư viện miễn phí UI/UX Graphic Designer’s khổng lồ
UI Graphics
Các trang web và tài nguyên có các thành phần giao diện người dùng hiện đại ở các định dạng khác nhau như PSD, Sketch, Figma, v.v. Chúng rất phù hợp cho các ý tưởng cho các thành phần web / giao diện người dùng
| Website | Description |
|---|---|
| UI Design Daily 100 | Awesome UI Components of all types |
| 100 Daily UI 32 | Thư viện Figma miễn phí về các sản phẩm, phần tử và màn hình |
| Sketch App Sources 18 | Sketch UIs, wireframes, icons and much more |
| Humaaans 29 | Những hình ảnh minh họa tuyệt vời về những người có khả năng trộn và kết hợp |
| Paaatterns 19 | Bộ sưu tập miễn phí các mẫu đẹp cho tất cả các định dạng vector |
| thepatternlibrary 18 | Mẫu nền đẹp miễn phí |
| 404 illustration 25 | minh họa miễn phí cho trang 404 |
| Drawkit.io 18 | Hình minh họa cho các nhà thiết kế và khởi nghiệp |
| Undraw.co 10 | Hình ảnh minh họa mã nguồn mở cho bất kỳ ý tưởng nào bạn có thể tưởng tượng và sáng tạo |
| Illustration.co 22 | Bộ minh họa mã nguồn mở |
| Manypixels.co 9 | Hình minh họa đơn sắc, Isometric chất lượng cao |
| Opendoodles 15 | Free sketchy illustrations |
| Open Peeps 7 | Thư viện minh họa vẽ tay |
| UI Space 20 | Hàng nghìn giao diện người dùng miễn phí tuyệt vời |
| Animations.co 23 | Biểu tượng GIF động đẹp, có thể tùy chỉnh |
| Uplabs 14 | Tài nguyên thiết kế chất lượng cao (Miễn phí & Cao cấp) |
| InvisionApp 10 | Thư viện các bộ giao diện người dùng, gói biểu tượng và mô hình miễn phí, chất lượng cao |
| Open Doodles 15 | Một bộ Hình minh họa Sơ đồ Miễn phí |
| Avataaars 9 | Thư viện phác thảo miễn phí các minh họa avatar của Pablo Stanley |
| FreebieSketch 13 | Thiết kế Sketch miễn phí, wireframe, hình minh họa và hơn thế nữa. |
| Blush 7 | Hình minh họa có thể tùy chỉnh miễn phí với Plugin Figma |
| Hero Patterns 18 | Bộ sưu tập các mẫu nền SVG có thể lặp lại |
Fonts
Các trang web cung cấp phông chữ miễn phí cũng như các công cụ dựa trên phông chữ
| Website | Description |
|---|---|
| Google Fonts 5 | Thư viện khoảng 1000 phông chữ được cấp phép miễn phí |
| DaFont 2 | Lưu trữ các font chư co thể tải miễn phí |
| Use & Modify 2 | Lựa chọn cá nhân các kiểu chữ đẹp, sang trọng, punk, chuyên nghiệp, không hoàn chỉnh, kỳ lạ |
| 1001 Free Fonts 1 | Tôi nghĩ cái tên đã nói lên chính nó |
| Font Squirrel 1 | Font Squirrel lùng sục trên internet để tìm kiếm các phông chữ miễn phí hợp pháp, chất lượng cao |
| Font Fabric | Một xưởng đúc kiểu kỹ thuật số tạo ra các phông chữ bán lẻ và kiểu chữ tùy chỉnh cho các thương hiệu khác nhau |
| What Font | Công cụ để tìm phông chữ của một trang web mà không cần phải tìm kiếm trong devtools |
| Tiff 1 | Một công cụ khác biệt kiểu tương phản trực quan sự khác biệt giữa hai phông chữ |
| Font Flame 1 | Công cụ ghép nối các phông chữ để xem chúng trông như thế nào với nhau |
| TypeKit Practice | Tìm hiểu về thực hành kiểu chữ |
| Fontjoy | Generate font pairing in one click |
| Golden Ratio 1 | Golden Ratio Typography Calculator |
| FontSpark 1 | Discover Better Fonts |
| FontPair | Helps you pair Google Fonts together |
| Font Space | A designer-centered free font website that has quick customizable previews |
| Abstract Fonts 3 | Fonts free for personal and commercial use |
| Free Typography 2 | A list of high quality fonts |
| Leon Sans 1 | A geometric sans-serif typeface made with code |
| Lexend | A variable font empirically shown to significantly improve reading-proficiency |
| Fonts for Apple Platforms | Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps |
| SFWin | San Francisco Fonts for Windows 10 and non-Apple Platform |
| Font Flipper | Preview 800+ Google Fonts on top of your own designs, without having to download the fonts |
| Fonts Arena 1 | Free curated fonts |
| Befonts 2 | High quality fonts for free |
| Arabic fonts 1 | Arabic fonts for free |
| FontDrop | Simple and easy way to view the contents of font files |
Colors
Các trang web và tài nguyên giúp đưa ra các lựa chọn liên quan đến màu sắc
| Website | Description |
|---|---|
| Colormind.io 16 | Color palette generator |
| ColorCurves.app 4 | Color palette generator that uses curves to generate color palettes |
| Coolors 4 | Create the perfect palette or get inspired by thousands of beautiful color schemes |
| Colors & Fonts 3 | A curated library of colors, fonts and resources |
| Palette List 4 | Pick 2 colors you like and the tool generates thousands of palettes for you. |
| Google Material Color Tool 5 | Official Google Material Color Palette Tool |
| Material Palette 2 | Free to pick palettes, icons and colors for Material Design |
| ColorSpace 1 | Generate nice color palettes from one color |
| FlatUIColors 2 | Beautiful set of color palettes in various flavours |
| Adobe Color 1 | Create color palettes, extract gradients from images, etc |
| Colorsinspo 1 | All-in-one resource for finding everything about colors |
| Happyhues 1 | Happy Hues is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects by Mackenzie Child |
| Adobe Trends 2 | Discover current color trends in different industries from the creative communities on Behance and Adobe Stock |
| Color Hunt | A free and open platform for color inspiration with thousands of trendy hand-picked color palettes |
| Gradient Hunt 2 | A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients |
| Web Gradients 7 | A free website to find good css gradients |
| ColorBox | A free website to produce color set |
| CSS gradient 3 | A free website to make custome gradient and some examples of gradient |
| gradienta | A pure css and jpg gradients |
| UI Gradients 2 | UI gradients color generator |
| Palette Generator 1 | Generate new color palette with every spacebar press |
| Material Palettes | 1000+ Material Design palettes |
| Grabient | Gradient Selector |
| ShadeSwash 1 | Quickly generate shades of any color |
| BrandColors 1 | The biggest collection of official brand color codes |
| BRAND PALETTES 3 | Logo Color Codes and Palettes |
| ColorSpace 1 | Generate color palettes from one color |
| Material Design Palette Generator 2 | Generate theme and color palette Material Design-like |
| Colorate | Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. |
| 0to255 | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. |
| Gradient Buttons 2 | Ready to use copy/paste gradient buttons |
| Khroma 2 | Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save. |
| whocanuse | A tool that brings attention and understanding to how color contrast can affect different people with visual impairments. |
| Colorable | Color combination contrast tester |
| Color Hex Picker | Tool to get hex code along with name of the color. |
| Saruwakakun | The stunning color scheme for website & App Designs with previews |
| Paletton | Paletton.com is a designer color tool designed for creating color combinations that work together well. |
| Colorzilla | A powerful online photoShop-like CSS gradient editor |
| Image Color Picker | Image color picker and palette generator |
| CombineCOLORS | Color mixing tool |
Icons
Tài nguyên cho các biểu tượng bao gồm png, svg và hơn thế nữa
| Website | Description |
|---|---|
| UXWing 15 | Well Optimized, Free icons for commercial use |
| Shapedfonts Iconclub 13 | 8000+ free icons |
| Feather Icons 1 | Beautiful, customizable open source icons |
| Tabler Icons 2 | 470+ highly customizable open source SVG icons |
| Simple Icons 6 | 1307 Free SVG icons for popular brands |
| Instant Logo Search 6 | thousands of free brands logos ( SVG – PNG ) |
| Linear Icons 2 | 1000+ Ultra crisp vector icons |
| Entypo 3 | 411 carefully crafted premium pictograms by Daniel Bruce |
| Icons8 3 | Free icons, photos, vectors and tools |
| Flat Icon 4 | The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats |
| The Noun Project 3 | Over 2 Million curated icons, created by a global community |
| Iconscout 1 | Free Download Icons illustrations stock photos at one place |
| Nucleo App 1 | Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid) |
| Icon-icons.com 1 | Free Icons PNG, ICO, ICNS and Vector file SVG |
| Bootstrap Icons 3 | Free Icons built for Bootstrap but they’ll work in any project |
| Remix Icon 1 | Simply Delightful Icon System |
| Iconmonstr 1 | Discover 4496+ free icons in 313 collections |
| Vivid.js 1 | Ready to use Free and Open Source SVG Icons Pack JavaScript Library. |
| Iconfinder 3 | Free and premium vector icons in SVG, PNG, CSH and AI format |
| Lordicon 1 | 50 free animated interactive icons |
| UseAnimations 3 | Free Animated Icons in SVG and Json Format(for lottie) |
| css.gg 1 | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API |
| SVGPorn 6 | 1000+ high-quality SVG logos |
| Payment System Logos | Logos for payment systems available in png and svg |
| Browser Logos 2 | High resolution web browser logos |
| IconBros | 7843+ free icons grouped in 182 collections |
| LogoHub 2 | Generate and download your logo for free in PNG and SVG format |
| Material Design Icons 2 | A icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project. |
| Heroicons 1 | Free, open source icons from the creators of Tailwind CSS. |
| Zondicons 1 | A set of free premium SVG icons for you to use on your digital products. |
| Endless Icons 1 | A website offering a number of free icons. Icons are tagged and also compressed into kits. |
| Icomoon | Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons. |
| Eva Icons | Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. |
| Zondicons | A set of free premium SVG icons for you to use on your digital products. you can download the icons into your desktop |
| Entypo 3 | 411 carefully crafted premium pictograms |
| Cryptoicons | A set of 430 crypto and fiat currency icons. Completely free. |
| Ikonate | Fully customisable & accessible vector icons |
| appicon | Quickly generate app icons in diffrent sizes for your IOS, macOS and Android projects |
| LineIcons 1 | 2000+ Essential Line Icons for Designers and Developers |
Favicons
Tài nguyên cho Favicons
| Website | Description |
|---|---|
| Favicon.io 9 | Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats |
| Favicon Generator 1 | Generate favicon ico files for your website |
| RealFaviconGenerator 2 | Generate icons for all platforms (Windows, iOS, Android) |
| FontIcon 2 | Generate favicons and images from Font Awesome icons |
Icon Fonts
Tài nguyên cho Phông chữ Biểu tượng
| Website | Description |
|---|---|
| Font Awesome 3 | The web’s most popular icon set and toolkit |
| Line Awesome 1 | Swap in replacement of Font Awesome with modern line icons |
| Material Icons | Material design icon library |
| IonIcons 1 | Beautifully crafted open source icons from Ionic team |
| Zurb Foundation Icons | Customizable Foundation icons |
| Fontisto Icons 1 | Fontisto the iconic font and css toolkit · 616+ free icons |
| Boxicons | Boxicons is a free collection of carefully crafted open source icons |
| Icofont | 2100+ free icons to spice up your creative designs |
| Material Palette | Free to pick palettes, icons and colors for Material Design] |
| Material Design Iconic Font | Material design icon font |
| Vscode Codicons 2 | The icon font from Visual Studio Code |
| Devicon | Devicon is a set of icons representing programming languages, designing & development tools |
| PaymentFont 2 | A sleek webfont for payment operators and methods. Featuring 116 icons |
| Weather Icons | Weather Icons is the only icon font with 222 weather themed icons |
| Stroke 7 | 202 thin stroke icons inspired by iOS 7 |
| Jam Icons | 890+ handcrafted icons to make your web app awesome |
| Fontastic.me 2 | Create your custom icon fonts in seconds. Over 9,000 icons available to pick from or upload your custom svg |
| Fontello 1 | 200+ web icons where you can customize the names or codes of icons. |
| Linea 1 | Linea: Featuring 750+ Free Icons |
Stock Photos
Các trang web cung cấp kho ảnh miễn phí về tất cả các loại cho các trang web và ứng dụng của bạn
| Website | Description |
|---|---|
| Pexels 15 | Free stock photos shared by talented creators |
| Unsplash 6 | The internet’s source of freely usable images |
| Pixabay 6 | Over 1.7 million+ high quality stock images and videos |
| Magdeleine 6 | Gallery & free high res photo everyday |
| Picspree 3 | Royalty free images, stock photos, illustrations, and vectors |
| Burst 3 | Free stock photos collections |
| Gratisography 2 | Free collection of free high-resolution pictures |
| Life of Pix 1 | Free high resolution photography |
| Stock Snap | Hundreds of high quality photos added weekly |
| Morguefile 1 | Over 350,000 free stock photos for commercial use |
| Kaboom Pics | Stock photography and color palettes. Good for product images |
| New Old Stock 1 | Stock vintage photos |
| Pic Jumbo | Good collections of different types of photos |
| Public Domain Pictures | Public domain images of all types |
| Find A Photo 1 | Searches multiple stock photo websites |
| Stockvault | Categorized stock photos |
| Placeholder | A free image placeholder service for the web. You can specify image size and format |
| Realistic Shots 1 | Free high resolution stock photos |
| Negative Space | High-Resolution Free Stock Photos |
| SkitterPhoto | Free high resolution photography |
| PicoGraphy | Gorgeous, High-Resolution, Free Photos |
| Wunder Stock 1 | Stunningly amazing free photos |
| PxHere | Free Images & Free stock photos – PxHere |
| Piqsels | Royalty Free Stock Photos |
| FoodiesFeed 1 | Food photo stock |
| Nappy | A website offering Beautiful, high-res photos of black and brown people. |
| Generated Photos 4 | Unique AI Generated model photos |
Stock Videos
Các trang web cung cấp kho video miễn phí đủ loại cho các trang web và ứng dụng của bạn
| Website | Description |
|---|---|
| Pexels 7 | Largest library of free to use videos, donated by the community |
| Pixabay 1 | Large library of free to use videos, donated by the community similar to Pexels |
| Coverr.co 4 | Beautiful free stock video footage |
| Videezy 4 | Free HD stock footage & 4K videos |
| Mix Kit 2 | Stock video clips & music |
| Life Of Vids 4 | Free video clips and loops |
| Videvo 8 | Free and premium stock videos |
Stock Music & Sound Effects
Trang web cung cấp kho nhạc miễn phí và / hoặc hiệu ứng âm thanh
| Website | Description |
|---|---|
| Free Stock Music 4 | Royalty free stock music for YouTube videos, podcasts, etc |
| Bensound 2 | Download Royalty Free Music for free and use it in your project |
| Mixkit 2 | Free music for your projects |
| Freesound 1 | Free stock music and sounds |
| Free Music Archive 1 | Collaborative database of creative-commons licensed sound for musicians and sound lovers |
| Musopen 2 | An online copyright free classical music library |
| Unminus 2 | Free Premium Music for Your Projects Royalty Free. Cleared for YouTube. |
Vectors & Clip Art
Các vector, clipart, hình minh họa, mẫu miễn phí và hơn thế nữa
| Website | Description |
|---|---|
| Vecteezy 7 | Find and download free vector art |
| Freepik 8 | Free vectors, stock photos, PSD and icons |
| Free Vectors 5 | Community of vector lovers who share free vector graphics |
| PNGTree 9 | png, backgrounds, templates, text effects |
| Vector4Free 1 | Free vector graphics |
| Retro Vectors 2 | Vintage vectors and graphics |
| Freeble | Vectors, patterns, mockups and more |
| Lukaszadam 3 | Free Vector atrworks |
| Illlustrations 22 | Beautiful 100 Illustrations – png, svg |
| Clipart 6 | Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! |
| Growwwkit illustrations 3 | A set of 8 simple, black & white, stylish illustrations |
| World Vector Logo 3 | Download vector logos of brands you love |
| trianglify.io 3 | Generate low-poly backgrounds, textures, and vectors |
| blob 1 | Generate Blob shapes for Web and Flutter apps |
| HiClipart 5 | A community for designers to share & download transparent background PNG cliparts |
Product & Image Mockups
Tạo mô hình thiết bị và các sản phẩm khác
| Website | Description |
|---|---|
| Smart Mockups 10 | Create stunning product mockups (free & premium) |
| Shot Snap 4 | Create beautiful device mockup images for your app or website design |
| Screely 3 | Instantly turn your screenshot into a mockup |
| Screen Peak 4 | Create a mockup from a URL |
| Mockup World 4 | The biggest source of free photo-realistic Mockups online |
| Collab Shot | Real-time screen grabs and image sharing |
| Facebook Devices | Images and Sketch files of popular devices |
| Threed.io 6 | Generate 3D mockups right in your browser. |
| Mockuphone 1 | 100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV |
Tổng hợp từ nhiều nguồn internet
Bạn nghĩ sao về bài viết này?
+1
1
+1
+1
+1
+1
Add Comment