/ Góc Học Tập

Kỹ thuật design cho Developer

Bạn đã biết các kỹ thuật design cho developer chưa? Itexpress.edu.vn chia sẻ cùng bạn 3 kĩ thuật design cơ bản và quan trọng cho dân lâp trình.

Nhiều bạn cho rằng, 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 cũng phải kiêm luôn nhiệm vụ này.

Thiếu kiến thức về design, đôi khi các lập trình viên cho ra nhiều giao diện khá là khủng khiếp. Do đó, bạn hãy tự trang bị cho mình những kỹ thuật design cho developer. 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.

Kĩ thuật design cho Developer

Ba kĩ thuật design cơ bản cho Developer

1. 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ẽ chỏi mau, rất khó nhìn. Xin giới thiệu với các bạn một công cụ mà designer hay xài – vòng tròn màu thần thánh: https://color.adobe.com/create/color-wheel/.

Kĩ thuật design cho Developer

Để 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: https://color.adobe.com/explore/most-popular/?time=all.

2. 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

Kĩ thuật design cho Developer

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 http://hellohappy.org/beautiful-web-type/http://femmebot.github.io/google-type/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é.

3. 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ọ: http://getbootstrap.com/css/#grid.

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 nha.

Kĩ thuật design cho Developer

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 hỏi. 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 từ các designer nhé.

Lời kết

Với các kỹ thuật design cho developer như trên bạn sẽ những kiến thức design cơ bản, cần thiết cho công việc lập trình.

Nguồn: toidicodedao