Chương 1: Bắt đầu từ số 0 tròn trĩnh
1. Bắt đầu từ tính năng, không phải từ bố cục
Khi bắt đầu lên ý tưởng thiết kế cho một ứng dụng mới, bạn sẽ làm gì đầu tiên? Nếu là thanh điều hướng trên cùng của một trang web thì bạn đã lầm to.
Cách dễ dàng nhất để bạn tự làm mình bế tắc trong các ý tưởng là cố gắng “thiết kế ứng dụng”. Khi mọi người nghĩ về “thiết kế ứng dụng” họ chỉ đang nghĩ về cái vỏ bọc bên ngoài của một ứng dụng.
Nên thiết kế thanh điều hướng ở trên cùng hay là một bên?
Nên đặt các mục trong thanh điều hướng bên phải hay là bên trái?
Nội dung trong trang chỉ rộng vừa đủ hay rộng toàn màn hình?
Để logo ở đâu thì hợp lý nhỉ?
Vấn đề ở đây là một ứng dụng chính là một tập hợp của nhiều tính năng, nhưng trước khi thiết kế một tính năng, bạn thậm chí còn không có đủ thông tin để biết cách nó hoạt động. Sẽ không có gì ngạc nhiên khi điều đó làm bạn nản chí.
Thay vì bắt đầu với cái vỏ bên ngoài, bạn hãy bắt đầu bằng việc phân tích một chức năng thực tế.
Giả sử bạn xây dựng một hệ thống đặt vé máy bay, bạn có thể bắt đầu với tính năng “tìm kiếm”.
Giao diện bạn cần sẽ bao gồm:
- Một trường cho điểm khởi hành
- Một trường cho điểm đến
- Một trường cho ngày khởi hành
- Một trường cho ngày trở về
- Một nút để tìm kiếm
Được rồi, hãy bắt đầu nào.
Chết tiệt, bạn thậm chí có thể không cần đến những thứ khác, giống như là Google vậy.
2. Hãy để các chi tiết lại sau
Giai đoạn đầu trong việc thiết kế một tính năng mới, điều quan trọng mà bạn cần nhớ là đừng vội vàng chọn kiểu chữ, đổ bóng hay icon,... Những thứ đó sẽ quan trọng, nhưng không phải là bây giờ.
Nếu bạn gặp khó khăn trong việc bỏ qua các chi tiết khi làm việc với các công cụ thiết kế như: trình duyệt, figma, adobe XD,... có một mẹo mà Jason Fried đã sử dụng đó là hãy thiết kế trên giấy bằng bút lông.
Bạn sẽ không bị ám ảnh bởi các chi tiết nhỏ nhặt khi thiết kế bằng bút lông, đây có thể là một cách tuyệt vời để bạn tạo ra các ý tưởng khác nhau về bố cục của ứng dụng.
Đừng vội tô màu
Ngay cả khi bạn đã sẵn sàng để thiết kế một ý tưởng trên các công cụ thiết kế thì cũng đừng vội mà tô màu.
Hãy thiết kế giao diện của bạn trên thang màu xám, việc này sẽ khiến bạn phải cân đo đong đếm về khoảng cách, độ tương phản và kích thước để có thể tạo ra một thiết kế hoàn hảo.
Sẽ khó khăn hơn một chút, nhưng bạn có một thiết kế rõ ràng với hệ thống phân cấp mạnh mẽ và dễ dàng thay đổi màu sắc sau này.
Đừng đầu tư quá mức
Điểm quan trọng khi bạn thiết kế với “độ trung thực thấp” (thiết kế trên giấy,...) đó là thiết kế nhanh chóng, vì vậy bạn có thể bắt đầu một ứng dụng thực tế sớm nhất có thể.
Các bản phác thảo cũng như khung sườn của trang web bạn chỉ nên dùng một lần. Chúng giống như những bản nháp, do đó hãy sử dụng chúng để tìm ra ý tưởng thiết kế của bạn rồi bỏ chúng đi.
3. Đừng thiết kế quá nhiều
Bạn không cần thiết kế toàn bộ tính năng cho một ứng dụng trước khi triển khai vào dự án thực tế. Trên thực tế, sẽ tốt hơn nhiều nếu bạn không làm như vậy.
Việc tìm ra mọi tính năng trong một sản phẩm và tưởng tượng ra mọi trường hợp của bản thiết kế thật sự rất khó.
- Màn hình này sẽ trông như thế nào nếu người dùng có 2000 địa chỉ liên hệ?
- Thông báo lỗi sẽ hiển thị ở đâu trong mẫu đăng nhập này?
- Lịch này sẽ trông như thế nào khi có hai sự kiện cùng một lúc?
Rõ ràng là chính bạn đang tạo ra những khó khăn cho mình bằng việc cố gắng làm tất cả những thứ này chỉ với trí tưởng tượng của bạn.
Làm việc theo chu kỳ
Thay vì cố gắng thiết kế trước tất cả các tính năng, hãy thiết kế theo từng chu kỳ ngắn. Bắt đầu bằng việc thiết kế một phiên bản đơn giản cho tính năng tiếp theo mà bạn muốn xây dựng.
Khi bạn đã hài lòng với bản thiết kế cơ bản của mình, đó là lúc biến nó thành sự thật.
Có thể trong quá trình thiết kế, bạn sẽ gặp một số vấn đề không mong muốn, đương nhiên bạn cần phải khắc phục nó, nhưng chắc chắn nó sẽ dễ dàng hơn nhiều so với việc bạn cố gắng tưởng tượng ra tất cả các trường hợp.
Hãy lặp lại bản thiết kế đang làm cho đến khi mọi thứ được ổn áp. Sau đó hãy quay lại với bản tổng quan và bắt đầu thiết kế tính năng tiếp theo.
Đừng quá chú tâm vào các thiết kế trừu tượng, hãy làm mọi thứ thật nhất có thể để trí tưởng tượng của bạn không phải làm quá nhiều việc mệt nhọc.
Đừng quá tham lam
Đừng phác thảo các ý tưởng mà bạn chưa sẵn sàng trong thiết kế của mình
Ví dụ: bạn đang thiết kế một giao diện nhận xét cho người dùng, và bạn biết rằng trong tương lai người dùng sẽ cần phải đính kèm hình ảnh cho nhận xét của họ. Do đó bạn quyết định sẽ thiết kế thêm phần đính kèm ảnh cho bản thiết kế của mình.
Bạn chỉ đào sâu vào việc đưa tính năng đính kèm hình ảnh vào bản thiết kế mà quên mất rằng nó sẽ tốn thời gian hơn là bạn nghĩ.
Và kết quả là bạn không thể hoàn thành được bản thiết kế của mình đúng thời hạn vì chăm chăm vào thiết kế tính năng đính kèm ảnh.
Trong khi đó, một hệ thống nhận xét sẽ vẫn hoạt động tốt nếu không có tính năng đính kèm ảnh. Nhưng vì bạn đã đưa nó vào bản thiết kế ngay từ đầu nên giờ đây bạn không có một bản thiết kế hoàn chỉnh để gửi cho sếp.
Một lời khuyên hữu ích khi bạn bắt đầu thiết kế một tính năng mới, đó là hãy xem nó là một tính năng khó, do đó hãy thiết kế một bản đầy đủ nhưng đơn giản nhất có thể để giảm tối đa rủi ro cho bạn.
Nếu có một tính năng hữu ích nhưng không bắt buộc, hãy thiết kế nó sau. Cố gắng xây dựng phiên bản đơn giản trước và bạn luôn có thể nâng cấp nó sau này.
4. Chọn cho mình một phong cách
Mỗi thiết kế đều có một phong cách nhất định, một trang web ngân hàng sẽ thể hiện tính bảo mật và chuyên nghiệp, trong khi một công ty khởi nghiệp lại thể hiện phong cách hiện đại, vui vẻ và hợp xu thế.
Nhìn bề ngoài, việc tạo một bản thiết kế có phong cách nghe khá trừu tượng và khó hình dung. Nhưng phần lớn chúng đều được quyết định bởi một vài yếu tố cụ thể.
Chọn kiểu chữ
Kiểu chữ đóng một vai trò lớn trong việc định hình phong cách thiết kế.
Nếu bạn muốn một trang web trông thanh lịch hoặc cổ điển, bạn có thể kết hợp kiểu serif trong thiết kế của mình.
Để có một cái nhìn vui tươi cho trang web, kiểu chữ rounded sans serif có thể phù hợp với bạn.
Nếu bạn muốn trang web trông rõ ràng hơn, hoặc muốn tạo ra các thành phần khác biệt thì kiểu chữ neutral sans serif sẽ rất phù hợp.
Màu sắc
Có rất nhiều cuộc nghiên cứu tâm lý về màu sắc đã diễn ra, nhưng trên thực tế bạn chỉ cần quan tâm đến cảm giác của chính mình về sự khác nhau giữa các màu sắc.
Xanh lam là một màu an toàn và thân thiện - không ai có thể phủ nhận điều đó.
Màu vàng thể hiện sự “sang trọng” và “tinh xảo”.
Màu hồng có một chút vui tươi và không nghiêm trọng quá vấn đề
Mặc dù vậy, việc lựa chọn màu sắc dựa vào cảm giác của bạn không phải lúc nào cũng tốt - có thể là màu sắc đó hợp với bạn hoặc đơn giản là bạn thích màu đó nên nghĩ nó hợp.
Bo tròn viền
Nghe có vẻ là một chi tiết khá nhỏ, nhưng mức độ bo tròn có tác động rất lớn đến tổng thể thiết kế của bạn.
Một phần tử có độ bo tròn nhỏ là khá hài hòa và không thể hiện quá nhiều sự nổi trội.
Một phần tử với độ bo tròn lớn hơn sẽ vui tươi và để lại nhiều ấn tượng hơn.
Trong khi đó, nếu không bo tròn sẽ khiến cho thiết kế của chúng ta trông nghiêm túc và trang trọng hơn nhiều.
Cho dù bạn chọn kiểu nào đi nữa, điều quan trọng là luôn giữ các thiết kế nhất quán với nhau. Việc pha trộn giữa các thiết kế luôn mang lại trải nghiệm tệ hơn cho người dùng.
Từ ngữ
Mặc dù từ ngữ không phải là một thiết kế trực quan, nhưng những từ bạn dùng có ảnh hưởng lớn đến toàn bộ thiết kế.
Sử dụng ít từ ngữ mang phong cách cá nhân sẽ giúp thiết kế của bạn trông chuyên nghiệp và phổ biến hơn.
Trong khi đó, sử dụng những từ ngữ địa phương, bình thường hơn có thể khiến người dùng cảm thấy thân thiện và dễ chịu.
Từ ngữ có ở mọi nơi trong một thiết kế, do đó nó cũng quan trọng không kém việc lựa chọn màu sắc hay kiểu chữ của ứng dụng.
Hãy chọn thứ mình muốn
Trong hầu hết các ứng dụng, bạn sẽ muốn thiết kế theo phong cách của chính mình. Nhưng nếu nó không phù hợp, cách tốt nhất là hãy tham khảo các trang khác có cùng chủ đề và đối tượng mà bạn muốn tiếp cận.
Nếu đối tượng bạn hướng đến là những người trưởng thành và nghiêm túc, hãy thiết kế theo cách đó. Hay hệ thống của bạn chỉ hướng đến giới trẻ hãy thiết kế nó theo cách trẻ trung và vui tươi. Chỉ cần bạn đừng quá copy từ các trang web khác nếu không muốn thiết kế của mình trở thành phiên bản thứ 2 của họ.
...Chương II sẽ được cập nhật tại đây...