Thiết kế phẳng (Flat Design) – Xu hướng website thế hệ mới

Thiết kế phẳng (Flat Design) – Xu hướng thiết kế website thế hệ mới

Nguồn gốc của thiết kế web phẳng do Microsoft khởi nguồn với thiết kế giao diện Metro style trên win 8 trong năm 2013 đã ảnh hướng lớn đến xu thế thiết kế trong mọi lĩnh vực công nghệ như: Thiết kế website, thiết kế giao diện mobile, thiết kế giao diện window,… Đến nay, thiết kế phẳng ngày càng được hưởng ứng mạnh mẽ bởi các nhà thiết kế trên thế giới.

Thiết kế phẳng mang đến một góc nhìn mới trong thiết kế web, nó giúp sắp xếp lại các chi tiết trật tự làm cho người dùng dễ đọc, dễ hiểu vì giao diện của thiết kế phẳng mang tính đơn giản, màu đơn sắc nhưng tính tương tác rất cao. Trong lĩnh vực thiết kế cho smartphone bạn có thể dễ dàng tìm các ứng dụng rất ưu chuộng xu hướng thiết kế phẳng này. Với màn hình smartphone nhỏ, chỉ với vài nút chọn thì thiết kế phẳng là sự lựa chọn hoàn hảo nhất. Chúng ta hãy cùng tìm hiểu thêm một vài ưu điểm nổi bật mà thiết kế phẳng trở thành xu hướng thiết kế website.

Vậy thiết kế phẳng là gì?

Về định nghĩa, thiết kế phẳng là một phương pháp không sử dụng thêm bất kỳ hiệu ứng nào trong thiết kế như đổ bóng, góc xiên, dập nổi, độ dốc cùng các yếu tố khác góp phần tạo nên độ sâu, nét nổi bật của thiết kế trên màn hình để tạo nên những hình ảnh đơn giản hơn. Bản thân cái tên “phẳng” của kiểu thế kế này cũng đã bao hàm ý nghĩa không chứa những yếu tố 3D. 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.

thiet ke phang

 

Đặc điểm của thiết kế phẳng là gì?

1. Không hiệu ứng

Thiết kế phng giống như cái tên của nó, mọi thứ đều ở dạng 2 chiều – nằm trên một mặt phẳng. Thiết kế phẳng không có trang trí hay thêm những hiệu ứng như đổ bóng, dập nổi, góc xiên, độ dốc hay bất kỳ yếu tố nào để tạo độ sâu… Mọi yếu tố từ hộp, khung ảnh cho đến nút chọn,… đều mạnh mẽ, rõ ràng.

thiet ke phang 2

 

2. Chi tiết đơn giản

Thiết kế phẳng sử dụng nhiều yếu tố giao diện đơn giản, chẳng hạn như các nút và icon. Nhà thiết kế thường dùng những hình dạng đơn giản, chẳng hạn như hình chữ nhật, hình tròn hoặc hình vuông… đứng một mình. Các đường bao quanh những hình dạng này có thể góc cạnh hoặc có độ cong.

Thiết kế phẳng khiến cho người dùng dễ dàng click. Vì vậy nhà thiết kế không cần nhiều lời giải thích trong thiết kế. Nhưng bạn đừng cho rằng thiết kế phẳng là đơn giản và dễ thiết kế. Thiết kế phẳng cũng đòi hỏi nhà thiết kế phải suy nghĩ, tìm tòi, chọn lọc rất nhiều giống như các phong cách thiết kế phức tạp khác.

thiet ke phang 3

 

3. Tập trung vào font chữ

Những chi tiết trong thiết kế phẳng đơn giản nên Typography (nghệ thuật font chữ) rất quan trọng. Font chữ cần phải phù hợp với toàn thiết kế, chẳng hạn như một font chữ dập nổi trông sẽ rất lạc lõng với một thiết kế đơn giản. Kiểu chữ nên đậm, không quá cầu kỳ. Bạn có thể chọn kiểu chữ là các phiên bản biến tấu từ kiểu chữ sans serif rất quen thuộc. Nội dung của câu chữ thường đi thẳng vào vấn đề. Những ai đã từng sử dụng qua giao diện của Windows Phone hoặc Windows 8 có thể dễ dàng nhận thấy điều này. Việc có thể xem trực tiếp thông tin ứng dụng mà không cần phải mở ứng dụng đó lên thực sự là trải nghiệm mới lạ và tiện dụng.

Ở ví dụ dưới đây ta sẻ thấy người thiết kế đã cho người dùng có thế biết được các thông tin ngay trên các bảng ứng dụng.

thiet ke phang 4

WebtopViet Thiết kế web Đà Nẵng ứng dụng thiết kế phẳng (Flat Design)

 

4. Tập trung vào màu sắc

Màu sắc rất quan trọng, chiếm một phần lớn sự thành công của thiết kế phẳng. Đặc điểm của thiết kế phẳng là dùng những tông màu sáng và dùng nhiều màu hơn các phong cách thiết kế khác. Màu sắc trong thiết kế phẳng có thể dùng để phân chia các khu vực rõ ràng, chẳng hạn như những hộp màu trong ví dụ dưới đây.

thiet ke phang 5

 

Những điểm yếu của thiết kế Skeuomorphic (phong cách mô phỏng giả chất liệu)

Skeuomorphic là phong cách thiết kế mô phỏng sao cho giống thật nhất có thể bằng cách sử dụng các hình ảnh dễ liên tưởng đến vật thể thực tế cũng như áp dụng các hiệu ứng tạo độ sâu. Hãy cùng xem qua các ví dụ ở dưới đây để thấy rõ hơn điều đó.

Tuy nhiên, Skeuomorphic đã bộc lộ một số khuyết điểm như sau:

– Giao diện đôi khi khó quan sát: Như biểu tượng chiếc đồng hồ mà Apple sử dụng ở hình ảnh bên dưới. Rõ ràng khi xem hình ảnh chiếc đồng hồ như thế này chúng ta sẽ mất thời gian hơn hẳn so với loại đồng hồ số chỉ có giờ và phút.

thiet ke phang 6

Dù được đầu tư nhiều trong giao diện đồ họa nhưng không phải vì vậy mà thiết kế mô phỏng không gặp phải vấn đề. Thiết kế mô phỏng, tức là mô phỏng sự vật trong cuộc sống thật nên nó cũng phần nào hạn chế sự sáng tạo của việc thiết kế. Bên cạnh đó, việc giới hạn về đồ họa cũng hạn chế mục đích cuối cùng của thiết kế mô phỏng. Ngoài ra, hạn chế về kích thước cũng làm giảm tính hấp dẫn của thiết kế mô phỏng. Ví dụ:

– Cách thức mô phỏng đôi khi gây khó nhà phát triển: Việc tìm ra cũng như tạo dựng hình ảnh trong Skeuomorphic gây ra không ít khó khăn cho các nhà thiết kế.

– Tốn nhiều không gian màn hình thiết bị di động cho các trang trí không cần thiết: Đây là một thực tế của thiết kế Skeuomorphic vốn đặt nằng tính hình ảnh với các trang trí bắt mắt. Chẳng hạn như ảnh thiết kế của giao diện lịch bên trên, người dùng thường chỉ muốn biết hôm nay là ngày bao nhiêu, thứ mấy. Không nhất thiết phải hiển thị cả một tháng như một tấm lịch thực sự.

– Hạn chế sự sáng tạo: Thiết kế Skeuomorphic vốn lấy hình mẫu là những vật ngoài thực tế. Thế nên các nhà thiết kế không cần phải tưởng tượng nhiều về thứ mà mình định làm ra mà chỉ nghĩ cách làm sao cho giống nhất có thể. Và khả năng cao là sẽ có nhiều “ý tưởng lớn gặp nhau” với một chút khác biệt nhỏ.

– Tốn nhiều tài nguyên phần cứng: Việc áp dụng nhiều hiệu ứng trong thiết kế Skeuomorphic cũng là một khuyết điểm của phong cách này bởi như thế sẽ khiến các thiết di động vốn yếu ớt về sức mạnh phần cứng, ít ỏi về thời lượng pin sẽ phải dồn sức để thể hiện Skeuomorphic trên màn hình.

Những nhược điểm trên có thể hoàn toàn được khắc phục với thiết kế phẳng với những điều đã mô tả ở trên.

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.

Vào thời kì đầu khi máy tính mới xuất hiện cùng với những khái niệm mới như thư mục, thùng rác…. thì việc thiết kế mô phỏng là cần thiết để người dùng dễ tiếp cận. Tuy nhiên, trong thời điểm hiện tại, với việc phổ biến của máy tính và smart phone, việc thiết kế mô phỏng đã không còn cần thiết khi mọi người đều đã biết tới những chức năng cơ bản của máy tính.

Với sự ra đời của thiết kế phẳng, những hạn chế của thiết kế mô phỏng đã được xóa bỏ. Những icon trở nên dễ quan sát, bố cục không còn rườm rà. Ngoài ra, việc sử dụng màu sắc nổi bật, tương phản cũng giúp người dùng có định hướng chính xác vào nội dung của website, ứng dụng.

1 thought on “Thiết kế phẳng (Flat Design) – Xu hướng website thế hệ mới

  1. hung Reply

    Thiết kế phẳng có thật sự là không đổ bóng?

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *