Một số công cụ hữu ích cho một Frontend developer/Designer

Dưới đây mình tổng hợp một số công cụ hữu ích cho một Frontend developer/Designer được chọn lọc qua nhiều nguồn khác nhau. Hy vọng những sites này có thể hỗ trợ phần nào cho công việc lên ý tưởng, hoàn thiện thiết kế UI và phát triển phần code Frontend cho các dự án của các bạn 

Một số công cụ hữu ích cho một Frontend developer/Designer

 

1. Fontisto 

Fontisto là kho SVG icon đáng được nhắc đến đầu tiên bởi thiết kế trang web super cool cùng giao diện docs, getting started thông minh dễ tiếp cận. Các icon SVG có nhiều options khi sử dụng với đa dạng các loại icon. Điểm cộng lớn là trang web này hoàn toàn miễn phí cho commercial use.

2. Storyboarder 

Storyboarder là một công cụ tạo storyboard hết sức kinh ngạc và…free.

Bạn có thể tạo ra các frame với đầy đủ cụ vẽ, timing, dialog, action… gọn gàng và được thiết kế tinh gọn tối đa.

Storyboarder còn hỗ trợ Adobe Photoshop để tiện cho việc đi sâu vào những chi tiết phức tạp, live edit trên từng frame.

Thậm chí với những sketch/blueprint Storyboarder cho phép bạn import chúng và ngược lại, export để có thể chỉnh sửa với bút chì và giấy.

Hỗ trợ key commands và auto generator!

Chính sách free của Wonder Unit studio cũng hết sức rõ ràng, một dự án open source tâm huyết!

Miễn là bạn có ý tưởng, mọi thứ ở đây dường như hoàn hảo từ sản phẩm đến hỗ trợ người dùng… Hãy ghé thăm và thử sức sáng tạo của bạn, biết đâu đây sẽ là software không thể thiếu trong công việc hằng ngày của bạn.

3. Font Playground 

Font Playground là một site để người dùng có thể ‘play’ với những định dạng của font, đưa ra cái nhìn so sánh và đầy đủ, cũng như export Frontend code.

Các variable options của Font Playground được trình bày đa đạng và đầy đủ. Hãy ghé thăm và tạo playground cho mình ngay nhé.

4. CoolHue 

CoolHue giúp bạn tạo ra những gradient pallete màu từ những file JSON có sẵn, tool đã cung cấp sẵn 60 options siêu đẹp. Bạn hoàn toàn có thể thêm những gradient rực rỡ trong dự án, xuất Photoshop hoặc Sketch.

5. ShrinkMe 

ShrinkMe sẽ giúp chúng ta compress những bức ảnh cho web cực kì nhanh chóng và hiệu quả. Chỉ với vài thao tác kéo thả và get link download chúng ta đã có những bức ảnh giảm dung lượng đáng kể(từ 40 – 75%) mà không làm giảm chất lượng ảnh.

Công cụ này không những vậy còn làm việc offline và hỗ trợ nhiều file shrink cùng lúc!

6. Duotone Effect Generator

Duotone Effect Generator là trang web trực tuyến tạo ra hiệu ứng duotone cho một bức ảnh bạn sử dụng. Chỉ cần upload ảnh và chọn các hiệu ứng màu sẵn có bạn sẽ có một bức ảnh output chất lượng (áp dụng để lấy tone màu background cho cùng tone với web/app rất hữu hiệu và nhanh chóng)

7. Hero Patterns 

Hero Patterns là một trang cung cấp các pattern dạng SVG (borderless) sử dụng để làm background cho web nhanh, nhỏ nhẹ và đẹp. Bạn có thể tùy chỉnh màu sắc và lựa chọn pattern phù hợp cho mục đích sử dụng

Hy vọng những công cụ trên có thế tạo ra những thay đổi nho nhỏ và giúp cho công việc hàng ngày của các bạn thuận lợi và dễ dàng, hấp dẫn hơn!!!

Techtalk via Viblo

Nguồn: https://techtalk.vn/tong-hop-cong-cu-huu-ich-cho-frontend-dev-va-designer.html

TIN LIÊN QUAN

Bảng tổng hợp icon Facebook, ký tự đặc biệt mới nhất

Để bộc lộ cảm xúc, chia sẻ trạng thái với những người bạn của mình thay vì lựa chọn những sticker, hình ảnh GIF thì bạn có thể sử dụng những icon Facebook ngộ nghĩnh. Dưới đây là bảng tổng hợp icon Facebook, ký tự đặc biệt mới nhất để bạn có thể lựa

[Android] Icon Pack Mixer: Ứng dụng giúp pha trộn các gói icon tùy theo ý muốn của bạn

Để thay đổi giao diện của các biểu tượng ứng dụng trên smartphone Android, yêu cầu người dùng phải tải về và cài đặt những gói icon dựng sẵn trên Google Play. Tuy nhiên, tất cả chỉ được giới hạn trong một kiểu thiết kế tùy theo từng nhà phát triển

Cách gửi icon khổng lồ, icon kèm hiệu ứng độc đáo trên Messenger

Messenger là một ứng dụng các bạn sử dụng mỗi ngày song song với Facebook. Ngoài những tính năng cơ bản chúng ta có thể tìm thấy. Hôm nay, mình sẽ...

Cách ẩn icon trên thanh Taskbar Windows 11 giúp Desktop gọn gàng hơn

Nếu không thích các icon trên thanh Taskbar của Windows 11 thì bạn có thể ẩn chúng đi. Sau đây là hướng dẫn cách ẩn icon trên thanh Taskbar Windows 11 cho bạn...

Cách tạo, thay đổi màu icon ứng dụng iPhone thú vị theo ý muốn

iOS 14 đã chính thức xuất hiện với rất nhiều sự thay đổi và tính năng mới mẻ. Người dùng có thể dễ dàng đổi màu icon ứng dụng iPhone cực kỳ mới lạ chỉ với một số thao tác đơn giản mà Trang Công Nghệ giới thiệu sau đây. Hướng dẫn cách đổi màu

Lựa chọn thiết kế đồ họa miễn phí thay thế Adobe Illustrator dựa trên trình duyệt tốt nhất

Nếu có ngân sách eo hẹp hay sử dụng Linux hoặc Chromebook, lựa chọn phần mềm thiết kế tốt nhất nào dành cho bạn? Thật may, thế giới Internet rộng lớn có rất nhiều công cụ thay thế Adobe Illustrator dựa trên trình duyệt miễn phí. Không những chả tốn

Cách sắp xếp lại toàn bộ icon trên iPhone trong một nốt nhạc

Sau một thời gian sử dụng, với hàng loạt ứng dụng được tải về và gỡ ra. Màn hình chính của bạn trở nên rối rắm và các mỗi lần tìm một ứng dụng...

Binance hỗ trợ chuyển đổi mainnet ICON (ICX) và thêm cặp giao dịch ICX/USDT

Binance sẽ hỗ trợ việc chuyển đổi mainnet ICON (ICX) và sẽ tạm ngưng việc gửi và rút tiền cho ICON (ICX) bắt đầu từ 0:00 ngày 20/06/2018 (UTC), tức 7:00 cùng ngày theo giờ Việt Nam. Binance sẽ xử lý tất cả các yêu cầu kỹ thuật liên quan cho tất cả

THỦ THUẬT HAY

Hướng dẫn cách xem Youtube không quảng cáo, tắt màn hình vẫn chạy

Mới đây, một lập trình viên trên diễn đàn XDA có tên là moonlightdrive đã tạo nên một ứng dụng Youtube khác giúp bạn xem video không bị dính quảng cáo cũng như tắt màn hình thì video vẫn chạy.

Hướng dẫn chuyển 11 số về 10 số trên điện thoại Android

VinaPhone sẽ đổi thành đầu số 08X, thuê bao MobiFone đầu số 07x và Viettel đầu số 03x. Nếu chuyển đổi thủ công các số điện thoại có trong danh bạ thì sẽ tốn rất nhiều thời gian, thậm chí còn nhầm lẫn. Vì vậy, bạn có

Một số chức năng mới trên Photoshop 2018: Brush mềm mại, upscale ảnh bằng AI, thiết kế font chữ,...

Tăng kích thước ảnh bằng sự hỗ trợ của trí thông minh nhân tạo, chức năng đường cọ mềm mại, hỗ trợ tự thiết kế font chữ Variable, Pen Tool ôm theo đường cong,… chính là một vài trong số nhiều điểm thay đổi đáng chú ý

Cách reset trình duyệt Edge nhanh chóng trong Windows 10

Giờ đây, việc reset lại Edge trong Windows 10 Fall Creators Update đã trở nên dễ dàng hơn rất nhiều. Hãy theo dõi bài viết dưới đây để biết cách reset lại Edge nhé!

Tạo mật khẩu smartphone Android tự thay đổi mỗi giờ: Đố ai mở được khóa?

Trước hết, chúng ta cần tải phần mềm có tên là Screen Lock - Time Password trên Google Play.

ĐÁNH GIÁ NHANH

[Review] iPad Pro 10.5 + Smart Keyboard đã làm mình muốn rời xa MacBook Pro

Trong bài này mình sẽ đánh giá chung hai món: iPad Pro 10.5 và bàn phím Apple Smart Keyboard. Hai món này hợp lại sẽ giải quyết được hầu hết các nhu cầu cơ bản của bạn trên máy tính.

Trên tay Xiaomi 11T Pro 5G – Smartphone HOT nhất phân khúc tầm trung với camera 108MP, sạc siêu nhanh 120W, chip Snapdragon 888

Xiaomi 11T Pro 5G sở hữu cấu hình siêu mạnh mẽ, camera 108MP đỉnh chóp, sạc cực nhanh,… Cùng mình trên tay Xiaomi 11T Pro 5G và khám phá chiếc điện thoại ấn tượng này nhé. Mở hộp Xiaomi 11T Pro 5G Trước tiên, chúng ta

iPhone XS Max: Lựa chọn hoàn hảo cho ai muốn nâng cấp từ các phiên bản Plus trước đây

Mặt trước mang thiết kế tràn viền hiện đại và phần notch cho camera TrueDepth ở trên cùng. Camera TrueDepth có nhiệm vụ chính hỗ trợ Face ID được cải tiến tốc độ truy cập nhanh hơn, bảo mật hơn. Nó vẫn là hệ thống nhận