Màu 54AAAA@Kỹ Năng
6 năm trước
96 Websites Công Cụ Giúp Bạn Thiết Kế Một Trang Web Thoả Mãn Cả Về Hình Ảnh & Tính Năng
Khi bắt đầu tìm hiểu và thực hành về web design, tôi cảm thấy dường như mọi thứ trở nên vô cùng đa dạng, phong phú và vô tận vậy. Tôi thấy như mình có thể làm được bất cứ thứ gì. Một cảm giác thật yomost nhưng cũng thật đáng sợ! Cảm tưởng rằng việc thiết kế ra những thứ "cool" nhất quả đất và làm mọi điều theo đúng ý mình muốn không bao giờ là chán đối với tôi!
Rồi sau đó, tôi phát hiện ra rằng có những công cụ và nguồn tài nguyên sẵn có có thể giúp tôi đẩy nhanh quá trình học về web design lên và khiến tôi nảy ra được các ý tưởng thiết kế hay ho mà không phải bắt đầu từ "hai bàn tay trắng". Tâm trí của tôi cứ như vậy mà cuốn theo những tư duy thiết kế!
Dưới đây là danh sách 96 trang web giúp bạn có thể thoả sức cho trí sáng tạo của mình vùng vẫy và tạo ra được những "đứa con tinh thần" đầy tính nghệ thuật, theo phong cách riêng của chính bạn!
NGUỒN TÀI NGUYÊN THIẾT KẾ
Trước khi bạn bắt đầu khám phá trang web vi diệu này, hãy đăng ký vào Creative Market newsletter list. Một lần một tuần, bạn sẽ được gửi qua email 5 tài liệu download miễn phí, bao gồm mọi thứ từ phông nền và font chữ đến các templates và themes cho thiết kế của mình.
Phần Mềm + Ứng Dụng
Website này giới thiệu đến bạn tất cả các ứng dụng miễn phí dành cho các web designers, bao gồm chỉnh sửa HTML, xây dựng định dạng của website, thậm chí là thiết kế xe đẩy shopping, và còn rất nhiều thứ hay ho khác.
3. InVision app
Một nơi tổng hợp những công cụ tạo mẫu và hợp tác "quyền lực". Bạn có thể tham khảo và lấy cảm hứng từ những tạo mẫu thiết kế "chuẩn trên từng cen-ti-mét" chỉ trong ít phút.
4. Pixlr
Chỉnh sửa ảnh ngay trên trình duyệt của bạn, quá đơn giản!
5. Canva
Một website giúp bạn trở thành một graphic designer nghiệp dư tuyệt vời trong thời gian ngắn nhất. Công cụ tìm kiếm templates và các thao tác chỉnh sửa rất đơn giản, dễ dùng và hữu ích cho tất cả mọi người!
6. Easel.ly
Những templates về infographic rất đẹp mắt và khoa học.
Hình Ảnh
7. Unsplash
Một website stock ảnh với hàng ngàn những bức ảnh tuyệt đẹp và phong phú từ mọi thể loại. Và những bức ảnh mới thì luôn được cập nhật mỗi ngày.
8. PicJumbo
Nhận ngay những bức ảnh được gửi tới hòm thư của bạn hoàn toàn miễn phí, dù bạn có dùng chúng với mục đích cá nhân hay thương mại.
Bạn sẽ những bức ảnh chất lượng cao để dùng trong các dự án cá nhân hay công việc. Và chúng được phân chia trong các mục rất dễ tìm kiếm: động vật, tự nhiên, đồ vật, cả những thứ "kỳ quặc" và còn nhiều hơn thế.
10. Compfight
Thoả sức tìm kiếm vô vàn bức ảnh đã được cấp phép trong cả mục đích cá nhân và công việc, và phần lớn chúng được lấy từ trang Flickr.
11. IM Free
Tổng hợp những nguồn hỗ trợ thiết kế website chọn lọc nhất, bao gồm hàng ngàn mẫu ảnh, icons và templates.
12. Stock Up
Tìm kiếm trong 9,000 bức ảnh từ 26 websites khác nhau, tất cả chỉ trong cùng một nơi.
Đăng ký nhận mail và hòm thư của bạn sẽ được gửi đến một bộ ảnh theo chủ đề mỗi tháng.
14. Little Visuals
Nếu ghi tên vào danh sách email của họ, bạn sẽ nhận được 7 bức ảnh chất lượng cao mỗi tuần.
15. New Old Stock
Khám phá những bức ảnh mang hơi hướm hoài cổ và miễn phí từ những bộ sưu tập ảnh công khai.
16. Cupcake
Những bức ảnh chất lượng cao và miễn phí từ nhiếp ảnh gia Jonas Nilsson Lee.
17. Pexels
Nhận 10 stock photos mới mỗi ngày, bạn muốn thử chứ?
18. Magdeleine
1 bức ảnh chất lượng cao miễn phí sẽ được gửi tới bạn mỗi ngày.
19. SplitShire
Một website stock ảnh miễn phí và chất lượng cao bởi một nhiếp ảnh gia người Ý.
20. ISO Republic
Một kho ảnh chất lượng cao được gửi tới những ai sẵn sàng để óc sáng tạo của mình bay thật xa.
21. Paul Jarvis
Đăng ký ngay để nhận được 20 bức ảnh miễn phí ấn tượng nhất từ nhiếp ảnh gia Paul Jarvis.
Biểu Tượng + Ký Hiệu
22. Pixeden
Hàng trăm sets biểu tượng miễn phí dành cho bạn, bao gồm các biểu tượng về thời tiết, mạng xã hội, ký hiệu đường kẻ, và còn rất nhiều thể loại khác.
23. Iconmonstr
Hơn 2,800 biểu tượng graphic được viền đậm theo nhiều kiểu dáng khác nhau.
24. Captain Icon
Hơn 350 biểu tượng vector miễn phí dành cho điện thoại di động và web design.
25. Linear Icons
Một website cung cấp font ký hiệu với 170 ký hiệu khác nhau cho bạn thoái mái chọn lựa.
26. Font Awesome
Một website font biểu tượng cho phép bạn thêm những biểu tượng yêu thích vào trang web của riêng mình.
27. Fontello
Những bộ sưu tập font icon theo chủ đề giúp bạn dễ dàng tìm kiếm và sử dụng.
28. Flaticon
Thoả sức download các icons vector hay những fonts icon cho website cá nhân.
29. The Noun Project
Đánh và ô tìm kiếm một danh từ, bạn sẽ nhận được một biểu tượng miễn phí tương ứng.
30. Endless Icons
Một thư viện icon hoàn toàn miễn phí.
31. Perfect Icons
Một website hỗ trợ chỉnh sửa và tối ưu hoá ký hiệu mạng xã hội cho website của bạn.
32. iconSweets
Download 60 Photoshop icons vector miễn phí.
33. Round Icons
Tập hợp các bộ sưu tập icon chuyên nghiệp và độc đáo.
Font Chữ
34. Google Fonts
Thêm các font chữ vào website của bạn chỉ với một vài cú click chuột.
Một website giúp bạn tạo những cặp font chữ "đẹp đôi" với nhau.
36. Font Squirrel
Hằng trăm font chữ hoàn toàn miễn phí.
Hãy thử một bộ sưu tập các font chữ Google đẹp mắt nhất.
38. Lost Type
Những font chữ vô cùng lỗng lẫy và thoả mãn thị giác của bạn.
Màu Sắc
39. Material UI
Một thư viện màu sắc dành cho bạn thoải mái sử dụng trong những thiết kế của mình.
40. Paletton
Bạn có thể bắt đầu với bất kỳ một màu gì và sẽ nhận được một bảng màu với khoảng 5 gam cho mỗi màu, dựa trên một số mẫu màu khác nhau như đơn sắn (monochromatic), liền kề (adjacent), tam sắc (triad), tứ sắc (tetrad) hoặc tuỳ chỉnh (custom) theo người dùng.
41. Design Seeds
Hàng trăm bảng màu tuyệt cú mèo được lấy cảm hứng từng các bức ảnh nghệ thuật. Bạn có thể tìm kiếm dựa trên từ khoá hoặc tên màu sắc tương tự với màu bạn cần tìm.
Lựa chọn các cặp màu khác nhau và lưu giữ palette của riêng bạn.
43. Material Palette
Tạo ra một palette chỉ dựa trên hai màu đơn sắc.
Một website cung cấp đầy đủ thông số của rất nhiều các màu sắc khác nhau.
45. Flat UI Colors
Tương tự như trang Flat IU Color Picker.
46. Bootflat
Một website cung cấp thông số màu sắc khác nữa cho bạn.
47. Coolors
Tại đây bạn có tạo ra bao nhiêu palette theo ý thích mình đều được!
48. Skala Color
Một website cho phép download bộ chọn màu (color picker) miễn phí.
49. BrandColors
Kiểm tra xem những màu nào thường được các nhãn hiệu lớn sử dụng trong thương hiệu của họ.
50. 0 to 255
Bạn có thể tìm thấy màu sắc hoàn hảo mà bấy lâu nay mình vẫn tìm kiếm.
51. Colour Lovers
Tham khảo các palette từ các người dùng khác và chia sẻ cái của riêng bạn với cộng đồng.
Tạo ra các palette dựa trên các hình ảnh có sẵn.
Phông Nền + Cấu Trúc
53. Pattern8
Hàng trăm mẫu thiết kế lặp độc đáo, tối màu và sáng màu cho bạn thoải mái lựa chọn.
54. Texture King
Tất cả mẫu cấu trúc bạn muốn đều có ở đây: grunge, rỉ sét, thạch cao, bê tông, bùn đất và nhiều hơn thế nữa.
55. Patternico
Bạn có thể tạo ra những cấu trúc của riêng bạn với các font icon tuyệt vời, và chỉnh sửa tuỳ ý thích màu nền, kích thước vải canvas và chuyển đổi hình dáng cho tác phẩm của mình.
56. Subtle Patterns
Một website cho phép bạn download miễn phí những mẫu thiết kế đã có sắn.
57. Lost and Taken
Các cấu trúc thiết kế miễn phí trên website này được sắp xếp theo hàng trăm mục phân loại, bao gồm vỏ hộp, đá, kim loại, bong bóng, hoạ tiết liên tục và nhiều hơn nữa.
58. Patterninja
Tạo ra các mẫu cấu trúc thiết kế hoạ tiết lặp lại với tuỳ chỉnh màu sắc, hình dáng và nhiều cài đặt khác.
Dụng Cụ/ Hướng Dẫn Thiết Kế Giao Diện Người Dùng (UI)
Một dụng hỗ trợ UI thoáng mắt và hiện đại. Ngoài 55+ mẫu này, bạn hãy nhớ tham khảo quanh Behance để tìm ra rất nhiều nguồn tuyệt vời khác nữa từ các nhà thiết kế khác nhé.
Hàng ngàn download miễn phí đang chờ bạn khám phá, bao gồm dụng vụ UI, themes và nhiều thứ khác nữa.
61. Material Design Guidelines
Một hướng dẫn chi tiết cho bạn về các quy chuẩn Material Design của Google.
---
PHÁT TRIỂN WEBSITE
Công Cụ Tìm Kiếm Tên Miền
62. Namemesh
Một công cụ tìm kiếm tên miền đắc lực giúp bạn có được những tên miền ngắn gọn, thú vị, phổ biến, quen thuộc và rất nhiều sự lựa chọn khác.
63. Nameboy
Chỉ cần đánh một hoặc hai từ khoá, bạn có ngay một danh sách những tên miền khả dụng dành cho website của bạn.
64. Panabee
Mô tả điều bạn muốn trong HAI TỪ và Panabee sẽ đưa cho bạn một danh sách các tên miền tiềm năng.
65. Impossibility
Tạo ra các sự lựa chọn tên miền chỉ dựa trên MỘT TỪ duy nhất.
66. LeanDomainSearch
Tìm kiếm một tên miền bằng từ khoá bạn muốn.
Nền Tảng Web, Templates, Bộ Mã Hoá Và Themes
67. WP-Flex
Một bản mẫu có theme WordPress có tính tương tác cao và nó tuân theo những đặc tính và yêu cầu tốt nhất từ nguyên mẫu website WordPress.
68. Foundation
Một nền tảng web nâng cao phổ biến nhất trong web design dành cho bạn.
69. Ionic
Tạo các app điện thoại bằng việc sử dụng những công nghệ bạn đã biết và yêu thích.
70. Initializr
Nhanh chóng tạo ra được một template cho website cá nhân dựa trên bản mẫu HTML5.
71. Materialize
Một nền tảng web hiện đại và tương tác cao dựa trên các đặc tính kỹ thuật của Material Design từ Google.
72. WordPress Plugin Boilerplate
Nếu bạn muốn tạo ra các plugins WordPress, thì Plugin Boilerplate chính là một bước khởi đầu chuẩn xác và và đúng hướng.
Bước đầu tiên cơ bản để tạo ra một website của riêng bạn, do đó bạn không nhất thiết phải tạo ra mọi thứ từ "hai bàn tay trắng".
Đầu tiên và tốt nhất. Code mẫu HTML5 miễn phí dành cho bạn.
75. HTML5 UP
Template HTML5 có tính tương tác cao hoàn toàn miễn phí download.
Một nền tảng CSS chỉ dài đúng một dòng!
77. 960 Grid System
Dụng cụ trong danh sách yêu thích của tôi!
78. GitHub
GitHub là một nền tảng phát triển dựa trên chính phong cách làm việc của bạn. Từ nguồn tài nguyên mở cho đến kinh doanh, bạn có thể làm chủ và review code, quản lý các dự án và xây dựng phần mềm cùng với hàng triệu developers khác.
Template WordPress miễn phí cho mọi developers.
80. Underscores
Template WordPress dành cho việc tạo ra một theme hoàn toàn mới.
Một theme WordPress khởi điểm dành cho bạn dựa trên hai websites HTML5 Boilerplate và Bootstrap.
Một theme WordPress khác nữa, thoáng mắt và cơ bản dành cho mọi developers.
83. Bootstrap
Một nền tảng HTML, CSS và JS có tính tương tác cao.
84. Bootswatch
Download các themes miễn phí cho Bootstrap của webiste cá nhân.
Lập Trình Cho Website
85. Web Field Manual
Một bộ sưu tập các nguồn tài nguyên, thực hành tốt nhất, cảm hứng và tài liệu tham khảo cho lập trình hiện đại. Website này cũng có các mục công cụ, nguồn tư liệu bổ sung và thông tin theo ngôn ngữ nhất định để bạn tham khảo thêm.
86. Google Developers Web Fundamentals
Một nguồn tài nguyên tổng quát, đầy đủ và tốt nhất dành cho việc thực hành phát triển website, được xây dựng bởi chính mạng tìm kiếm lớn nhất - Google. Đây là một sự lựa chọn hoàn hảo cho cả những developers mới nhập môn và những ai muốn dự án của mình trở nên tối ưu hơn.
87. Deployments Best Practices
Trước khi có thể tận dụng hiệu quả một website hoặc ứng dụng, bạn nên thử những thực hành tốt nhất này để đảm bảo mọi thứ vận hành thật trơn tru.
Hướng dẫn phong cách coding rất riêng từ trang GitHub.
Còn đây là từ Google!
90. Mozilla
Và một hướng dẫn coding nữa từ những ưu điểm mạnh nhất của trình duyệt Mozilla.
Xác Thực Mã Website
Bước cuối cùng là, kiểm tra xem mã của bạn đã đáp ứng tất cả các tiêu chuẩn về tính khả dụng, mô hình phát triển và tính thực hành tối ưu nhất hay chưa.
91. w3schools.com
92. Web Design Group HTML Validator
93. Validator.nu
94. Code Beautify
95. JSLint
96. Free Formatter
---------------------------
Tác giả: Cameron Chapman
Link bài gốc: 99 Freebies To Help You Build Awesome Websites
Dịch giả: Màu 54AAAA - YBOX.VN Translator
(*) Bản quyền bài viết thuộc về YBOX.VN. Khi chia sẻ, cần phải trích dẫn nguồn đầy đủ tên tác giả và nguồn là "Dịch Giả: Màu 54AAAA - Nguồn: YBOX.VN". Các bài viết trích nguồn không đầy đủ, ví dụ: "Theo YBOX" hoặc khác đều không được chấp nhận và phải gỡ bỏ.
(**) Trở thành dịch giả trên YBOX.VN, xem chi tiết tại đây: http://bit.ly/yboxtranslateteam
----------------------------
Hợp Tác Cùng YBOX.VN Truyền Thông Miễn Phí - Trả Phí Theo Yêu Cầu tại http://bit.ly/YBOX-Partnership
8,314 lượt xem