10 công cụ thiết kế web mới tốt nhất cho năm 2019

Thứ 5, 28/03/2019
1225

Năm 2019 tới đây là năm hứa hẹn sự bùng nổ của thiết kế web khi bộ ba tiêu chuẩn HTML5/CSS3/JavaScript được các trình duyệt hỗ trợ đầy đủ. Điều này cũng khiến các công cụ thiết kế web cũng phải trở nên tinh xảo hơn để giúp bạn tăng tốc độ làm việc. Bài viết này là mười công cụ mới được ra mắt trong ba tháng qua. Tất cả đều có mục đích là giúp công việc thiết kế web và cuộc sống của bạn trở nên dễ dàng hơn.

1. Interactive Typography Cheatsheet

 

 10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-1

 

Bạn có thể tìm hiểu tên của các chi tiết giải phẫu trong ngành đồ họa chữ (typography) bằng cách nhấn chuột vào các phần được tô sáng màu xanh. Bảng tóm tắt này được tạo bởi Christian Heilmann dựa theo một bài đăng trên Deviant Art bởi Martin Silvertant mà bạn có thể tải xuống dưới dạng tệp vectơ nếu bạn muốn in với khổ lớn để dán trên bức tường của mình.

 

 

2. Absurd Design

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-2

 

Absurd Design là tập hợp các hình minh họa miễn phí cho các trang đích (landing pages), được tạo bởi những họa sĩ tự gọi mình là những người siêu thực tế. Ý tưởng ở đây là hầu hết hình minh họa trong các trang đích hiện chỉ đơn thuần phản ánh tính năng của sản phẩm, còn những hình minh họa này cho mọi người cơ hội truyền tải thông điệp thông qua việc sử dụng hình ảnh. Mỗi hình ảnh có thể được diễn giải theo nhiều hướng khác nhau, vì vậy cách tiếp nhận nó sẽ phụ thuộc một phần vào bối cảnh mà nó được sử dụng. Đa dạng và chất lượng cao, đây là những ứng cử viên sáng giá để tăng thêm chiều sâu nội dung và sự chu đáo cho trang web của bạn.

 

 

3. Amino Editor

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-3

 

Một số trang web gây cảm giác khó chịu khi nhìn lâu hoặc rất khó đọc. Amino Editor là tiện ích giúp chỉnh sửa trực tiếp CSS trên trình duyệt Chrome, cho phép bạn thay đổi các thiết lập theo ý thích để tùy chỉnh giao diện các trang web mà bạn sử dụng thường xuyên. Nếu văn bản quá nhỏ, hoặc một bảng màu hoặc phông chữ làm cho mắt khó đọc, bạn có thể điều chỉnh nó theo ý muốn của mình. Các thiết lập có thể được lưu vào Google Drive để có thể sử dụng được trên nhiều thiết bị và bạn có thể áp dụng các kiểu của mình cho từng trang riêng lẻ hoặc cả tên miền. Chúng cũng có thể được bật và tắt một cách dễ dàng.

 

 

4. Accessible Brand Colour

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-4

 

Nếu bạn là một công ty ở Mỹ, trang web của bạn rất có thể cần tuân thủ các yêu cầu về tiếp cận trực tuyến của Đạo luật Người khuyết tật Hoa Kỳ (Americans with Disabilities Act – ADA). Đảm bảo màu sắc thương hiệu tuân thủ yêu cầu là một phần quan trọng trong quá trình xây dựng nhận diện công ty vì bạn không muốn tiến lên phía trước với thương hiệu không thể nhận diện và phải thay đổi về sau. Và công cụ từ Use All Five  này sẽ giúp bạn: nhập mã hex của màu bạn cần và nó sẽ tạo ra một biểu đồ cho biết cách truy cập trong các tình huống kết hợp màu sắc khác nhau và giúp bạn tìm ra các kết hợp tốt hơn nếu chúng không vượt qua.

 

 

5. CSS Selectors Cheatsheet

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-5

 

Bảng tóm tắt tuyệt vời này gồm sáu trang, hoặc bốn trang nếu bạn bỏ các tờ  bìa, và có đủ hấp dẫn để in ra và dán lên tường. Có tên là Nana Jeon, bạn cũng có thể chỉnh sửa và phát hành lại bảng tóm tắt này theo giấy phép Creative Commons. Ngoài ra còn có một phiên bản trò chơi được tạo bơi Ryan Yu ở đây và bạn có thể tìm hiểu thêm về cả hai trong bài viết này.

 

 

6. Mason

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-6

 

Mason là một nền tảng giúp xây dựng các tính năng của ứng dụng web dễ dàng hơn. Thay vì phải tự tay tạo nên từ  đầu các tính năng như nguồn cấp tin tức, bảng điều khiển, hồ sơ người dùng, v.v., bạn có thể sử dụng các khối dựng sẵn và tùy chỉnh những tình năng thường dùng này mà không cần lặp lại công việc đã được thực hiện bởi vô số kỹ sư. "Xây dựng trang web với Mason có nghĩa là không bao giờ phát minh lại các giải pháp để giải quyết các vấn đề phần mềm", nhà phát triển Thomas McLaughlin phát biểu trên Product Hunt. Bạn cũng có thể tự tạo ra các tính năng mới của mình riêng, lúc này bạn có thể xuất chúng và thả mã vào cơ sở mã hiện tại của mình như thể bạn đã tự viết chúng bằng tay.

 

 

7. Startup Cemetery

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-7

 

Startup Cemetery hay Nghĩa trang khởi nghiệp là một cơ sở dữ liệu dành cho bất kỳ ai quan tâm đến hoặc đang khởi nghiệp, sưu tập các tài liệu nói về điều gì đã xảy ra với các công ty khởi nghiệp đã đóng cửa để bạn có thể có được một bức tranh tổng quát nhất về sai lầm kinh doanh. Với thông tin của hơn 100 công ty và tăng dần theo thời gian, đây là một công cụ nghiên cứu hữu ích vì mỗi mục chứa một bản tóm tắt cơ bản về những gì đã xảy ra với các liên kết giúp bạn tìm hiểu sâu hơn nếu bạn muốn biết thêm thông tin chi tiết. Nghĩa trang là một phần của Failory, một thư viện dành cho những ai muốn khởi nghiệp tham khảo, với các cuộc phỏng vấn những nhà sáng lập đã thất bại về dự án khởi nghiệp của họ.

 

 

8. MakerAds

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-8

 

Những người tạo ra MakerAds cố gắng giải quyết hai vấn đề: thứ nhất là nếu bạn muốn kiếm tiền từ trang web của mình, bạn phải đưa ra những quảng cáo xấu xí cho các sản phẩm không liên quan; và thứ hai là các nhà sản xuất độc lập thường thấy việc tự quảng cáo là một thách thức. Giải pháp họ đưa ra là mạng quảng cáo này sẽ cung cấp miễn phí quảng cáo cho các sản phẩm của các nhà sản xuất độc lập và thu tiền quảng cáo từ các công ty lớn hơn. Tất cả các quảng cáo là dành cho các công ty có đạo đức và chúng được thiết kế không quá phô trương.

 

 

9. Social Sizes

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-9

 

Đánh dấu trang này để bạn có thể dễ dàng lấy các mẫu ảnh và phim có kích thước phù hợp cho tất cả các  nền tảng mạng xã hội lớn. Mỗi mẫu chứa tất cả các cỡ hình phù hợp với nền tảng mạng xã hội đó, ví dụ: Facebook có kích thước ảnh riêng cho bảng tin, câu chuyện, ảnh hồ sơ, ảnh bìa, ảnh sự kiện và ảnh nhóm. Ứng dụng hỗ trợ tám mạng xã hội lớn là Facebook, Instagram, LinkedIn, Twitter, Snapchat, YouTube, Pinterest, Twitch. Bạn có thể chỉnh sửa các mẫu này bằng Sketch, Photoshop và Adobe XD.

 

 

10. Colour Harmonies

 

10-cong-cu-thiet-ke-web-moi-tot-nhat-cho-nam-2019-10

 

Bảng màu trực tuyến này được thiết kế theo phong cách của biểu đồ màu sơn với mã màu dạng hex được ghi ở đầu của mỗi thẻ màu được xếp chồng lên nhau thành hình bánh xe. Sau khi nhấp chuột vào một thẻ, bảng màu sẽ xoay tròn với hiệu ứng đẹp mắt và màu của thẻ sẽ được dùng làm màu nền của trang để bạn có thể nhìn thấy sự tương quan của nó với các màu khác trong bánh xe màu.