Chắc hẳn là sẽ có vài bạn (sinh viên) đang muốn hỏi: Tôi là một lập trình viên mà, tôi chỉ code thôi chứ sao phải học design làm gì? Tôi xin trả lời rằng: trừ khi các bạn theo lập trình nhúng, hoặc theo back-end 100%, không thì 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 thì những việc như thiết kế giao diện di động, giao diện web được giao cho Designer, còn các Developer nhà mình chỉ cần code mà thôi. Tuy nhiên ở Việt Nam, nhiều developer cũng phải kiêm luôn cả phần của Designer đó. Thế nên đừng thắc mắc tại sao lại phải biết về design nhé. Thiếu kiến thức về design, đôi khi Dev cho ra nhiều giao diện khá là khủng khiếp :))
Vì thế hãy tự trang bị cho mình một số kiến thức Design cơ bản để tự tạo cho mình những bản design đẹp. Những kiến thức này sẽ rất hữu ích khi bạn muốn theo front-end hoặc full-stack đó nhé.
Lẽ dĩ nhiên, dân developer chúng mình không khéo tay, sáng tạo như 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.
Thật may mắn, 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. Nên mình chia sẻ lên đây cho các bạn cùng tham khảo nhé. 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, nhìn rất khó chịu cho mắt. Xin giới thiệu với các bạn một công cụ mà designer hay dùng – vòng tròn màu thần thánh.
>>> Xem thêm các thông tin hữu ích tại t3h.edu.vn
Để 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:
- Chọn màu chủ đạo (Dựa theo logo hay gì gì đó).
- 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.
- Nghịch thử trên vòng tròn màu cho tới khi tìm được bộ màu phù hợp.
- .
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à không sao, nhóm 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.
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
Đ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, có độ nghỉ cho mắt nhìn. 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 , 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à học tập. 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à học tập từ cái design đỉnh nhé.
Qua bài này mong rằng các dev sẽ có thể tạo ra những trang web đẹp nhé, các bạn có ý kiến gì thì hãy comment để cùng trao đổi nhé.
