Những ý tưởng thiết kế cơ bản dành cho các lập trình viên Front End

Front End là cách gọi quy trình sử dụng những ngôn ngữ HTML và CSS... để thiết kế và xây dựng giao diện cho các website, nhờ vậy mà người dùng có thể xem và tương tác trực tiếp trên đó.

Mục tiêu của việc thiết kế trang web là giúp cho người dùng dễ dàng điều hướng khi truy cập. Điều này rất khó khăn vì trong thực tế có rất nhiều thiết bị với kích thước và độ phân giải khác nhau. Chính vì thế, các Front End Developer vừa phải đảm bảo cho trang web xuất hiện chính xác trên mọi giao diện, vừa phải liên tục nghĩ ra các ý tưởng thiết kế web sao cho độc đáo. 

Tuy nhiên, với các gợi ý cơ bản mà Tự Học Lập Trình cung cấp sau đây, công việc của bạn sẽ trở nên dễ dàng hơn rất nhiều.

WireFrame

WireFrame là một công cụ trực quan dùng để trình bày các chức năng, cấu trúc và nội dung được đề xuất của trang web. Thuật ngữ này mang ý nghĩa phác họa vị trí của các nút nhấp, hình ảnh và văn bản với số lượng chi tiết tối thiểu nhất. 

Nói nôm na, WireFrame là một bản thiết kế nháp, chứa nội dung cơ bản của một giao diện website hay ứng dụng trong UI/UX. 

Composition

Composition là khi các yếu tố được sắp xếp theo một cách nhất định, bạn nên làm quen với grid system. Nó được dùng với hầu hết các framework CSS như Bootstrap và Foundation. Bên cạnh đó, nó có độ tương phản với kích thước và màu sắc để giúp thông tin trở nên liền mạch hơn. 

Sự lặp đi lặp lại 

Sự lặp đi lặp lại mà Tự Học Lập Trình muốn đề cập ở đây có nghĩa là tái sử dụng cùng hoặc dùng một hình ảnh, phong cách tương tự xuyên suốt các thiết kế của bạn. Chẳng hạn như khi bạn đang sử dụng nút nhấp tròn về hình thức, thì style này nên được nhất quán mỗi khi nút nhấp xuất hiện trên trang của bạn. 

Màu sắc

Có thể nói, công việc thiết kế giao diện web của bạn phải luôn luôn gắn liền với một bảng màu. Tuy nhiên, bạn cần thật sự hiểu rõ về các nguyên tắc tương phản, phối màu để giúp cho trang web trông liên kết, hài hòa, chu đáo và dễ nhìn.

Trên thực tế, có rất nhiều bộ công cụ và các trang web mà bạn có thể tạo ra bảng màu, cái được mọi người sử dụng nhiều nhất chính là Color Mind hay Coolors.

Để Tự Học Lập Trình chia sẻ cho bạn một bí quyết, bạn chỉ nên dùng tối đa 3 màu, bao gồm 1 màu chính, 1 màu phụ và 1 màu để nhấn. Bên cạnh đó, hãy dùng công thức "60-30-10", với 60% nên là màu thương hiệu của riêng bạn, 30% sẽ là màu phụ và 10% cho màu nhấn.

Typography

Typography được xem như là một nghệ thuật sắp đặt để người xem dễ dàng đọc thông tin và cảm thấy thoải mái hơn khi nhìn vào trang web. Có thể bạn đã bắt gặp vài kiểu cơ bản của các yếu tố Typography trong code. Chẳng hạn như, đây là nơi mà Composition được đưa vào sử dụng. Đầu tiên, bạn cần phải hiểu rõ về thông tin quan trọng nhất mà bạn muốn người dùng nhìn thấy là gì. Với thông tin này, bạn rất có thể sẽ phải đặt một thẻ H1 hay có thể làm văn bản đậm lên cho nó trông thật nổi bật. 

Một cách khác nữa để sử dụng Typography là bắt cặp hai Font chữ tuy khác nhau nhưng cùng chung một nhà để tạo nên độ tương phản. Cặp đôi phổ biến nhất chính là San-serif Typeface và Serif Font Face.