[Flat Design] – Thiết kế phẳng là gì? Nguồn gốc, Công dụng và Ví dụ

Nếu bạn yêu thích sự tối giản trong thiết kế, bạn nên làm quen với thiết kế phẳng. Đó là một cách tuyệt vời để tăng cường chuyển đổi, tạo một câu chuyện hấp dẫn, cải thiện tốc độ tải và hơn thế nữa mà không có sự lộn xộn không cần thiết. Khám phá thiết kế phẳng là gì và cách sử dụng nó hiệu quả nhé!

Cho dù bạn chỉ mới bắt đầu kinh doanh thiết kế web của mình hay bạn đã làm việc với tư cách là một nhà thiết kế trong nhiều năm, bạn có thể đã nhận thấy bộ mặt của web thay đổi nhiều như thế nào qua từng năm. Một số xu hướng thiết kế web khá tinh tế, chẳng hạn như sự thay đổi từ sử dụng nền màu đồng nhất sang màu chuyển sắc. Và những báo hiệu khác cho một sự thay đổi lớn trong cách chúng ta thiết kế trang web. 

Một trong những ví dụ dễ nhận biết nhất về điều này đã xảy ra vào đầu những năm 2010, khi các trang web chuyển từ chủ nghĩa lệch sang thiết kế phẳng và thiết kế Material Design lấy cảm hứng từ thiết kế phẳng. Đặc biệt, thiết kế phẳng đã chứng tỏ mình hữu ích không chỉ trong thiết kế web mà còn trong thiết kế đồ họa. Đây là một cách hiệu quả cao để thiết kế giao diện và thương hiệu hấp dẫn, từ đó khiến tỷ lệ tương tác và chuyển đổi cao hơn. 

Hãy bắt đầu với việc hiểu chính xác thiết kế phẳng là gì?

Thiết kế phẳng là gì?
Thiết kế phẳng là gì?

Thiết kế phẳng là gì?

Thiết kế phẳng là phong cách thiết kế hiện đại có giao diện người dùng được biết đến với các đặc điểm sau: 

  • Hiện đại và thân thiện với kỹ thuật số
  • Kiểu dáng tối giản
  • Không gian trắng rộng
  • Bố cục dựa trên lưới đối xứng
  • Yếu tố 2D
  • Màu sắc tươi sáng, có độ tương phản cao
  • Kiểu chữ in đậm, dễ đọc
  • Biểu tượng tượng trưng
  • Tính đơn giản

Do tập trung vào sự sạch sẽ và trật tự, thiết kế phẳng tạo ra các trang web rất chức năng, nơi hành trình của người dùng được trình bày rõ ràng và giao diện cung cấp ít hoặc không gây phiền nhiễu hoặc khó khăn khi sử dụng.

Lịch sử của thiết kế phẳng

Thiết kế phẳng được tạo ra để phản ứng trực tiếp với thời đại chủ nghĩa hiện thực của chủ nghĩa lệch lạc. 

Dưới đây là một ví dụ từ trang web của Apple vào năm 2010, với quá nhiều hình ảnh và biểu tượng đa dạng:

Rõ ràng, cần phải làm gì đó để tạo ra một giao diện hấp dẫn, trực quan và thân thiện hơn với người dùng. Trang web của Apple vào năm 2020 là ví dụ hoàn hảo về cách thực hiện điều này:

  • Lưu ý cách điều hướng thiết bị ở trên cùng tương tự như điều hướng từ mười năm trước. Nhưng chủ nghĩa hiện thực đã biến mất và được thay thế bằng các biểu tượng phẳng. 
  • Thiết kế phẳng không chỉ hấp dẫn hơn mà còn có ý thức về không gian hơn.

Phong cách Thụy Sĩ

Bây giờ, mặc dù đúng là người tiêu dùng đã quá say mê với thiết kế lệch hình, nhưng thiết kế phẳng không chỉ được tạo ra để đối lập hoàn toàn với người tiền nhiệm của nó. Nó thực sự được lấy cảm hứng từ Phong cách Thụy Sĩ. 

Còn được gọi là Phong cách Typography Quốc tế , Phong cách Thụy Sĩ là một kiểu thiết kế đồ họa đã trở nên phổ biến vào giữa thế kỷ XX. Nó được biết đến với: 

  • Chủ nghĩa tối giản
  • Bố cục dựa trên lưới
  • Bố cục không đối xứng
  • Tính dễ đọc
  • Việc sử dụng rộng rãi kiểu chữ sans-serif
  • Kể chuyện kết hợp giữa nhiếp ảnh và văn bản
  • Chủ nghĩa chức năng

Cuốn sách mẫu của những năm 1950 cho Neue Haas Grotesk (hay Helvetica, như chúng ta biết ngày nay) là một ví dụ về Phong cách Thụy Sĩ:

Như bạn có thể thấy, rất nhiều thứ chúng ta sử dụng trong thiết kế hiện đại (phẳng) rõ ràng được lấy cảm hứng từ các bảng màu tương phản rõ nét, các lựa chọn kiểu chữ phẳng và an toàn, và bố cục dựa trên lưới của Swiss Style.

Microsoft và thiết kế phẳng

Công ty được công nhận là đã đưa thiết kế phẳng vào kỷ nguyên kỹ thuật số hiện đại là Microsoft. 

Đó là vào đầu những năm 2010 khi Microsoft bắt đầu chuyển giao diện các sản phẩm của mình sang giao diện người dùng hoàn toàn phẳng và trực quan hơn. Apple cuối cùng đã áp dụng xu hướng này vào năm 2013. Và thiết kế phẳng đã bùng nổ ngay sau đó. 

Thiết kế phẳng đã trở thành xu hướng cho tất cả các loại trải nghiệm kỹ thuật số: 

  • Trang web
  • Ứng dụng
  • Giao diện phần mềm
  • Hình minh họa
  • Quảng cáo
  • Biểu trưng

Và hơn thế nữa…

Điều đó nói rằng, thiết kế phẳng như chúng ta đã biết sau đó đã trải qua một cuộc cải tiến tinh tế trong những năm gần đây để giải quyết một số vấn đề về khả năng sử dụng.

Microsoft và thiết kế phẳng
Microsoft và thiết kế phẳng

Thiết kế phẳng 2.0

Theo Nielsen Norman Group, đây là vấn đề lớn nhất với thiết kế phẳng : 

“Chúng tôi nhận thấy rằng việc tiếp xúc lâu dài với các yếu tố phẳng nhưng có thể nhấp này đã và đang làm giảm dần hiệu quả của người dùng bằng cách làm phức tạp thêm sự hiểu biết của họ về những gì có thể nhấp và những gì không.”

Mặc dù giao diện thiết kế phẳng gọn gàng hơn và dễ điều hướng hơn, nhưng nó đã loại bỏ các dấu hiệu quan trọng tạo nên sự tin tưởng cho người dùng khi nhấp chuột. Ví dụ: 

  • Các siêu liên kết được gạch chân và nhiều màu sắc
  • Văn bản có thể thao tác cùng với các biểu tượng hoặc nút

Ban đầu, Material Design được tạo ra để khắc phục sự cố này. Nhưng ngay cả đó cũng không phải là một giải pháp hoàn hảo và cần phải tự sửa chữa. 

Đó là lý do tại sao, ngày nay, thiết kế phẳng 2.0 (hoặc thiết kế bán phẳng) là phong cách thiết kế mà chúng ta thấy nhiều hơn. Cần có cách tiếp cận tốt nhất của cả hai thế giới, kết hợp thiết kế phẳng và thiết kế Material Design để trông giống như sau:

Các sans-serifs đơn giản nhưng đậm nét, màu sắc tương phản rõ nét và hàng tấn khoảng trắng tiếp tục thống trị giao diện người dùng thiết kế phẳng. Tuy nhiên, chúng tôi đã đưa trở lại một số bóng và phân lớp để cải thiện khả năng sử dụng.

Lợi ích của thiết kế phẳng

Dưới đây là một số lý do tại sao các trang web sử dụng nguyên tắc thiết kế phẳng hoạt động rất tốt với khán giả của họ: 

  • Bố cục dựa trên lưới của thiết kế phẳng vốn đã đáp ứng. 
  • Nó có sức mạnh tồn tại thực sự, cho phép các nhà thiết kế tạo ra nhiều trang web tương lai hơn. 
  • Bạn có thể sử dụng thiết kế phẳng bất kể bạn đang ở trong lĩnh vực thiết kế nào. 
  • Xu hướng hướng tới kiểu chữ phẳng, trung tính và không gian rộng rãi dẫn đến khả năng dễ đọc và dễ đọc hơn . 
  • Các yếu tố được thiết kế đơn giản sẽ dễ hiểu và nhanh hơn so với đồ họa siêu chi tiết.
  • Các biểu tượng dễ nhận biết hướng dẫn khách truy cập qua giao diện người dùng một cách hiệu quả trong khi tiết kiệm dung lượng.
  • Giao diện trực quan, không bị phân tâm giúp cải thiện khả năng điều hướng của trang web. 
  • Việc sử dụng chiến lược màu sắc, độ tương phản và thứ bậc dẫn đến sự tương tác và chuyển đổi của khách truy cập tốt hơn .
  • Nhiều thuộc tính của nó (ví dụ: giao diện người dùng tối thiểu, kiểu phông chữ đơn giản, màu sắc tương phản cao) hữu ích trong việc thiết kế các giao diện có thể truy cập .
  • Các trang web được thiết kế tối giản có xu hướng giảm tải cho máy chủ, do đó cải thiện tốc độ tải .

Điểm mấu chốt: Thiết kế phẳng không chỉ trông hiện đại và sạch sẽ mà còn giúp các trang web hoạt động tốt hơn.

Những lời chỉ trích về thiết kế phẳng

Ngoài những lời chỉ trích liên quan đến thiết kế phẳng 2.0 ở trên, thiết kế phẳng cũng bị cáo buộc là “chủ nghĩa tối giản quá mức”, tức là việc nhấn mạnh vào sự đơn giản khiến nó khó phân biệt giữa đồ họa và tín hiệu trực quan.

Google gần đây đã thiết kế lại tất cả các biểu trưng cho bộ sản phẩm của mình. Thay vì cho phép chúng được thiết kế độc đáo (và vẫn có thương hiệu), chúng hiện sử dụng cùng một bảng màu và hình dạng hình học. 

Đây là một hình thức của chủ nghĩa tối giản được đưa đến mức cực đoan và nó không tốt. 

Bạn đã hy sinh rất nhiều chi tiết đẹp trong một hình ảnh hoặc biểu tượng khi bạn làm phẳng nó. Nếu bạn không tìm ra cách độc đáo để phân biệt giữa các đồ họa có ý nghĩa và mục đích khác nhau, bạn sẽ tạo ra các vấn đề lớn cho khách truy cập của mình. 

Thiết kế phẳng ban đầu có thể đủ khó để giải mã mà không có dấu hiệu trực quan mà khách truy cập cần biết khi nào cần thực hiện hành động. Điều cuối cùng bạn muốn là để tình trạng quá tải nhận thức trở nên tồi tệ hơn vì mọi thứ trông giống nhau.

Khi nào bạn nên sử dụng thiết kế phẳng?

Như chúng ta đã thấy, có một sức hấp dẫn chung đối với thiết kế phẳng. Nhưng không chỉ là vấn đề sử dụng nó trong loại trang web nào. Bạn có thể sử dụng thiết kế phẳng khi tạo những thứ sau: 

  • Bộ biểu tượng
  • Kiểu chữ tùy chỉnh
  • Các yếu tố điều hướng trên thiết bị di động (như trong menu bánh hamburger hoặc thanh dính)
  • UI interactions
  • Hình minh họa
  • Linh vật
  • Video giải thích hoạt hình
  • Biểu trưng
  • Đồ họa thông tin
  • Đồ họa mạng xã hội
  • Quảng cáo kỹ thuật số

Bạn cũng có thể sử dụng các nguyên tắc của thiết kế phẳng trong chiến lược và giai đoạn thực hiện các dự án của mình. Cụ thể, thiết kế phẳng rất hữu ích trong việc tạo khung dây trang web cũng như hướng dẫn phong cách thiết kế web.

Cách nâng cao thiết kế phẳng của bạn

Điều đầu tiên, hãy đảm bảo rằng bạn sử dụng thiết kế phẳng 2.0 thay vì thiết kế phẳng. Mặc dù giao diện hoàn toàn phẳng có thể phù hợp với một số khách truy cập của bạn, nhưng khả năng sử dụng tổng thể của trang web sẽ được cải thiện nếu bạn thêm một số chiều sâu và ngữ cảnh vào các khu vực của trang mà bạn muốn khách truy cập tương tác.

Một điều cần lưu ý nữa là thiết kế phẳng không có nghĩa là nhàm chán hay thiếu sức sống . Bạn vẫn có thể sử dụng hoạt ảnh – lớn hay nhỏ – để cung cấp phản hồi, giúp khách truy cập giải trí trong khi tải hoặc đơn giản là thêm một số tính cách và cuộc sống bổ sung vào trải nghiệm. 

Hãy luôn thận trọng khi lựa chọn màu sắc . Mặc dù màu đậm là một phần của công thức thiết kế phẳng, nhưng chúng có thể không phù hợp với phong cách thương hiệu của bạn. Thay vào đó, hãy đảm bảo rằng bạn chọn một bảng màu có độ tương phản mạnh. Đó là tất cả những gì bạn thực sự cần để làm cho một số yếu tố nhất định của giao diện người dùng của bạn nổi bật hơn những yếu tố khác. 

Thiết kế phẳng không chỉ dành cho các trang web hoặc logo minh họa . Thông thường, khi chúng ta thấy các ví dụ về thiết kế phẳng đang hoạt động, chúng ta đang xem xét các biểu tượng, hình minh họa và các yếu tố thiết kế đồ họa khác. Tuy nhiên, thiết kế phẳng và nhiếp ảnh không loại trừ lẫn nhau. Bạn có thể sử dụng cả hai trên một trang web, miễn là bạn cam kết với một loại hình ảnh (ví dụ: hình ảnh minh họa và hình ảnh).

5 ví dụ đầy cảm hứng về thiết kế phẳng

Có quá nhiều ví dụ về thiết kế phẳng trên web. Vì vậy, những gì tôi muốn làm dưới đây là cho bạn thấy năm ví dụ đặc biệt xuất sắc về các công ty đã phát huy thế mạnh của thiết kế phẳng cho trang web và thương hiệu của họ:

Tripadvisor

Với một trang web như Tripadvisor, luôn có rủi ro rằng lượng nội dung tuyệt đối có sẵn sẽ làm quá tải thiết kế. Tuy nhiên, lướt qua trang chủ chỉ cho bạn thấy thiết kế phẳng hiệu quả như thế nào trong việc hướng khách truy cập qua một mảng nội dung phức tạp. 

Ngoài logo, phần duy nhất của màn hình đầu tiên có bất kỳ màu nào là hình ảnh anh hùng. Và đó là sự tương phản rõ nét giữa hình ảnh đầy màu sắc (tươi sáng nhưng không choáng ngợp) và trang web được thiết kế tối giản cho phép khách truy cập tập trung vào hành động chính. 

Tripadvisor and flat design
Tripadvisor and flat design

Netflix

Trang web Netflix là một ví dụ tuyệt vời về các biểu tượng phẳng tại nơi làm việc. 

Đối với người mới bắt đầu, các biểu tượng “Phát” và “Thông tin khác” đi kèm. Đây không chỉ là sự chú ý nhỏ đến từng chi tiết, những tín hiệu trực quan này nhằm đẩy nhanh quá trình tìm kiếm thứ gì đó để xem. 

Chúng ta cũng đừng bỏ qua màu sắc của nút CTA “Phát”. Nút màu trắng hoàn toàn so với phần còn lại của chủ đề tối nổi bật rõ ràng như ban ngày. Điều này áp dụng cho nút bên cạnh lựa chọn được đề xuất (ở trên cùng) cũng như nút xuất hiện khi di chuột (như Tóm tắt: Nghệ thuật thiết kế trong ảnh chụp màn hình ở trên).

Nexflix and flat design
Nexflix and flat design

Anne Klein

Trang web thương mại điện tử của Anne Klein đã thực hiện một công việc tuyệt vời khi sử dụng lưới, khoảng trắng và đối xứng để tạo ra một cửa hàng dễ điều hướng. 

Cũng có rất nhiều điều để nói về các lựa chọn thiết kế sạch sẽ – từ kiểu chữ thanh lịch đến nền toàn trắng – thực sự cho phép các hình ảnh đầy màu sắc nổi bật.

Anne Klein
Anne Klein

Dream Design – Giấc mơ sáng tạo

Nếu bạn muốn xem ví dụ về cách sử dụng thiết kế phẳng trong hoạt ảnh, hãy xem trang web Creative Dreams. 

Ảnh chụp màn hình mà chúng ta thấy ở trên là đủ bằng chứng cho thấy studio này đã sử dụng thiết kế phẳng thành công như thế nào. Màu vàng đơn lẻ cho bút chì. Sự chú ý đến từng chi tiết trong bộ đôi hoạt hình. Phông chữ lớn, dễ đọc. Có rất nhiều thứ ở đây để bạn ngạc nhiên. 

Creative Dreams - Flat Design
Creative Dreams – Flat Design

Ghé thăm thành phố Québec

Đây là một đoạn trích từ trang chủ của trang web du lịch Thành phố Québec. Mọi thứ trên trang web này đều có thiết kế phẳng 2.0. 

Bạn có những màu tương phản mạnh, nhưng chúng không quá sáng. 

Các nút tồn tại trên cùng một lớp 2D như mọi thứ khác nhưng có các dấu hiệu trực quan (như biểu tượng trong ảnh chụp màn hình hoặc các mũi tên động ở các phần khác của trang web) cho phép khách truy cập biết họ có thể nhấp vào. 

Và mặc dù mọi phần của trang đều nằm trên một lưới chặt chẽ và có thể dự đoán được, sự kết hợp tuyệt đẹp giữa hình ảnh và văn bản sẽ kể một câu chuyện hấp dẫn.

Có thể bạn quan tâm: STARBUCKS VÀ NHỮNG ĐIỀU ÍT AI BIẾT

Nâng cao trang web của bạn với thiết kế phẳng

Thiết kế phẳng có thể bắt nguồn từ phong cách thiết kế từ gần 70 năm trước, nhưng nó đã được chứng minh là có sức mạnh thực sự tồn tại trong thời đại kỹ thuật số. 

Đó là bởi vì thiết kế phẳng tập trung vào các lựa chọn thiết kế thực sự tốt có lợi cho người dùng của chúng tôi: 

  • Không gian thoáng, sạch để dễ quan sát
  • Các điểm đánh dấu đầy màu sắc tươi sáng cho con đường chuyển đổi rõ ràng
  • Phông chữ đơn giản cân bằng với những bức ảnh đẹp để kể chuyện hiệu quả và hấp dẫn hơn
  • Giao diện hai chiều cung cấp một hành trình không có ma sát qua nội dung của bạn

Và cứ thế họ tiếp tục…

Nếu mục tiêu của bạn là tăng mức độ tương tác và tỷ lệ chuyển đổi trên trang web của mình, thì Thiết kế phẳng thân thiện với toàn cầu là một cách tuyệt vời để thực hiện điều đó. 

Hy vọng qua bài viết này bạn đã biết thiết kế phẳng là gì, lịch sử và lợi ích…Hãy theo dõi những bài viết hữu ích khác trên hegoli nhé!

Dịch từ: https://elementor.com/blog/flat-design/