Lập trình viên coding – liệu các designer thật sự cần phải biết những điều gì?

Trong thời buổi bão hòa công nghệ như hiện nay,  để có thể đưa ra một sản phẩm nổi bật trên các kho ứng dụng, digital designer cần phải liên tục học hỏi, cập nhật kiến thức và các kỹ năng. Và một trong những câu hỏi nhiều digital designer luôn thắc mắc: “Liệu chúng ta có cần phải biết code?”.

Rõ ràng là chúng ta không được dạy về code, vì rõ ràng định hướng phát triển của digital designer không phải là một lập trình viên phần mềm.

Cá nhân tôi có thể viết code được, với tư cách là một digital designer biết code, tôi khuyên tất cả mọi người NÊN học code (vì tôi yêu nó), nhưng có quá nhiều những hiểu lầm về việc làm thế nào để một digital designer có thể thành công trong thị trường khốc liệt hiện nay?

Theo bạn, lập trình viên “viết code” là như thế nào?

Nếu bạn gọi tất cả những người biết code với cái tên “developer” thì cũng tương tự bạn coi digital designer, graphic designer, fashion designer,… là một. Vì nói chung “developer” có rất nhiều loại, rất nhiều ngôn ngữ lập trình, rất nhiều bộ kỹ năng, công cụ khác nhau: front end developer, back end developer, data scientists,…

Trước khi chúng ta tìm hiểu rõ về vai trò của developer (và một digital designer như chúng ta sẽ làm việc với họ như thế nào cho hiệu quả), chúng ta cần phải biết họ đang làm gì trong thế giới của họ.

What goes on behind the screen

Quá trình từ khi UX designer hoàn thành phần việc thiết kế cho đến lúc lập trình viên hoàn thiện phần mềm là cả một chặng đường dài. Để phát triển được phần mềm đúng như mong muốn của designer, lập trình viên phải khảo sát từng thành phần riêng rẽ để hiểu khi kết hợp các thành phần ấy lại với nhau, chúng sẽ hoạt động như thế nào. Lối suy nghĩ của họ rất khác so với chúng ta. Tuy nhiên, điều đó không có nghĩa là họ sẽ không hiểu những điều mà chúng ta muốn nói.

Thế giới công nghệ có quá nhiều điều và chúng ta sẽ không bao giờ hiểu và biết hết được, và chúng ta cũng không cần thiết phải biết hết mọi thứ. Để đơn giản thì bạn chỉ cần hiểu rõ ba điều mà tôi cho rằng quan trọng nhất và hữu dụng nhất đối với UX designer chúng ta:

1. Giao diện được xây dựng lên như thế nào?
2. Những thứ diễn ra khi người dùng chạm vào button
3. Những thông tin chúng ta cho vào phần mềm được lưu trữ như thế nào, ở đâu.

Các thành phần của hệ thống

Khi chúng ta lướt web, có rất nhiều tương tác qua lại giữa hàng triệu triệu các thiết bị điện tử trên thế giới này thông qua mạng Internet. Và cũng có hàng triệu triệu servers đặt ở các quốc gia khác nhau để lưu trữ dữ liệu. Dưới đại dương còn được lắp đặt các dây cáp khổng lồ có nhiệm vụ chuyển hàng Terabyte dữ liệu mỗi giây. Các trạm phát và vệ tinh trên cao cũng ngày ngày thực hiện nhiệm vụ chuyển phát dữ liệu.

Tất cả những thứ đó giúp cho chúng ta nhìn thấy những thứ mà ta đang thấy trên màn hình.

Là UX designer, chúng ta không cần quá để tâm để hệ thống vận hành kết nối ra sao, vì chúng ta không phải kỹ sư. Điều chúng ta quan tâm là đem đến những thông tin, kết quả chính xác và trải nghiệm tuyệt vời tới người dùng.

• Phần “giao diện” 

Là đất của chúng ta, là thứ chúng ta tạo ra. Chúng ta kiểm soát mọi thứ diễn ra, bấm vào button button kia sẽ ra cái gì, chọn màu sắc, các element phải hồi với dữ liệu nhập vào ra sao. Khi chúng ta chuyển những thiết kế đó cho lập trình viên, họ chuyển những ý tưởng, những thiết kế của ta thành code.

• Những thiết kế của chúng ta được xây dựng và hiển thị đến người dùng thông qua “client”. 

Từ “client” được dùng như là một danh từ chung cho các thiết bị cá nhân như: điện thoại, laptop, máy tính bảng,… Tuy nhiên chúng không thể là tất cả. Thử bật Chế độ máy bay và xem nó trở nên vô dụng thế nào!

• Khi các thiết bị “client” cần thực hiện tác vụ gì đó mà bản thân nó không có. 

Nó sẽ thực hiện liên lạc thông tin tới “server”. Cứ tưởng tượng server như là não bộ đứng sau để xử lý mọi thứ. Server có kích thước lớn, là những cỗ máy mạnh mẽ với hàng tá những xử lý phức tạp bên trong. Client giao tiếp tới server thông qua Internet để truy cập dữ liệu.

• Dữ liệu được truyền qua lại giữa client và server thông qua Internet. 

Internet giờ đây là mạng thông tin lớn nhất, phủ khắp tất cả các quốc gia trên thế giới.

The technology stack

Stack là bộ những công cụ và dịch vụ cần thiết để tạo ra sản phẩm. Trong một dự án, nhiều người sẽ làm ở các tầng khác nhau của stack, nhưng tựu chung lại, họ đều đang làm việc để đưa ra một sản phẩm cuối cùng.

 Hãy tưởng tượng “stack” giống như một chiếc hamburger. Để làm một chiếc hamburger cần có nhiều thành phần bên trong và bạn hoàn toàn có thể thay thế các thành phần đó bằng những thành phần tương tự khác sao cho hợp khẩu vị: có thể thay miếng thịt bò bằng thịt gà, có hành hoặc không có hành,…

Bộ stack của team thiết kế cũng bao gồm nhiều thành phần như thế. Lấy ví dụ: Sketch, Framer X, Zeplin, Abstract, Adobe Illustrator và Origami là các thành phần của 1 “stack”. Bạn có thể thanh thế Sketch bằng Figma, hoặc thêm Adobe XD vào.

Các kiểu lập trình viên

Đa số lập trình viên thường làm việc chuyên về một hướng tương ứng với một phần trong hệ thống. Đối với góc nhìn của designer, họ có thể được chia ra thành:

Lập trình viên Front-end

Chúng ta ít nhất đã làm việc một lần với lập trình viên front-end một lần. Họ là những người xây dựng thiết kế của chúng ta trên “client” dựa trên các công nghệ front-end. Công việc của họ chủ yếu xoay quanh giao diện như chúng ta, và họ yêu thích thử nghiệm những phương án mới.

Nếu như lập trình viên Web xây dựng sản phẩm website thì lập trình viên mobile xây dựng sản phẩm ứng dụng điện thoại di động. Họ làm việc bằng những công cụ và ngôn ngữ lập trình khác nhau, nhưng chung quy lại, họ đều hướng đến một mục tiêu giống nhau.

Nếu ai đó hỏi UX designer có biết code không, có nghĩa là họ mong muốn designer có khả năng lập trình như Front-end.

Lập trình viên Back-end

Những lập trình viên Back-end phụ trách công việc xây dựng cấu trúc và tính logic của hệ thống. Họ thường là cử nhân hoặc kỹ sư tốt nghiệp ngành khoa học máy tính. Để tạo nên một trải nghiệm tốt cho khách hàng, vai trò của họ cũng rất lớn: giảm thời gian load, bảo mật dữ liệu,…

Có thể chúng ta không làm việc trực tiếp với họ, nhưng công việc họ làm có tác động trực tiếp lên những thiết kế của chúng ta.

Lập trình viên Full-stack

Là kiểu lập trình viên có khả năng làm cả Front-end và Back-end. Họ là hàng hiếm và khá khó tìm.

Nhà khoa học dữ liệu

UX designer sử dụng các công cụ có sẵn để phân tích hành vi người dùng, và các nhà khoa học dữ liệu là những người tạo ra các công cụ ấy. Họ giỏi trong việc phân tích, tính toán với dữ liệu khổng lồ dựa trên các phương pháp toán học.

What should designers care about?

Bạn cần học những kiến thức hỗ trợ trực tiếp cho công việc bạn đang làm. Bạn đang xây dựng gì đó trên website ư? Học ngay CSS grid. Bạn đang làm việc với các dữ liệu mã hóa? Học ngay public và private key. Bạn không cần biết tất cả, nhưng ít nhất hãy biết đến những kiến thức liên quan trực tiếp đến công việc của bạn.

Tôi cũng xin chia sẻ một số kiến thức mà tôi cảm thấy cực kỳ hữu dụng với chúng ta:

HTML

Viết tắt của Hyper Text Markup Language. HTML cho phép định nghĩa cấu trúc của trang, các thành phần sẽ kết nối đi đâu, nội dung trong các thành phần, và các thành phần được định dạng kiểu gì.

Nhìn vào ví dụ trên, phần box màu đỏ là metadata, là thông tin client và server cần biết về trang web này. Phần box màu cam là nơi chúng ta định nghĩa các thành phần. Khi bạn tải trang web này, nó sẽ trông như bên phải.

Sẽ rất có ích nếu như bạn có kiến thức cơ bản về HTML, có rất nhiều nguồn học HTML online hoàn toàn miễn phí, và có các công cụ có sẵn để phục vụ bạn như Brackets 1.14.

CSS

Khi thiết kế một sản phẩm, UX designer chúng ta cố gắng tạo ra một ngôn ngữ hình ảnh nhất quán, và lập trình viên cũng tương tự. Họ sử dụng Cascading Style Sheets (CSS) để kiểm soát những đặc tính về mặt hình ảnh của các thành phần. Thử xem một trang web bất kỳ khi tắt CSS, tất cả những gì bạn thấy chỉ là nội dung không.

Lấy ví dụ như ở phần HTML, ta có thể làm cho chúng trở nên sinh động hơn với CSS.

Hiểu biết về CSS sẽ giúp ta có cảm quan đánh giá về độ khó khi chuyển từ thiết kế của chúng ta ra sản phẩm. Có rất nhiều thứ khi Sketch rất dễ nhưng khi chuyển sang lập trình thì cực kỳ đau đầu.

Javascript

Tôi sử dụng Javascript cho rất nhiều việc: xây dựng plugin của riêng mình, phác thảo trang 

web. Javascript là một công cụ đa năng và dễ dàng để tiếp cận. Một số lập trình viên Back-end sử dụng Javascript framework như React và Angular để xây dựng khung sườn của sản phẩm.

Điều bạn cần quan tâm về Javascript là cách để thay đổi các giá trị trong HTML và CSS mà không cần làm thủ công.

Xem ví dụ trên, tôi vừa thêm một “event” vào header, giúp nhảy ra một thông báo khi tôi click vào. Với vài dòng code đơn giản, bạn hoàn toàn có thể khiến các thành phần phản hồi với người dùng.

Cách tốt nhất để học Javascript là mày mò, cùng với HTML và CSS. Xem thêm về các ví dụ của người khác và phân tích tại sao.

Tôi cần phải biết thêm những gì

Hiển nhiên, lập trình không dành cho tất cả mọi người. Nếu bạn không hàng ngày làm việc với nó, thật khó để ghi nhớ kiến thức về nó. Designer không cần code, chỉ cần hiểu hiểu về code để các lập trình viên làm việc dễ dàng hơn.

Đồng cảm với lập trình viên

Designer và lập trình viên có thể coi như là làm chung một công việc: đem đến một sản phẩm tuyệt vời. Bạn và lập trình viên càng hiểu nhau, sản phẩm tạo ra càng tuyệt vời. Và đây là một số gợi ý để bạn hiểu lập trình viên hơn:

• Mời họ vào các buổi họp về thiết kế, các buổi lên ý tưởng, chia sẻ các kết quả về khảo sát người dùng với họ. Trong quá trình họp với họ, tôi cũng nghĩ ra rất nhiều những ý tưởng tuyệt vời.
• Lắng nghe những chia sẻ từ họ. Khi lập trình viên nói họ không thể thực hiện ý tưởng nào đó của bạn, không có nghĩa là họ không thích ý tưởng đó. Thực tế, có rất nhiều ý tưởng hay ho nhưng rất khó có thể biến nó thành hiện thực. Hãy luôn giữ lạc quan, cùng thỏa thuận để tìm ra phương án tối ưu hơn.
• Bàn giao xong thiết kế không có nghĩa đã hoàn thành công việc. Bạn nên sát cánh cùng họ trong các giai đoạn tiếp theo. Và nếu có thể thay đổi một chút mà giúp công việc của họ dễ dàng hơn, tại sao không?

Thử những tool mới

Phát triển ra một sản phẩm digital là một quá trình khá phức tạp. Nó không chỉ đơn giản là “kéo và thả” như công việc ta vẫn thường làm. Lý do đó là lập trình viên luôn phải viết code. Họ tiến hành xây dựng mọi thứ bằng cách “gõ”.

Có một vài tool giúp designer trải nghiệm cách thức làm việc mà lập trình viên vẫn thường làm:

• Webflow: Đây là tool online cho phép bạn design 1 trang HTML mà không cần phải viết code. Bạn có thể xây dựng bằng các thành phần có sẵn và chỉnh sửa theo ý bạn muốn. Sử dụng tool này giúp bạn hiểu hơn về CSS
• Origami: Được phát triển bởi Facebook, Origami tương thích tốt với Sketch. Tuy nhiên, có lý do chính khiến tôi khuyên bạn nên dùng thử Origami. Bởi nó thay đổi cách chúng ta nghĩ về “giao diện”. Nó không chỉ là các thiết kế mà còn là sự phân chia cấp bậc của các thành phần.
• Framer: Cũng là một công cụ giúp bạn hiểu về cấu trúc và code. Nó giúp bạn học được nhiều trong quá trình chuyển đổi từ thiết kế thành các chức năng của sản phẩm.

Bây giờ tôi cần làm gì?

Không ai cần phải học thuộc lòng hết chỗ kiến thức này cả. Tuy nhiên, bạn có thể cải thiện và bổ sung thêm hiểu biết về các kiến thức nền tảng. Để khi làm việc mọi thử trở nên mượt mà, dễ dàng hơn. Với vai trò là một designer, tôi có lời khuyên cho bạn. Nếu bạn nghĩ thứ gì đó quan trọng hoặc liên quan đến công việc bạn làm. Vậy thì hãy tìm hiểu nó ngay lập tức.

Link bài viết gốc: What designers actually need to know about coding