Nguyễn Minh Hùng Blog

  • Cảm ơn trái tim
  • Review tùm lum
  • Sản phẩm linh tinh
  • Dành cho website
Bạn đang ở: Trang chủ / Review tùm lum / Xu hướng giao diện web 2022 (theo chân ông lớn)

Xu hướng giao diện web 2022 (theo chân ông lớn)

Tháng Mười Hai 22, 2021

Mấy năm gần đây, chúng ta rất chuộng những giao diện phẳng lì tối giản. Các hãng thi nhau đổi mới thiết kế – làm lại logo, tân trang giao diện web, phần mềm, ứng dụng.

Các bạn thấy gì quen ở những sản phẩm được cập nhật gần đây của những “ông trùm” công nghệ:
Windows 11 – Office 365 (Microsoft), Android 12 (Google), Facebook và hàng tá các sản phẩm nổi tiếng khác.

Giao diện tối?

Thôi. Cái này còn gì lạ. Nó vẫn chỉ là tùy chọn riêng theo sở thích người dùng.

Microsoft Fluent Design

Có những cái tên nghe hoành tráng

Microsoft: Fluent Design
Apple: Flat Design
Google: Material Design

Vẫn là sự tối giản. Nhưng có một số thay đổi thêm vào bớt nhàm chán.

Có điểm gì chung và dễ tiếp cận cho giao diện web? Điều gì đang diễn ra và sẽ tiếp nối trong 2022?

1. Bo góc everywhere

Nó đơn giản đến mức nhà thiết kế không muốn nhắc về nó hoặc không muốn thừa nhận về nó.

Xiaomi làm chấn động thế giới với logo mới 7 tỷ

Logo Xiaomi Bong Cong

Windows 11 có giao diện rất đẹp. Và nó bo góc mọi nơi

Windows 11 Bo Vien
Windows 11 Bo Goc

Microsoft mang kiểu thiết kế này lên cả bộ Office 365

Giao Dien Office 365 Bo Goc

Google uốn cong mọi thứ trên Android 12.

Android 12 Qua Cong

Apple đã làm điều đó từ lâu trên IOS

Giao Dien Ios
Giao Dien Ios
Giao Dien Ios 15
Giao Dien Ios 15

Ứng dụng nó cho web thế nào?

  • Bo góc ảnh của bạn
  • Bo góc các nút bấm
  • Bo góc các ô chứa nội dung

Bằng 1 dòng CSS đơn giản:
border-radius:9px;
với 9px là độ bo cong bạn muốn

Giao Dien Web Bo Cong
Nguồn ảnh: Mariusz Mitkow
Bo Cong Doi Tuong Web
Chụp từ conngungon.com
Genetic.vn
Chụp từ Genetic.vn

2. Chia nội dung thành các hộp đặt cạnh nhau

Hãy tưởng tượng trang web của bạn như 1 trang giấy.

Thay vì viết mọi thứ vào đó, ta viết nội dung lên những mảnh giấy nhỏ, rồi dán chúng lên tờ giấy ban đầu.

Style Web 2022

Windows 11 đã làm vậy

Giao Dien Windows 11
Giao Dien Windows 11
Action Center Windows 11
Action Center Windows 11

Facebook đã làm vậy

Giao Dien Moi Cua Facebook Bo Cong Goc

Mình đã áp dụng điều này trên trang Genetic.vn

Xu Hhuong Thiet Ke Web 2022

3. Đổ bóng siêu nhẹ làm nổi khối

Như những quả bóng bay là là mặt đất.

Việc tạo chiều sâu cho các khối nội dung làm nó dễ được nhận diện hơn trong mắt người dùng. Đây cũng chính là điểm quan trọng nhất trong ngôn ngữ thiết kế Fluent Design của Microsoft.

Xu Huong Thiet Ke Web 2022
Do Bong Noi Dung

Ứng dụng nó lên giao diện web thế nào?

  • Chọn những hộp nội dung cần nổi bật
  • Đổ bóng (shadow) chúng bằng CSS

Như dòng css mình đã dùng trong bài viết này:
box-shadow: 0px 5px 16px 9px rgb(0 0 0 / 5%);

Shadow Css
Shadow CSS

Chung quy lại chúng ta có

1
Chia nội dung thành các hộp

2
Bo góc các hộp đó

3
Rồi đổ bóng siêu nhẹ

Dễ nhỉ

Khích lệ tình thần bằng vote 5 sao

Xếp hạng trung bình 5 / 5. Lượt Vote 11

1 Comment · Review tùm lum, Dành cho website

Comments

  1. PCCC Thành Phố Mới says

    Tháng Năm 7, 2022 at 8:35 sáng

    GIỜ MỚI ĐỌC ĐƯỢC CÁI NÀY, VẪN CÒN KỊP, HEHE

    Trả lời

Trả lời Hủy

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 *

  • Email
  • Facebook
  • Instagram
  • YouTube
Nguyễn Minh Hùng

Yêu thời ông bà anh,
sống đời thản nhiên xanh.

Hiền.
Trong sáng.
Biến thái.

Bài viết tốn sức

Plugin FlyingPress vừa tăng tốc website vừa tăng điểm Pagespeed

Vikunja self-hosted (step by step)

Cách Giảm dung lượng ảnh – Nhẹ hơn, đẹp hơn

Chuyển Docudanang.com.vn từ Vultr sang Amazon Lightsail

Tăng tốc website – Tối ưu hóa Wordpress (Siêu Checklist)

Water, is taught by thirst – Hiểu và dịch thơ

NỘI DUNG CHÍNH

  1. 1. Bo góc everywhere
  2. 2. Chia nội dung thành các hộp đặt cạnh nhau
  3. 3. Đổ bóng siêu nhẹ làm nổi khối

logo chữ ký nguyenminhhung“Trưởng thành không phải là sự rành rẽ thói đời, rồi biến hóa bản thân từ đơn giản đến phức tạp.
Trưởng thành chính là từ trong sự phức tạp của cuộc đời vẫn giữ cho bản thân đơn thuần, biết hài lòng và vui vẻ với những điều giản đơn nhất.”

Copyright © 2023 · Genesis Theme | AZDIGI Hosting