7 điều cơ bản nhất của trường phái thiết kế tối giản cho website (tự dịch)

Sự đơn giản của trường phái thiết kế tối giản trông có vẻ đơn giản, nhưng nằm dưới đó là cả một tảng băng chìm.

Screen Shot 2015-06-09 at 11.31.59

Nguồn: United Visual Artists

Khi nói về sự tối giản, đừng nghĩ rằng nó trông có vẻ dễ vì nó đơn giản. Vì thực tế là dù có ít thành tố hơn khi thiết kế so với bình thường, nhưng bạn vẫn phải mang lại khả năng sử dụng tương tự (thậm chí còn phải tốt hơn) với ít giao diện hơn. Để tạo sự cân bằng giữa tính thẩm mỹ và chức năng, thiết kế web theo trường phái tối giản được coi là một sự không sợ hãi khi sử dụng không gian, các hình ảnh tuyệt vời, typography cực đẹp, và trên tất cả là sự tập trung vào chính nội dung – vậy thôi, không còn gì khác.

Chúng tôi gọi những kỹ thuật này là những điều cơ bản nhất của trường phái tối giản. Dưới đây chúng tôi liệt kê 7 điều cơ bản có ích nhất dựa trên kinh nghiệm xây dựng và đánh giá nhiều website. Không có gì ngạc nhiên khi trường phái tối giản đang trở nên thịnh hành ngày nay – nó tương quan trực tiếp với nhiều xu hướng thiết kế website hiện đại mà bạn cũng sẽ nhận ra ở dưới.

1. Không gian trống

Nhân tố thiết kế chính mà người ta hay gắn với thiết kế tối giản là không gian… cụ thể hơn là không gian trống, rất nhiều không gian trống.

Nhưng như chúng tôi đã miêu tả trong Thiết kế Website cho Mắt của con người, thiết kế tối giản không chỉ là một hình ảnh nhỏ được bao bọc bởi khoảng không gian không màu sắc xung quanh. Kiểu thiết kế này còn bao gồm cả không gian với bất kỳ màu sắc nào khác nhau, (chỉ màu sắc chứ không có hoa văn). Phổ biến nhất là trắng, đen hay những hình nền cực tối, nhưng vài nhà thiết kế cũng thể hiện không gian trống bằng những hình nền đầy sắc màu.

Các bạn có thể thấy dưới đây, Lindvall A&D sử dụng hình nền màu aqua sáng với thanh điều hướng đơn giản (website này cũng bao gồm cả những nhân tố tối giản khác mà chúng tôi sẽ miêu tả sau) trên trang chủ để kéo người xem tới truy cập trang web kiến trúc của mình.

Screen Shot 2015-06-09 at 11.32.58

Nguồn: http://www.jonaslindvall.com/

Không gian trống có mục đích lợi dụng luồng quan sát hình ảnh của người xem. Quy luật ở đây là càng nhiều không gian trống quanh một nhân tố, mắt của người xem càng hút vào nhân tố này – bạn có thể thấy đây là một công cụ hết sức mạnh mẽ trên một thiết kế tối giản khi bạn cắt gọt xuống còn một vài nhân tố ít ỏi nhưng rất có sức nặng.

Thêm vào đó, không gian trống còn cho phép ta sắp xếp các nhân tố một cách thông minh hơn, tránh việc khủng bố người xem với vô số hình ảnh và màu sắc. Không gian trống đặc biệt có ích với các trang bên trong của một website, như bạn có thể trang nằm sau landing page của Lindvall.

Screen Shot 2015-06-09 at 11.33.32

Nguồn: http://www.jonaslindvall.com/

Không gian trống rộng lớn cũng tạo ra cảm giác sang trọng. Nó đặc biệt có ý nghĩa với các công ty thiết kế kiến trúc khi họ muốn thu hút sự chú ý của người xem vào phần quan trọng nhât của trang web: Ảnh các sản phẩm của công ty.

Bạn luôn đừng quên rằng mục đích của không gian trống là kéo nhiều sự tập trung vào phần nội dung. Thiết kế ưu tiên cho nội dung là cốt lõi của triết lý thiết kế tối giản – những giá trị thẩm mỹ cơ bản nhất mà chúng ta thường gắn với thiết kế tối giản chỉ là để phục vụ triết lý này.

Sử dụng không gian trống là một kỹ năng riêng biệt. Bạn có thể đọc quyển  The Zen of White Space in Web UI Design.

2. Hình ảnh lớn và sặc sỡ

Với những nhà thiết kế nghĩ rằng các website thiết kế tối giản trông quá xa cách về cảm xúc, một bức ảnh quá khổ sẽ mang tới một sự thân thiện mà không triệt tiêu đi lớp nền phía trước.

Screen Shot 2015-06-09 at 11.34.10

Nguồn: https://makgoods.com/

Hình dạng quan trọng nhất trong nghệ thuật thiết kế tối giản, đầu mục chính và ảnh chính được định nghĩa bởi một ảnh hoành tráng hoặc một thanh trượt đặt gần trên đầu.

Nó tạo ra cả một thế giới của những kết nối cảm xúc và không gian – tất cả dựa vào nội dung của bức ảnh – trong khi đó vẫn giữ được sự đơn giản của thiết kế tối giản.

Tuy nhiên, bạn nên nhớ một mẹo quan trọng khi lựa chọn ảnh là: Mọi tính chất tối giản đó nên được thể hiện trong bức ảnh này, nếu không nó sẽ tác dụng ngược. Ví dụ ta nên chọn một bức ảnh độ nét cao bao gồm nhiều không gian trống – bầu trời rộng lớn, hoặc các bức tường trắng như trên. Chọn một bức ảnh tràn ngập các vật thể gây xao nhãng sẽ phủ đi những lợi ích của giao diện tối giản xung quanh.

3. Typography tinh tế

Dù cắt bỏ gì thì vẫn phải còn có từ ngữ. Và vì đã cắt hết những thứ rườm rà khác, nên thứ còn lại là từ ngữ lại càng được nhấn mạnh hơn. Tuyệt đẹp, sắc nét và thậm chí typography được tùy chỉnh riêng là điểm nhấn hoàn hoản trong một khung thiết kế tối giản.

Screen Shot 2015-06-09 at 11.34.40

Nguồn: Hibou Digital via awwwards

Typography mang đến một điểm nhấn ngay lập tức cho từ ngữ và nội dung trong khi nó vẫn cấu thành nên một hình ảnh hấp dẫn lớn. Như chúng tôi mô tả trong quyển Web UI Trends Present & Future: Typography, những ví dụ ấn tượng nhất về thiết kế tối thiểu và typography thường bao gồm cả kiểu đậm với nét dày và kiểu chữ thú vị (như một font chữ chủ đạo cho tiêu đề đi đôi với một font chữ trung tính cho nội dung)

4. Tương phản tuyệt đẹp

Nền trắng là một sự lựa chọn được nhiều nhà thiết kế phong cách tối giản ưa thích vì nó hoàn hảo để tạo sự tương phản. Tiêu chuẩn vàng của thiết kế tối giản là một nền trắng hoặc đen, nằm bên trên đó là một số thành phần nhỏ màu sắc hoặc một hình ảnh thật ấn tượng.

Như viết trong quyển Web Design for the Human Eye, nhà thiết kế có thể tạo ra sự tương phản bằng màu sắc, kích cỡ, hình dáng, vị trí và kích cỡ. Sự tương phản gây ra sự chú ý tới những thành phần nhất định, nhưng cũng góp phần tạo ra một cấu trúc dễ nhận diện.

Website của nhiếp ảnh gia Jorge Riera sử dụng tương phản rất đẹp, thay đổi qua từng trang.  Ở trang chủ là một mảng trắng lớn bao gồm thanh điều hướng 1 đơn giản, 1 dòng và một hình ảnh lớn ở dưới đáy màn hình, đen và dày nét tạo cảm giác cứng cáp.

Screen Shot 2015-06-09 at 11.35.47

Di chuyển tới trang “Who Am I”, ta sẽ thấy một bài học về typography và tương phải về kích cỡ – font chữ đặc biệt tương phản với font sans serif đơn giản, và một font ngoại cỡ với một kích cỡ mà nhiều nhà thiết kế cho rằng nó chỉ phù hợp với các phần hiển thị nhỏ chứ ko phải cho phần thân.

Screen Shot 2015-06-09 at 11.36.15

Nguồn: http://www.jorgerieraflores.com/.

Thường thì chúng tôi không khuyến khích sử dụng chiến thuật này vì nó có vấn đề về tính khả dụng, nhưng nếu chỉ dùng nó ở một phần nhỏ trong phần thân thì ok, vì nó không phải là điểm nhấn chính. Đúng là hầu hết các trang này đều được phủ bởi hình ảnh và các kết quả công việc mà tác giả đã thực hiện khi ta cuộn xuống. Điều này là dễ hiểu vì một giám đốc nghệ thuật sẽ thích trình diễn hơn là kể chuyện.

5. Thanh điều hướng đơn giản phát khiếp

Đây là nơi trường phái tối giản gặp icon Hamburger.

Một thẩm mỹ thiết kế đơn giản phối hợp với công cụ điều hướng đơn giản nhất. Ngay cả những nhà thiết kế kỳ cựu trong làm sườn website kiểu tối giản cũng đang cố gắng cắt gọt thanh điều hướng kiểu truyền thống để nó gọn gẽ hơn với ít thành phần hơn.

Screen Shot 2015-06-09 at 11.36.46

Nguồn: http://thru-you-too.com/#!/

Trước khi bạn áp dụng kiểu menu hamburger để làm đơn giản hóa giao diện, bạn nên ăn chắc rằng bạn có lý do đúng đắn. Như nhà thiết kế UX Sandyha Talwalker của Adobe khuyến nghị, đầu tiên ta phải hiểu được mục đích đầu tiên, thứ hai và thứ ba đằng sau việc thiết kế thanh điều hướng.

Nên nhớ là thanh menu hamburger cũng gây ra sự kém được phát hiện của các mục di chuyển, và nó sẽ không rõ ràng hơn nữa với những người dưới 44 tuổi.(như Linn Vizard của Usability Matters chỉ ra).

Ta cần biết khách hàng là ai và hoàn cảnh là gì, sau đó quyết định xem thanh hamburger có phù hợp hay không. Đừng cứ làm đi là vì nó trông hợp xu hướng, nếu không ta sẽ có có kết cục là giấu đi thanh điều hướng mà thực ra nó phải được hiển thị rõ hơn.

6. Hình ảnh hòa hợp

Ta cần lấy một framework thiết kế tối giản làm xương sống. Các thành phần quan trọng nhất của một tổ hợp hình ảnh bao gồm một mô hình lưới cứng cáp, cân bằng về hình ảnh, và chú ý cẩn thận tới các căn chỉnh.

Một mô hình lưới cứng cáp là nền tảng cho tổ hợp này. Cái lưới này được tính toán để sử dụng các khoản không gian trống, cho phép nhà thiết kế đặt và sắp xếp các thành phần có sự giao tiếp có chủ đích với nhau.

Ta cần làm rõ là căn chỉnh không có nghĩa là cứ đưa nội dung ra giữa.

Mặc dù nhiều mẫu thiết kế tối giản đưa một cục nội dung ra giữa hình, nhưng không có nghĩa là ta không có các sự lựa chọn khác. Mọi thành phần có thể được căn ở mọi vị trí trên lưới. Đặc biệt là chữ, nó có thể được căn sang phải hoặc trái.

Arko là một website làm rất tốt việc hòa trộn và hòa hợp những kiểu căn khác nhau để tạo ra sự hứng thú hình ảnh, và sự cân bằng khi vẫn dùng nhiều không gian trống.

Screen Shot 2015-06-09 at 11.37.25

Nguồn: http://www.arko.co.nz/

Khi làm thiết kế tối giản, nhiều người nhảy ngay tới concept đối xứng hoàn hảo, nhưng điều này cũng không cần thiết lắm. Cách phổ biến nhất để có nội dung có vẻ đơn giản và được sắp xếp nuột nà là ghép đôi các thành phần to và nhỏ để chúng cân bằng với nhau.

Cân bằng hình ảnh có 4 dạng:

1. Đối xứng dọc: Cả hai phía của màn hình đều có trọng lượng và các thành tố tương đương nhau.

Screen Shot 2015-06-09 at 11.37.58

Nguồn: Hungcwot via awwwards

2. Đối xứng xấp xỉ: Các thành phần ở 2 nửa là khác nhau, nhưng lại giống nhau về sức nặng của hình ảnh. Điều này thường đạt được bởi ghép đôi giữa rất nhiều khoảng trống hay một thành phần lớn, với một nhóm các thành phần nhỏ hơn.

Screen Shot 2015-06-09 at 11.39.05

Nguồn: Squarespace

3. Đối xứng tròn: Điểm nhấn của thiết kế này nằm ở chính giữa màn hình, và di chuyển ra ngoài với định hướng lấy tâm làm gốc như website của Carlo Barberis ở dưới.

Screen Shot 2015-06-09 at 11.39.36

Nguồn: http://www.carlobarberis.com/en/

4. Bất đối xứng: Các đối tượng được thiết kế cố tình để đối lập nhau với hình dáng, màu sắc và kích cỡ. Kiểu này đang được coi là sơ đồ thiết kế khó nhất để triên khai tốt, vì nó có một ranh giới mỏng manh giữa đẹp đẽ và rối tung rối mù.

Screen Shot 2015-06-09 at 11.40.06

Nguồn: Julie Flogeac via awwwards

7. Tiến hóa của thiết kế phẳng

Khởi đầu với kiểu sử dụng rất nhiều màu sáng, giờ thiết kế phẳng đã hạ xuống bớt sáng hơn, và phối hợp cực tốt với framework tối giản.

2 kỹ thuật này hòa hợp được với nhau vì các đặc tính tương đồng về cách đặt hình ảnh và cách sử dụng nội dung. Vì kiểu thiết kế phẳng không nhấn mạnh vào các mẹo thiết kế, nên phong cách thiết kế rút gọn này rất phù hợp với triết lý của thiết kế tối giản.

Sự kết hợp giữa cặp đôi đang khá phổ biến ở các website hiện đại – cấu trúc hình ảnh tối giản được nhấn bởi những nét thiết kế phẳng ở các thành phần giao diện như icon và màu sắc.

Screen Shot 2015-06-09 at 11.40.46

Nguồn: http://wonderfulcolorado.karshhagan.com/

Khi so sánh giữa thiết kế phẳng và thiết kế tối giản, nhà thiết kế và blogger Addison Duvall mô tả trong sự tương đồng với thức ăn:

“Nếu thiết kế phẳng là một hương vị mới thời thượng trong mọi quán ăn sành điệu nhất, thì thiết kế tối giản là quyển sách nấu ăn kinh điển mà mọi đầu bếp giỏi nhất đều sử dụng để có ý tưởng cho các món ăn mới”

If flat design is a trendy new ingredient used in all the hippest restaurants, then minimalism is the classic cookbook that the very best chefs all consult when coming up with new ideas for dishes.

Thiết kế phẳng là một kiểu thẩm mỹ trong khi thiết kế tối giản là một triết lý thiết kế. Bạn có thể thưởng thức sự tuyệt vời nhất của 2 phong cách này khi bạn hòa trộn chúng có phương pháp. Thiết kế của bạn vẫn sẽ siêu tập trung vào nội dung, nhưng vẫn trông sống động nhờ có tính thẩm mỹ cao của thiết kế phẳng.

Kết luận

Nếu bạn nghĩ để tạo ra một website theo phong cách tối giản là việc gọt đi một loạt các thành phần, bạn nên nghĩ lại.

Thiết kế tối giản đòi hỏi một con mắt sắc sảo và một kinh nghiệm dày dặn, và nếu không cẩn thận, nó sẽ phản tác dụng. Bạn cố nhớ 7 điều cơ bản trên trong đầu khi thiết kế kiểu tối giản – bạn sẽ cần làm chủ được từng kỹ thuật trước khi hòa quyện chúng thành một website vịnh nội dung đẹp đầy kinh ngạc.

(Tự dịch từ http://thenextweb.com/dd/2015/06/09/7-pillars-of-minimalist-web-design/)

Tuổi Tuất thì có lợi gì?

Sáng nay mình đi Highlands mua cốc đen đá không đường, tất cả mọi chuyện đều ổn cho đến khi bạn pha chế dùng tay không cầm vào … đầu ống hút để cắm vào cốc của mình.
Mình ko biết bạn này rửa tay chưa, nhưng khi uống cốc đen đá đó, mình cảm nhận được nhiều thứ lắm.
Hình như sáng nay bạn này tắm bằng sữa tắm Xmen, à không, mùi này là Romano chứ.
À, còn có cả mùi gói xôi xéo ăn vội trước khi đến quán nữa, và gói xôi này rất nhiều hành khô nha.
Đấy, tuổi chó nó cho mình cái mũi có lẽ hơi thính quá.
Nhưng bạn ko cần phải tuổi chó thì cũng có thể thấy sự mất vệ sinh của nhân viên Highlands Coffee khi chuẩn bị đồ cho khách.
Đây ko phải lần đầu và cốc của mình ko phải là cốc duy nhất có ống hút đầy mùi vị kia.