apkm-search

[HTML/CSS] Flatstrap – Thiết kế phẳng cho Bootstrap

Các bạn thiết kế giao diện web rất mong Bootstrap nâng cấp lên giao diện phẳng để theo kịp thời đại hiện nay

Trong thời gian qua chúng ta thường nghe tới cụm từ thiết kế phẳng hay Flat design.Vậy nó là gì?

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.Bạn có thể nhìn vào giao diện của Window 8 hay Window Phone 8 để có thể thấy rỏ hơn .

windows-8-screenThiết kế mô phỏng là gì?

Thiết kế mô phỏng ( skeuomorphic ) hiểu theo một cách đơn giản nhất là mô phỏng lại 1 sự vật ngoài đời thực.Ví dụ như 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.

Tại sao chúng ta sử dụng thiết kế phẳng thay cho thiết kế mô phỏng ?

Vì thiết kế mô phỏng sẽ mô phỏng lại sự vật ngoài đời thực nên một số trường hợp nó sẽ không mô phỏng được  ví dụ như ứ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ả.

Đó là lý do tại sao thời gian gần đây thiết kế phẳng lại được quan tâm nhiều đến thế.

Flatstrap – Áp dụng Flat Designer cho Boostrap

Đây là một dự án của Little Spark dựa trên Bootstrap.Đơn giản là xóa bỏ các hiệu ứng đổ bóng,gradient,border… Mình có đọc được 1 số nguồn tin là Bootstrap 3.0 sẽ có Flat design.Hi vọng là sẽ thành sự thật.

Flatstrap

Còn về cách sử dụng thì bạn có thể đọc bài viết này Giới thiệu và hướng dẫn cách sử dụng Bootstrap 

Đây là bảng màu cơ bản của Flat design mà mình hay dùng

flat-ui-color-picker-webapp

Trên đây là một bài viết ngắn nói về thiết kế phẳng và giới thiệu Flatstrap – thiết kế giao diện phẳng dựa trên bootstarp.Cám ơn các bạn đã ủng hộ !

 

BÌNH LUẬN BÀI VIẾT

Leave a Reply

9 Comments on "[HTML/CSS] Flatstrap – Thiết kế phẳng cho Bootstrap"

Notify of
avatar
Sort by:   newest | oldest
Vết Sẹo Mới4 năm gắn bó cùng NQDung.COMLevel 1
Vết Sẹo Mới
1 comment

Mình xài thử rồi, vẫn lỗi phết, không được smoothly working như bản bootstrap 3.0 gốc. Scale về đến cỡ sm và xs là sẽ bị vỡ ở menu dropdown. chắc phải tự override của mình vào nếu ko để thế bất tiện chế

Nguyễn Quốc Dũng4 năm gắn bó cùng NQDung.COMLevel 1
Nguyễn Quốc Dũng
15 comments

cái này ra trước bootstrap 3.0 mà .Giờ xài bootstrap 3.0 vô tư cần chi thằng này nữa

sơn4 năm gắn bó cùng NQDung.COMLevel 1
sơn
1 comment

web này hay phết đấy,e đang muốn tìm hiểu cái Bootstrap mà non quá ko biết làm thế nào cho dễ hiểu đc nhỉ 🙂

giày đá banh4 năm gắn bó cùng NQDung.COMLevel 1

Giao dien blog cua bac dep that do :haha:

Quốc Dũng Blog4 năm gắn bó cùng NQDung.COMLevel 2
118 comments

Cám ơn bác nhiều ! :byebye:

tai game danh bai cho dien thoai4 năm gắn bó cùng NQDung.COMLevel 1

Kiểu flat desing này phù hợp hơn trong việc thiết kế giao diện cho wap hơn là web. Mình cũng đã xem vài template trên theme forest nhưng tren destop mình thực sự không thấy ấn tượng cho lắm, Ý kiến cá nhân thôi. he he :gun:

wpDiscuz