Một số kĩ thuật design cơ bản cho developer

Hẳn là có vài bạn (sinh viên) đang muốn hỏi: Ơ tui là lập trình viên, lo code thôi chứ có phải thiết kế gì đâu mà phải học design? Xin trả lời là: trừ khi bạn đi theo con đường lập trình nhúng, hoặc làm back-end developer 100%, thế nào bạn cũng sẽ phải đụng tới vài việc liên quan tới thiết kế.

Nếu may mắn, những công việc như thiết kế giao diện web, giao diện di động sẽ được thực hiện bởi designer, developer chúng mình chỉ cần file HTML hoặc PSD và code thôi.Tuy nhiên, ở Việt Nam, nhiều khi developer chúng mình cũng phải kiêm luôn nhiệm vụ này.

Thiếu kiến thức về design, đôi khi dev chúng mình cho ra nhiều giao diện khá là khủng khiếp (Thuở xưa ở Đại Học cũng có dạy môn HCI – Tương tác người dùng, nhưng cũng chẳng có tác dụng mấy). Do đó, bạn hãy tự trang bị cho mình những kiến thức design cơ bản, để tạo ra những design coi được. Những kiến thức này sẽ rất hữu dụng khi bạn muốn đi theo con đường front-end developer, hoặc full-stack developer.

Lẽ dĩ nhiên, dân developer chúng mình không khéo tay, sáng tạo như bè lũ designer được. Chúng ta thiết kế không phải hướng tới cái đẹp, mà hướng tới sự hữu dụng, đẹp và thuận mắt là thứ yếu. Mình cũng biết, các bạn thích làm việc với HTML, CSS, JS chứ không phải InDesign hay Photoshop, ta không thể học design theo cách của tụi designer được.

May mắn thay, mình tình cờ lụm được một số bí kíp khá hay về Design for developer, kiến thức rất thú vị, trực quan, phù hợp cho giới developer. Dĩ nhiên là mình không ăn một mình mà mang lên đây chia sẻ cho mọi người, mong các bạn ủng hộ. Bài viết chỉ nói về một số vấn đề cơ bản mà quan trọng: Màu sắc, font chữ, và layout.

Màu sắc

Màu sắc và logo là 2 thứ đầu tiên đập vào mắt người dùng khi họ sử dụng trang web/ứng dụng. Với Facebook đó là màu xanh dịu dàng, với Yahoo là màu tím mộng mơ. Chọn màu sắc là một việc tưởng dễ nhưng khá khó. Nếu không biết cách chọn, các màu sẽ đánh nhau chan chát, nhìn rất ngứa mắt. Xin giới thiệu với các bạn một công cụ mà lũ designer hay xài – vòng tròn màu thần thánh:

Để chọn một được bộ màu phù hợp cho website (Khoảng 5-6 màu), ta cần làm theo các bước sau:

1. Chọn màu chủ đạo (Dựa theo logo hay gì gì đó).
2. Tìm màu đó trên vòng tròn màu. Nếu muốn sử dụng một tông màu duy nhất, dùng chế độ Analogous hoặc Monochromatioc. Nếu muốn có các tông màu tương phản, dùng chế độ Triad, hoặc Complementary.
3. Nghịch ngợm vòng tròn màu cho tới khi tìm được bộ màu phù hợp. Nếu bí, các bạn có thể tham khảo một số bộ màu được đánh giá cao ở đây: .

Dĩ nhiên, đằng sau chuyện chọn màu này là một đống lý thuyết về thị giác, tâm lý,…. Mà kệ nó, lũ designer phải học mấy cái đấy, còn mình biết cách để lấy màu đẹp là được rồi.

Font chữ (Typography)

Font chữ chính là thứ làm sự chuyên nghiệp của website. Nhiều bạn thường chỉ dùng mỗi Arial và Times New Roman để làm font, do đó nhìn website có vẻ khô cứng, thiếu tự nhiên. Website của mình dùng Open Sans tạo cảm giác thanh mảnh dễ đọc: .

Có hàng ngàn font chữ được sử dụng, tuy nhiên chúng có thể được chia thành vài loại dưới đây:

• Serif font: Font có các dấu gạch ở chân, cuối chữ, tiêu biểu là Times New Roman. Font này thường được dùng khi in ấn, hoặc cho nội dung vì chúng khá trang trọng, dễ đọc.
• San-serift font: Font không chân, tiêu biểu là Calibri, Verdana. Font này thường được dùng để hiển thị giao diện, title, button, vì chúng dễ đọc dù ở size nhỏ.
• Script font: Font viết tay, thường dùng để trang trí, tạo cảm giác nhẹ nhàng vui nhộn. Nếu không biết dùng thì đừng dùng nhé.
• Monospace font: Các chữ trong font này có cùng bề ngang, thường dùng để hiển trị công thức v…v

Các bạn có thể tìm font đẹp tại Google Font, sau đó tìm hiểu cách kết hợp các font tại và nhé. Điều quan trọng nhất, để người dùng dễ đọc, nhớ đừng để chữ nhỏ quá (Khoảng 16px là vừa), tăng cỡ chữ cho web di động nhé.

Layout

Các designer chuyên nghiệp thường sử dụng grid layout, layout theo dạng khối. Layout thường được chia thành 12 cột .12 là con số thần thánh vì nó chia hết cho 2, 3, 4, 6, designer có thể chia màn hình thành 2, 3 hay 4 cột đều được. CSS framework nổi tiếng là bootstrap cũng áp dụng con số 12 này vào grid system của họ: .

Một lời khuyên nữa từ các designer là đừng tiết kiệm khoảng trắng. Trong thiết kế, khoảng trắng tạo cảm giác thoáng đãng, rộng rãi, xa hoa. Thử ghé thăm Google hoặc Apple, bạn sẽ thấy giao diện rất trực quan, dễ nhìn với nhiều khoảng trắng. Tương phản là một số trang web bán hàng hoặc tin tức (Yahoo), nhồi nhét đủ thứ vào rất chật chột, tù túng và rối mắt. Nhắc lại lần nữa, đừng tiết kiệm khoảng trắng (Nhưng đừng để website trống huơ trống hoác nhá).

Bài học quan trọng nhất trong thiết kế là: Khi không biết phải làm gì, hãy tham khảo và “chôm chỉa”. Mục đích thiết kế của dân developer, không phải để tạo ra cái đẹp, cái mới, mà là để tạo ra sản phẩm tốt nhất, dễ sử dụng nhất. Do đó, cứ thoải mái học hỏi và chôm chỉ từ cái design đỉnh nhé.

Mọi người thảo luận và chia sẻ với nhau các tài liệu học design trong phần comment nhé. Bạn nào là designer hoặc chuyên về design có thể ném gạch, góp ý hộ để bài viết của mình được đúng đắn, chính xác hơn, mình xin nhận gạch đá nhiệt tình luôn.

Techtalk Via toidicodedao