💡Bật mí: Bạn dễ dàng đọc các bài về thiết kế nhanh gấp 10x lần việc thực hành Design
Nhưng mà, mỗi một phút bạn dành cho việc chỉ đọc các bài viết về thiết kế, hãy dành ra 10 phút đó vào việc thực sự thiết kế.
Bài viết này sẽ chỉ nói về việc luyện tập UI, không bao gồm UX, các bạn có thể inbox Mirr để chia sẻ những topic mà các bạn muốn đọc thêm nhé.
Ừm, bạn đang đọc bài viết này, nhưng, hãy coi bài viết này giống như một trung tâm tài nguyên, công cụ, liên kết và ý tưởng để bạn bắt tay học thiết kế giao diện người dùng của bạn. Mình đã tập hợp những thứ mà mình ước mình có thể thấy được khi mới bắt đầu học thiết kế giao diện. Nhưng thay vì chỉ cho các bạn tips và trick, mình sẽ cố gắng vẽ một hướng để các bạn có thể tham khảo.
Việc làm đầu tiên: BẮT ĐẦU
Đừng suy nghĩ gì thêm hết, cứ bắt đầu đi. Vậy bắt đầu như thế nào đây? Mình cùng đi chi tiết nha.
1. Thay đổi thói quen, tư duy, thái độ
💡Việc làm đầu tiên: bắt đầu
Trong cuốn sách “Atomic Habits” - Thói quen tí hon của tác giả James Clear, tác giả có chỉ một mẹo để mình bắt đầu một cách dễ dàng. Đó chính là quy tắc 2 phút.
2 phút để cho bạn bắt đầu. 2 phút, ngồi vào bàn, thiết kế trong vòng 2 phút. Việc làm này giúp bạn bén được dòng chảy tiếp theo. Ngày đầu tiên, 2 phút thôi, thiết kế. Mỗi ngày bạn nâng lên được 1 phút nữa thôi là bạn đã phát triển hơn bạn hôm qua rồi đó.
Lúc bắt đầu, có thể từ 2 - 5 phút tùy sở thích của bạn. Tuy nhiên, đừng đặt mục tiêu của mình cao quá 5 phút , vì bạn có thể vào cạm bẫy tâm trí này:
Ví dụ: mục tiêu của mình là muốn giảm 10kg. Thay vì mình chỉ ngồi đọc các tips giảm cân thôi, mà chưa có hành động gì cụ thể cả. Mình đã từng vạch ra cho bản thân 10 chống đẩy mỗi ngày, ăn kiêng. Mình làm được một ngày, rất tràn đầy năng lượng. Ngày 2, mình chống được 5 cái, uống 1 ly trà sữa, “không sao đâu, mai mình lại tiếp tục”, mình đã nghĩ như vậy đó. Ngày 3, mình dẹp luôn, có thể tới đây các bạn nghĩ là mình không có đủ động lực cố gắng, đúng là vậy đó, nhưng mà, bạn đọc đến đây, bạn có thấy quen không? Có thể khác mục tiêu - nhưng quy trình sẽ giống.
Thay vì chỉ ngồi đọc, và thầm nghĩ “một ngày nào đó mình sẽ cần”, không, cần luôn, làm liền luôn, 2 phút thôi. Nhưng 2 phút đó, chính là bắt đầu của cả một dòng chảy (flow) phía sau đầy xán lạn. Bạn sẽ TẠO RA nhiều thứ. Không chỉ thiết kế; bạn cũng sẽ tạo các danh sách và tài nguyên để chính mình tham khảo sau này, đây là “lãi kép” hiệu quả theo thời gian mà bạn kiếm được chỉ thông qua việc, bắt đầu.
2. Quyết định thực hành chưa?
Khi bạn thực hành, bạn sẽ biết câu hỏi cần hỏi. Một phần khó khăn của việc học bằng cách đọc là không biết điều gì hữu ích và điều gì vô ích với bạn trong lúc đó. Bạn thực sự phải hòa mình vào việc hành động trước khi biết mình thực sự sẽ gặp khó khăn ở đâu. Đây là điều tôi nhận thấy khi lần đầu tiên bắt đầu thiết kế. Mình có thể đọc tất cả những gì mình muốn về lý thuyết màu sắc – vô ích. Hóa ra nó hữu ích là câu trả lời cho những câu hỏi như “Tôi có một nút trông quá đơn điệu – tôi thực sự có những tùy chọn nào để làm cho nó trông bắt mắt hơn?”
Đây là những bài tập mà mình có thể áp dụng để thực hành UI theo lịch 5 tuần:
Tuần 1: Phân tích thiết kế - Xây dựng bản năng thiết kế bên trong bạn
Liệt kê 5 trang web hoặc ứng dụng có thiết kế giao diện người dùng tốt và 1-2 trang web hoặc ứng dụng có thiết kế xấu. Đối với mỗi phương pháp, hãy trình bày bằng lời lẽ của riêng bạn lý do tại sao bạn tin rằng phương pháp đó hiệu quả hoặc không hiệu quả.
Giống như bất kỳ ngành nghề nào khi lành nghề, các nhà thiết kế giao diện người dùng thành công và giàu năm kinh nghiệm luôn có “bản năng trực giác” mạnh mẽ về những gì sẽ đẹp mắt. Một trong những lo lắng phổ biến nhất mà mình nghe được từ các nhà thiết kế mới bắt đầu là họ chưa có bản năng mạnh mẽ này.
Nếu bạn chỉ mới bắt đầu, đó là điều bạn bị thiếu.
Khi mới bắt đầu, bạn có thể thiết kế như này…
Khi bạn đã thiết kế được nhiều năm, bạn sẽ có được bản năng thiết kế mạnh mẽ. Mỗi khi bạn bắt đầu một dự án mới, tâm trí bạn sẽ tràn ngập những khả năng – ý tưởng về phông chữ nào sẽ thử, màu nào có thể hoạt động tốt, trang web nào sẽ là nguồn cảm hứng tốt, bố cục nào sẽ sử dụng, v.v.
Đối với bài tập này, bạn nên liệt kê các ứng dụng/trang web có giao diện người dùng tuyệt vời (và những ứng dụng/trang web có giao diện người dùng thực sự tệ) và bạn nên trình bày rõ ràng nhất có thể lý do và điều bạn thích (hoặc không thích) về chúng.
Ví dụ như trang này:
Cùng phân tích với mình nhé:
Đa sắc màu, bảng màu có phần retro, thể hiện được Lascote đã đi qua rất nhiều năm tháng
Sự đồng nhất của những bức ảnh, thể hiện Lascote trước giờ không thay đổi
Font dùng ở đây tên Lascote, font độc quyền, bền vững
Logo xuất hiện khắp nơi, để nhấn mạnh thông điệp: 90 năm 1 phong cách, cũng như nhấn mạnh được Lascote luôn bền vững qua thời gian
Bạn cũng có thể có góc nhìn khác, bạn có thể phân tích theo hướng khác nhé. Vấn đề không phải là mình đồng ý nhiều như thế nào mà là bạn hiểu tại sao bạn lại cảm thấy như vậy. Mọi thứ mình vừa liệt kê có thể được khái quát hóa thành một nguyên tắc mà mình có thể sử dụng trong các thiết kế trong tương lai.
Hãy để cho trực giác thiết kế của bạn được phát triển mạnh mẽ thông qua việc luyện tập kiên trì.
Tuần 2: Copywork
Sao chép giao diện người dùng của một trang web/ứng dụng tốt từng pixel. Cuối cùng, hãy viết ra những kỹ thuật cụ thể mà người sáng tạo đã sử dụng để “mở rộng vốn từ vựng thiết kế của bạn”.
(Lưu ý: điều này cũng có thể được thực hiện như một bài tập 30 phút hàng ngày thay vì thực hiện tất cả cùng một lúc)
Sao chép (Copywork) là một bài tập rất tốt để cải thiện kỹ năng thiết kế của bạn, nhưng hầu như không có nhà thiết kế nào thực sự làm điều đó.
Nói vắn tắt là, sao chép chỉ đơn giản là tạo lại một thiết kế pixel-for-pixel thiết kế xuất sắc mà bạn lựa chọn.
Khi bạn tạo lại một thiết kế, từng pixel, bạn buộc phải làm lại mọi quyết định mà nhà thiết kế ban đầu đã đưa ra. Phông chữ nào? Để nó lớn đến đâu? Làm thế nào để sắp xếp các element? Những hình ảnh và nền và trang trí? Bạn đắm mình trong các quyết định thiết kế nhỏ được thực hiện bởi các nhà thiết kế tuyệt vời. Khi bạn tạo lại những quyết định đó, bạn bắt đầu nhận thấy những quyết định ban đầu mà bạn sẽ không đưa ra và sử dụng các kỹ thuật hoặc thủ thuật mà bạn sẽ không chọn được khi chỉ nhìn vào thiết kế.
Những thủ thuật và kỹ thuật đó bạn có thể mang theo bên mình trong suốt sự nghiệp thiết kế.
Hãy xem một ví dụ mà mình tìm được để thuật lại về việc sao chép. Đây là một đoạn mà tác giả gốc bài viết đã sao chép - Trang web Oahu Epicurrence xuất sắc của Dan Petty:
Chẳng hạn, đây là những điều tác giả nhận thấy chỉ trong tiêu đề, mình sẽ trích dẫn nguyên văn:
“Kích thước phông chữ cực lớn một cách điên khùng: Bản sao gốc của tôi bao gồm các chữ cái đầu của Hawaii “HI” ở phông chữ cỡ 365. Chưa bao giờ trong những năm làm việc của mình, tôi nghĩ đến việc tạo ra một văn bản lớn như vậy. Tuy nhiên, anh ấy sử dụng nó như một phần tử trực quan, căn chỉnh nó với các phần tử tiêu đề khác, thậm chí đặt một hình ảnh giữa các chữ cái. Rất tuyệt.
Vẽ nét để làm "bóng tối". Một vệt màu nước chạy khắp đáy con dấu, phần đầu và quả dứa. Nó ở vị trí có thể có bóng, như thể bóng được vẽ trên trang giấy. Chà - đó không phải là cách làm thông thường!
Kiểu chữ hoa với khoảng cách chữ rộng rãi. Không còn nghi ngờ gì nữa, văn bản viết hoa đó thêm một yếu tố căn chỉnh mạnh mẽ và tăng khoảng cách giữa các chữ cái là một cách trong sách giáo khoa để thêm một chút sang trọng khi nhập, nhưng tôi thấy mình rất ngại làm điều đó. Thật thú vị khi thấy rằng tất cả văn bản ở đây đều được viết hoa và về cơ bản, tất cả văn bản đó cũng đã sửa đổi khoảng cách giữa các chữ cái.
Tôi đã xem thiết kế của Dann Petty trước khi quyết định sao chép nó. Tôi nghĩ, "Chà, cái này trông thật tuyệt." Và ngay cả khi mắt tôi lướt qua thiết kế, không có nghĩa là tôi ngay lập tức tiếp thu mọi kỹ thuật mà anh ấy sử dụng. Chỉ khi tôi sao chép nó, tôi mới bắt đầu áp dụng một cách có ý thức những thứ đó vào bộ công cụ giao diện người dùng của mình.”
Những chiến lược này chi tiết hơn bất kỳ lớp học nào về người thiết kế thường tham gia. Chúng là những mẹo và kỹ thuật chỉ dùng một lần, đi thẳng từ tâm trí của một bậc thầy đến tâm trí của bạn, nếu bạn sẵn sàng nỗ lực thực hiện công việc sao chép.
Bạn có thể sẽ tự hỏi “Vậy giờ mình nên sao chép gì đây?”. Bạn hãy sao chép những kĩ năng bạn đang thiếu, thí dụ:
Bạn đang muốn cải thiện khả năng dùng Font, hãy tìm đến những trang web bạn thấy việc dùng font ấn tượng nhất, rồi sao chép cách dùng.
Tương tự, bạn tự thấy mình chưa từng thử sức với mảng thiết kế cho ngành giáo dục chẳng hạn, bạn hãy sao chép lại những sản phẩm tốt trong ngành giáo dục.
Một số dòng lưu tâm: hãy để việc sao chép ở trong phạm vi luyện tập, chứ không dùng cho việc khác, bạn nhé.
Tuần 3: Xây dựng Font Database
Ghi lại bất kỳ phông chữ nào bạn đặc biệt thích, lưu ý các đặc điểm như thời điểm chúng hoạt động tốt và nơi bạn đã nhìn thấy chúng.
Nếu bạn nghiêm túc về việc học thiết kế giao diện người dùng, bạn sẽ cần phải làm thân với các phông chữ. Một số người nói rằng “thiết kế web chiếm 90% là kiểu chữ”, có thể đó là một sự phóng đại quá mức, nhưng điều đó không thay đổi thực tế rằng sử dụng kiểu chữ là một kỹ năng quan trọng đối với thiết kế giao diện.
Có hàng nghìn phông chữ ngoài kia, việc chọn phông chữ là một phần không dễ dàng. Và khó hơn - quan trọng hơn - làm cho chúng thật đẹp.
Bạn có thể dùng WhatFont Chrome Extension để lưu lại tên kiểu chữ bạn bắt gặp
Giống với bất kỳ quy trình nghiên cứu nào, phương pháp tốt nhất là phương pháp phù hợp với bạn. Bạn có thể tham khảo cách ghi lại thông tin sau bất cứ khi nào bạn tìm thấy một phông chữ hoạt động đặc biệt tốt dưới đây:
Tên phông chữ
Trang web/ứng dụng được tìm thấy trên đó
Cách sử dụng nó sẽ tốt cho – phông chữ nội dung, phông chữ tiêu đề, một số loại nhãn hiệu, v.v.
Ảnh chụp màn hình của nó đang được sử dụng, đặc biệt nếu bạn không thể tải xuống
Giá
Tuần 4: Style Tiles
Tạo các ô kiểu 2-3 cho phông chữ trong cơ sở dữ liệu của bạn mà bạn đặc biệt muốn thử nghiệm. Hãy nghĩ về một khái niệm cho một trang web, sau đó thiết kế một ô kiểu có tính năng:
Lựa chọn phông chữ thực tế và các thành phần văn bản (ví dụ: tiêu đề, thành phần điều hướng, nội dung văn bản)
Bảng màu phù hợp
Hình ảnh hoặc điều khiển biểu mẫu mẫu
Biểu trưng (tùy chọn)
Nếu bạn đã tạo được cơ sở dữ liệu về kiểu chữ cho bạn trong tuần thứ 3 rồi, hãy tạo không gian để dùng đến nó trong tuần thứ 4.
“Style Tiles” là những bảng vẽ nhỏ kết hợp TẤT CẢ các yếu tố thương hiệu mà bạn đang nghĩ đến – kiểu chữ, màu sắc, điều khiển biểu mẫu, logo, v.v.
Thời điểm bạn nhìn thấy một phông chữ và nghĩ, chẳng hạn như “Điều này sẽ thực sự tuyệt vời cho một thương hiệu xa xỉ!”, hãy thử nó! Tải xuống phông chữ đó (hoặc, nếu nó đắt tiền, hãy tìm một giải pháp thay thế miễn phí tốt), lấy một số ảnh sang trọng từ Unsplash, quyết định bảng màu “xa xỉ” và thử nghiệm.
Phần "thử nghiệm" là chìa khóa. Đối với việc học bất cứ điều gì, bạn càng xoay vòng nhanh giữa (A) suy nghĩ về một ý tưởng, (B) thực hiện nó và (C) đánh giá nó, thì bạn sẽ học càng nhanh. Với style tiles, quá trình này chỉ mất vài phút. Không xin phép, không ràng buộc UX, không ngân sách.
Chỉ có bạn, cải thiện thiết kế của bạn, từng bước một.
Tuần 5: Xây dựng những dự án cá nhân
Bài tập giao diện người dùng thứ năm và cũng là bài tập cuối cùng là thực sự làm việc với các dự án thiết kế cá nhân.
Có thể, bạn chưa biết bạn nên làm chủ đề nào. Ở đây, bạn có thể lấy đề bài từ các UI Challenge, có 2 nơi mà mình muốn bạn tham khảo qua:
Chắc hẳn bạn đã biết qua trang này, mỗi ngày, trong vòng 100 ngày, DailyUI sẽ gửi bạn một thử thách để bạn làm theo. Khi mình luyện tập thử, đây là những gì mình trải nghiệm:
(+) Điểm cộng | (-) Điểm trừ |
|---|---|
|
|
Bạn có thể thử cách luyện tập khác, cá nhân mình hiện tại không làm hằng ngày nữa, mình đổi qua 1 tuần khoảng 2 - 3 thử thách. Nếu làm theo cách này, chắc chắn sẽ lâu hơn 100 ngày.
Yếu tố quan trọng là kiên trì, bạn hãy thử đi, sau 100 đề bài, bạn sẽ nhận thấy được sự tiến bộ rõ rệt của bản thân.
Đây cũng là một trang khá thú vị để cho bạn tham khảo đề bài. UI Coach sẽ cho bạn một đề bài, gợi ý bảng màu cho đề bài, cũng như Font bạn có thể dùng.
(+) Điểm cộng | (-) Điểm trừ |
|---|---|
| Mình chưa có ý kiến về điểm trừ |
Ngoài ra, bạn có thể tự do theo đuổi bất kì dự án nào mà mình ấp ủ, điều này có nghĩa là:
Bạn KHÔNG được trả tiền cho chúng (ít nhất là không phải bởi khách hàng)
Bạn – và chỉ một mình bạn – có toàn quyền kiểm soát sáng tạo
Và dự án có thể đảm nhận bất kỳ định dạng nào:
Bạn thiết kế một ứng dụng/web mà bạn muốn nó tồn tại
Bạn thiết kế lại một ứng dụng hoặc trang web hiện có mà bạn có thể cải thiện
Bạn thiết kế một trang web/app vì mục đích phi lợi nhuận hoặc mục đích chính đáng khác và có khả năng gửi nó cho họ khi kết thúc
Điều này hoàn toàn phụ thuộc vào bạn. Nếu bạn thấy làm một mình hơi buồn và thiếu động lực, hay tìm kiếm những người bạn học cùng, để tham gia vào dự án của bạn. Thông qua nó, khả năng làm việc nhóm, thấu hiểu người dùng, phản biện, v.v.. sẽ được cải thiện được đáng kể đấy.
Nếu bạn dành hoàn toàn thời gian cho việc luyện tập, bạn sẽ bắt đầu cảm thấy tự tin hơn về kỹ năng thiết kế của mình trong vòng một ngày. Nếu bạn chỉ có thể rảnh được một giờ ở đây hoặc ở đó, không vấn đề gì, hãy đi với tốc độ bạn có thể duy trì – VÀ DUY TRÌ NÓ.
Mirr Design hiện đang tuyển sinh khóa học “Comprehensive User Interface Design” - CUID. Học tư duy thiết kế, thực hành thiết kế và tăng giá trị của thiết kế trong team.
Ai nên học? Khoá học được thiết kế giúp bạn nắm chắc quy trình và tư duy thiết kế, tạo tiền đề cho những bước tiến tiếp theo trong sự nghiệp UX Design. Nếu bạn đang có một vài năm kinh nghiệm hoặc chuyển từ lĩnh vực khác sang thì đây là khoá học này dành cho bạn.
Xem thêm & Đăng ký tại đây: https://www.mirrdesign.com/cuid
Reference: 5 Practical Exercises to Learn UI Design (For Free) by Erik D. Kennedy