Thiết kế phẳng cung cấp một cách tuyệt vời để tăng cường chuyển đổi, cải thiện tốc độ tải và hơn thế nữa. Khám phá thiết kế phẳng là gì và cách sử dụng nó hiệu quả.
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. Tuy nhiên, những người khác báo hiệu một sự thay đổi lớn trong cách chúng tôi thiết kế trang web.
Một trong những ví dụ dễ nhận biết nhất về điều này diễn ra vào đầu những năm 2010, khi các trang web chuyển từ chủ nghĩa lệch hình (khi các đối tượng được thiết kế giống với các đối tác trong thế giới thực của chúng) sang thiết kế phẳng và thiết kế vật liệu 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. Đó là một cách hiệu quả cao để thiết kế giao diện và thương hiệu hấp dẫn, do đó, dẫn đế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à một phong cách thiết kế hiện đại giao diện người dùng được biết đến với các đặc điểm sau:
- Thẩm mỹ 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 rãi
- 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 (vì vậy không có gradient, kết cấu, hình thức trừu tượng)
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 mâu thuẫn.
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 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:
Source: Apple
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:
Source: Apple
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ĩ
Giờ đây, 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 thiết kế 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 Typographic 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ĩ:
Source: Design Is History
Như bạn có thể thấy, rất nhiều thứ mà chúng ta hiện đang 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 Phong cách Thụy Sĩ.
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 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 “nó” cho tất cả các loại trải nghiệm kỹ thuật số:
-
- Websites
- Apps
- Giao diện phần mềm
- Illustrations
- Ads
- Logos
- Và nhiều hơn 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.
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 ra sự tin tưởng của người dùng khi nhấp chuột. Ví dụ:
- Các nút nâng lên
- 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ể hành động 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ó một 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õ rệt và hàng đống 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 phù hợp hơn trong tương lai.
- 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 dễ hiểu hơn 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 không gian.
- 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 mức độ 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 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à dấu hiệu trực quan.
Hình ảnh do Killed by Google chia sẻ trên Twitter này là một ví dụ tuyệt vời:
Source: Killed by Google
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), giờ đây chúng 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à điều đó không tốt chút nào.
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 duy nhất để phân biệt giữa các hình ảnh có ý nghĩa và mục đích khác nhau, bạn sẽ tạo ra 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 bởi 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ộ Icon
- 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 hamburger menu hoặc sticky bars)
- Tương tác giao diện người dùng
- Illustrations
- Mascots
- Video giải thích hoạt hình
- Logos
- Đồ họa thông tin
- Đồ họa truyền thô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.
Làm thế nào để 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í 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 cẩn thận với việc 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 trong 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 biểu trưng minh họa. Thông thường, khi chúng tôi thấy các ví dụ về thiết kế phẳng trong thực tế, chúng tôi đ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).
Bộ giao diện người dùng phẳng
Bộ giao diện người dùng có thể là một công cụ thiết kế có giá trị khi làm việc với thiết kế phẳng và Envato có một số ví dụ tuyệt vời để lấy cảm hứng, như ví dụ này từ DeoThemes:
Flat UI Kit by DeoThemes
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
Source: Tripadvisor
Với một trang web như Tripadvisor, luôn có nguy cơ 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 biểu trưng, 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.
Netflix
Source: 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.
Đừ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).
Anne Klein
Source: Anna Klein
Trang web thương mại điện tử cho 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 có thể điều hướng dễ dàng.
Cũng có rất nhiều điều để nói về các lựa chọn thiết kế rõ ràng – từ kiểu chữ thanh lịch đến nền toàn màu trắng – thực sự cho phép các hình ảnh đầy màu sắc nổi bật.
Creative Dreams
Source: Creative Dreams
Nếu bạn muốn xem ví dụ về cách sử dụng thiết kế phẳng trong hoạt hì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 duy nhất cho bút chì. Sự chú ý đến từng chi tiết trong bộ đôi hoạt hình.
Thăm thành phố Québec
Source: Québec City
Đâ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ể đoán trước đượ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.
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 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à nâng cao 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 đó.
