Thiết kế phẳng và áp dụng vào các thiết kế website

Trong nhiều tháng nay có thể bạn đã nghe nhiều về cụm từ thiết kế phẳng (flat design) khi nó được cho là thay đổi lớn nhất trên iOS 7 sắp ra mắt. Để giải thích cho triết lý thiết kế này, nhiều người gắn liền nó với giao diện Metro UI trên Windows 8 nhưng phần lớn chúng ta vẫn chưa hiểu rõ cũng như tại sao nó lại trở thành xu hướng thiết kế hiện tại. Thiết kế phẳng nhấn mạnh vào sự đơn giản tối đa và đi ngược lại hoàn toàn so với triết lý thiết kế mô phỏng (skeuomorphic) đề cao cái đẹp và đồ họa phức tạp. Thiết kế phẳng ra đời từ trước khi Microsoft phát triển Windows 8 nhưng không thể phủ nhận rằng Microsoft đã góp phần phổ biến nó rộng rãi hơn.

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

Thiết kế phẳng (flat design) được coi là một triết lý thiết kế theo chủ nghĩa tối giản, tức mọi thành phần đồ họa được làm cho đơn giản nhất với những đặc tính như màu sắc rõ ràng, góc cạnh, không gian mở và tất cả được thể hiện dạng hai chiều. Một ví dụ điển hình về giao diện phẳng mà bạn có thể thấy rõ nhất là Metro UI trên hệ điều hành Windows 8 của Microsoft hoặc giao diện trên hệ điều hành Windows Phone. Ở màn hình chính, bạn sẽ thấy một giao diện với những mảng màu tách biệt nhau hoàn toàn, chúng không được thiết kế dạng ba chiều hay dạng mô phỏng (skeuomorphic) mà ở đó sự đơn giản được đặt lên hàng đầu.


Triết lý thiết kế này ra đời gắn liền với phong cách tối giản (minimalist) tuy nhiên sự đơn giản không có nghĩa thiết kế phẳng gây nhàm chán cho người dùng. Trong triết lý thiết kế phẳng, những thành phần đồ họa đẹp mắt và chi tiết được xem như là không cần thiết. Nếu một yếu tố nào đó coi như không có tác dụng thì nó sẽ gây rắc rối cho trải nghiệm người dùng. Đây chính là lý do mà sự tối giản được đề cao trong thiết kế phẳng. Hơn thế nữa, các màu sắc có độ tương phản cao sẽ gây sự chú ý tốt hơn và hướng mắt người dùng tới vị trí đó.

Thiết kế mô phỏng là gì?

Để hiểu được thiết kế phẳng và lý do nó lên ngôi thì bạn cũng nên hiểu thêm về triết lý mà nó chống lại: thiết kế mô phỏng. Nếu bạn chưa nghe tới kiểu thiết kế mô phỏng (skeuomorphic) này là gì thì đó là phong cách vận dụng những cái thực tế vào trong một thiết kế nào đó. Để cho dễ hiểu hơn, biểu tượng của đồng hồ sẽ giống như chiếc đồng hồ ngoài đời thực, biểu tượng máy tính sẽ có hình dáng của một máy tính thông thường... và hơn thế nữa. Nếu như Microsoft được biết đến với thiết kế phẳng thì Apple lại rất ưa chuộng thiết kế mô phỏng trên những sản phẩm phần mềm gần đây của hãng. Không chỉ có vậy, Apple vận dụng khá nhiều và hiệu quả triết lý thiết kế này, phần nào giúp những phần mềm của họ nổi bật và đẹp mắt hơn. Hình ảnh bên trên là những ví dụ điển hình về skeuomorphic tại Apple.

Những nguyên tắc của thiết kế phẳng

Cái tên thiết kế phẳng bắt nguồn từ hình dạng của nó, tức hai chiều và dạng phẳng đơn thuần. Ý tưởng về triết lý này được hình thành mà không có các thành phần bao gồm hiệu ứng đổ bóng, góc xiên, đường gờ rập nổi, nền dạng hạt (không mịn) hoặc những công cụ khác tạo chiều sâu cho thiết kế đó. Không có bất cứ thành phần nào bên trên được cho vào trong thiết kế phẳng nhằm mục đích mô phỏng thực tế cả. Thiết kế phẳng không có những hiệu ứng thêm vào.


Thiết kế phẳng sử dụng nhiều thành phần giao diện người dùng đơn giản như các nút chức năng hay các biểu tượng chương trình (icon). Những nhà thiết kế chủ yếu dùng các dạng hình phổ biến gồm hình chữ nhật, hình tròn hoặc hình vuông cho thiết kế phẳng, điều này giúp chúng có thể đứng riêng biệt với nhau. Không nhất thiết phải cắt góc vuông mà những dạng hình trong triết lý thiết kế này có thể được uốn cong mềm mại. Người dùng có thể dễ dàng chạm hoặc bấm vào những thành phần giao diện này mà không gặp rắc rối gì, nó được làm cho trực quan để người dùng không có nhiều kiến thức về thiết kế có thể hiểu được. Thành phần đơn giản được sử dụng chủ yếu trong thiết kế phẳng.


Vì tính đơn giản trong các thành phần thiết kế phẳng nên việc sắp xếp ký tự nghệ thuật (typography) cũng đặc biệt quan trọng. Kiểu typeface phải phù hợp với giao diện tổng thể của thiết kế đó, nói cách khác thiết kế phẳng đơn giản thì kiểu chữ, font chữ được sử dụng cũng phải đơn giản để phù hợp với không gian chung. Vì thế, thiết kế phẳng cũng cần phải tập trung vào typography bên cạnh những thành phần đồ họa.


Màu sắc là yếu tố đặc biệt quan trọng trong thiết kế phẳng. Màu sắc ở đây thường đậm và khá đa dạng về màu sắc so với những kiểu thiết kế trước đây. Trong khi hầu hết các bảng màu (palette màu) sử dụng hai hoặc ba màu sắc thì bảng màu trong thiết kế phẳng sử dụng từ 6 tới 8 màu sắc. Ngoài ra, màu sắc có độ bão hòa cao và khá rực rỡ. Màu sắc cũng được đề cao như typography.

Thiết kế phẳng là giải pháp cho những vấn đề của thiết kế mô phỏng

Dù được đầu tư nhiều với giao diện ba chiều đẹp mắt nhưng thiết kế mô phỏng không phải không có vấn đề. Triết lý này dựa hoàn toàn vào những vật thể trong đời sống hàng ngày vì thế nó phần nào làm hạn chế sức sáng tạo cũng như tính hiệu quả trong thiết kế. Bên cạnh đó, các thành phần thiết kế không đồng nhất khi kết hợp với những thành phần thiết kế hai chiều hoặc ít "chiều" hơn. Đôi khi thiết kế mô phỏng chẳng mang lại ý nghĩa gì cả, lấy ví dụ với ứng dụng Find My Friends (tìm bạn bè xung quanh), nền của nó được làm để giống da thuộc màu vàng kem nhưng nó chẳng có chút thực tế nào cả. Ngoài ra, nó sẽ trở nên khập khiễng khi kết hợp với những yếu tố khác không được làm theo hiệu ứng mô phỏng.

Dựa vào những vấn đề của triết lý thiết kế mô phỏng mà thiết kế phẳng ra đời với hai hướng đi hoàn toàn khác nhau. Toàn bộ những giới hạn và điểm yếu của triết lý mô phỏng đều được loại bỏ trên thiết kế phẳng để mang lại trải nghiệm người dùng đơn giản và hiệu quả hơn. Những năm 1984 khi Apple giới thiệu giao diện đồ họa người dùng (GUI) đầu tiên thì thiết kế mô phỏng bắt đầu được ứng dụng nhiều để giúp người dùng quen với các khái niệm lạ lẫm trên máy tính (hãy nghĩ tới thư mục, desktop, thùng rác...) nhưng sau này, khi máy tính đã quá phổ biến thì người ta không cần tới những mô phỏng để hiểu chức năng của một biểu tượng hay một nút nào đó. Thiết kế mô phỏng bắt đầu trở nên thừa thãi. Những người theo chủ nghĩa hiện đại cho rằng đừng nên thêm những chi tiết mà không có chức năng gì vào trong một thiết kế ngày nay.

Thiết kế phẳng đang là trào lưu

Dù thiết kế phẳng đang được ứng dụng ngày một nhiều trong thiết kế nhưng nó không phải là mãi mãi khi một triết lý mới sẽ thay nó trong tương lai. Chúng ta chưa thể đoán xu hướng nào sẽ lên ngôi sau thiết kế phẳng nhưng hãy cứ hài lòng với hiện tại, với thiết kế phẳng. Dù Apple chưa khẳng định nhưng tin đồn cho rằng iOS 7 sẽ đi theo triết lý này và khác hoàn toàn so với phiên bản iOS hiện tại. Chúng ta có thể đoán ra được điều đó bởi Apple đã thay quản lý trưởng mảng iOS cũ là Scott Forstall bởi Jony Ive, nhà thiết kế quan trọng bậc nhất của họ.

Website có nên sử dụng thiết kế phẳng không ?

Từ trào lưu thiết kế phẳng đang nở rộ từ chính các dịch vụ của các "ông lớn" như apple và Microsoft chúng ta có thể thấy trào lưu này chưa thực sự phổ biến ở Việt Nam, nhưng trong tương lai gần thiết kế phẳng có thể được ứng dụng rộng rãi trong việc thiết kế website phẳng, điển hình các giao diện website ở Việt Nam đã dần thay đổi phong cách theo thiết kế phẳng như icon, bố cục phẳng ...

Nếu bạn muốn thực hiện một thiết kế website phẳng cần có công ty thiết kế website chuyên nghiệp và đội ngũ thiết kế nắm vững lý thuyết thiết kế phẳng. Liên hệ với NGÔI SAO SỐ để xây dựng website phẳng nếu bạn cần ngay hôm nay.