Toàn Tập Về Flat Design Trong Thiết Kế Web - Code Tốt

Trang chủ » Cách Dùng Flat » Toàn Tập Về Flat Design Trong Thiết Kế Web - Code Tốt

Có thể bạn quan tâm

Chuyển đến nội dung Menu

| Code cơ bản | Toàn tập về Flat Design trong thiết kế web

Rate this post Là một xu hướng từ năm 2016, Flat design – thiết kế phẳng đã từng bước phát triển và trở thành xu hướng có tính thực tế cao.

Flat design là gì?

Flat design là phong cách thiết kế tối giản sử dụng các đối tượng hai chiều và màu sắc tương phản, đã từng xuất hiện trong các bản ra mắt Windows 8, iOS 7 và thiết kế “Material” của Google. Nó còn được biết đến với tên tiếng Việt là “thiết kế phẳng”. Nó có hai mục tiêu chính: làm việc với các thuộc tính của màn hình, và sử dụng tính đơn giản trong thiết kế nhằm làm các website nhanh và có các chức năng mạnh hơn. Flat design, nói cách khác, tô đậm ý tưởng không có đối tượng nào trên màn hình thể hiện ba chiều, thay vào đó hướng đến cái đẹp và sự tiện năng mà không thêm vào các trang trí phức tạp.

Ưu điểm của Flat Design

Flat design thuận theo quan điểm càng ít thì càng tốt. Thay vì gây cho người dùng mất tập trung với animation hay hoạt họa phức tạp, thiết kế phẳng ưu tiên giao diện sạch với tính tiện dụng tối đa. Các ưu điểm có thể kể đến của Flat design bao gồm:
  • Tối giản
  • Nhấn mạnh khả năng tiện dụng
  • Các đối tượng và hình ảnh đơn giản
  • Phong cách văn bản đậm và dễ đọc
  • Cấu trúc thứ tự giới hạn
  • Màu đậm và hỗ trợ tương phản cao

Điểm trừ của Flat design

Tuy vậy, xu hướng thiết kế này không phải là hoàn hảo. Điểm đầu tiên phải kể đến là sự thiếu vắng của các thói quen có sẵn của người dùng thông thường. Không có hiệu ứng 3D như đổ bóng sẽ khiến nhiều người dùng bối rối với cách tương tác với đối tượng. Lấy ví dụ,  các nút bấm (button) trong thiết kế phẳng trông giống như các đối tượng khác – không có đổ bóng để xác định đó là nút, chúng dường như không thể click vào được. Các nhà thiết kế nhận thấy điều này và cũng đưa ra hướng tiếp cận như “flat design 2.0”, “semi-flat”, hoặc “almost flat” sử dụng flat design với các hiệu ứng cơ bản như đổ bóng, đổ màu và các lớp.
So sánh thiết kế Flat Design 2.0
So sánh thiết kế Flat Design 2.0

Ví dụ của Flat Design

Dưới đây là các ví dụ thực tế về các web sử dụng phong cách này từ truyền thống, thiết kế 2 chiều cho đến sự thay đổi trong Flat design 2.0.

Microsoft 8

Phong cách Flat design trong Windows 8
Phong cách Flat design trong Windows 8
Phong cách UI Metro hiện diện trong phiên bản Microsoft 8 là một trong những ví dụ phổ biến nhất của phong cách thiết kế phẳng, loại bỏ hoàn toàn các đối tượng trong không gian 3 chiều.

Google Santa Tracker

Phong cách Flat design 2.0 rõ ràng
Phong cách Flat design 2.0 rõ ràng
Dự án hàng năm của Google Santa Tracker nhấn mạnh tới flat design 2.0, với nền tinh tế cùng đổ bóng trong các tòa nhà, các popup hiển thị khi bạn rê chuột vào các đối tượng khác nhau.

DoneDone

Đổ màu và bóng trong DoneDone
Đổ màu và bóng trong DoneDone
Trên website này, bạn dễ dàng nhìn ra hiệu ứng thể hiện của flat design 2.0, với lớp nền màu sắc và đổ bóng.

Lander

Lander
Trang chủ của Lander
Một ví dụ khác của phong cách thiết kế phẳng truyền thống là Lander, sử dụng các đối tượng thực tế trong không gian hoàn toàn 2D.

Những kinh nghiệm tốt nhất khi sử dụng Flat design

Thiết kế phẳng là đáp án tốt nhất khi bạn nghĩ về thứ mình muốn và cần cho người dùng, hơn là đặt hiệu ứng thẩm mỹ lên trên. Hãy cân nhắc các gợi ý sau khi sử dụng phong cách flat design:
  • Chọn đúng font chữ: Luôn chọn font sans-serif. Font serif thường có các nét đính kèm vào cuối mỗi chữ.
  • Sử dụng tương phản: Sử dụng bộ màu đậm để đảm bảo chữ dễ nhìn. Các màu nhạt sáng đặt trên các nền đậm tối thường phổ biến, nhưng khó đọc. Tốt hơn hết là dùng màu chữ trắng trên nền tối đậm.
  • Đặt liên kết cho các đối tượng liên quan: Ta cần xác định các đối tượng có khả năng được người dùng nhấp chuột và sử dụng chung một liên kết cho các đối tượng này.

Bắt đầu với Flat design như thế nào?

Với một sản phẩm dạng web, bạn nên cân nhắc các hướng tiếp cận từ UI framework được thiết kế và tái sử dụng nó để làm quen với cách thiết kế các đối tượng.

Các UI framework dành cho Flat design

Flat UI http://designmodo.github.io/Flat-UI/ PureCSS https://purecss.io/ MuiCSS https://www.muicss.com/ MetroUI https://metroui.org.ua/ MaterializeCSS https://materializecss.com/about.html Material UI https://material-ui.com/ Bulma.io https://bulma.io/ Ảnh của KhôiNguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.

Viết một bình luận Hủy

Bình luận

Tên Email Trang web Chuyên gia về Web Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai? Gọi tư vấn 0982.90.4343 Chuyên gia về Web Bài viết liên quan

07/04/2024

PHP: Format date dd/mm/yyyy và so sánh với Date hiện tại Một vấn đề hay gặp trong quá trình xử lý PHP datetime là tình huống format date từ định dạng...

02/01/2024

Fix lỗi npm không thể cài các package devDependencies Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là... Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để... Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

Phụ lục

Mục lục Ẩn 1. Flat design là gì? 2. Ưu điểm của Flat Design 3. Điểm trừ của Flat design 4. Những kinh nghiệm tốt nhất khi sử dụng Flat design 5. Bắt đầu với Flat design như thế nào?

Bài viết mới

  • PHP: Format date dd/mm/yyyy và so sánh với Date hiện tại
  • Fix lỗi npm không thể cài các package devDependencies
  • Cài đặt và sử dụng WP-CLI trên môi trường Linux
  • Import database MySQL lớn trên môi trường Docker
  • Hướng dẫn cài đặt php extension mongodb trên Mac OS M1

Thẻ

add_action Backup Bluetooth CSS Database Git Github GitLab Gravity Forms Gulp Gutenberg Gutenberg Category htaccess HTML5 HTML5 Template Javascript jQuery Luyện tập Frontend Lập trình Frontend Mac OSX MIT License mod_rewrite Mojave MySQL NodeJS NodeJS packages Pantheon PHP phpstorm React Responsive SCSS Shopify Section Shopify Snippets Shopify Tips SourceTree SSH SVG TinyMCE Web Design Web Font Webpack WordPress WordPress Plugins WPEngine

Copyright © by CODE TOT. TAX number 0109265212 issued by Vietnam GOV.

Đóng

Từ khóa » Cách Dùng Flat