Swiss Design trong thiết kế website : Đơn giản, khách quan, dễ đọc

Đã gần 70 năm kể từ khi “cơn bão” Phong cách Thụy Sĩ càn quét thế giới thiết kế đồ họa. Thời gian trôi qua, liệu các nguyên lý này có còn phù hợp, liệu ta có thể áp dụng chúng trong thiết kế web và giao diện hay không?

Đơn giản, khách quan và dễ đọc - đó là những ý tưởng chính trong Swiss Design (Phong cách Thụy Sĩ). Vậy ta có thể áp dụng phong cách này vào thiết kế web như thế nào?

Đã gần 70 năm kể từ khi “cơn bão” Phong cách Thụy Sĩ càn quét thế giới thiết kế đồ họa. Thời gian trôi qua, liệu các nguyên lý này có còn phù hợp, liệu ta có thể áp dụng chúng trong thiết kế web và giao diện hay không?

Hãy cùng đi tìm câu trả lời nhé.


Swiss Design là gì?

Swiss Design được hiểu là Phong cách Thụy Sĩ, hay Phong cách Quốc tế, nói đến một phong trào bắt nguồn từ ba nước Nga, Hà Lan và Đức trong những năm 1920 và 30. Sau đó, vào thập niên 1950, các nhà thiết kế Thụy Sĩ trở thành những người đi đầu trong phong trào này.

Phong cách Thụy Sĩ đi theo chủ nghĩa hiện đại. Nó là đỉnh cao của trường phái kiến tạo, nghệ thuật và thủ công, nhiếp ảnh, De Stijl và Bauhaus. Bạn có thể nhận ra Phong cách Thụy Sĩ qua những dòng tiêu đề đậm nét, bố cục nổi bật và hướng tiếp cận tối giản.

Richard Hollis, tác giả cuốn Swiss Graphic Design (Thiết kế đồ họa Thụy Sĩ), nhận thấy các kỹ năng gắn liền với nền công nghiệp của Thụy Sĩ, cụ thể là dược phẩm và kỹ thuật cơ khí, tương xứng với các nhà thiết kế đồ họa tạo ra quảng cáo và tài liệu kỹ thuật.

Những người tiên phong trong Phong trào Thụy Sĩ xem thiết kế như một phần của sáng tạo công nghiệp và hết sức cố gắng tìm kiếm cách thức giao tiếp trực quan khách quan.

Nghệ thuật sắp chữ của phong cách này theo xu hướng công nghiệp. Cụ thể là, kiểu chữ Akzidenz-Grotesk trong thế kỷ 19 ảnh hưởng mạnh mẽ đến Phong trào Thụy Sĩ. Đó là kiểu chữ tự nhiên, nhiều mục đích và đa chức năng - nó bao hàm tất cả những gì một người theo chủ nghĩa hiện đại thích ở một kiểu chữ. Nó chính là nguồn cảm hứng cho kiểu chữ Helvetica nổi tiếng.

Bên cạnh thiết kế đồ họa và nghệ thuật sắp chữ, Phong cách Thụy Sĩ cũng tác động đến kiến trúc, hội họa và điêu khắc.

Vậy, đâu là những đặc điểm tạo nên Phong cách Thụy Sĩ?


Đặc điểm và nguyên tắc của Phong cách Thụy Sĩ

Phong cách Thụy Sĩ bao gồm nhiều thành tố khác nhau, nhưng nổi bật nhất trong thiết kế kiểu Thụy Sĩ là:

  • Hệ thống lưới
  • Bố cục bất đối xứng
  • Kiểu chữ sans-serif
  • Tính chính xác
  • Hình học trừu tượng
  • Tính đơn giản
  • Tính khách quan
  • Nhiếp ảnh

Như “câu thần chú” Bauhaus: Hình thức theo sau chức năng.

Image result for swiss design

Hướng tiếp cận này không quan tâm đến tính thẩm mỹ. Tính thẩm mỹ được tìm thấy trong tính hữu dụng của thiết kế. Thiết kế vô cùng tối giản và chỉ vừa đủ. Ý tưởng ở đây là thiết kế phải vô hình và tính chủ quan của người thiết kế phải bị kiềm nén, để cho phần nội dung tự bộc lộ chính mình.

Thiết kế web theo Phong cách Thụy Sĩ

Phong cách Thụy Sĩ không chỉ được tìm thấy trên những tấm áp phích mà còn có thể áp dụng vào thiết kế web. Tất cả những đặc điểm trong danh sách trên đều có thể dễ dàng áp dụng vào một trang web.

Diogo Terror viết trên Tạp chí Smashing rằng Phong cách Thụy Sĩ tương ứng với việc tạo ra giao diện thân thiện với người dùng.

Theo ông, “phong cách thiết kế đồ họa này ra đời trong bối cảnh thể chế. Hầu hết những sản phẩm trong phong trào này đều dưới hình thức áp phích, tem, bản sắc thể chế thể hiện qua kiểu chữ, bảng hiệu đường phố,… Theo nghĩa này, các họa sĩ không chỉ tận dụng kiểu giao tiếp từ trên xuống, họ đang tạo ra giao diện thân thiện với người dùng.”

Image result for swiss design

Hệ thống lưới là nền tảng thiết kế

Các đặc điểm trực quan của Phong cách Thụy Sĩ bao gồm sắp đặt các yếu tố vào một mạng lưới được xây dựng chính xác nhằm tạo ra một bố cục thống nhất. Hệ thống lưới mang đến cho thiết kế một cấu trúc ‘giới hạn’ các yếu tố.

Hệ thống lưới này thể hiện các thông tin văn bản và hình ảnh một cách rõ ràng. Kiểu chữ phải là sans-serif và canh lề trái. Kết quả cuối cùng là một thiết kế bất đối xứng.

Image result for swiss design grid system

Josef Muller-Brockmann, một trong những người tiên phong của Phong cách Thụy Sĩ, đồng thời là tác giả cuốn sách Grid Systems in Graphic Design (Hệ thống lưới trong thiết kế đồ họa), nói về mạng lưới như sau:

“Hệ thống lưới là một công cụ hỗ trợ, chứ không công cụ đảm bảo. Có nhiều cách để sử dụng nó và mỗi nhà thiết kế có thể tìm kiếm giải pháp phù hợp với phong cách cá nhân của mình. Nhưng trước hết người đó phải học cách sử dụng hệ thống lưới; đó là một nghệ thuật đòi hỏi sự luyện tập.”

Còn cách nào khác để các nhà thiết kế có thể đưa sự tao nhã của Phong cách Thụy Sĩ vào thiết kế web không?


4 cách nhanh nhất giúp đưa Phong cách Thụy Sĩ vào thiết kế web của bạn

1. Tạo sự rõ ràng với ít yếu tố UI hơn

Đặc điểm của thiết kế kiểu Thụy Sĩ là các yếu tố chức năng trên một trang. Mỗi yếu tố xuất hiện có lý do của riêng nó. Triết lý trong phong trào này gợi cho ta nghĩ đến chủ nghĩa tối giản.

Nhưng tại sao thiết kế của bạn phải tối giản? Bởi vì khi giảm bớt thiết kế web xuống chỉ còn các yếu tố thật sự cần thiết, bạn đang tạo ra sự rõ ràng trong thiết kế.

Phía trên là một mẫu trang web lấy cảm hứng từ Phong cách Thụy Sĩ. Bạn thấy trên đó có một dòng chữ lớn với thông điệp rõ ràng. Sự chú ý của ta không bị phân tán ra xung quanh vì  trang web chỉ có vài màu chủ đạo: trắng, xanh dương và đen. Và nhờ vào số lượng hạn chế của các yếu tối UI, ta có thể biết rõ trang web thể hiện điều gì. Trái lại, một thiết kế quá nhiều chi tiết sẽ gây bối rối. Nó sẽ tạo ra không khí căng thẳng.

Thiết kế nằm ở việc cố gắng truyền tải một thông điệp. Nếu người dùng không thể nghe thấy thông điệp đó bởi tiếng ồn của các yếu tố cạnh tranh khác, họ sẽ có một trải nghiệm chẳng mấy dễ chịu.

Bạn có nghĩa vụ phải cung cấp cho người dùng thông tin mà họ tìm kiếm theo một cách không gây hại đến họ.

Nhà thiết kế sản phẩm Joshua Porter viết rằng, tính rõ ràng là ưu tiên hàng đầu trong thiết kế giao diện. Joshua nói tiếp rằng để thiết kế hiệu quả, người ta phải nhận ra đó là gì, quan tâm đến lý do họ sử dụng nó và hiểu rõ giao diện đang giúp họ tương tác với cái gì.

Về bản chất, tính rõ ràng truyền cảm hứng cho niềm tin và dẫn đến các mục đích sử dụng về sau.

2. Hạn chế những lựa chọn về font chữ

Trong thiết kế web phong cách Thụy Sĩ, kiểu chữ bạn chọn đóng vai trò tối quan trọng. Phong cách Thụy Sĩ còn được biết đến như là Phong cách Kiểu chữ Quốc tế, một phong cách tôn trọng font chữ.

Kiểu chữ là yếu tố thiết kế hàng đầu trong Phong cách Thụy Sĩ. Hãy nhìn bất kỳ tấm áp phích nào trong giai đoạn này và bạn sẽ thấy những font lớn, nét đậm chiếm phần lớn không gian.

Nếu muốn thiết kế web của mình thể hiện Phong cách Thụy Sĩ, đã đến lúc bạn nên vứt đi những font như Times New Romans, Garamonds và Caslons. “Nghiêm cấm tuyệt đối” các kiểu chữ có chân (serif font).

Hãy quan sát trang web trên. Mục tiêu ở đây vô cùng rõ ràng: Trở thành thành viên. Có hai lý do khiến chúng ta tập trung vào điều này. Thứ nhất là kích cỡ. Font chữ lớn và thông điệp rất rõ ràng. Không có những thông điệp mâu thuẫn nào khác.

Nguyên nhân thứ hai là do không gian trống. Bạn thấy ở đây có rất nhiều khoảng trống. Điều này cho phép trang web có “không gian để thở”, giúp nó truyền tải thông điệp tốt hơn và cho người dùng có cái gì đó để tập trung vào.

Một đặc điểm khác của Phong cách Thụy Sĩ là “bên trái thẳng tắp bên phải lởm chởm”, tức là văn bản được canh lề trái nhưng không canh đều. Giống như thế này:

Các font có thể dùng cho Phong cách Thụy Sĩ: Montserrat, Open Sans, Lato và Helvetica.

3. Xây dựng hệ thống cấp bậc kiểu chữ

Rất nhiều Phong cách Thụy Sĩ áp dụng đúng đắn font chữ và layout bằng cách tạo ra một hệ thống cấp bậc kiểu chữ.

Hệ thống cấp bậc kiểu chữ là một cách xây dựng nội dung trang web, trong đó bạn ưu tiên thông tin theo một thứ tự mạch lạc, chặt chẽ. Tức là: Cái nào quan trọng lên trước, cái nào ít quan trọng hơn thì để sau.

Để đạt được hệ thống cấp bậc trực quan, bạn sẽ phải xử lý những vấn đề sau:

  • Kích cỡ
  • Màu sắc
  • Độ dày
  • Vị trí
  • Độ tương phản
  • Khoảng cách giữa các chữ

Nếu bạn muốn học về hệ thống cấp bậc trực quan, hãy nhìn vào trang nhất của một tờ báo.

Tiêu đề, tiêu đề phụ và phần nội dung là những cách để tạo ra hệ thống cấp bậc trực quan. Trong một tờ báo, tiêu đề thu hút sự chú ý (quan trọng nhất) và tiêu đề phụ cung cấp thêm thông tin (hơi quan trọng) và rồi đến nội dung (ít quan trọng nhất). Cả tiêu đề lẫn tiêu đề phụ đều được sử dụng để lôi kéo độc giả tiếp tục đọc xuống nội dung.

Hãy nhìn vào hai văn bản bên dưới. Một có cấp bậc, một không. Bạn có thể thấy rõ sức ảnh hưởng của hệ thống cấp bậc trong kiểu chữ là như thế nào:

Nguồn hình ảnh: Janie Kliever ở Canva

Cũng cần chỉ ra cách người ta đọc trên mạng internet.

Hầu hết mọi người đọc theo hình chữ F, nhất là nếu có nhiều nội dung. Với các trang web ít nội dung hơn, người ta có xu hướng đọc theo hình chữ Z. Đó là bởi vì họ đọc lướt một lượt cả trang để tìm thông tin có liên quan đến mình.

Mắt chúng ta chuyển động theo một khuôn mẫu tự nhiên. Biết được điều này, bạn có thể bắt đầu tạo ra một hệ thống cấp bậc của kiểu chữ. Nếu biết người ta đọc từ trái qua phải và theo hình chữ Z, bạn có thể sắp xếp nội dung để thu hút sự chú ý của người dùng bằng cách để nó theo thứ tự thích hợp.

Sắp xếp nội dung theo cách này sẽ mang đến cho nó một cấu trúc. Bằng cách “chơi đùa” với kích cỡ của font chữ, bạn có thể làm cho độc giả cảm thấy thông tin quan trọng hơn hoặc bớt quan trọng. Điều này khiến việc đọc nội dung của bạn trở nên hiệu quả hơn với họ.

4. Ưu tiên ảnh chụp hơn là tranh minh họa

Tranh minh họa đang trải qua một thời kỳ đỉnh cao trong thiết kế web. Các công ty thuộc đủ mọi lĩnh vực dùng tranh minh họa để khiến thương hiệu của mình trở nên cuốn hút và cá tính.

Nhưng với Phong cách Thụy Sĩ, tất cả chỉ là kiểu chữ. Tại sao? Trong trí óc của các nhà thiết kế thời ấy, nhiếp ảnh là một cách thể hiện thực tại. Đó là một trung gian khách quan hơn (hãy nhớ, mấy ông này thích sự khách quan) hơn là tranh vẽ hoặc tranh minh họa.

Sự kết hợp của kiểu chữ và nhiếp ảnh là trọng tâm trong Phong cách Thụy Sĩ như một phương tiện giao tiếp trực quan, như ví dụ trong hình ảnh dưới đây:

Image result for swiss design photography

Như chúng ta thấy, hai yếu tố này kết hợp hài hòa và làm nổi bật lẫn nhau.


Thiết kế web theo phong cách Thụy Sĩ - những ý chính cần nhớ

Khi ta quan sát những phong trào giúp định hình thế giới và cố gắng sáng tạo lại thiết kế của riêng mình, kết quả cuối cùng có thể là một sản phẩm cóp nhặt.

Là nhà thiết kế, tốt hơn hết bạn hãy tìm ra những yếu tố giúp phong trào thành công, các nguyên tắc vẫn đứng vững trước dòng chảy thời gian và áp dụng chúng vào thiết kế của mình.

Trong nỗ lực tái tạo Phong cách Thụy Sĩ, kết quả cuối cùng sẽ vô cùng mờ nhạt khi so sánh với ngày trước, bởi lẽ chúng ta không còn sống trong thời đại đó nữa. Nhưng có những đặc điểm như lựa chọn cẩn thận các yếu tố UI hay chú ý đến kiểu chữ luôn mang đến lợi ích cho thiết kế của bạn.

Tác giả: Justinmind
Người dịch: Lynnette Dinh
Nguồn: UXplanet