Top 34 phần mềm thiết kế website giúp bạn làm chủ kinh doanh online

Trong hầu hết các ngành nghề, bạn càng dành nhiều thời gian cho công việc của mình thì bạn càng đi theo một con đường của riêng bạn. Nhưng đối với các nhà thiết kế và phát triển web, không thay đổi là điều sẽ không bao giờ nằm trong lựa chọn của bản thân.

Khi khách hàng yêu cầu các trang web và ứng dụng ngày càng lớn hơn và tốt hơn hoạt động trên một hệ sinh thái ngày càng phức tạp của các thiết bị, từ VR đến giọng nói, làm việc với công nghệ mới và kỹ thuật mới không còn là một lựa chọn nữa; mà nó là một điều cần thiết phải sử dụng.

Có rất nhiều phần mềm thiết kế website được phát hành mọi lúc để giúp bạn giải quyết những thách thức mới này. Vấn đề duy nhất là thời gian để có thể theo kịp tất cả.

Vì vậy, nếu bạn không có thời gian rảnh rỗi mỗi ngày để tìm kiếm trên Product Hunt, hãy xem lựa chọn của chúng tôi về các phần mềm thiết kế web tốt nhất hiện có, tất cả sẽ giúp bạn trở nên hợp lý, có nhiều phát minh và sáng tạo hơn trong công việc.

Một số có thể sẽ quen thuộc, một có thể mới đối với bạn. Nhưng mỗi cái có khả năng giúp bạn tiết kiệm thời gian, năng lượng và ngân sách trong công việc thiết kế web của bạn.

1. Sketch

Chúng ta sẽ bắt đầu với điều rõ ràng nhất. Vâng, chúng tôi biết mọi người đã nghe nói về Sketch – phần mềm thiết kế giao diện người dùng – nhưng về mặt thông thường, dường như vẫn còn rất nhiều nhà thiết kế web dựa vào Photoshop để thiết kế giao diện người dùng (mặc dù đã phát hành Adobe XD , phần mềm tạo mẫu và tạo khung của Adobe – một trong những bổ sung mới nhất cho Creative Cloud ).

Rory Berry, giám đốc sáng tạo tại Superrb , đã chuyển sang Sketch vào năm 2017, và rất khuyến khích điều đó. Ông đã là người sử dụng Photoshop trong hơn 10 năm, thật khó để thay đổi và học được điều gì đó mới, ông nói. Tuy nhiên, sau ngày đầu tiên sử dụng Sketch, ông không còn quay lại sử dụng photoshop nữa. .

Ông ấy đưa ra một số lý do tại sao.  “So với Photoshop, việc sắp xếp tất cả các tài liệu của bạn mà bạn có và chỉnh sửa trên Phác thảo dễ dàng hơn nhiều” ông ấy bắt đầu.” Bản phác thảo có các tài liệu nhỏ trong khi Photoshop có các tài liệu lớn. Do là ứng dụng dựa trên vectơ, kích thước tệp nhỏ hơn đáng kể so với Photoshop.”

Và đó không phải là tất cả.” Hệ thống lưới tích hợp trong Sketch rất tuyệt vời và giúp thiết kế giao diện dễ dàng hơn nhiều. Tôi nghĩ rằng giao diện người dùng tổng thể và cảm giác tối thiểu làm cho nó dễ dàng hơn để thiết kế và thân thiện với người dùng. So sánh với Photoshop có vẻ rất phức tạp hơn nhiều .”

Cộng đồng Sketch cung cấp hàng trăm plugin để giúp các nhà thiết kế làm việc dễ dàng hơn và mượt mà hơn, ông nói thêm. Về cơ bản, có một plugin cho mọi thứ nếu bạn có thể tìm thấy nó. Photoshop / Lightroom vẫn là phần mềm hàng đầu của chúng tôi để chỉnh sửa ảnh, nhưng Sketch là phần mềm chúng tôi sẽ sử đụng để thiết kế web.

Nếu bạn đã dùng thử Sketch từ lâu và không thích nó, bạn có thể muốn thử phiên bản mới nhất của Sketch, phiên bản 52, bao gồm giao diện được thiết kế lại hoàn toàn, các tính năng mới để thiết kế với dữ liệu và Chế độ tối mới cho macOS Mojave.

2. Adobe XD

Phần mềm thiết kế vectơ và tạo khung của Adobe , Adobe XD , đang ngày càng phát triển, với thông báo tại Adobe MAX năm ngoái rằng nó sẽ bao gồm tạo mẫu bằng giọng nói .

XD bao gồm các công cụ vẽ, cho phép bạn xác định các tương tác không tĩnh, xem trước trên thiết bị di động và máy tính để bàn và các tính năng chia sẻ để đưa ra phản hồi về thiết kế. Nó cho phép bạn chọn kích thước bản vẽ dành riêng cho thiết bị để bắt đầu dự án và thậm chí bạn có thể nhập bộ giao diện người dùng phổ biến, ví dụ như Google’s Material Design.

Andrei Robu , giám đốc thiết kế tại Robu Studio ở Barcelona, là một trong những người hâm mộ của nó.  “Đây là một phần mềm với giao diện rất nhẹ, với rất nhiều hình ảnh được tải vào và rất tuyệt cho các bảng tâm trạng. Việc tạo mẫu rất hữu ích để cho khách hàng thấy cách thức hoạt động của phần mềm, đặc biệt là vì bạn có thể đẩy nội dung trực tuyến ngay lập tức. Tôi cũng thích việc tôi có thể sao chép và dán nội dung từ các ứng dụng Adobe khác.”

Điều quan trọng, Adobe XD tích hợp với phần còn lại của Creative Cloud. Ellis Rogers, nhà thiết kế đồ họa tại  Receptional Ltd cũng đề xuất. “Phác thảo là cách tuyệt vời để thiết kế cho một nhà phát triển web, bởi vì bạn đang làm việc với các giá trị trong một phần mềm được xây dựng chính xác để thiết kế trang web và ứng dụng,” ông nói. Nhưng hạn chế lớn nhất đối với tôi là nó chỉ khả dụng trên Mac, khiến việc chia sẻ tệp Phác thảo khó khăn cho các nhà phát triển / thiết kế web không sử dụng OS X. Chia sẻ tệp để phát triển có nghĩa là công cụ / chuyển đổi bổ sung hoặc hoạt động từ file JPG – Điều đó gây ra quá nhiều trở ngại.

Là một người sử dụng Photoshop và Illustrator, UI cho Adobe XD mang lại cảm giác quen thuộc, anh nói thêm, vì vậy không khó khăn để làm quen khi sử dụng nó. Vì vậy, bây giờ sau một vài tuần thử dùng, đây là phần mềm duy nhất tôi sử dụng cho tất cả các thiết kế website, thiết kế ứng dụng, tạo mẫu hoặc khung lưới.

Rogers cũng ca ngợi khả năng XD cung cấp để sử dụng các thư viện Adobe để nhanh chóng nhập bất kỳ tài sản nào từ Photoshop hoặc Illustrator, vì điều này làm cho các dự án hợp tác chạy nhanh hơn.

Ông làm việc với các nhà thiết kế và họa sĩ UI / UX làm cho quá trình này trở nên đơn giản, ông nói. Khi thiết kế / nguyên mẫu hoặc khung dây hoàn tất, Adobe XD cho phép bạn nhanh chóng chọn các yếu tố và tạo chuyển tiếp trang cho một nguyên mẫu hoạt động, có thể được chia sẻ qua liên kết. Liên kết cũng cho phép bạn thu thập phản hồi trên mỗi trang, giữ cho tất cả được tổ chức. Liên kết có thể được cập nhật trong Adobe XD để khách hàng luôn có thể xem phiên bản mới nhất mà không phải lo lắng về các phiên bản không chính xác; một niềm vui tuyệt đối để làm việc với.

3. Figma

Figma là một phần mềm thiết kế giao diện cho phép nhiều nhà thiết kế cộng tác trong thời gian thực. Nó có sẵn trong trình duyệt hoặc trên Windows, Mac hoặc Linux và có cả phiên bản miễn phí và trả phí tùy thuộc vào mục đích bạn sử dụng.

Dưới đây là một số tính năng nổi bật của nó:

Figma có USP tương tự như Sketch, ngoại trừ phần nền tảng chéo, Chuyên gia về thiết kế trang giao diện web, Benjamin Read, giải thích. “Khi tôi sử dụng nó để tạo ra một vài biểu tượng cho một bài viết trên trang web của chúng tôi, tôi thấy quy trình làm việc rất trơn tru. Tôi không mất nhiều thời gian để tìm hiểu và có thêm lợi ích khi hợp tác: bạn có thể chia sẻ đồ họa với những người khác trong ứng dụng.”

“Tôi đã cố gắng chuyển sang sử dụng Linux cho công việc của mình và đôi khi chúng tôi sử dụng Windows, vì vậy Figma khá có ý nghĩa với tôi từ quan điểm thực tế”, ông nói thêm. “So sánh tôi đã tìm thấy nhiều phần mềm cho các nền tảng khác.”

Nhà văn và nhà nghệ thuật nội dung tự do David Eastwood , cũng có từng nói về Figma. “Phần mềm này là một công cụ thực sự hữu ích khi chúng ta cần nhanh chóng tạo lại MVT; đôi khi thêm một số bổ sung nhỏ vào một bố cục hiện có. Chúng tôi yêu thích cách chúng ta có thể nhanh chóng tạo ra các thiết kế cho máy tính để bàn, máy tính bảng và điện thoại di động.”

4. Affinity Designer

“Nhà thiết kế mối quan hệ của Serif đã được một số người mệnh danh là ‘Kẻ giết người Photoshop’ và thật dễ hiểu tại sao,” nhà thiết kế sản phẩm Dan Edwards nói . “Ấn tượng đầu tiên của tôi là ứng dụng được thiết kế vô cùng tuyệt vời và cảm giác như nó được tạo ra để trở thành một phần mềm thiết kế đồ họa và web chuyên dụng.

“Có một vài tính năng tôi thực sự thích, bao gồm các lớp không điều chỉnh, không phá hủy. Điều này về cơ bản có nghĩa là bạn có thể điều chỉnh hình ảnh hoặc vectơ mà không làm hỏng chúng.

“Thu phóng 1.000.000 phần trăm chỉ là hạnh phúc, nó đặc biệt hữu ích khi làm việc với nghệ thuật vector, vì bạn có thể thực sự gần gũi. Các tính năng hoàn tác và lịch sử cũng thực sự tiện dụng: Ám ảnh cho phép bạn quay lại hơn 8.000 bước!”

“Khi nói đến thiết kế, giao diện người dùng cảm thấy quen thuộc. Khi chuyển từ Photoshop, mọi người dường như muốn bắt đầu lại, điều này có thể đặt ra một thách thức thực sự. Điều mà Affinity đã làm là giữ bố cục quen thuộc, trong khi thắt chặt mọi thứ và che giấu phiền nhiễu . Tôi dễ dàng có thể nhảy thẳng vào và thiết kế. “

Afferve Designer hiện cũng có sẵn cho iPad . Và lưu ý rằng đây không phải là phiên bản ứng dụng di động thu nhỏ mà bạn có thể mong đợi: đó là phiên bản đầy đủ giống như bạn có trên máy tính để bàn.

Đừng bỏ lỡ các hướng dẫn của chúng tôi để sử dụng Pixel persona , công cụ Xuất khẩu và công cụ Bút trong Trình thiết kế mối quan hệ. Cũng lưu ý rằng Affinity thực hiện một thay thế Photoshop, Ảnh có liên quan và một thay thế InDesign,  Affinity Designer c; tất cả trong số đó kết hợp với nhau độc đáo.

5. Flare

Flare là một phần mềm dựa trên trình duyệt từ 2Dimensions giúp bạn thiết kế và tạo hiệu ứng nghệ thuật vector. Nhằm mục đích cho cả nhà thiết kế web và nhà thiết kế trò chơi, nó cho phép bạn làm việc trực tiếp, trong thời gian thực, với các tài sản chạy trong sản phẩm cuối cùng của bạn, loại bỏ sự cần thiết phải làm lại mã đó. Vì vậy, nó sẽ đơn giản hóa quá trình của bạn rất nhiều và tiết kiệm cho bạn một đống thời gian.

Trên hết, nó miễn phí để tải xuống như một phần của phong trào Thiết kế mở.

6. Vaunt

Bạn muốn kết hợp bảng màu của trang web của bạn với một hình ảnh cụ thể? Sau đó, bạn cũng có thể tìm thấy Vistic tiện dụng. Đây là một ứng dụng Mac miễn phí sử dụng thuật toán phân cụm để phân tích hình ảnh của bạn và cho bạn biết màu nào chiếm ưu thế trong ảnh, do đó bạn có thể sử dụng thông tin đó trong thiết kế của mình.

Bạn kéo và thả hình ảnh của mình vào ứng dụng và các màu chủ đạo xuất hiện trong một bảng điều khiển. Sau đó, bạn có thể nhấp vào bất kỳ màu nào để thêm chúng vào clipboard của mình.

7. Squoosh

Ra mắt vào tháng 11 năm ngoái, Squoosh là một ứng dụng miễn phí của Google nhằm mục đích giúp các nhà thiết kế web nén hình ảnh của họ mà không làm giảm chất lượng. Bạn kéo và thả hình ảnh của mình vào ứng dụng và sử dụng thanh trượt để chơi với mức độ nén, do đó bạn có thể nhanh chóng tìm thấy sự cân bằng tốt giữa chất lượng hình ảnh và kích thước tệp.

Ứng dụng hoạt động cả trực tuyến và ngoại tuyến và nói chung, đây là một chiến thắng: các nhà thiết kế web tiết kiệm thời gian và Google có được một trang web nhanh hơn mà vẫn đẹp.

8. Linksplit

Cách hiệu quả nhất để làm cho trang web của bạn tốt hơn là thông qua thử nghiệm A / B: phân chia lưu lượng giữa hai hoặc nhiều phiên bản khác nhau và xem phiên bản nào hoạt động tốt hơn. Và ứng dụng này làm cho nó dễ dàng hơn để thiết lập. Nó miễn phí cho 10.000 lần nhấp đầu tiên và bạn thậm chí không phải đăng ký để bắt đầu.

Đi đến trang web, nhập URL đích của bạn và bạn được cung cấp một URL thử nghiệm ngắn, duy nhất để chia sẻ với khán giả của mình. Nếu bạn cũng thích, bạn có thể thiết lập các quy tắc. Ví dụ: nếu bạn muốn những người ở Vương quốc Anh đang sử dụng Chrome trên iOS kết thúc ở một nơi khác với những người ở Hoa Kỳ, điều đó khá dễ dàng để thiết lập.

9. Anime

Mặc dù hoạt hình trên trang web đôi khi có một đoạn rap tệ, các nhà phát triển luôn tìm cách để làm cho mọi thứ dễ dàng hơn. Hoạt hình và chuyển tiếp CSS là một bước tiến lớn, nhưng các tương tác phức tạp hơn thường yêu cầu một thư viện. Anime là một phần mềm hoạt hình mới mà bạn muốn xem nếu bạn cần thêm các thành phần hoạt hình phức tạp vào ứng dụng của mình.

Đây là một ví dụ để chứng minh API siêu đơn giản:

var myAnimation = anime({

targets: [‘.box1’, ‘.box2’],

translateX: ‘5rem’,

rotate: 180,

duration: 3000,

loop: true

});

Mã này xác định các đối tượng bạn muốn tạo hiệu ứng, cùng với các chi tiết cụ thể của hình ảnh động. API cho phép bạn nhắm mục tiêu các phần tử bằng cách sử dụng các bộ chọn CSS, các phần tử DOM hoặc thậm chí các đối tượng JavaScript.

10. Avocode

Avocode giúp các nhà phát triển frontend cực kỳ dễ dàng mã hóa các trang web hoặc ứng dụng từ các thiết kế Photoshop hoặc Phác thảo. Nó được xây dựng bởi cùng một đội đã mang đến cho chúng tôi Mũ CSS và Mũ PNG, vì vậy không có gì đáng ngạc nhiên khi họ đã tiến hành quá trình xuất khẩu thêm một bước nữa ở đây. Mặc dù các ứng dụng trước đây đã cho phép bạn xuất tài sản, nhưng điều khiến Avocode thực sự đặc biệt là bạn có thể sử dụng plugin Photoshop của nó để đồng bộ hóa PSD của bạn thành Avocode chỉ bằng một cú nhấp chuột.

Avocode nhanh chóng và tự động phân tích tệp PSD hoặc Phác thảo của bạn và đưa mọi thứ vào giao diện người dùng được thiết kế đẹp mắt. Sau đó, bạn có toàn quyền kiểm soát cách bạn xuất tài sản, bao gồm xuất SVG theo tiêu chuẩn.

Bạn cũng có thể nhấp vào các yếu tố trong thiết kế, sao chép và dán mã vào trình soạn thảo văn bản bạn chọn. “Nó cung cấp cho người dùng mọi thứ họ cần để mã hóa – bản xem trước của thiết kế và truy cập vào tất cả các lớp và xuất tài sản”, đồng sáng lập Avocode, Vũ Hoàng Anh nói . “Điều tốt nhất là các nhà phát triển sẽ không cần Photoshop hay Phác thảo. Quy trình làm việc hiện tại thực sự hấp dẫn và đó là lý do tại sao chúng tôi tạo ra Avocode.”

Chúng tôi không chắc chắn bất kỳ ứng dụng nào có thể sao chép một nhà phát triển. Nhưng chúng tôi biết nhiều nhà thiết kế khó tính đã vui vẻ sử dụng điều này để biến các tệp PSD và Phác thảo thành các thiết kế tương tác, sau đó có thể tạo nền móng cho việc xây dựng trang web. Nó có giá từ $ 14 mỗi tháng.

11. Zeplin

Bạn có thấy việc bàn giao tài sản thiết kế cho các nhà phát triển có thể là một chút rắc rối không? James Stiff chắc chắn làm được. Họ không phải lúc nào cũng chia sẻ cùng một phần mềm, anh ấy chỉ ra, vì vậy những người mockup Photoshop được xếp lớp và chú thích một cách tỉ mỉ cuối cùng là những tập tin bị làm phẳng và những thứ chắc chắn bị lạc trong bản dịch.

Zeplin giảm thiểu trải nghiệm đau đớn này bằng cách dịch các tệp Photoshop hoặc Phác thảo thành một ứng dụng Mac, Windows hoặc web miễn phí. Phần tốt nhất là Zeplin cung cấp tài liệu tham khảo nhanh cho màu sắc, kích thước và phông chữ từ các thiết kế của bạn, theo ông Stiff. Nó thậm chí còn tạo CSS và hướng dẫn phong cách. Tôi đã tìm thấy Zeplin là một trình tiết kiệm thời gian khổng lồ và bạn bè nhà phát triển của tôi dường như cũng thực sự thích nó.

Cũng đọc bài viết của chúng tôi trên phần mềm thu hẹp khoảng cách nhà thiết kế-nhà phát triển .

12. Pattern Lab

Pattern Lab là một phần mềm thiết kế hướng mẫu đẹp mắt được tạo bởi Dave OIsen và Brad Frost. Nó dựa trên khái niệm Thiết kế nguyên tử , nói rằng bạn nên chia thiết kế của mình thành các phần nhỏ nhất – các nguyên tử – và kết hợp chúng để tạo thành các thành phần lớn hơn, có thể tái sử dụng – các phân tử và sinh vật – sau đó có thể biến thành các mẫu có thể sử dụng được.

Mặc dù ở cốt lõi của nó là một trình tạo trang tĩnh kết hợp các thành phần UI lại với nhau, nhưng Lab Lab còn nhiều hơn thế. Đó là ngôn ngữ và công cụ bất khả tri; nó cho phép bạn lồng các mẫu UI bên trong nhau và thiết kế với dữ liệu động; nó có các công cụ thay đổi kích thước khung nhìn không theo thiết bị để giúp bạn đảm bảo hệ thống thiết kế của bạn hoàn toàn đáp ứng; và nó hoàn toàn có thể mở rộng để bạn có thể chắc chắn rằng nó sẽ mở rộng để đáp ứng nhu cầu của bạn.

13. Vivaldi

Đôi khi phần mềm thiết kế web tốt nhất có thể đơn giản như một trình duyệt mới. Vivaldi là một trình duyệt web nhanh, có thể tùy chỉnh cho người dùng quyền lực được xây dựng bởi một số người bắt đầu Opera. Được mệnh danh là ‘trình duyệt cho bạn bè của chúng tôi’, Vivaldi được xây dựng bằng các công nghệ web. JavaScript và React đã được sử dụng để tạo giao diện người dùng, cùng với Node.js và rất nhiều mô-đun NPM.

Vivaldi là trình duyệt tùy biến nhất hiện có và nó cung cấp các tính năng thú vị khác như điều khiển dòng lệnh, bảng điều khiển để ghi chú, xếp chồng và xếp chồng và bảng điều khiển web cho phép bạn đặt tất cả các trang web yêu thích của mình vào một nơi để dễ dàng truy cập .

14. Firefox Reality

Nếu bạn đang làm việc trong webVR, bạn sẽ muốn xem Firefox Reality, một trình duyệt mới dành cho các thiết bị thực tế ảo như Viveport, Oculus và Google Daydream.

Được Mozilla ra mắt vào tháng 9 năm ngoái, hiện đã có sẵn từ các cửa hàng ứng dụng của các thiết bị này và được thiết kế để di chuyển liền mạch giữa web 2D và web nhập vai. Trong số các tính năng này là khả năng tìm kiếm trên web bằng giọng nói của bạn, thông qua tai nghe thiết bị của bạn. Trình duyệt đang được xây dựng trong trạng thái mở và bạn có thể theo dõi thông qua trang Github của nó . Ngoài ra hãy xem Hologram của ứng dụng VR, tiếp tục trong danh sách của chúng tôi.

15. Canva

Bạn muốn giả lập một cái gì đó như một infographic nhanh chóng và dễ dàng? Sau đó, Lawrence Harmer, người sáng lập Solve Web Media , giới thiệu Canva . Đây là một ứng dụng miễn phí, dựa trên trình duyệt được cả nhà thiết kế và người không thiết kế sử dụng để tạo đồ họa cho cả in và web.

Harm Canva là người khá giỏi trong việc tạo ra những bức ảnh đẹp. Hình ảnh là một cửa sổ vào linh hồn của trang web và phương tiện truyền thông xã hội của bạn, vì vậy một ứng dụng như thế này có thể là chìa khóa để thành công.

16. Web design proposal tool

Beewits có một dòng ứng dụng tuyệt vời để giúp cho việc kinh doanh thiết kế web trở nên dễ dàng hơn, cụ thể là Trình tạo báo giá thiết kế web và Máy tính tỷ lệ hàng giờ . Bây giờ cho năm 2018, nó đã đưa ra một ứng dụng miễn phí tuyệt vời khác: Công cụ đề xuất thiết kế web tự giải thích .

Về cơ bản, đây là một công cụ ‘Đề xuất’ đơn giản, cho phép bạn nhanh chóng và dễ dàng đưa ra các đề xuất, theo David Attard của Beewits. Đây là một hình thức được tôn vinh cho phép bạn nhập và thay đổi văn bản đã đặt, sau đó tạo một tài liệu Word sẵn sàng để gửi trực tiếp đến máy khách. Khác, bạn có thể nhập văn bản của mình mà không cần sử dụng mẫu.

Nếu bạn đăng nhập vào dịch vụ miễn phí, bạn có thể lưu phiên bản hiện tại của mình, như vòng tiếp theo, bạn đã có một loạt các trường đã được điền đầy đủ thông tin của bạn. Nó đơn giản, nhưng nó hoàn thành công việc.

17. Site Stacks

Đây là một ứng dụng dựa trên trình duyệt khác đơn giản và tuyệt vời. Nhập URL của bất kỳ trang web nào vào tiện ích mở rộng Chrome này và nó cho phép bạn xem ngăn xếp công nghệ của nó. Nó nhanh, mượt mà và đáng tin cậy, cung cấp bảo hiểm cho hơn 40.000 sản phẩm và tự hào về cả độ chính xác và độ cạn kiệt của dữ liệu.

Chúng tôi xây dựng tiện ích mở rộng này để trở thành một cách đơn giản hơn để truy cập dữ liệu này.

18. CodePen Projects

Được thành lập vào năm 2012 bởi Alex Vazquez, Tim Sabat và Chris Coyier, CodePen đã phát triển để trở thành cộng đồng lớn nhất và sống động nhất trên web để thử nghiệm và giới thiệu các đoạn mã HTML, CSS và JavaScript. Trong năm năm đầu tiên, nó hoạt động như một trình soạn thảo mã trực tuyến và môi trường học tập nguồn mở, nơi các nhà phát triển có thể tạo các đoạn mã (“bút”), kiểm tra chúng và nhận phản hồi.

Sau đó vào năm 2017, CodePen đã có một bước tiến lớn khác bằng cách ra mắt IDE (Môi trường phát triển tích hợp) của riêng mình, CodePen Project, cho phép bạn xây dựng các trang web trong trình duyệt của mình.

Bạn có thể kéo và thả các tệp trang web của mình, sắp xếp chúng vào các tab và xem trước trang web của bạn khi bạn xây dựng nó. Có các mẫu để giúp bạn tạo các trang web nhanh hơn nếu bạn chọn, cũng như các ứng dụng gỡ lỗi tích hợp.

Lưu ý rằng, mặc dù nó hoạt động theo cách tương tự như Pen Editor, CodePen Project không thay thế cái sau mà nằm bên cạnh nó.

19. Bootstrap

Bootstrap chắc chắn không phải là một ứng dụng mới. Nhưng nó đã cách mạng hóa sự phát triển và không còn nghi ngờ gì nữa, khuôn khổ phổ biến sẽ tiếp tục định hình cách chúng ta xây dựng ứng dụng trên web. Mỗi bản cập nhật cũng mang đến một đại tu hoàn chỉnh của ứng dụng.

Phiên bản mới nhất, 4.2.1, ra mắt vào tháng 12. Nó bao gồm một loạt các tính năng mới, bao gồm thành phần tải spinner mới, thành phần bánh mì nướng mới để hiển thị thông báo, công tắc kiểu iOS mới, hỗ trợ cảm ứng trong thành phần băng chuyền và hơn thế nữa. Kiểm tra tính năng đầy đủ được thiết lập trên trang web Bootstrap và tìm các chủ đề Bootstrap miễn phí tốt nhất trong hướng dẫn của chúng tôi .

20. ally.js

Không có danh sách các phần mềm phát triển web nào được hoàn thành nếu không có ít nhất một phần mềm truy cập. Khả năng truy cập là một trong những khía cạnh thường bị bỏ quên trong thiết kế và phát triển và ally.js có thể đơn giản hóa nó cho bạn.

ally.js là một thư viện JS cung cấp cho bạn quyền kiểm soát tốt đối với các yếu tố có thể tập trung và không tập trung. Ví dụ: sử dụng API của nó, bạn có thể ngăn các thành phần bên ngoài cửa sổ phương thức nhận tiêu điểm cho đến khi phương thức được đóng. Bạn cũng có thể tìm hiểu chính xác các yếu tố nào có thể tập trung hoặc có thể lập bảng và xác định các thay đổi tiêu điểm trong DOM bóng.

Hai tính năng mạnh mẽ khác là khả năng xác định cách thay đổi tiêu cự (bàn phím, chuột, v.v.) và khi một yếu tố có thể lấy nét và hiển thị trên màn hình (điều này có thể giúp tránh cuộn trang).

21. Type Nugget

Loại Nugget giải quyết một nhu cầu bạn sẽ có về mọi dự án lối vào: xử lý kiểu chữ CSS. Vẫn đang trong giai đoạn thử nghiệm với nhiều tính năng hơn trong công việc, đây là một ứng dụng sắp chữ trực tuyến cho phép bạn kiểm soát tốt các kiểu kiểu.

Ứng dụng hiển thị một tập hợp các mẫu văn bản khác nhau trên trang, có thể được điều chỉnh trực tiếp trong một bảng điều khiển bên phải. Bảng điều khiển cho phép bạn chọn kích thước phông chữ, trọng lượng, kiểu dáng, màu sắc, khoảng cách chữ, trang trí văn bản và nhiều thứ khác cho từng khía cạnh của trang (kiểu toàn cầu, tiêu đề, đoạn văn, liên kết và danh sách HTML).

Sử dụng, ứng dụng này cho phép bạn đăng ký tài khoản, đăng nhập và lưu tiến trình của bạn. Sau khi chỉ định tất cả các cài đặt của bạn, bạn có thể nhấn nút ‘Tạo mã’ và Loại Nugget sẽ tạo liên kết đến một biểu định kiểu được lưu trữ trên CDN của nó. Nếu bạn thấy kiểu chữ CSS tẻ nhạt và lặp đi lặp lại, bạn sẽ được hưởng lợi rất nhiều từ việc thêm ứng dụng này vào quy trình làm việc của mình.

22. ARKit

Hiện thực mở rộng – pha trộn các đối tượng và thông tin kỹ thuật số với môi trường xung quanh bạn – là một không gian tạo ra nhiều hứng thú trong cộng đồng phát triển ứng dụng và web ngay bây giờ. Không chỉ vì ARKit của Apple, một khung cho phép bạn dễ dàng tạo trải nghiệm AR cho iPhone và iPad

Với ARKit 2 trên iOS 12, các ứng dụng AR của bạn giờ đây có thể được nhiều người dùng trải nghiệm và tiếp tục lại sau đó trong cùng một trạng thái. Bạn cũng có thể kết hợp các đối tượng trong thế giới thực vào trải nghiệm AR của mình, mang đến cho người dùng những cơ hội tuyệt vời hơn nữa.

23. Vue.js

Danh sách các phần mềm web mới sẽ ra sao nếu không có khung JavaScript? Vue.js, như React, là một khung để xây dựng giao diện người dùng và sử dụng DOM ảo. Như tên cho thấy, thư viện cốt lõi của Vue tập trung vào lớp xem.

Nhìn vào một ví dụ mã, được lấy từ các tài liệu của Vue, sử dụng đầu vào của người dùng và thể hiện sự thanh lịch của thư viện. Chúng ta sẽ bắt đầu với HTML:

Lưu ý trình xử lý v-on tùy chỉnh gọi phương thức ReverseMessage . Đây là JavaScript:

Trong ví dụ đó, tôi điền dữ liệu vào đoạn văn bản và xác định phương thức ReverseMessage. Vue rất tốt cho những người ít kinh nghiệm với các thư viện phức tạp, nhưng cũng có một số plugin để giúp phát triển các ứng dụng web đơn trang phức tạp.

{{ message }}

<button

v-on:click=”reverseMessage”>Reverse

Message

var myApp = new Vue({

el: ‘#example’,

data: {

message: ‘Hello Vue.js!’

},

methods: {

reverseMessage: function () {

this.message = this.message.split(”).

reverse().join(”)

}

}

});

24. Hologram

Hologram là một phần mềm tất cả trong một để tạo WebVR. Ứng dụng máy tính để bàn miễn phí này không yêu cầu kiến thức mã hóa trước đó và tích hợp Google Blocks bản địa của nó cho phép bạn chơi với nhiều đối tượng 3D miễn phí ngay lập tức. Dưới vỏ bọc, Hologram tận dụng tối đa sức mạnh và sự đơn giản của A-Frame, khung WebVR của Mozila.

Điều này có nghĩa là các nhà phát triển có thể tải xuống các dự án được tạo bằng Hologram và sử dụng chúng trong quy trình làm việc A-Frame của họ. Nó hiện có sẵn trên Mac và một phiên bản Windows sẽ sớm được hứa hẹn.

25. Parallax SVG

Được tạo bởi Gareth Battensby của Parallax , ứng dụng hoạt hình SVG là một loạt các công cụ hoạt hình SVG dưới dạng tập lệnh Python. Tôi đã xây dựng các ứng dụng như một phản ứng với những thất vọng mà bạn nhận được khi tạo các hoạt hình SVG phức tạp hoặc dài, ông nói trong bài đăng trên blog giải thích này .

Phần lớn nhất trong số này được ghi đè chỉnh sửa bất cứ khi nào bạn tái xuất từ Illustrator. Các công cụ này loại bỏ hoàn toàn vấn đề đó – chúng hoàn hảo cho các nhà phát triển front-end hoạt hình đồ họa SVG với GSAP hoặc các thư viện hoạt hình tương tự.

26. Quill

27. URL to PDF

Được Alvar Carto mang đến cho bạn, API tự lưu trữ này cho phép bạn chuyển đổi HTML của mình thành PDF, vì vậy nó rất hữu ích để hiển thị hóa đơn, hóa đơn hoặc bất kỳ nội dung HTML nào khác. API bỏ qua các quy tắc CSS @media của một trang theo mặc định và đặt Chrome để mô phỏng màn hình @media, để làm cho tệp PDF mặc định trông giống trang web thực tế hơn. Bạn có thể thiết lập nó hoạt động tự động theo định kỳ và tốt nhất là miễn phí.

28. iotaCSS

iotaCSS là một khung CSS được tạo ra một cách có chủ đích để không theo thiết kế. Nó được tạo ra bởi nhà kiến trúc sư tư vấn Dimitris Psaropoulos , người cảm thấy rằng các khung CSS khác đang áp đặt rất nhiều hạn chế đối với các nhà thiết kế mà anh ta làm việc cùng. Điều này đã buộc anh ta phải viết rất nhiều mã lên đầu, hoặc yêu cầu nhà thiết kế thỏa hiệp. Vì vậy, thay vào đó, anh ta tạo ra khuôn khổ của riêng mình, hoạt động hơi khác một chút.

Mặc dù hầu hết các CSS Framework hoạt động như một đơn vị, iotaCSS là một tập hợp các mô-đun riêng lẻ, nhỏ và linh hoạt không phụ thuộc vào nhau. Bạn có thể sử dụng một cách độc lập hoặc bạn có thể kết hợp chúng để xây dựng giao diện người dùng phức tạp hơn.

29. Launchpad

Launchpad là một plugin từ Anima cho phép bạn xuất bản các trang web phản hồi trực tiếp từ Phác thảo, không yêu cầu mã hóa. Toàn bộ giao diện được tích hợp vào Phác thảo. Nếu bạn hiện đang thiết kế các trang đáp ứng trong Phác thảo và sau đó bàn giao chúng cho nhà phát triển, thì việc dùng thử ứng dụng tuyệt vời này là một việc hoàn toàn không có trí tuệ.

30. React Sketch.app

React Sketch.app cung cấp một cách siêu dễ dàng để quản lý tài sản phác thảo trong một hệ thống thiết kế lớn. Được xây dựng bởi nhóm tại Airbnb để giúp thu hẹp khoảng cách giữa các nhà thiết kế và kỹ sư, về cơ bản, đây là một thư viện mã nguồn mở cho phép bạn viết các thành phần React kết xuất thành tài liệu Phác thảo.

Vì React Sketch.app sử dụng Flexbox, các thành phần của nó có thể có bố cục phong phú giống như các thành phần thực của bạn. Điều đó có nghĩa là không còn kéo hình chữ nhật bằng tay; tất cả mọi thứ hoạt động như công cụ bố trí mục tiêu của bạn.

React Sketch.app, sau đó, giúp đơn giản để tìm nạp và kết hợp dữ liệu vào các tệp Phác thảo của bạn. Nó cũng cung cấp một cách dễ dàng để xây dựng các ứng dụng thiết kế tùy chỉnh của riêng bạn trên đầu trang của Phác thảo.

31. SVGito

SVGito là một ứng dụng web miễn phí giúp dọn sạch các tệp SVG của bạn, để giúp bạn không phải chỉnh sửa thủ công. Được tạo bởi Peter Nowell , ứng dụng nhỏ gọn này sẽ tự động tối ưu hóa các SVG của bạn chỉ bằng một nút bấm và thường sẽ giảm kích thước và độ phức tạp của chúng mà không thay đổi hình dạng thực sự của chúng trên màn hình.

32. Sizzy

Sizzy là một ứng dụng cho phép bạn xem trước nhiều màn hình trong khi bạn đang kiểm tra các ứng dụng web đáp ứng của mình.

Tác giả Kristijan Ristovski trước đây đã sử dụng sách truyện phản ứng để chuyển đổi giữa các biến thể khác nhau của từng thành phần. Nhưng anh cảm thấy khó chịu khi phải qua lại giữa rất nhiều thiết bị. Vì vậy, ông đã xây dựng Sizzy, cho phép bạn xem tất cả các thay đổi đồng thời, giúp việc phát hiện và sửa lỗi bố cục nhanh hơn và dễ dàng hơn nhiều.

32. Foundation for Emails 2

Foundation for Emails là một khung từ ZURB trước đây gọi là Ink. Nó được sử dụng để tạo các email HTML đáp ứng hoạt động trên mọi nền tảng và dịch vụ, kết hợp các thực tiễn tốt nhất về mã hóa email. Lặp lại mới nhất sử dụng một cơ sở mã Sass cho phép bạn truy cập vào tệp cài đặt, trong đó bạn có thể xác định tất cả các loại mặc định phù hợp với nhu cầu của mình.

Cũng như khung công tác, ZURB đã cung cấp Ngăn xếp Email ZURB, một quy trình làm việc tất cả trong một, bao gồm:

Các hướng dẫn bắt đầu sẽ giúp hướng dẫn bạn qua làm thế nào để ngăn xếp lên và chạy nên bạn chọn để tận dụng lợi thế của tất cả các tính năng.

34. Form

RelativeWave’s Form là một ứng dụng tạo mẫu như không có ai khác chúng tôi đã thử. Nó không phải là một ứng dụng thiết kế điển hình ở chỗ không có công cụ hoặc bảng lớp. Sử dụng ứng dụng cảm thấy như một sự pha trộn của thiết kế và mã.

Mặc dù bạn thực sự không thể tạo đồ họa trong ứng dụng, bạn có thể chèn chúng và sử dụng những gì Form gọi là ‘bản vá’ để thêm cử chỉ và tương tác. Ứng dụng Mac yêu cầu bạn cũng sử dụng ứng dụng iOS để bạn có thể xem nguyên mẫu của mình trong thời gian thực và tương tác với nó.

“Form là một công cụ tạo mẫu và thiết kế ứng dụng với mục tiêu tạo ra các thiết kế gần với những gì bạn nhận được trong sản xuất”, Max Weisel, lập trình viên sáng tạo RelativeWave giải thích . “Chúng tôi muốn các nhà thiết kế làm việc trực tiếp trên khía cạnh sản xuất của một ứng dụng, đồng thời giải phóng các kỹ sư để tập trung vào các vấn đề phức tạp hơn.”

Có một số hướng dẫn tuyệt vời về cách sử dụng Biểu mẫu, nhưng quá trình này khá phức tạp nếu bạn đã quen với việc tạo hình ảnh trong Photoshop. Ví dụ, di chuyển một hình ảnh đến trung tâm của thiết bị của bạn bằng cách sử dụng các biến Superview và các bản vá khớp. Khi đã có, bạn sử dụng toán học để phân chia chiều rộng và chiều cao và kết nối chúng với các vị trí X và Y trong Chế độ xem hình ảnh. Nhóm chúng lại với nhau, đổi tên các biến và điều chỉnh các điểm neo X và Y.

Quá trình này khá phức tạp. Tuy nhiên, một khi bạn tập trung vào các quy trình, bạn có thể tạo các nguyên mẫu tuyệt đẹp. Có quyền truy cập vào máy ảnh của thiết bị và các cảm biến khác có nghĩa là các nguyên mẫu bạn tạo cũng mạnh mẽ như ứng dụng được mã hóa.