10 công cụ thiết kế web mới cho tháng 4 năm 2018

NộI Dung

• 01. Hệ thống thiết kế Repo
• 02. PixelSnap
• 03. Sketch.The.Ripper
• 04. Stackswell
• 05. Phông chữ có thể thay đổi
• 06. Thanh toán sọc
• 07. CreativeGuild
• 08. Mobbin
• 09. HueSnap
• 10. Eggradients
• Nhận vé của bạn đến Generate New York

Chủ đề của cuộc tổng kết tháng này là tốc độ và hiệu quả: một vài trong số này công cụ thiết kế web sẽ làm những điều tuyệt vời cho quy trình làm việc của bạn bằng cách cắt bỏ những công việc tẻ nhạt, khó chịu không liên quan đến thiết kế. Hãy sử dụng Stackswell - nó tự động hóa tất cả những điều phiền toái khi thực hiện thiết kế đáp ứng trong Sketch. Một trong những công cụ khác của chúng tôi giúp tăng tốc mọi thứ cho bạn bằng cách trích xuất và sắp xếp tất cả các nội dung từ tệp .sketch.

Trên hết, có một sản phẩm thanh toán mới tuyệt vời từ Stripe, một công cụ mạng tuyệt vời dành cho quảng cáo của Tina Roth Eisenberg và một công cụ tuyệt vời để đo lường mọi thứ trên màn hình của bạn bằng pixel.

01. Hệ thống thiết kế Repo

Nếu bạn đã được giao nhiệm vụ làm việc trên một số thành phần cho hệ thống thiết kế của tổ chức của bạn hoặc thậm chí có thể xây dựng hoặc mã hóa chính hệ thống, bạn sẽ muốn bắt kịp với các tài nguyên mới nhất về chủ đề này.

Đối với điều này, Design Systems Repo là bạn của bạn. Đó là một bộ sưu tập sách, bài báo, bài nói, trang web, công cụ, hệ thống thiết kế, thư viện mẫu và hướng dẫn phong cách mà bạn có thể sử dụng để hiểu về cách các tổ chức hàng đầu và những nhà tư tưởng hàng đầu đang làm mọi việc.

02. PixelSnap

PixelSnap là một ứng dụng rất tiện lợi giúp đo lường mọi thứ trên màn hình của bạn ít gây khó chịu hơn nhiều. Đặt con trỏ của bạn giữa hai phần tử chẳng hạn như hình ảnh và tiêu đề, và nó sẽ tự động cho bạn biết số lượng pixel giữa chúng. Vẽ một hình chữ nhật xung quanh một phần tử và nó chụp xung quanh nó và cho bạn biết kích thước của nó. Đúng. Bạn có thể đo lường mọi thứ một cách nhanh chóng.

Xem video trên trang chủ để có được ý tưởng. Ứng dụng này có giá 15 đô la và hạn chế duy nhất là hiện tại nó chỉ có sẵn dưới dạng ứng dụng Mac. Nhưng nếu bạn là người dùng Mac thì đó là một điều tuyệt vời.

03. Sketch.The.Ripper

Xuất và chuẩn bị tài sản từ Sketch để bàn giao cho một nhóm khác có thể là một lực cản thực sự, vì vậy, triển vọng về một công cụ có thể thực hiện điều đó cho bạn chỉ với một cú nhấp chuột là khá thú vị. Sketch.The.Ripper trích xuất và sắp xếp các màn hình, sao chép và quét các hình ảnh từ tất cả các bảng vẽ trong một tệp .sketch và trình bày chúng một cách thuận tiện. Bạn có thể xem ví dụ về kết xuất từ ​​một tệp đã được tách tại đây.

Công cụ này dựa trên web nên nó hoạt động trên mọi hệ điều hành, có thể loại bỏ một số khó khăn khỏi quy trình làm việc của bạn nếu mọi người đang sử dụng các hệ thống khác nhau. Nó được tạo ra bởi Icons8 và bạn có thể đọc thêm về nó tại đây.

04. Stackswell

Stackswell tăng tốc quy trình thiết kế đáp ứng của bạn bằng cách đưa các truy vấn phương tiện vào Sketch và tự động hóa quá trình cập nhật kiểu và ký hiệu kiểu cho mỗi điểm ngắt. Thay vì thực hiện công việc này theo cách thủ công, khi bạn điều chỉnh chiều rộng của bảng vẽ, các kiểu sẽ tự động cập nhật.

Stackswell cũng giúp bạn không phải kiểm tra khoảng cách dọc của bạn cho mỗi điểm ngắt, vì vậy bạn có được khoảng cách phù hợp với ít rắc rối nhất. Bạn có thể đọc thêm về nó trong bài viết này.

05. Phông chữ có thể thay đổi

Phông chữ có thể thay đổi cho phép bạn sử dụng nhiều độ rộng và trọng lượng phông chữ khác nhau mà không cần phải bao gồm một tệp riêng biệt cho mỗi loại: bạn bao gồm một tệp và sau đó sửa đổi phông chữ bằng cách sử dụng CSS. Đó là một tình huống tuyệt vời vì nó cho phép bạn sử dụng kiểu chữ để có hiệu quả tốt nhất trong thiết kế của mình mà không cần phải tăng trọng lượng trang của bạn.

Tuy nhiên, không phải tất cả các phông chữ biến đổi đều như nhau; một số linh hoạt hơn những cái khác. Công cụ này cho phép bạn tìm các phông chữ khác nhau và thử nghiệm với chúng để xem chúng có phù hợp với nhu cầu của bạn hay không. Để biết thêm thông tin về các phông chữ thay đổi và để có ý tưởng về những gì có thể đạt được, hãy thử bản trình diễn này.

06. Thanh toán sọc

Sản phẩm thanh toán mới của Stripe dành cho các doanh nghiệp trực tuyến cung cấp cách thứ ba cho các công ty đang cân nhắc tình trạng tiến thoái lưỡng nan về việc nên xây dựng hay mua hệ thống thanh toán (để biết thêm về điều này, hãy xem bài viết của chúng tôi về các giải pháp cho cửa hàng trực tuyến). Stripe Billing API tích hợp dễ dàng vào một trang web hiện có và cho phép bạn sử dụng các khối xây dựng để tạo ra một hệ thống linh hoạt phù hợp với nhu cầu của bạn.

Khi hệ thống của bạn được thiết lập, mọi thứ được quản lý từ một trang tổng quan, nơi bạn có thể cập nhật các đăng ký, hóa đơn và báo cáo tài chính. Bạn cũng nhận được các tính năng mạnh mẽ như hệ thống thanh toán toàn cầu của Stripe, hệ thống xử lý các loại tiền tệ và thẻ tín dụng khác nhau cũng như các thành phần thanh toán linh hoạt cho phép bạn thử nghiệm với giá cả.

07. CreativeGuild

CreativeGuild là một phần phụ của CreativeMornings, một chuỗi bài giảng miễn phí hàng tháng do Tina Roth Eisenberg thành lập ở Brooklyn một thập kỷ trước. Ý tưởng này đã thành công vang dội và hiện đã có các chi hội của CreativeMornings tại hơn 185 thành phố trên toàn thế giới, mỗi thành phố đều có cộng đồng sôi động của riêng mình để nuôi dưỡng và truyền cảm hứng cho các thành viên.

CreativeGuild nhằm đưa một số khía cạnh cộng đồng lên mạng để nhiều người có thể tiếp cận hơn. Bạn có thể nghĩ nó hơi giống LinkedIn, nhưng đối với quảng cáo. Có một danh sách các công ty, cá nhân và công việc sáng tạo và bạn có thể tìm kiếm theo vị trí để tìm cơ hội trong thành phố của mình.

08. Mobbin

Mobbin là một thư viện các thiết kế ứng dụng dành cho thiết bị di động mà bạn có thể sử dụng để lấy ý tưởng cho các dự án của riêng mình - thay vì cài đặt nhiều ứng dụng, bạn có thể duyệt chúng ở một nơi để xem cách những người khác đang giải quyết các vấn đề thiết kế. Sáu màn hình cho mỗi ứng dụng được hiển thị để bạn có thể có ý tưởng về hành trình của người dùng và mẫu thiết kế cho từng ứng dụng. Ngoài ra còn có một thanh bên hiển thị danh sách việc làm.

09. HueSnap

Bạn không bao giờ biết khi nào cảm hứng sẽ ập đến; có lẽ cách trang trí của một khách sạn hoặc ánh sáng trong công viên sẽ mang lại cảm giác như cách phối màu phù hợp cho công việc của bạn. Nếu điều đó xảy ra, bạn có thể chụp một bức ảnh và sử dụng HueSnap để trích xuất màu sắc từ hình ảnh và biến chúng thành một bảng màu.

Ứng dụng hướng đến việc sử dụng thiết bị di động nên hoạt động tốt nhất trên điện thoại của bạn và bạn có thể lưu và chia sẻ bảng màu của mình với người khác. Có nhiều tính năng khác nhau để giúp bạn sửa đổi bảng màu, chẳng hạn như các tùy chọn để chọn màu bổ sung và màu kết hợp. Mỗi bảng màu của bạn có thể có tối đa sáu màu.

Để biết thêm, hãy xem bảng tổng hợp các công cụ màu tốt nhất dành cho nhà thiết kế web của chúng tôi.

10. Eggradients

Bất cứ ai tổng hợp bộ sưu tập các màu chuyển sắc đẹp này đều có con mắt tuyệt vời về màu sắc và óc hài hước thú vị. Mỗi gradient được hiển thị trong một hộp chứa hình quả trứng và được đặt một cái tên có thể có hoặc không liên quan đến màu sắc theo một cách nào đó. Nếu có một mối quan hệ nào đó, chúng tôi không thể giải mã nó.

Các tên ví dụ bao gồm 'Người nhập cư thành công' cho độ dốc màu ngọc lam, 'Trái tim tan vỡ của Wozniak' cho màu xanh lam nhạt và "Kẻ thù nhân từ" cho màu chuyển từ vàng sang xanh lục.

Nhận vé của bạn đến Generate New York

Sự kiện thiết kế web hàng đầu Tạo New York đã trở lại. Diễn ra từ ngày 25-27 tháng 4, các diễn giả chính bao gồm SuperFriendly’s Dan Mall, nhà tư vấn hoạt hình web Val Head, nhà phát triển JavaScript toàn diện Wes Bos và hơn thế nữa. Ngoài ra còn có một ngày hội thảo và các cơ hội kết nối hàng đầu - đừng bỏ lỡ. Nhận vé Tạo của bạn ngay bây giờ.