Các công cụ và tài nguyên cần thiết để trở thành một digital designer
Bài đăng này đã không được cập nhật trong 5 năm
Cho dù bạn chỉ sắp tốt nghiệp đại học hoặc xem xét nghỉ hưu, không bao giờ là quá muộn để theo đuổi công việc mơ ước của bạn. Và nếu công việc mơ ước đó đang trở thành một nhà thiết kế kỹ thuật số, hãy coi mình là người may mắn.
Cơ hội là vô tận. Cảm hứng và tài nguyên đang tràn ngập cộng đồng online và với mỗi dự án mới, bạn có được kinh nghiệm và bộ kỹ năng hoàn toàn mới. Hãy nhớ rằng mặc dù thực hành là chìa khóa cho tất cả mọi thứ.
Có lẽ bạn đang tự hỏi nơi nào và làm thế nào để bắt đầu. Hãy bắt đầu với những điều cơ bản.
Khi nói đến thiết kế UX / UI, cần phải hiểu toàn bộ nhu cầu và hành vi của con người. Đó là bởi vì bạn chủ yếu thiết kế trải nghiệm, trong đó tính tương tác đóng một phần đáng kể.
Vì vậy, hãy đi qua một số nguyên tắc UX / UI cơ bản.
Nguyên tắc cơ bản về UX / UI
UI (Giao diện người dùng) đại diện cho một không gian nơi xảy ra tương tác giữa người và máy. UX (Trải nghiệm người dùng) xoay quanh các bước và hành trình người dùng phải trải qua khi hoàn thành một nhiệm vụ nhất định và cách họ cảm nhận khi thực hiện. Mọi người thường lạm dụng các thuật ngữ đó mà không cung cấp các ảnh hưởng đúng cho ý nghĩa của chúng.
TRẢI NGHIỆM NGƯỜI DÙNG
Thiết kế trải nghiệm người dùng phải luôn luôn đi trước thiết kế tất cả các yếu tố trực quan. Để tạo ra những trải nghiệm quý giá, bạn cần hiểu người dùng và nhu cầu của họ. Để làm điều đó, bạn tiến hành nghiên cứu và thu thập dữ liệu của người dùng cũng như tất cả các thông tin cần thiết về sản phẩm kỹ thuật số bạn sẽ thực hiện.
Với dữ liệu được thu thập trong đầu, bạn liệt kê tất cả các màn hình bạn sẽ cần trong sản phẩm của mình. Sau đó, dưới dạng một sơ đồ, bạn kết nối chúng theo cách chúng sẽ tự nhiên theo nhau . Với mỗi màn hình, bạn thêm thuộc tính. Một ví dụ về điều này là một màn hình hồ sơ có thể chứa ảnh, tên người dùng, tùy chọn chỉnh sửa, cài đặt, danh sách bạn bè, tất cả phụ thuộc vào yêu cầu sản phẩm. Sau khi bạn biết các màn hình đó được kết nối như thế nào và chúng nên có những yếu tố nào, bạn có thể bắt đầu thiết kế khung lưới.
Các khung lưới thường được vẽ với các hình dạng cơ bản, không có màu sắc và chi tiết trực quan, vì trọng tâm phải là chức năng của sản phẩm. Bạn nên tạo một nguyên mẫu của khung lưới của bạn và đưa nó cho một nhóm người dùng mục tiêu để kiểm tra nó . Thử nghiệm các luồng bạn thiết kế sẽ cung cấp cho bạn một lượng lớn phản hồi có giá trị và tiết lộ chính xác nhu cầu của người dùng.
Luật của UX , được tạo ra bởi Jon Yablonski, là một lời nhắc nhở tuyệt vời trong khi thiết kế trải nghiệm và giao diện người dùng. Ông tuyên bố có 20 luật khác nhau trong thực hành UX. Nhưng đừng lo lắng, nó có vẻ đáng sợ hơn nhiều. Luật được hiển thị dưới dạng hình ảnh chỉ kèm theo một vài từ cho bối cảnh.
Phần tiếp theo sẽ có ích là bài viết chuyên sâu này về Nguyên tắc thiết kế ứng dụng di động của Google. Nó có năm chương , sẽ giúp bạn hiểu một số nguyên tắc ứng dụng cơ bản. Bạn sẽ có các ví dụ về nên và không nên, cho bạn biết lý do tại sao một phương pháp nào đó tốt và tại sao một phương pháp khác thì không.
GIAO DIỆN NGƯỜI DÙNG
Sau khi bạn có các khung lưới của bạn, đây là lúc để cung cấp cho người dùng một trang trực quan, đẹp. UI là một phần quan trọng, vì nó tạo ra tông màu của sản phẩm và giao diện tổng thể của thương hiệu. Nhưng UI cũng phục vụ cho UX, như với màu sắc, hình dạng và kiểu chữ, bạn có thể dễ dàng chỉ ra thông tin chính cho người dùng.
Tuy nhiên, UI không nhất thiết phải trực quan. Lấy Alexa làm ví dụ, không có giao diện trực quan, vì tất cả các đầu vào bạn cung cấp cho máy được thực hiện qua giọng nói. Nhưng trên ghi chú trực quan, một số yếu tố UI cơ bản được liệt kê độc đáo trong bài viết của Career Foundry.
Điều quan trọng cần ghi nhớ khi thiết kế là nền tảng bạn đang thiết kế. Material design là ngôn ngữ thiết kế được phát triển bởi Google, chủ yếu được sử dụng bởi các nền tảng Android. Bạn không thể tiếp tục thiết kế cho màn hình nếu bạn chưa đọc material design. Nó rất hữu ích trong việc hiểu hành vi trực quan và vật lý của các yếu tố UI. Tuy nhiên, nếu bạn đang thiết kế cho các thiết bị của Apple, thì Nguyên tắc giao diện con người là một thứ khác phải đọc. Trong thực tế, cả hai đều phải đọc và sẽ cung cấp cho bạn một nền tảng rất vững chắc về hiểu biết thiết kế màn hình.
Công cụ cần thiết cho một nhà thiết kế kỹ thuật số
Có một đại dương các công cụ đã có sẵn, và hàng năm những công cụ mới lại xuất hiện. Đó là một thực tế của cuộc sống và sự đẹp đẽ của ngành công nghiệp mà ngành công nghiệp phần mềm đang tiếp tục phát triển. Một cái gì đó bạn biết một vài năm trở lại đây có thể dễ dàng bị lỗi thời ở thời điểm hiện tại.
Các công cụ, mà chúng ta đã biết chúng ngày hôm qua, có thể làm chúng ta ngạc nhiên với hàng tấn các tính năng mới vào ngày mai. Ưu điểm là mọi thứ đều dễ dàng thích nghi. Khi bạn đã quen với một công cụ hoặc một phương pháp làm việc, bạn sẽ không thể làm việc theo bất kỳ cách nào khác.
Thiết kế và phát triển phần mềm chủ yếu được thực hiện trong môi trường agile , trong đó sự hợp tác giữa tất cả các bộ phận của nhóm là chìa khóa. Và tất cả các công cụ được sử dụng trong ngành công nghiệp phần mềm đều cố gắng theo kịp những yêu cầu đó.
CÔNG CỤ THIẾT KẾ CƠ BẢN
Đây là những sản phẩm bạn sẽ sử dụng để thiết kế màn hình cho sản phẩm kỹ thuật số của bạn.
Sketch là 1 công cụ toàn năng. Thiết kế cho màn hình chưa bao giờ giống nhau kể từ khi Sketch ra đời. Toàn bộ giao diện đơn giản, các yếu tố có thể tái sử dụng, kiểu văn bản và lớp dễ dàng thay đổi. Bạn cũng có thể tạo một nguyên mẫu có thể nhấp trong đó và có một loạt các plugin giúp cuộc sống của bạn dễ dàng hơn. Tìm hiểu nhiều hơn ở bài viết của Emanuel. Kể từ tháng 7 năm 2019, Sketch đã giới thiệu Sketch for teams, điều này khiến nó trở thành một công cụ hợp tác để chia sẻ các thiết kế và nguyên mẫu với nhiều người hơn trong nhóm. Tuy nhiên, Sketch chỉ có thể hoạt động trên macOS.
Khả năng hợp tác chính xác là những gì Figma đã có trước khi có Sketch. Mọi người trong nhóm có thể xem các thiết kế và nhận xét về chúng. Nhà phát triển có thể xuất tài sản (biểu tượng, hình ảnh, màu sắc, v.v.) Thậm chí có thể lưu trữ các phiên bản khác nhau của tệp của bạn khi bạn thường xuyên cập nhật nó. Nhưng để bắt đầu cũng như lưu các thay đổi vào Figma, bạn cần phải trực tuyến.
Phần mềm này là phản ứng của Adobe đối với sự cần thiết của một công cụ chuyên dụng cho thiết kế ứng dụng và web. Trước đây, người dùng Adobe đã phải vật lộn để thiết kế trang web bằng Photoshop và Illustrator. Hài hước đúng không?
Invision + Invision Studio
Invision là một công cụ nổi tiếng được sử dụng để hiển thị tương tác trong thiết kế của bạn. Bạn có thể kết nối màn hình trong một nguyên mẫu có thể nhấp và nó rất tiện lợi khi trình bày các giải pháp cho khách hàng của bạn hoặc thậm chí bạn có thể sử dụng nó để kiểm tra người dùng. Vào đầu năm 2018, Invision đã ra mắt Studio - một nền tảng để thiết kế, tạo mẫu và thiết kế hoạt hình.
Một nền tảng tất cả trong một khác. Bạn có thể thiết kế và tạo khung dây, chia sẻ nguyên mẫu và hợp tác với tất cả các thành viên trong nhóm.
Một công cụ thiết kế tương tác, nơi bạn có các thành phần có sẵn và giao diện dễ dàng. Framer cũng cho phép bạn cộng tác giữa các đội và tạo nguyên mẫu.
Cái này tương đối mới và vẫn còn trong phiên bản beta. Giống như tất cả các công cụ được liệt kê trước, bạn cũng có thể thiết kế và tạo mẫu, nhưng đi kèm với một tính năng hoạt hình nâng cao.
CÁC CÔNG CỤ ĐI ĐÔI VỚI DANH SÁCH TRÊN
Đây là những công cụ mà tất cả các nhà thiết kế đồ họa đều biết. Một khi bạn quyết định mở rộng lĩnh vực chuyên môn của mình bằng cách bước vào thiết kế kỹ thuật số, hãy giữ chúng gần gũi.
Công cụ chỉnh sửa ảnh
Khi nói đến chỉnh sửa ảnh, bạn không thể thực hiện công việc hoàn chỉnh bằng cách sử dụng các công cụ được đề cập ở trên. Tiêu chuẩn công nghiệp cho thao tác hình ảnh vẫn là Photoshop . Tuy nhiên, Affinity Photo như một đối thủ cạnh tranh nặng kí, với mức giá thấp hơn nhiều.
Công cụ minh họa
Xử lý minh họa các loại công trình như nhau. Đối với mọi tác vụ minh họa chính, tạo logo, biểu tượng, v.v ... Illustrator là bạn của bạn. Và một lần nữa, chúng ta có đối thủ cạnh tranh Affinity designer , đi kèm với một tính năng để nhanh chóng chuyển từ vector sang chỉnh sửa dựa trên pixel.
Phát hiện gần đây của tôi và một điều tôi chắc chắn rằng nhiều họa sĩ minh họa ngày nay không thể sống thiếu là Procreate . Đây là một công cụ tuyệt vời có giao diện đơn giản và chứa các cử chỉ vẽ tự nhiên với bút Apple, với nhiều quyền kiểm soát. Nhược điểm là nó chỉ tồn tại trong iPad và nó không phải là một công cụ vector.
Công cụ hoạt hình
Chúng ta không muốn quên các công cụ để tạo hiệu ứng động, điều này làm cho tất cả các tương tác có ý nghĩa. Principle là một công cụ tuyệt vời để thiết lập chuyển tiếp giữa các màn hình một cách nhanh chóng. Bạn chỉ cần nhập một màn hình từ Sketch hoặc Figma. Nếu bạn muốn tạo hiệu ứng cho những thứ phức tạp hơn, After Effects là cách tốt nhất. Bạn sử dụng nó để tạo hiệu ứng minh họa hoặc các chuyển động đồ họa khác và xuất hình ảnh động của bạn thông qua plugin Lottie cho nhà phát triển.
THIẾT KẾ PHIÊN BẢN VÀ CÔNG CỤ XUẤT EXPORT
Một điểm gặp gỡ nổi tiếng giữa các nhà phát triển và nhà thiết kế. Là một nhà thiết kế, bạn xuất màn hình của mình sang Zeplin và các nhà phát triển có mọi thứ họ cần để thực hiện các thiết kế của bạn. Nó cũng hỗ trợ kiểm soát phiên bản để bạn có thể xem tất cả các video tải lên của cùng một màn hình.
Đây là một công cụ kiểm soát phiên bản đã biết cho các tệp thiết kế Sketch của bạn. Abstract, nghĩa là lưu từng bước thay đổi vĩnh viễn của bạn trong tệp, là điều bắt buộc trong ngành công nghiệp phần mềm. Bạn có thể dễ dàng truy cập các thiết kế của mình từ nhiều tháng trước và hoàn nguyên những gì bạn cần. Các nhà phát triển cũng có thể xuất tài sản mà họ cần.
CÔNG CỤ ĐỂ TẠO KHUNG DÂY, LUỒNG MÀN HÌNH VÀ SƠ ĐỒ TRANG WEB
Tạo trải nghiệm người dùng đòi hỏi kiến thức về kiến trúc thông tin, sản phẩm của bạn sẽ có màn hình nào, thuộc tính của chúng và cách các màn hình đó sẽ được kết nối. Để làm như vậy, bạn tạo sơ đồ trang web, sơ đồ, lưu lượng người dùng, hành trình người dùng và khung lưới.
Đây là một công cụ mạnh mẽ, nơi bạn có thể tạo sơ đồ và thiết kế khung lưới, sử dụng ghi chú và tạo bản đồ hệ thống.
Đây là một công cụ xây dựng sơ đồ trang web chuyên dụng. Sơ đồ trang web được sử dụng để kết nối tất cả các màn hình theo cách sắp xếp sơ đồ. Đây là một công cụ tốt để bạn là một nhà thiết kế biết cấu trúc của sản phẩm kỹ thuật số của bạn và nó có ích cho tất cả các thành viên trong nhóm.
Các công cụ cơ bản của bạn để thao tác các khung lưới có độ chính xác cao, giao diện đơn gian, luôn là một mảnh giấy và bút. Tuy nhiên, bạn cũng có thể tải xuống các mẫu như thế này cho các nền tảng khác nhau để phác họa.
Công cụ này trông chính xác như bạn sẽ hình dung các khung lưới. Tất cả màu đen và trắng và thiếu vị trí màu tập trung vào chức năng của sản phẩm.
Một công cụ dễ sử dụng để sắp xếp các ý tưởng và dự án của bạn thành các bảng trực quan. Bạn cũng có thể tạo hành trình người dùng và sơ đồ trang web ở đây. Thật tuyệt vời khi thiết lập trực quan dự án của bạn và cũng hoạt động như một công cụ cộng tác.
Đây là một công cụ nơi bạn có thể tạo hành trình người dùng, personas và bản đồ thấu cảm. Nó được sử dụng như một nền tảng cộng tác trực quan để chia sẻ ý tưởng và giao tiếp trong nhóm.
Đây là một công cụ plugin hữu ích hoạt động cho Sketch và Figma. Bạn có thể kết nối màn hình và tạo sơ đồ sơ đồ dễ dàng.
Bạn có thể nhập màn hình từ Zeplin, Figma hoặc Adobe XD và kết nối chúng trong Overflow và hiển thị các luồng cho khách hàng của bạn một cách rất ngăn nắp và gọn gàng.
CÔNG CỤ KIỂM TRA THIẾT KẾ
Không có gì giúp bạn đi đúng hướng bằng nhận phản hồi từ ai đó đang sử dụng sản phẩm của bạn.
Bạn có thể thực hiện kiểm tra thời gian thực, kiểm duyệt từ xa hoặc cho phép người dùng hoàn thành các tác vụ trong thời gian riêng của họ. Nền tảng này cho phép bạn phỏng vấn người dùng từ bất cứ nơi nào trên thế giới, ghi lại chúng, tạo điểm nhấn, ghi chú dấu thời gian và nhiều hơn nữa.
Tương tự như Lookback, nó cho phép bạn nhìn, nghe và nói chuyện với người dùng của bạn khi họ đang tham gia với sản phẩm. Nó cho phép bạn có được thông tin phản hồi thời gian thực và chia sẻ kiến thức của bạn trong nhóm.
Nếu bạn muốn biết nhiều hơn, thì có hẳn 1 khóa học cho bạn -> Infinum Academy Design course
via: https://infinum.co
All rights reserved
