Xu hướng thiết kế web hiện đại. Các hiệu ứng bổ sung áp dụng cho kiểu chữ. Những xu hướng sẽ thay đổi thế giới

Có một niềm tin chung giữa các nhà thiết kế rằng xu hướng sẽ phần quan trọng công việc của họ. Cập nhật thường xuyên cập nhật mới nhấtđược coi là bắt buộc. Nhiều nhà thiết kế đánh giá tác phẩm của người khác qua lăng kính xu hướng và việc gắn thẻ #cũ cho một số tác phẩm có thể bị coi là một sự xúc phạm, như thể một thiết kế không kết hợp các xu hướng mới nhất và tự động trở nên kém giá trị hơn.

Tuy nhiên, có những lý do để theo xu hướng. Việc xem các trang web như Awwwards, FWA hoặc CSS Design Awards có thể truyền cảm hứng cho bạn và kết quả là giúp bạn nhìn xa hơn thói quen thiết kế của mình. Bạn có thể tìm hiểu về thế giới hình ảnh mới mà sau đó bạn có thể (có ý thức hoặc không) tích hợp với nó. ngôn ngữ đồ họa. Xem người khác làm việc giúp cải thiện kỹ năng của bạn cũng như luôn cập nhật công nghệ mới nhất.

TRONG Năm ngoái hoặc hai, điều đáng chú ý là nhiều nhà thiết kế đang cố gắng tránh xa những bố cục đơn giản. Ngày càng xuất hiện nhiều tác phẩm thiết kế cởi mở, tưởng như hỗn loạn, “đứt đoạn”, “cắt đứt”. Sự tôn vinh lưới điện, như trước đây, đang mất đi tầm quan trọng của nó và các quy tắc đang được thay đổi một cách có chủ ý và có ý thức. Nội dung bắt đầu chuyển động, nó dường như đang chuyển động và các phần của nó đôi khi chồng lên nhau và đan xen vào nhau.

Sự phát triển của Canvas và WebGL đóng một vai trò lớn trong quá trình này. Dự án hiện đại thường hơi khó hiểu, kém trực quan so với những kiểu tối giản nhưng chắc chắn chúng để lại ấn tượng lâu dài cho người dùng.

Điều gì đang chờ đợi chúng ta trong thiết kế web năm 2017? Đây là những dự đoán của tôi.

Thành phần mở

Cho đến gần đây, thế giới thiết kế vẫn bị thống trị bởi các bố cục “đóng”, đối xứng và tĩnh. Kể từ năm 2016, nhiều trang web đã xuất hiện và không còn phong cách này nữa. Các tác phẩm mở với các phần tử được sắp xếp tự do chạy ở đâu đó ngoài màn hình đang trở nên phổ biến - bạn có thể xem ví dụ về tác phẩm như vậy tại romainpsd.com, durimel.io hoặc booneselections.com. Sự phân bố của các phần tử trên các trang web này tạo ấn tượng rằng chúng tiếp tục tồn tại phía sau màn hình.

Bất đối xứng

Năm 2016 cũng đã phá vỡ quy tắc đối xứng vốn đã phổ biến trong ngành từ khá lâu. trong một khoảng thời gian dài. Nhiều nhà thiết kế đã tạo ra những bố cục bất đối xứng khác xa với cân bằng hoàn hảo từ bên trái và bên phải. Để làm ví dụ, tôi muốn cho bạn xem trang culture.pl xuất sắc, dada-data.net hỗn loạn và durimel.io đã đề cập trước đó.

Đa dạng

Các nhà thiết kế đã tạo ra các bố cục năng động hơn có nhiều đường chéo giao nhau hơn (poigneedemainvirile.com, vanderlanth.io) hoặc hơn thế nữa hình dạng phức tạp(residente.com/en, helloheco.com, Predictiveworld.watchdogs.com).

Ảo tưởng về sự hỗn loạn

Vào năm 2016, nhiều nhà thiết kế đã bắt đầu rời xa thiết kế tối giản một cách có ý thức và có chủ ý. Có mong muốn tự do hơn và cách tiếp cận thiết kế ít cứng nhắc hơn. Tất nhiên, đằng sau điều này là nhu cầu thay đổi nhưng cũng là cảm giác buồn chán thường ngày. Tại một số thời điểm, mọi người đều cảm thấy nhàm chán với việc tạo bố cục đơn giản với các yếu tố đơn giản.

Tuy nhiên, phân tích các dự án của năm 2016, có thể nhận thấy sự hỗn loạn dường như chỉ là sự hỗn loạn. Các bố cục vẫn dựa trên sự tương phản cổ điển về hình dạng, màu sắc, họa tiết, kích thước, v.v. Điều đã thay đổi là sự sắp xếp của các yếu tố khác nhau và sự phụ thuộc hài hòa giữa chúng. Ngày nay, các tiêu đề, biểu tượng hoặc khối văn bản thường xuyên bị thay đổi hơn, bất chấp logic tầm thường. Mặc dù thực tế là chúng là một phần của cùng một khối chủ đề, nhưng chúng tách biệt và nằm ở một khoảng cách khá xa nhau. Chúng không được căn chỉnh theo cùng một cạnh và có các mặt sau khác nhau.

Một số hình học không gian“lơ lửng trong không khí” chỉ có mục đích trang trí (melanie-f). Đây cũng là điển hình cho các yếu tố chồng chéo. Văn bản bị chồng chéo một phần bởi các bức ảnh, như trên e03.epicurrence.com và melville-design.com, hoặc các hình ảnh được chồng lên nhau, như có thể thấy trên olivierbernstein.com.

Nó cũng là một kỹ thuật đặc biệt để phá vỡ sự hài hòa tối giản thông thường. Những tiêu đề lớn tương phản rõ rệt với cấu trúc và màu sắc tinh tế và tinh tế.

Hình nền và hoa văn phong phú

Ngày càng thường xuyên xuất hiện các hình nền và hoa văn có dấu gạch ngang, sọc hoặc dấu chấm nhỏ.

Một mẫu đặc biệt phổ biến là mẫu lưới, cung cấp “khung” cho các thành phần bố cục khác. Các phần tử này di chuyển theo thị sai dọc theo lưới và thường nằm ở vị trí hỗn loạn.

Mẫu lưới

Tuy nhiên, một trong những trang web đầu tiên có lưới như vậy xuất hiện là werkstatt.fr, tuy nhiên, trang này không sử dụng hình ảnh động đặc trưng.

Một cách hơi khác để sử dụng mẫu lưới được hiển thị tại klimov.agency, brand.uber.com và maisonullens.com. Trong những trường hợp này, lưới có một chức năng rất cụ thể - làm cho chuyển động của các phần tử trở nên hợp lý. Điều này cho phép bạn hợp lý hóa giải pháp phi tiêu chuẩn và đưa ra câu trả lời cho những câu hỏi như “tại sao lề của hình minh họa không khớp với lề của nút”? Điều này tạo nên nhịp điệu, đồng thời biện minh cho những vi phạm của mình.

Chi tiết trang trí

Điều thực sự thay đổi gần đây là cách tiếp cận chi tiết. Có một sự thay đổi dần dần khỏi chủ nghĩa tối giản. Có nhiều yếu tố khác chỉ có chức năng trang trí. Các hình dạng hình học “bay” và các mảnh tương ứng. Các biểu tượng tuyến tính, mỏng manh hơi tách rời khỏi nội dung mà chúng minh họa. Gạch chân và dòng được thay đổi. Xuất hiện hiện tượng nhiễu hạt và trục trặc, như trên bigyouth.fr hoặc kikk.be.

Các nút ít được tạo dưới dạng hình chữ nhật rõ ràng có văn bản bên trong. Chúng thường xuất hiện dưới dạng các đường lệch, mềm, chẳng hạn như trên dahllaw.dk hoặc yasuhiroyokota.com. Một tùy chọn nút khác là di chuột ngoạn mục trên Canvas, như trên hpsoundincolor.com và cavalierchallenge.com.

Khái niệm chu đáo - hình ảnh động mượt mà giữa các phần

Không có gì mới về hình ảnh động trên các trang web. Hơn nữa, không thể nói rằng chúng mâu thuẫn với cách tiếp cận tối giản. Tuy nhiên, giống như Canvas, chúng là một phần quan trọng mang lại những khả năng lớn hơn trong thiết kế web. Và những cơ hội mới luôn hấp dẫn vì chúng cho phép bạn làm điều gì đó khác biệt, mới mẻ và độc đáo.

Sự phong phú của hình ảnh động giúp loại bỏ sự phân chia sắc nét của trang thành các phần. Trang web thay đổi mượt mà khi bạn cuộn. Nội dung mờ dần bằng cách sử dụng hình ảnh động mềm mại. Trình tự của những chuyển đổi này ngày càng trở nên phức tạp hơn. Đây không chỉ là những hiệu ứng ngẫu nhiên giữa các khối nội dung mà còn là một khái niệm chu đáo trong đó mỗi yếu tố xuất hiện trong đúng thời điểm(Nationalgeographic.com, stylenovels.com). Hoạt ảnh ngay từ đầu đã là một phần của trang web chứ không chỉ là một chi tiết ngẫu nhiên được thêm vào.

Hình ảnh động thú vị trang trí bố cục đơn giản. Họ thêm giá trị mới và làm cho trang trở nên độc đáo. Chúng trở thành phần cốt lõi của toàn bộ dự án, như trên Ifly50 hoặc tennent brown.co.nz. Ảnh động thường tạo ra cấu trúc đẹp, bóng bẩy trên các trang web: Cuberto.com, lookbook.wedze.com, skarv-fashion.com hoặc corentinfardeau.fr.

Kiểu chữ đa dạng

Xu hướng thay đổi cũng có thể được nhìn thấy trong các phông chữ được sử dụng. Cho đến gần đây, toàn bộ Internet bị thống trị bởi các phông chữ đơn giản, tân kỳ cục như Helvetica, Roboto, Lato hay Open Sans. Kiểu tân kỳ cục mang tính "trang trí" hơn một chút thường được sử dụng nhiều hơn trong các tiêu đề, và nó còn hơn thế nữa. phiên bản đơn giảnđược chọn cho phần còn lại của văn bản. Phông chữ Serif thực tế không bao giờ được sử dụng.

Trong 2 năm qua, tình hình đã bắt đầu thay đổi. Các nhà thiết kế mạnh dạn sử dụng nhiều loại phông chữ khác nhau. Bây giờ họ sẵn sàng làm việc với sự tương phản hơn - kết hợp phông chữ serif và sans serif.

Có rất nhiều điều đang diễn ra trong kiểu chữ được sử dụng trên các trang web. Văn bản được tạo hình động, được chia thành các chữ cái riêng lẻ và nhiều hiệu ứng, hình ảnh và video khác nhau được đặt trong văn bản.

Khả năng công nghệ tốt hơn và những quyết định táo bạo hơn đang thúc đẩy sự phát triển về tính đa dạng trong kiểu chữ web.

Phông chữ hình học

Các phông chữ sans serif hình học đã trở nên rất phổ biến, chẳng hạn như Futura cổ điển, ITC Avant Garde, Proxima Nova hoặc những phông chữ có sẵn trong thư viện Google- Poppins hoặc Montserrat. Những phông chữ này biểu cảm hơn nhiều so với kiểu chữ neo-sans serif “vô hình”. Có thể đạt được đặc tính “hung hăng” và biểu cảm hơn của một trang web bằng cách sử dụng độ dày lớn hơn, như trên trang web khá cũ Hugeinc.com, nhưng đây là những ví dụ mới hơn: Sequence.co.uk, startuplab.no hoặc www.protest.eu .

Phông chữ Serif

Rất thường xuyên, phông chữ serif không chỉ được sử dụng cho nội dung văn bản mà còn cho các tiêu đề lớn. Những trang trí đặc biệt thường được sử dụng, chẳng hạn như những trang trên duhaihang.com hoặc jennyjohannesson.com. Các phông chữ phổ biến khác bao gồm những phông chữ liên quan đến Bodoni hoặc Didot.

Phông chữ đơn cách (“máy đánh chữ”)

Sử dụng phông chữ tỷ lệ, thường được kết hợp với máy đánh chữ, là một sáng tạo. Bây giờ chúng có thể được nhìn thấy trên các trang web như admirhadzic.com, Cuberto.com hoặc Designembraced.com.

Sự kết hợp phông chữ tương phản

Vào năm 2016, người ta thường tránh xa sự kết hợp phông chữ mềm mại, hài hòa để có độ tương phản rõ rệt hơn. Sự kết hợp biểu cảm được tăng cường nhờ độ tương phản cao của kích thước văn bản. Phông chữ lớn và trang trí được ghép nối với các phông chữ hình học đơn giản, giống như các tiêu đề hình học được ghép nối với phông chữ serif trong văn bản nội dung.

Kiểu chữ lớn như một phần của hình ảnh chính

Một điều rất hay và phổ biến là việc sử dụng văn bản rất kích thước lớn trong các hình ảnh chính. Điều này tạo ra sự tương phản rất mạnh giữa tiêu đề và phần còn lại của nội dung. Bạn có thể xem ví dụ tại oursroux.com, femmefatale.paris hoặc monsieurcaillou.com.

Đôi khi, để trang trí, chữ cái được sử dụng ngay từ đầu, chẳng hạn như coretinfardeau.fr hoặc Nourishdigital.com.

Một ví dụ điển hình ở trên là jennyjohannesson.com, trang này sử dụng đặc tính trang trí của phông chữ serif Goku.

Các hiệu ứng bổ sung áp dụng cho kiểu chữ

Người ta có thể quan sát sự tích hợp mạnh mẽ giữa kiểu chữ và hình ảnh, video và hình ảnh động. Các phần riêng lẻ được kết nối với nhau—kiểu chữ tương tác với cả nền và các phần tử khác. Vị trí ngẫu nhiên của kiểu chữ trên một hình ảnh tối đã là chuyện quá khứ. Ngày nay, các nhà thiết kế đang xây dựng những mối quan hệ thú vị giữa tất cả các yếu tố, dệt kiểu chữ vào nền, tạo hoạt ảnh cho nó, v.v.

Cỡ chữ lớn trong văn bản

Khi mới bắt đầu hành trình thiết kế web, tôi đã có thói quen cũ là sử dụng cỡ chữ 10 mà tôi đã có được khi làm việc trong lĩnh vực in ấn. Tuy nhiên, tôi nhanh chóng nhận ra rằng trên web kích thước tối ưu có thể đọc được là 14.

Điều đáng chú ý hiện nay là các nhà thiết kế đang sử dụng nhiều hơn phông chữ lớn, đặc biệt là khi Chúng ta đang nói về về phông chữ serif.

Đi vào bóng tối

Năm 2016, các nhà thiết kế đã sử dụng nhiều màu sắc khác nhau. Nhưng bạn có thể nhận thấy xu hướng chọn tông màu tối.

Xu hướng tạo các trang web toàn màu trắng đang trở nên ít phổ biến hơn và nhường chỗ cho các biến thể, họa tiết và hoa văn màu xám. Hiện nay, việc tạo các trang web tối hơn là khá phổ biến, trong đó màu đen hoặc sự chuyển màu của nó lấp đầy nền và tạo ra tâm trạng hơi tối, kỳ cục.

Mặc dù vậy, rất khó để dự đoán xu hướng này sẽ phát triển như thế nào trong năm nay. Tuy nhiên, màu sắc là một phần trong nhận dạng hình ảnh của thương hiệu, vì vậy thật khó để mong đợi họ thay đổi cơ bản cách truyền thông chỉ dựa trên mức độ phổ biến của một số xu hướng nhất định.

Tóm tắt

Năm 2017 hứa hẹn nhiều triển vọng thú vị nhưng cũng có một số mối nguy hiểm đang rình rập.

Cá nhân tôi e rằng nhiều nhà thiết kế web có thể hơi tự tin quá mức khi làm việc với Canvas. Thêm vào xu hướng mới này, bạn sẽ có được rất nhiều trang web hào nhoáng và ít người biết đến dành cho nhiều đối tượng.

Tôi cũng hơi lo ngại về thực tế là nhiều sáng tạo ngày nay không hoạt động bình thường trên tất cả các trình duyệt và thiết bị di động. Tôi có ấn tượng rằng chúng tôi đã trở lại điểm xuất phát. Chúng ta hiện đang ở trong tình huống tương tự như thời điểm Flash, mặc dù thống trị Internet, nhưng lại bị đổ lỗi vì thiếu khả năng phản hồi và yêu cầu kết nối Internet cao.

Một điều nữa khiến tôi lo sợ là xu hướng “giải cấu trúc” mới sẽ không thể áp dụng cho khách hàng thương mại hoặc đơn giản là không phù hợp với hồ sơ giao tiếp của họ. (Các trang web của chính phủ hoặc ngân hàng không thể lộn xộn).

Tôi tự hỏi sẽ mất bao lâu để các xu hướng mới chiếm lĩnh thị trường thương mại. Điều đáng chú ý là phần lớn các trang web tôi sử dụng làm ví dụ đều được tạo cho các đại lý, nhà thiết kế và ngành công nghiệp sáng tạo. Các trang web này thường đặt ra các quy tắc riêng và thường đi trước xu hướng so với các ngành khác. Đôi khi các xu hướng phải mất một thời gian dài mới trở nên phổ biến trong một thị trường ngách và xâm nhập vào thị trường thương mại. Sau đó, hình dạng của chúng được làm mịn một chút để phù hợp với mọi người.

Bất chấp tất cả những điều này, tôi nghĩ năm 2017 có vẻ rất hứa hẹn khi nói đến thiết kế web. Nếu nói rằng thời đại của chủ nghĩa tối giản sắp kết thúc thì có lẽ là quá đáng, nhưng nó chắc chắn đang trải qua những thay đổi và phát triển.

Chủ nghĩa tối giản sẽ trở nên phức tạp và chi tiết hơn. Các trang web năm nay sẽ sử dụng Canvas nhiều hơn. Chúng ta sẽ thấy rất nhiều sự hỗn loạn, đa dạng về hình thức và cách thể hiện trong các dự án tương lai. Cái này Tin tốt dành cho những nhà thiết kế đã chán ngấy sự tối giản Phong cách phẳng, Chất liệu hoặc thiết kế Metro.

Một chủ sở hữu trang web tốt sẽ không ngừng nỗ lực để cải thiện nó. Trong công việc này, anh ấy không chỉ cần dựa vào phân tích khán giả, dữ liệu phân tích trang web và đánh giá của khách hàng mà còn dựa vào xu hướng của ngành. Bởi vì có rất nhiều điều hữu ích trong xu hướng có thể cải thiện sự tương tác của khách hàng với trang web. Nhưng xu hướng cần phải được áp dụng một cách cẩn thận và khôn ngoan. Chỉ chọn những giải pháp phù hợp vấn đề hiện tại website và phát triển kinh doanh.

Vì vậy, trong bài viết này, chúng tôi không chỉ cung cấp danh sách các xu hướng thiết kế web mà còn đưa ra các đề xuất để áp dụng các xu hướng này vào trang web của bạn.

1. Khả năng sử dụng sẽ trở thành hàng hóa.

Một ví dụ về cải thiện khả năng sử dụng của trang web http://www.telemirspb.ru/

Tuân thủ các nguyên tắc cơ bản về khả năng sử dụng giúp trang web thu hút nhiều khách hàng hơn và giảm số lượng cuộc gọi hỗ trợ. Ngày càng có nhiều công ty cung cấp dịch vụ kiểm tra trang web vì nhu cầu tìm ra lỗi trên trang web ngày càng tăng. Thói quen mua sắm, đặt hàng dịch vụ qua Internet làm tăng nhu cầu về các trang web tiện lợi.

Than ôi, nhiều người tự tạo ra các trang web và sau đó đến với chúng tôi với sự ô nhục đã tạo ra. Điều quan trọng là phải suy nghĩ trước về quá trình tương tác với tài nguyên: phần nào sẽ có trong phiên bản đầu tiên và phần nào sẽ được thêm vào sau. Không thể lập kế hoạch cho mọi thứ nhưng việc điều hướng được lập kế hoạch trước sẽ tiết kiệm thời gian và tiền bạc cho những cải tiến trong tương lai. Ngoài ra, hãy cẩn thận chọn công cụ cho trang web của bạn. Bạn không nên chọn công cụ blog (ví dụ: WordPress) nếu bạn định bán thứ gì đó trên trang web hoặc tạo trang sản phẩm/dịch vụ.

Nếu bạn làm việc trong một môi trường có tính cạnh tranh cao, bạn sẽ hiểu tầm quan trọng của việc tạo sự khác biệt với các đối thủ cạnh tranh.

Đó là lý do tại sao, khi lập kế hoạch tạo một trang web hoặc cải thiện một trang web hiện có, trước tiên bạn cần nhìn giao diện qua con mắt của khách hàng và cố gắng dự đoán những vấn đề mà người dùng có thể gặp phải.

2. Văn bản dài sẽ biến mất

Hãy thành thật với chính mình: không ai đọc những văn bản dài cả. Các trường hợp ngoại lệ bao gồm sách và bài báo. Khi khách hàng muốn đặt mua một dịch vụ hoặc sản phẩm, họ quan tâm đến những thông tin cụ thể: giá cả, đặc điểm chính của nội dung sản phẩm/dịch vụ, điều kiện giao hàng/thời gian thực hiện. Thông tin ngắn gọn và có cấu trúc giúp khách hàng tiết kiệm thời gian và khuyến khích họ đặt hàng. Hơn nữa, nếu khách hàng so sánh một số trang web thì mô tả ngắn gọn nhất chắc chắn sẽ giành chiến thắng.

Ngoài ra, văn bản dài sẽ bất tiện khi xem từ thiết bị di động, thiết bị mà hầu hết mọi người đều sử dụng. Theo thống kê thế giới, tháng 10 năm 2016 số lượng người dùng di động có nhiều thứ hơn máy tính để bàn.

Xem xét đối tượng trang web của bạn, chẳng hạn như trong Yandex.Metrica trong báo cáo Tóm tắt → Loại thiết bị và xem phần trăm khách hàng đến từ điện thoại và máy tính bảng. Hãy lưu ý đến đối tượng này khi đăng nội dung.

Thêm hình ảnh động vào trang web của bạn một cách khôn ngoan. Nó phải chính xác và nhanh nhất có thể. Phóng to hình ảnh khi bạn nhấp vào, chỉ báo tiến trình trong khi chờ kết quả trên trang web, cửa sổ bật lên xuất hiện khi thêm mặt hàng vào giỏ hàng, thay đổi màu của các nút và liên kết sau khi nhấp vào là những tương tác vi mô phổ biến nhất chắc chắn sẽ xảy ra. giúp đỡ người dùng của bạn.

6. Sử dụng đoạn phim hoặc hình ảnh “sống động”

Video màn hình rộng đã được thay thế bằng đoạn phim - hình ảnh trong đó chỉ có một phần tử chuyển động. Tốt nhất là đặt chúng trên màn hình đầu tiên của trang để thu hút sự chú ý của người dùng và tạo hiệu ứng đáng kinh ngạc.

Nếu bạn chọn một ảnh gif như vậy để phù hợp với chủ đề của trang web, nó sẽ trông rất tuyệt. Ví dụ: bạn có thể chụp ảnh trực tiếp sản phẩm chính của mình và đăng nó lên Trang chủ hoặc trên các biểu ngữ có chương trình khuyến mãi.

Ở Nga, các đoạn phim chủ yếu được sử dụng trên mạng xã hội, vì vậy chúng tôi đưa ra ví dụ về các trang web nước ngoài - trang bảo vệ nguồn nước và cho thuê ô tô.

7. Tránh những bức ảnh có sẵn “điển hình”

Chúng tôi hy vọng rằng tất cả những người nhỏ bé, những cô gái đeo tai nghe và những bức ảnh gia đình đang mỉm cười sẽ biến mất khỏi các trang web. Ví dụ về hình ảnh có sẵn:

9. Di động đầu tiên

Bản chất cách tiếp cận này Vấn đề là khi thiết kế một trang web, bạn cần nghĩ đến việc nó sẽ hiển thị như thế nào trên thiết bị di động. Nhiều bài báo và sách đã được viết về chủ đề này, chẳng hạn, chúng tôi khuyên bạn nên đọc “Mobile First” của Luke Wrobleski.

Như đã đề cập ở trên (xem điểm 2), lưu lượng truy cập di độngđang phát triển và thậm chí có những người dùng không có trải nghiệm trên máy tính để bàn. Đó là lý do tại sao, để không mất khách hàng, chúng tôi khuyên bạn nên tối ưu hóa trang web của mình cho thiết bị di động.

Bài viết chỉ liệt kê những xu hướng cơ bản nhất. Hãy xem điều gì đang chờ đợi chúng ta trong năm nay. Nếu bạn cũng nhận thấy một số xu hướng và chắc chắn rằng chúng sẽ phát triển, hãy viết bình luận, chúng tôi sẽ vui lòng thảo luận. Và nếu bạn nghi ngờ rằng thiết kế trang web của mình có cập nhật hoặc bạn đã đọc bài viết và tìm thấy các yếu tố lỗi thời, hãy chú ý đến dịch vụ

” của John Moore Williams, Trưởng phòng Chiến lược Nội dung tại Webflow.

Thời điểm cuối năm hiện tại sắp đến gần và mỗi nhà thiết kế web đều tự hỏi mình ít nhất một lần vấn đề quan trọng: Điều gì sẽ định hình thiết kế web trong năm 2017 sắp tới? Tôi quyết định tìm câu trả lời cho câu hỏi này và hỏi các nhà thiết kế WebFlow xem họ nghĩ xu hướng nào sẽ thống trị trong 365 ngày tới. Tôi cũng đưa ra nhận xét của riêng mình về suy nghĩ của họ.

Trước hết, hãy lấy ý kiến ​​của nhà thiết kế chính Sergie Magdalin của Webflow.

1. Thiết kế hướng nội dung

“Việc sắp xếp các yếu tố thiết kế trong một cấu trúc nhất định phải sao cho người đọc có thể dễ dàng nắm bắt được ý chính mà không làm giảm đi ý nghĩa của nó. tốc độ bình thườngđọc" -Hermann Zapf

Vài năm qua đã chứng kiến ​​sự thay đổi mạnh mẽ trong suy nghĩ về vai trò của thiết kế trong kinh doanh. Trước đây, thiết kế được coi là bước cuối cùng trong quá trình tạo ra một vật thể: nhà thiết kế-ảo thuật gia đến cuối cùng và rắc bụi ma thuật lên sản phẩm của chúng ta để làm cho nó tốt hơn đối thủ cạnh tranh.

Thật thú vị khi chứng kiến ​​những biến đổi xảy ra với những ưu tiên phát triển.

Và điều đẹp nhất về những sự biến thái này là sự chuyển đổi sang một mô hình mà nội dung lại đứng đầu bảng. Các nhà thiết kế trên khắp thế giới đã nhận ra rằng người dùng truy cập các trang web chủ yếu để tìm nội dung, có thể là những dòng tweet ngắn, những bài viết chuyên ngành dài hoặc những meme Internet mới nhất. Vai trò cuối cùng của thiết kế là trình bày nội dung theo cách hấp dẫn, dễ hiểu nhất và thu được kết quả tốt nhất từ ​​nội dung đó.

Đây là một trong những lý do dẫn đến sự chuyển đổi từ thiết kế “đa hình” (khi các phần tử được mô tả càng giống càng tốt với các đối tác của chúng trong thế giới thực) sang thiết kế phẳng, tối giản. Từ những cân nhắc này, Google đã tạo ra Material Design.

Tất nhiên, như định luật thứ ba của Newton phát biểu, đối với mọi hành động đều có một phản lực mạnh như nhau. Nhiều nhà thiết kế tin rằng trào lưu thiết kế phẳng đã “giết chết” chính tinh thần thiết kế. Chúng tôi hy vọng cuộc tranh luận này sẽ tiếp tục trong năm tới, nhưng trọng tâm sẽ vẫn là nội dung - nền tảng của bất kỳ công việc thiết kế nào.

2. Tương tác chất lượng cao giữa các nhà thiết kế, nhà phát triển và nhà thiết kế với nhau

Tầm quan trọng của thiết kế trong việc định hình hoạt động kinh doanh ngày càng tăng, do đó, ngày càng chú trọng nhiều hơn đến việc các nhà thiết kế làm việc cùng với các nhà thiết kế đồng nghiệp và các nhà phát triển đồng nghiệp của họ.

Mối quan tâm về sự tương tác với các nhà thiết kế nảy sinh một phần do số lượng lớn các ứng dụng web và di động đang được phát triển ngày nay. Ngoài thực tế là các tập đoàn khổng lồ như Google, Facebook, Twitter và LinkedIn đều yêu cầu công việc khổng lồ của một đội ngũ thiết kế có năng lực tuyệt đối. các mặt khác nhau, các nhà thiết kế cần phải luôn đồng quan điểm với nhau. Điều này có nghĩa là cần có sự trao đổi thông tin nhiều hơn về dự án và cách thức hiệu quả nhất sự hợp tác.

Để thực hiện công việc này dễ dàng hơn, nhiều công cụ đã được tạo ra, từ các mẫu nhóm và bảng trong Webflow's Team cho đến biên tập đồ họa Giao diện Figma hiển thị những thay đổi trong thời gian thực. Tôi chắc chắn rằng trong năm 2017 những nền tảng này sẽ được cải thiện và bổ sung.

Nếu chúng ta nói về sự tương tác giữa nhà thiết kế và nhà phát triển, người ta chú ý rất nhiều đến quá trình quan trọng chuyển công tác. Ví dụ: thay vì gửi những hình ảnh tĩnh nặng nề và cồng kềnh, giờ đây các nhà thiết kế có thể chia sẻ các mô hình được hiển thị trực tiếp nhờ các công cụ như InVision, Marvel, UXPin.

Carson Miller đã cân nhắc vấn đề này trong bài báo gần đây “Tương lai của thiết kế giao diện người dùng” trên TechCrunch:

“Sớm hay muộn, các công cụ tạo thiết kế và mẫu thiết kế sẽ thay thế hoàn toàn việc phát triển front-end. Bạn có thể dễ dàng tạo cơ sở chất lượng cao cho bất kỳ khung công tác nào của mình mà không cần phải viết mã bằng tay.”

3. Đơn giản hóa quy trình từ nhà thiết kế đến nhà phát triển

Các công cụ thiết kế và tạo mẫu được đề cập ở trên cho phép bạn hình dung các giai đoạn cộng tác khác nhau thông qua hình ảnh trực quan, từ các tệp Keynote hoạt hình đến các trang web đầy đủ chức năng. Phương pháp chia sẻ tài liệu công việc này giúp giảm thời gian phản hồi trong dự án, do đó nâng cao chất lượng thiết kế, tăng tốc độ của nhóm phát triển và giảm khả năng thất vọng với kết quả. Nó cũng cải thiện sự tương tác của khách hàng. Ví dụ: đối với nhiều người dùng WebFlow, cuộc họp khách hàng đã trở thành cuộc họp công việc chính thức, nơi các nhà thiết kế có thể nhanh chóng triển khai ý tưởng và mọi người có thể thử nghiệm ý tưởng của mình gần như ngay lập tức.

Xu hướng thiết kế web trong năm tới theo nhà thiết kế sản phẩm Gadzhi Kharkharov:

4. Tiêu đề lớn, ồn ào

Khi thế giới thiết kế web bắt đầu tập trung vào nội dung, việc nhìn thấy những tiêu đề đầy cảm hứng trên các trang web có phông chữ lớn và đậm phù hợp với nội dung của chúng ngày càng trở nên phổ biến.

Đối tác Heco #MadeInWebflow

Như bạn có thể thấy từ các ví dụ, “lớn” và “đậm” không chỉ đề cập đến mô tả của phông chữ. Đúng hơn, đó là việc dành một phần đáng kể của màn hình chính cho một tuyên bố đơn giản nhưng mạnh mẽ và khép kín về sản phẩm hoặc dịch vụ. Dòng tiêu đề như vậy phải chứa đựng nội dung cốt lõi và dễ hiểu đối với bất kỳ khách truy cập nào, tránh sự khoa trương không cần thiết (được rồi, cụm từ “Thiết kế những điều không thể” nghe có vẻ quá ồn ào).

Trong môi trường bận rộn, quá tải thông tin ngày nay, những tuyên bố ngắn gọn, mạnh mẽ như thế này có tác dụng tốt đối với bất kỳ thương hiệu nào.

5. Đánh dấu phức tạp xuất phát từ những điều cơ bản về thiết kế đồ họa

Nếu muốn dự đoán sự phát triển của thiết kế web (ít nhất là mặt trực quan của nó), chúng ta cần nhìn vào lịch sử của thiết kế đồ họa.

Trong vài năm qua, bố cục trang web đã bị hạn chế Khả năng CSS, nhưng các mô-đun mới như Flexbox và Lưới CSS(sẽ được phát hành vào tháng 3 năm 2017), sẽ cho phép bạn thực hiện những ý tưởng táo bạo nhất trong đánh dấu web.

Của chúng tôi nhiệm vụ chinh bây giờ - để hiểu cách hoạt động của khả năng bố trí lưới mới của các khối trong khuôn khổ thiết kế thích ứng.

Dưới đây là một số ví dụ về những gì có thể xảy ra (giả sử bạn có trình duyệt hỗ trợ CSS Grid, chẳng hạn như Firefox Nightly, Safari Digital Preview hoặc Chrome Canary):

Phòng thí nghiệm bố trí thử nghiệm Jen Simmons

Hãy chú ý đến phong cách của khối chính - một tham chiếu rõ ràng về lịch sử của thiết kế đồ họa.

Lưới theo ví dụ

Bạn có thể xem thêm ví dụ trên trang web.

6. Thêm SVG

SVG (đồ họa vector có thể mở rộng) Đồ họa vector) mang lại nhiều lợi ích hơn cho các nhà thiết kế và phát triển web so với các định dạng hình ảnh truyền thống như JPG, PNG hoặc GIF.

Những ưu điểm chính của SVG được mô tả ngay dưới tên của định dạng - khả năng mở rộng và vectơ. Không giống như các định dạng dựa trên raster và pixel, hình ảnh SVG được tạo thành từ các vectơ—mô tả toán học về hình dạng của đối tượng. Điều này có nghĩa là SVG không phụ thuộc vào độ phân giải và hình ảnh ở định dạng này sẽ trông đẹp mắt trên mọi màn hình và thiết bị. Không cần phải lo lắng về việc hình ảnh bị mờ trên võng mạc.

Nhưng đó không phải là tất cả. SVG cũng nổi tiếng vì không yêu cầu gửi yêu cầu HTTP. Nếu bạn đã từng kiểm tra tốc độ tải trang web của mình, bạn có thể nhận thấy rằng những yêu cầu HTTP này thực sự có thể làm chậm trang web của bạn. Không có vấn đề như vậy với SVG.

7. Công cụ thiết kế đáp ứng dựa trên quy tắc

Thiết kế đáp ứng đã thay đổi hoàn toàn cách chúng ta nhìn vào các ứng dụng web và tạo ra chúng.

Nhưng kỳ lạ thay, nguyên tắc hoạt động của các chương trình thiết kế lại không hề thay đổi. Hầu hết các công cụ này hoạt động như thế này: bạn cần tạo đi tạo lại một trang tương tự để nhiều thiết bị khác nhau và quyền. Trong một ngành đòi hỏi việc nảy sinh ý tưởng nhanh chóng, phát triển nhanh chóng và bắt đầu nhanh, sự lãng phí thời gian như vậy đơn giản là không thể chấp nhận được.

Một làn sóng công cụ thiết kế mới (chẳng hạn như Figma) được kỳ vọng sẽ dựa trên “các quy tắc” điều chỉnh giao diện của các trang web trên màn hình khác nhau và thiết bị, do đó làm giảm số lượng các hành động lặp lại của nhà thiết kế. Những công cụ như vậy dựa trên mối quan hệ không gian của các thành phần và khi chúng ta thay đổi kích thước màn hình hoặc thiết bị, chúng sẽ cố gắng duy trì các mối quan hệ này bằng cách thay đổi kích thước của các thành phần và khoảng đệm giữa chúng.

Nhân tiện, ngày nay có những công cụ bố cục trang web tương tự không chỉ dành cho các nhà thiết kế mà còn cho cả người dùng thông thường. Ví dụ: TruVisibility.com - nền tảng điều chỉnh thiết kế được tạo theo các quy tắc nhất định, theo đó bố cục và kích thước của các phần tử được điều chỉnh cho phù hợp với kích thước màn hình. Tất cả những gì còn lại là thực hiện một số điều chỉnh để đảm bảo rằng trang web trông giống như trên các thiết bị. Người dùng không cần phải tạo lại phiên bản cho thiết bị di động vàđiều này giúp anh ấy tiết kiệm rất nhiều thời gian.

Xu hướng thiết kế năm 2017 theo Ryan Morrison, nhà thiết kế đồ họa cấp cao.

8. Nhiều màu sắc tươi sáng hơn

Khi kỷ nguyên của chủ nghĩa tối giản và chủ nghĩa tàn bạo bắt đầu trong thiết kế web vào năm 2016, các nhà thiết kế đã cố gắng tăng thêm cá tính cho tác phẩm của mình mà không vượt quá phong cách thời trang. Và có ít nhất một số trường hợp sử dụng màu sắc tươi sáng và đậm nét rất thành công.

Hãy xem trang web Asana mới với nhiều màu sắc rực rỡ:

Biểu tượng mới Ứng dụng Instagram nhận được rất nhiều lời chỉ trích, nhưng thiết kế lại này chắc chắn đã làm mới thương hiệu:

Mọi thứ Stripe không yêu cầu chế độ xem riêng:

Như bạn có thể thấy, nó không chỉ có màu sắc tươi sáng và đậm nét. Chuyển màu cũng đã trở lại phong cách, pha trộn và làm mờ màu sắc theo các sắc thái gợi nhớ đến bầu trời giữa trưa hoặc hoàng hôn rực lửa. Đây là một kiểu hồi sinh của chủ nghĩa tự nhiên với màu sáng và những chuyển màu táo bạo, đồng thời cá nhân tôi mong muốn được xem thêm tác phẩm tương tự vào năm 2017.

Mặc dù vậy, có lẽ bạn nên giảm độ sáng một chút? Chúng tôi đang theo dõi bạn, Asana.

9. Nhấn mạnh hơn vào hoạt ảnh

Yếu tố hoạt hình đã được phát từ lâu vai trò quan trọng trong giao diện web và xu hướng này sẽ tiếp tục vào năm 2017. Trên thực tế, miễn là các nhà thiết kế có quyền truy cập vào các công cụ để phát triển hoạt ảnh hấp dẫn, chúng ta sẽ thấy những hiệu ứng này trở nên rõ ràng và phức tạp hơn.

Chủ đề này đặc biệt quan trọng vì việc tạo hoạt ảnh ngày càng trở nên dễ dàng hơn. Tại Hội nghị Thiết kế & Nội dung 2016, chuyên gia hoạt hình Val Head nhấn mạnh rằng khi thiết kế các yếu tố hoạt hình, các nhà thiết kế nên lưu ý đến mục tiêu và nhu cầu của thương hiệu để đạt được hiệu quả mà người sáng tạo nội dung mong đợi. Nếu lời khuyên này được chú ý, hoạt ảnh sẽ thực hiện các nhiệm vụ có ý nghĩa đối với thương hiệu chứ không chỉ khiến người dùng đau nửa đầu.

10. Dấu hiệu bất thường

Năm 2016, giống như những năm trước, nổi tiếng với những cuộc tranh luận bất tận rằng thiết kế web đang chết dần hoặc mất đi tinh thần.

Những người đang cố gắng thuyết phục mọi người rằng thiết kế web đã chết rõ ràng là đang phóng đại. Nhiều người tiếp tục tìm cách trình bày nội dung cho người dùng theo những cách mới. Một trong những cách hấp dẫn nhất là phá vỡ hệ thống và bỏ qua bố cục lưới thông thường được quy định bởi các quy tắc thiết kế đáp ứng.

Phương pháp đánh dấu “bị hỏng” liên quan đến các phần tử vượt ra ngoài lưới được căn chỉnh tỉ mỉ. Những kỹ thuật như vậy đôi khi thậm chí có vẻ khó chịu đối với mắt. Ví dụ:

Văn bản và hình ảnh va chạm với nhau:

Văn bản và hình ảnh rải rác (dường như) ngẫu nhiên trên trang:

Đây là phần đầu tiên trong bản dịch của bài viết “18 xu hướng thiết kế web năm 2017”. Bạn có đồng ý với ý kiến ​​của các chuyên gia Webflow không? Bạn nghĩ kiểu thiết kế web nào sẽ thịnh hành trong năm tới?

Bài viết được chia thành hai lĩnh vực chính: đồ họa trong chính thiết kế và phát triển web, và mỗi phần đều có những thành phần riêng.

XU HƯỚNG THIẾT KẾ WEB

Vì vậy, chúng ta sẽ bắt đầu với xu hướng thiết kế web của năm 2017 và những gì đang chờ đợi chúng ta trong năm 2018. Những thay đổi nào đã xảy ra trong đồ họa, việc sử dụng phông chữ, hoạt ảnh và video, v.v.

Thiết kế đồ họa

Xu hướng được coi là thời trang là thiết kế phẳng ( Thiết kế phẳng). Đồ họa vector được sử dụng cùng với việc bổ sung đồ họa raster để nhấn mạnh; ví dụ về các trang web như vậy được đưa ra dưới đây. Chủ nghĩa tối giản và thiết kế đáp ứng, đơn giản và dễ hiểu đối với người dùng trang web.

Hình ảnh vector

Việc sử dụng vectơ trên các trang web ngày càng tăng; nó có trọng lượng thấp, có nghĩa là đang tải nhanh hơn. Vì vectơ có thể được kéo dài và nén theo ý muốn nên đồ họa của bạn sẽ luôn trông đẹp mắt trên mọi màn hình thiết bị ở mọi độ phân giải. Vì hình ảnh vector sử dụng định dạng SVG (Đồ họa vectơ có thể mở rộng). Số đông biên tập viên vector cho phép bạn lưu ở định dạng này và không cần phần mềm cụ thể.

Nút không màu - ma

Việc hướng tới sự tối giản cũng ảnh hưởng đến thiết kế của các nút bấm. Việc sử dụng loại nút này trong thiết kế website ngày càng nhiều. Các nút như vậy không làm trang web bị quá tải và trông nguyên bản. Trang web của chúng tôi cũng sử dụng các nút như vậy ở cuối khối bài viết.

nhấp chuột vào bức ảnh để phóng to

Đồ họa 3D đầy phong cách

Đồ họa 3D cũng đang có đà phát triển trong năm mới. Bố cục 3D phù hợp với thiết kế phẳng và bổ sung cho nó, mang lại chiều sâu hơn và nhấn mạnh tính hiện đại.

nhấp chuột vào bức ảnh để phóng to

Các đối tượng hoạt hình, video và tương tác

Các trang web đã bắt đầu sử dụng ảnh và hình nền trực tiếp, điều này chắc chắn thu hút sự chú ý và mang lại cho trang web một số động lực. Việc sử dụng video và tất cả các loại hoạt ảnh để tương tác với người dùng cũng tăng lên.

Lưới phức tạp

Trở lại cuối năm 2016, một xu hướng nổi lên cho các trang web sử dụng lưới động, phức tạp với thiết kế tiên tiến.

Hình học ở các dạng khác nhau

Sử dụng hình dạng hình học các loại khác nhau dành cho văn bản, các khối và hình nền được đánh dấu thông tin. Hình chữ nhật và hình vuông là lựa chọn tuyệt vời để làm nổi bật những điều quan trọng.

nhấp chuột vào bức ảnh để phóng to

Màu sắc thời trang

Ở đây ai thích cái gì, cái gì theo định nghĩa là phù hợp với từng dự án. Điều duy nhất có thể nói là màu sắc ngày càng trở nên rực rỡ hơn. Sự kết hợp và độ tương phản tốt sẽ thuận tiện hơn cho người dùng khi điều hướng trang web và nhận biết thông tin.

Thích ứng vô điều kiện

Bây giờ không cần phải nói rằng các trang web phải thân thiện với thiêt bị di động. Sự thích ứng là một yếu tố tuyệt đối của một trang web hiện đại. Điều rất quan trọng là phải suy nghĩ kỹ về thiết kế trong phiên bản dành cho thiết bị di động để người dùng có sẵn tất cả các yếu tố quan trọng và họ có thể hiểu được điều hướng trang web một cách trực quan.

Tranh chấp không giảm bớt về việc nên đặt biểu tượng hay dòng chữ tốt hơn. Kết quả thử nghiệm trên 240.000 người dùng thiết bị di động.

Các lựa chọn thay thế cho menu di động

Nếu trang web không có nhiều phần thì tốt hơn nên sử dụng các tab làm menu hoặc thêm nút vào chúng ở cuối trong menu bổ sung thả xuống.

Menu động linh hoạt

Giải pháp nằm ở một menu điều chỉnh theo độ rộng của màn hình, hiển thị càng nhiều tab càng tốt và ẩn những gì không có trong phần “Thêm”.

XU HƯỚNG PHÁT TRIỂN WEB

Thiết kế chu đáo

Trong quá trình phát triển thiết kế website, không chỉ Người thiết kế đồ họa, cũng như các chuyên gia xúc tiến và tiếp thị. Vị trí của mỗi yếu tố đều có mục đích riêng, mang lại sự thoải mái cho người dùng.

Ít văn bản hơn là tốt hơn!

Phần văn bản của trang web phải ngắn gọn, càng nhiều càng tốt và tiết lộ chủ đề được đề xuất. Nếu có thể, hãy bổ sung thêm các chi tiết kỹ thuật, chẳng hạn như giá cả, đặc tính, v.v.

Xếp hạng CMS

Bạn luôn có thể xem đánh giá mới nhất. Dù bạn chọn tùy chọn nào, hãy nhớ rằng theo tuyên bố chính thức từ các công cụ tìm kiếm, không có sự khác biệt cơ bản nào về nội dung trang web của bạn được tạo ra. Bất kỳ công cụ hoặc khuôn khổ nào cũng sẽ phải được sửa đổi để chức năng tốt nhất dự án của bạn.

Infographics sống động về con đường phát triển của một nhà phát triển web hiện đại và những công nghệ anh ta cần học để trở thành front-end, back-end hoặc devops trong năm 2017.

Giới thiệu

Ưu tiên hàng đầu là xác định hồ sơ phát triển hơn nữa. Hãy thử, nghiên cứu, cố gắng hiểu những gì gần gũi hơn với bạn - frontend, backend, devops hoặc có thể là fullstack?

Con đường dẫn đầu

Trong bất kỳ lĩnh vực phát triển web nào, việc nắm vững những kiến ​​thức cơ bản luôn được đặt lên hàng đầu. Đối với người mới bắt đầu, rõ ràng nhiệm vụ số một là học HTML, CSS và JavaScript (+jQuery). Khi bạn phát triển các kỹ năng cơ bản và mở rộng nền tảng lý thuyết của mình, bạn có thể chuyển sang những thứ chuyên biệt hơn.

Có nhiều khung và thư viện JavaScript giúp cuộc sống của nhà phát triển web trở nên dễ dàng hơn nhiều. Trong số đó, bạn có thể chọn cách thuận tiện và phù hợp nhất cho một lập trình viên cụ thể. quản lý gói, một công cụ xây dựng và thử nghiệm, một trình quản lý tác vụ và nhiều hơn thế nữa cho mọi sở thích và nhiều nhu cầu.

Ngày nay, lĩnh vực phát triển front-end đang phát triển không giống ai. Các khung và công cụ không ngừng xuất hiện và cải tiến, các phương pháp và mô hình mới đang ra đời, chính hệ tư tưởng của giao diện người dùng từ lâu đã vượt xa ranh giới của bố cục. Do đó, một trong những nhiệm vụ chính của nhà phát triển web là duy trì hoạt động, nhận thức được xu hướng hiện đại sự phát triển của khu vực này.

Đường dẫn hỗ trợ

Phát triển phụ trợ cũng đã chứng kiến ​​những thay đổi lớn trong vài năm qua. PHP từ lâu đã không còn độc quyền trên thị trường công nghệ backend nữa, mặc dù nó phiên bản mới nhất, PHP 7 đáng được quan tâm hơn. Node.js, Ruby và Go đã bùng nổ. Công nghệ hiện đại làm cho nó có thể phát triển logic kinh doanh phức tạp và đạt được hiệu suất cao.

Cách của người sùng đạo

Công việc của Devops là một công việc rất có trách nhiệm. Ứng dụng web hiện đại là một sinh vật khổng lồ và phức tạp, và nhiệm vụ của các nhà phát triển là duy trì hoạt động bình thường của nó. Giám sát quy trình, làm việc trên đám mây, vùng chứa web, tích hợp liên tục - đây chỉ là một phần nhỏ trong chuỗi công nghệ web cho phép ứng dụng web tồn tại tổng thể và thực hiện các chức năng của nó.