Những công cụ thiết kế nào bị sai

Các nhà thiết kế có nhiều công cụ thiết kế kỹ thuật số hơn bao giờ hết. Tuy nhiên, một số vấn đề chính vẫn còn.
Những công cụ thiết kế nào bị sai
[Nguồn Hình ảnh: vasabii / iStock]
BỞI KILIAN VALKHOF8 PHÚT ĐỌC
Các công cụ thiết kế hiện đại - cả vector và loại mã - là những phần mềm tuyệt vời trong những năm gần đây đã làm thay đổi nghề thiết kế, nhưng dường như không ai trong số họ thực sự hiểu bối cảnh mà chúng tôi hiện đang thiết kế. Phần còn lại của các kích thước cố định vẫn có thể nhìn thấy, và các công cụ không giúp chúng ta cân nhắc và đánh đổi mà các nhà thiết kế phải thực hiện trong công việc của họ. Dưới đây là một số tính năng mà công cụ thiết kế lý tưởng của tôi sẽ hỗ trợ nguyên bản.


[Nguồn Hình ảnh: vasabii / iStock]
THƯ VIỆN THIẾT KẾ NÊN LÀM VIỆC CHO CÁC NHÀ THIẾT KẾ CƠ QUAN
Các thư viện trong các ứng dụng như Sketch, Figma và Adobe XD hoạt động tốt cho các nhà thiết kế sản phẩm, nhưng ít hơn nhiều cho các nhà thiết kế đại lý.

Để hiểu tại sao, hãy để tôi giải thích sự khác biệt giữa nhà thiết kế sản phẩm và đại lý. Nhà thiết kế sản phẩm là những người làm việc trên một hoặc một vài sản phẩm mà công ty của họ tạo ra. Hãy nghĩ đến nhóm thiết kế tại Airbnb hoặc thực sự là các công ty như Sketch. Những nhà thiết kế này có thể có một hệ thống thiết kế hoặc hướng dẫn phong cách mà họ làm việc từ đó, với một hoặc vài dự án được xây dựng trên hệ thống thiết kế này.

Mặt khác, các nhà thiết kế đại lý là những nhà thiết kế làm việc trong các đại lý web, nơi họ có thể làm việc trên các dự án cho nửa tá khách hàng bất cứ lúc nào, mỗi người có một hệ thống thiết kế khác nhau (nếu có) hoặc hướng dẫn phong cách và các mức độ khác nhau của độ chín của thiết kế. Những nhà thiết kế này thường xuyên chuyển đổi giữa các dự án và thậm chí có thể phải giao tài sản cho một nhà thiết kế mới tùy thuộc vào kế hoạch dự án của họ.

Đối với nhà thiết kế sản phẩm, việc triển khai thư viện thiết kế hiện tại hoạt động tốt. Họ có thể chỉ có một hoặc hai thư viện thiết kế (ví dụ như web và thiết bị di động) chia sẻ phong cách tổng thể của họ. Vì tất cả các thư viện thiết kế đều có sẵn cho tất cả các tệp thiết kế, điều này hoạt động tốt.

Mặt khác, các nhà thiết kế đại lý có thể có 10 hoặc 20 thư viện khác nhau. Một số sẽ là dự án hiện tại nhưng một số sẽ là dự án mà họ đã hoàn thành gần đây, nhưng có thể phải làm việc lại trong bản sửa đổi tiếp theo. Do đó, họ sẽ cần phải thường xuyên chăm chỉ sử dụng các ký hiệu chỉ từ hệ thống thiết kế phù hợp, hoặc họ phải kích hoạt và hủy kích hoạt thư viện thiết kế một cách nhất quán khi di chuyển giữa các dự án. Như bạn có thể tưởng tượng, đây không phải là một trải nghiệm tốt đẹp.

Nhiều nhà thiết kế đại lý sẽ hoàn toàn không sử dụng thư viện thiết kế hoặc sử dụng các thư viện thiết kế chung như UX Power tools để hỗ trợ công việc thiết kế hệ thống, dẫn đến các thiết kế chung hơn cho khách hàng của họ.

Ghép nối thư viện thiết kế với các thiết kế cụ thể sẽ là bước đầu tiên trong việc làm cho thư viện thiết kế hữu ích hơn cho các nhà thiết kế cơ quan.

Vấn đề khác là tạo các thư viện thiết kế này. Các nhà thiết kế đại lý sẽ được hưởng lợi rất nhiều từ việc có sẵn các thư viện thiết kế cho họ, nhưng không phải khách hàng nào cũng có và các đại lý thường không có thời gian hoặc ngân sách để tạo một thư viện cho mỗi dự án.

Là một nhà thiết kế đại lý đặc biệt có động lực, bạn có thể tạo một thư viện thiết kế song song với thiết kế mà bạn đang làm việc, nhưng việc liên tục chuyển đổi giữa tệp thiết kế web / thiết bị di động và tệp hệ thống thiết kế là rất cồng kềnh. Việc có thể “gửi thành phần tới thư viện thiết kế” trong khi bạn đang thiết kế sẽ làm cho việc tạo thư viện thiết kế trở thành một hoạt động ma sát thấp hơn nhiều, giúp nhiều người có thể truy cập hơn.


[Nguồn Hình ảnh: vasabii / iStock]
THƯ VIỆN THIẾT KẾ NÊN TRỞ THÀNH THƯ VIỆN MÃ THÔNG BÁO THIẾT KẾ
Các thư viện thiết kế cũng bị giới hạn về loại thứ mà chúng chia sẻ: chỉ là các thành phần hoặc biểu tượng. Điều này hoạt động tuyệt vời nếu tất cả công việc thiết kế của bạn chỉ là nhấp vào các màn hình mới với các thành phần giống nhau, nhưng bất kỳ điều gì mới sẽ thấy các nhà thiết kế nhấp vào các thành phần và sao chép những thứ như màu sắc, biến thể phông chữ và kiểm tra khoảng cách chỉ để sao chép nó vào các thành phần mới. Khi bạn sao chép nhiều thứ, bạn sẽ luôn mắc lỗi (suy cho cùng chúng ta cũng chỉ là con người).

Nếu các thư viện thiết kế cung cấp giao diện người dùng để lựa chọn cũng như các biểu tượng được cung cấp, thì việc tạo các thành phần mới trong thiết kế của bạn sẽ nhanh hơn và ít bị lỗi hơn. Dẫn tôi đến điểm tiếp theo:


[Nguồn Hình ảnh: vasabii / iStock]
GIỚI HẠN CÁC TÙY CHỌN ĐỂ THIẾT KẾ MÃ THÔNG BÁO
Vấn đề giao diện người dùng đáng chú ý nhất cho vấn đề này là bộ chọn màu. Theo mặc định, bộ chọn màu công cụ thiết kế yêu thích của bạn sẽ cho phép bạn chọn màu từ toàn bộ quang phổ RGB. Tương tự cho phông chữ và tương tự cho khoảng cách (có vô số tùy chọn theo nghĩa đen). Điều này đặt cơ sở duy trì tính nhất quán hoàn toàn cho nhà thiết kế. Điều này thật điên rồ, bởi vì máy tính còn tốt hơn rất nhiều trong việc này.

Công cụ thiết kế lý tưởng của tôi bắt đầu với việc xác định những thứ này là mã thông báo thiết kế, sau đó cung cấp những thứ đó và chỉ những thứ đó như là các tùy chọn tiềm năng. Tôi muốn chuyển đổi giữa hai phông chữ đã chọn của mình chứ không phải cuộn qua 2.000 phông chữ tôi đã cài đặt trên máy của mình. Tôi ổn khi chọn giữa chín độ chuyển màu của màu chính nhưng tôi không muốn kiểm tra, kiểm tra và kiểm tra kỹ xem liệu tôi có đang sử dụng # 042d3d ở mọi nơi hay không chứ không phải # 042d3e.

Khi kéo các thành phần hoặc phần tử trên bảng nghệ thuật của tôi, nó sẽ chỉ bắt kịp các giá trị mà tôi đã xác định trong tỷ lệ giãn cách. Hoặc tốt hơn nữa, hãy đảm bảo rằng công cụ thiết kế của bạn triển khai mô hình bố cục thực hiện điều này cho bạn (các công cụ thiết kế dựa trên mã hiện đại hơn, như Modulz, đã làm được).

Điều này tiến xa hơn một bước so với thiết kế linting , một quy trình đánh dấu các vấn đề tiềm ẩn và một ý tưởng mà bản thân nó đã kém phát triển nghiêm trọng. Mặc dù thiết kế linting sẽ cho bạn biết sau thực tế rằng có điều gì đó không ổn, nhưng việc giới hạn thiết kế của bạn trong các tùy chọn được xác định trong mã thông báo thiết kế sẽ giúp bạn không bị “sai” ngay từ đầu.


[Nguồn Hình ảnh: vasabii / iStock]
CÁC BIỂU TƯỢNG KHÔNG ĐỦ MẠNH
Các biểu tượng (hoặc khung, hoặc các thành phần) rất tốt để tạo ra các gói thiết kế có thể tái sử dụng. Họ vẫn chưa ánh xạ tốt thực tế của thiết kế web và thiết bị di động.

Ví dụ: tiêu đề có thể khá khác nhau giữa thiết bị di động và máy tính để bàn: trên thiết bị di động, có thể có một nút menu mở menu, trong khi trên máy tính để bàn, toàn bộ menu được hiển thị. Hỗ trợ cả hai có nghĩa là có hai biểu tượng cho cùng một thứ, từ góc độ ngữ nghĩa, cùng một thứ. Để làm cho các biểu tượng ánh xạ tốt với thực tế, họ cần ba điều:

Các biến thể
Những trạng thái
Các biến thể đáp ứng
Các biến thể
Trang web của bạn có thể có một vài nút khác nhau. Chúng có thể chỉ khác nhau về màu sắc, hoặc phần đệm, hoặc một số có thể bao gồm một biểu tượng và một số khác thì không. Tất cả các biến thể của cùng một thứ lý tưởng sẽ sống trong một thành phần duy nhất. Điều này làm cho việc cập nhật các thuộc tính được chia sẻ của họ dễ dàng hơn và thực sự, ít bị lỗi hơn. Một số điều này có thể được thực hiện bằng cách ghi đè hoặc bằng cách thực hiện thay đổi đối với các phiên bản, nhưng điều đó chỉ giúp bạn cho đến nay.

Những trạng thái
Sự cần thiết của điều này một lần nữa được thể hiện dễ dàng nhất bằng các nút. Các nút có một số trạng thái tự nhiên: Chúng có thể không hoạt động, có thể di chuột và lấy tiêu điểm, chúng có thể hoạt động (nhấn hoặc nhấp) và chúng có thể bị vô hiệu hóa. Đây là tất cả các trường hợp của cùng một biểu tượng và nên được xử lý như vậy.

Các biến thể đáp ứng
Tôi đã đề cập đến tình huống tiêu đề ở trên. Biểu tượng lý tưởng của tôi sẽ cho phép tôi đặt các thiết kế và phong cách khác nhau tùy thuộc vào bao nhiêu không gian khả dụng mà nó có. Sau đó, khi tôi đang sử dụng biểu tượng, nó sẽ chỉ chuyển sang biến thể đáp ứng thích hợp.

Như bạn có thể thấy, chúng ta cần các biểu tượng có thể chỉnh sửa theo một vài kích thước khác nhau. Các ứng dụng như Modulz và UXPin đang trên đường hỗ trợ điều này và tôi hy vọng chúng ta sẽ tiếp tục tiến gần hơn đến chức năng mà tôi đã mô tả ở trên.


[Nguồn Hình ảnh: vasabii / iStock]
LƯỚI VÔ DỤNG TRONG TẤT CẢ CÁC CÔNG CỤ THIẾT KẾ
Thiết kế giao diện người dùng hiện đại cho thiết bị di động và web không thể dựa trên các kích thước cố định như thiết kế in ấn. Tại sao khi đó, các lưới trong các công cụ thiết kế lại cho rằng một lưới từ trên cùng bên trái sẽ luôn là những gì mọi người muốn? Hoặc một bố cục chiều rộng cố định của các cột được căn giữa?

Thiết kế cho màn hình sử dụng căn chỉnh từ các đường viền trong hoặc từ giữa ra ngoài. Tuy nhiên, không có công cụ thiết kế nào mà tôi biết cho phép tôi đặt các lưới như thế này mà tùy thuộc vào vị trí của một phần tử, lưới được định vị từ một góc hoặc vị trí khác trên màn hình.

Ví dụ: tiêu đề của bạn có biểu trưng và menu có thể là toàn bộ chiều rộng của chế độ xem và biểu trưng sẽ là 10 pixel từ trên cùng và 10 pixel từ bên trái, với menu được căn chỉnh ở bên phải, lại có lề 10 pixel . Khoảng cách giữa hai yếu tố này là hoàn toàn tùy ý, vì bạn không biết toàn bộ chiều rộng của trang web khi thiết kế. Điều này có nghĩa là, nếu lưới của bạn hoạt động từ trên cùng bên trái, điều hướng sẽ chỉ được căn chỉnh một cách tình cờ.

Một công cụ thiết kế thông minh sẽ cho phép tôi thiết lập bước lưới của mình (như 8 điểm) và sau đó cung cấp phản hồi từ đường viền gần nhất và tâm dọc và ngang.

CÁC TIÊU CHUẨN VỀ KHẢ NĂNG TIẾP CẬN NÊN ĐƯỢC ĐƯA VÀO
Công việc của một nhà thiết kế là phải tính đến mọi người dùng. Điều này có nghĩa là họ cần biết về các nguyên tắc trợ năng và áp dụng chúng. Một số nguyên tắc trợ năng này, như độ tương phản màu sắc hoặc kích thước phông chữ tối thiểu, có thể kiểm tra được bằng máy tính. Các công cụ thiết kế nên chủ động cảnh báo người dùng khi màu văn bản và màu nền của họ không tạo đủ độ tương phản hoặc khi kích thước phông chữ họ chọn đơn giản là quá nhỏ so với màn hình nhất định.

Công bằng mà nói, những điều này đang dần được triển khai trong các công cụ thiết kế. Tuy nhiên, đối với một cái gì đó tương đối đơn giản, thật khó hiểu là phải mất quá nhiều thời gian để các công cụ thiết kế bắt đầu áp dụng nó.


[Nguồn Hình ảnh: vasabii / iStock]
LẬP PHIÊN BẢN VỚI TƯ CÁCH LÀ CÔNG DÂN HẠNG NHẤT
Có một loạt các công cụ khác nhau để lập phiên bản, cho phép bạn tạo nhiều mô hình của cùng một sản phẩm, như Avocode, Abstract và Plan. Tất cả chúng đều cần một số thao tác thủ công để tạo phiên bản và hợp nhất các thay đổi. Trong Figma đã có sẵn các tùy chọn để lập phiên bản và cộng tác, và tôi muốn thấy điều đó trở thành tiêu chuẩn. Trong thế giới lý tưởng của tôi, việc lập phiên bản, phân nhánh và hợp nhất sẽ dễ dàng cho thiết kế như hiện tại đối với mã.

Nhận xét

Bài đăng phổ biến từ blog này

Đây là cách chơi Speedgate, môn thể thao đầu tiên do AI thiết kế

Có hàng chục cách để xếp hạng các thành phố. Đây là những gì họ đều sai