Thực đơn
trang chủTừ

Màu sắc thời trang trong thiết kế web. Quay trở lại cội nguồn của chủ nghĩa tối giản. Tránh những bức ảnh có sẵn "điển hình"

Trong thời đại công nghệ thông tin phát triển, bạn không thể đứng ngoài và xem chuyện gì đang xảy ra. Bạn cần phải xảy ra điều này. Để không trở thành người ngoài cuộc, bạn cần rút ra kiến ​​thức từ mọi nguồn có thể và không thể và theo dõi mọi sự kiện. Năm 2016 sắp kết thúc, có nghĩa là năm 2017 đã đến gần và sẽ mang đến những điều mới mẻ cho lĩnh vực phát triển web. Và chính xác những gì, bạn sẽ đọc trong bài viết này!

Đừng là người ngoài cuộc, hãy theo kịp thời đại.

Bot

Các trang web đơn giản không còn quá phổ biến nữa, chúng ngày càng có tính tương tác cao hơn, hơn nữa, sau một thời gian, cuộc sống trực tuyến của chúng ta sẽ trở nên đơn giản hóa bởi nhiều lời nhắc tương tác khác nhau đến mức chúng ta sẽ không phải căng não nữa. Bot hiện đang được sử dụng rộng rãi và đây mới chỉ là bước khởi đầu. Mọi người đều biết ứng dụng Slack để liên lạc trong công ty và ở đó bạn cũng có thể tìm thấy một bot chào đón bạn, hỏi tên bạn và ngay lập tức chèn nó vào hồ sơ của bạn. Bot đang xuất hiện trong nhiều công cụ và ứng dụng khác, mở ra kỷ nguyên của trợ lý trực tuyến.

Giao diện người dùng chuyển động

Hoạt hình, video, GIF từ lâu đã trở thành cuộc sống hàng ngày của chúng ta, mọi thứ đều sống động và hấp dẫn, người dùng còn cần gì nữa? Chúng được sử dụng rộng rãi để nhanh chóng tạo các chuyển tiếp và hoạt ảnh CSS để đảm bảo dễ sử dụng. Phiên bản mới nhất của Motion UI được trang bị hệ thống hàng loạt hoạt ảnh, các mẫu CSS linh hoạt với các khả năng nâng cao để chuyển đổi hoàn toàn và có thể hoạt động với tất cả các loại thư viện hoạt ảnh JavaScript. Chúng tôi tự tin hơn rằng tính di động sẽ thay thế hoàn toàn việc sử dụng hình ảnh tĩnh.

Khả năng thích ứng

Di động là khẩu hiệu của thời đại chúng ta, mỗi ngày mỗi người, ít nhất một lần (chưa kể những người nghiện thực sự sống trong tay với một chiếc điện thoại) tìm kiếm thông tin trên Internet, gửi tin nhắn hoặc gọi điện, vì vậy việc sử dụng chúng nên được thuận tiện nhất có thể. Nếu bạn là chủ sở hữu trang web và vẫn chưa nghe nói về khả năng phản hồi, đã đến lúc bắt tay vào thực hiện nó , nhằm mang đến cho khách hàng tiềm năng sự thoải mái khi sử dụng trang web của bạn. Như bạn có thể đã nhận thấy, đây thực sự là một điều cần phải có trong thế giới thiết kế và phát triển web; ngoài ra, nó sẽ giúp bạn tiết kiệm chi phí phát triển ứng dụng di động.

Trang web một trang

Bạn có bối rối trước những trang web có nhiều trang, nơi có quá nhiều thứ và mọi thứ đều quá khó hiểu? Đừng lo lắng, thời đại của các trang web một trang sắp đến gần. Loại trang web này rất phổ biến trong các công ty lớn, chúng thuận tiện hơn khi sử dụng và người dùng đã truy cập trang web cho một mục đích cụ thể sẽ dễ dàng tìm thấy thông tin cần thiết hơn.

Javascript hiện đang gia tăng

Javascript là tương lai, bất chấp những tin đồn rằng nó có những thiếu sót và điểm yếu. Không ai tranh cãi rằng họ thực sự hiện diện, nhưng lý tưởng trên thế giới này là gì? Ngay cả Mac OS cũng sử dụng JS trong phần cứng của nó. Hơn nữa, các thư viện front-end của nó như Angular, Node, React cũng như các thư viện nhỏ hơn khác đang nhanh chóng trở nên phổ biến.

Không có gì ngạc nhiên khi Javascript đã trở thành một phần không thể thiếu trong quy trình phát triển web tiêu chuẩn, cùng với HTML và CSS. Và thực tế này đã nói lên điều đó.

Hiệu ứng paralax

Hiệu ứng này được sử dụng thường xuyên nhất nhưng không nhiều người biết chính xác nó được gọi là gì. Làm rõ: đây là cách tốt nhất để thêm lớp 3D vào trang web của bạn , nó cũng có thể được sử dụng để thêm hiệu ứng 3D tuyệt đẹp.

Những xu hướng sẽ thay đổi thế giới

Trong bài viết này, chúng tôi đã tổng hợp tất cả các xu hướng phát triển web đầy hứa hẹn sẽ ngay lập tức thay đổi thế giới. Nhưng chúng tôi vẫn chưa biết những xu hướng nào đang chờ đợi chúng ta trong năm 2017. Luôn cập nhật các công nghệ hiện đại và có thể một ngày nào đó bạn sẽ được truyền cảm hứng từ những gì đang xảy ra đến mức bạn sẽ tự mình nghĩ ra điều gì đó mang tính cách mạng?

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 thứ phù hợp để giải quyết các vấn đề hiện tại của trang web 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 khuyến nghị để á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/

Việc 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 kiếm 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 nỗi ô 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ê toàn cầu, vào tháng 10 năm 2016, số lượng người dùng thiết bị di động đã nhiều hơn số lượng người dùng 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 ghi nhớ đố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à đặt nó trên Trang chủ hoặc biểu ngữ quảng cáo.

Ở 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 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ủa phương pháp này là khi thiết kế một trang web, bạn cần suy nghĩ về cách nó sẽ hiển thị 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 trên thiết bị di động đang tăng lê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 nhất một lần đặt ra một câu hỏi quan trọng: điều gì sẽ định nghĩa 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 tốc độ đọc thông thường” -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 dạng” (trong đó các yếu tố được mô tả giống nhất có thể 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 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 yêu cầu một đội ngũ thiết kế mạnh mẽ từ các khía cạnh hoàn toàn 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 phải có sự trao đổi nhiều hơn về dự án và cách làm việc cùng nhau hiệu quả nhất.

Để thực hiện nhiệm vụ này dễ dàng hơn, nhiều công cụ đã được tạo, từ các mẫu và bảng cộng tác trong Nhóm của Webflow cho đến Figma, trình chỉnh sửa giao diện đồ họa hiển thị các 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.

Khi nói đến sự hợp tác giữa các nhà thiết kế và nhà phát triển, người ta chú ý rất nhiều đến quá trình bàn giao công việc cực kỳ quan trọng. 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ị giới hạn ở CSS, nhưng các mô-đun mới như Flexbox và CSS Grid (ra mắt vào tháng 3 năm 2017) sẽ cho phép bạn hiện thực hóa những ý tưởng bố cục web điên rồ nhất của mình.

Nhiệm vụ chính của chúng tôi bây giờ là hiểu cách bố trí lưới mới của các khối sẽ hoạt động như thế nào trong khuôn khổ thiết kế đáp ứng.

Dưới đây là một số ví dụ về những điều 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) 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ư sau: bạn cần tạo đi tạo lại một trang tương tự cho các thiết bị và độ phân giải khác nhau. Trong một ngành đòi hỏi phải nảy sinh ý tưởng nhanh, phát triển nhanh và ra mắt nhanh, sự lãng phí thời gian nà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) dự kiến ​​sẽ dựa trên “các quy tắc” điều chỉnh giao diện của trang web trên các màn hình và thiết bị khác nhau, từ đó giảm số bước thiết kế lặp lại. 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 chính xác thiết kế đã 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 dành cho thiết bị di động và điều này giúp tiết kiệm đáng kể thời gian của họ.

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 ứng dụng mới của Instagram đã nhận 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 rỡ. Đó là sự phục hưng của chủ nghĩa tự nhiên với màu sắc tươi sáng và chuyển màu đậm, và cá nhân tôi mong muốn được thấy nhiều tác phẩm kiểu này hơn 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

Các yếu tố hoạt hình từ lâu đã đóng một vai trò quan trọng trong giao diện web và xu hướng này sẽ tiếp tục trong 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ử nằm 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?

Với sự phát triển tích cực của công nghệ, việc giao tiếp của chúng ta với máy tính ngày càng trở nên tự nhiên hơn và khả năng giao tiếp tương tác bằng giọng nói xuất hiện. Vì vậy, tương lai thuộc về trợ lý giọng nói, nhưng đây là thế hệ ứng dụng tiếp theo.

Nút kêu gọi hành động phải là yếu tố chính trên bất kỳ trang nào. Ngày nay, những màu sắc quá sáng và gây khó chịu thường được sử dụng. Nhưng để nhấn mạnh nút CTA vào năm 2017, hoạt ảnh đơn giản sẽ ngày càng được sử dụng nhiều hơn; nó không quá khó chịu nhưng lại hoàn thành tốt chức năng thu hút sự chú ý.

Hãy nhớ rằng điều chính là không lạm dụng nó! Sử dụng các chuyển động mượt mà trong hoạt ảnh sau vài giây; chúng sẽ thu hút sự chú ý mà không quá khó chịu. Chúng tôi khuyên bạn nên thêm nút kêu gọi hành động vào tiêu đề trang web của mình để có hiệu quả tốt hơn. Và không chỉ trên trang web, hãy thêm các nút như vậy vào thư của bạn!

Những bức ảnh lớn và đặc biệt là video luôn thu hút sự chú ý. Hơn nữa, bản thân cốt truyện video có thể thực sự khiến khách truy cập thích thú.

Nếu đây là video nền thì bạn có hai trong một - vừa là ảnh vừa là video. Vì video vẫn còn tương đối hiếm khi được sử dụng làm hình nền nên chúng ngay lập tức khơi dậy sự quan tâm.

Phấn đấu tạo ra những video SỨC KHỎE. Những con người thực sự trong video của bạn phải tạo cảm giác chân thực, chân thành và xác thực. Đảm bảo sử dụng các chiến thuật khác nhau: đánh giá của khách hàng, phản hồi hợp lý trước những phản đối có thể xảy ra và trình diễn sản phẩm.

Với sự trợ giúp của những video như vậy, bạn sẽ có thể vượt qua mọi nghi ngờ của khách hàng nhanh hơn nhiều và chốt giao dịch.

Xu hướng số 4 cho thiết kế trang web năm 2017 – cuộn là loại điều hướng chính

Vào năm 201, việc cuộn đã trở nên phổ biến. Ông đã làm cho thông tin có ý nghĩa hơn. Giờ đây, người dùng sẽ rất vui khi cuộn qua các văn bản dài thay vì đi theo các liên kết và đợi các trang tải lại.

Thông tin quan trọng trong tiêu đề trang web, chẳng hạn như menu điều hướng chính, số điện thoại hoặc nút gọi lại, được cố định và luôn khả dụng mà không cần thực hiện thêm hành động nào.

Cuộn giúp kể một câu chuyện thú vị một cách trôi chảy, hiển thị nhiều ảnh, từ đó vượt qua sự nghi ngờ của người dùng và khuyến khích chuyển đổi.

Trang đích được thiết kế tốt sẽ đưa khách hàng vào một hành trình được xây dựng cẩn thận để dẫn đến chuyển đổi mà không buộc họ phải suy nghĩ kỹ về việc chọn đường đi.

Cung cấp các sản phẩm liên quan và tương tự, cũng như các chương trình khuyến mãi có lợi nhuận trong quá trình thanh toán để tăng số tiền trung bình. Các sản phẩm liên quan trong thương mại điện tử chiếm từ 10 đến 30% thu nhập. Hãy nhớ rằng việc bán hàng cho một khách hàng mới khó hơn gấp mười lần so với việc bán hàng cho một người đã sẵn sàng trả tiền.

Với sự trợ giúp của cửa sổ bật lên, bạn có thể giữ chân khách hàng khi họ chuẩn bị rời khỏi trang web. Nhưng cảm giác cân đối ở đây rất quan trọng vì nhiều người dùng bắt đầu ghét chúng.

Nhưng nếu bạn sáng tạo với những thông báo này và không yêu cầu đổi lại bất cứ điều gì, chẳng hạn như cung cấp giao hàng miễn phí, viết mã phiếu giảm giá hoặc tải xuống bản dùng thử miễn phí, thì cách tiếp cận này sẽ trở nên khó chịu.

Năm 2017 mang lại điều gì mới cho Web? Những hướng và xu hướng chính trong thiết kế web mà chúng ta nên mong đợi là gì? Bây giờ chúng ta sẽ tìm hiểu mọi thứ – dưới dạng đánh giá ngắn gọn về các xu hướng nổi bật nhất, sử dụng các ví dụ về các trang web TRENDY.

Thiết kế web liên tục được cập nhật với những ý tưởng táo bạo và sự phổ biến của mọi thứ thiết thực đã kích thích sự phát triển của các xu hướng. Đối với các menu trượt ra thông qua nút hamburger và điều hướng tự động ẩn khi cuộn, kiểu chia đôi màn hình được thêm vào, chia đôi trang chính và các trang khác.

Đọc thêm: 8 xu hướng web năm 2019: bố cục hiện đại

Về mặt thẩm mỹ, phong cách phẳng đã thống trị WEB trong 3 năm liên tiếp. Sau đó, Google giới thiệu thiết kế vật liệu, giúp chúng tôi thoát khỏi sự trừu tượng về mặt hình ảnh một chút. Năm 2017, thiết kế web sẽ tiến thêm một bước trở lại hiện thực. Dù là hình dạng, lựa chọn màu sắc hay chức năng - 2017 sẽ là năm của sự kết hợp trong đó thực tế của thế giới vật chất và công nghệ giao nhau. Kết quả là trải nghiệm duyệt web tốt hơn.

Dưới đây là chín xu hướng thiết kế web có thể thu hẹp khoảng cách.

1. Điều hướng bật ra

Ngày nay, khi khán giả di động đã thích duyệt Internet thì tầm quan trọng của không gian màn hình càng lớn hơn bao giờ hết. Bằng cách ẩn chức năng và điều hướng cho đến khi “cho đến khi cần”, các nhà tiếp thị và nhà thiết kế web hiện đại cố gắng giải phóng không gian trang web để bán hình ảnh.

Menu bật ra, được tạo riêng cho điện thoại thông minh, cải thiện UX trên màn hình lớn. Thật kỳ lạ, menu ẩn thực hiện tốt hơn việc nhấn mạnh những gì quan trọng, khuyến khích bạn tập trung vào một mục tiêu cụ thể tại một thời điểm. Khi bạn mở menu, nó sẽ trở thành trung tâm của sự chú ý trên trang và cũng được sử dụng tích cực trong quá trình khám phá trang web.

Thuận lợi:

  • Tiết kiệm không gian màn hình
  • Bằng cách tập trung sự chú ý của người dùng vào menu, nó cải thiện khả năng điều hướng trang web
  • Việc ẩn các thành phần điều hướng giúp bạn tập trung vào những thứ khác (như mục tiêu chuyển đổi)
  • Cải thiện giao diện màn hình đầu tiên
  • Cấu trúc thiết kế linh hoạt hơn

Đọc thêm: 20 ví dụ tốt nhất về thiết kế trang chủ website

Thực tiễn tốt nhất:

Thiết kế màu sắc phù hợp với các trang của website. Hiệu quả tối đa khi đơn giản hóa một trang web theo cách này đạt được với nền một màu hoặc cấu trúc menu trượt một màu.
Đừng làm người dùng mất tập trung vào việc điều hướng - tốt hơn hết là bạn nên để lại các tính năng và trang trí cho chính các trang đó. Tất nhiên, một thiết kế hiện đại đẹp mắt và một menu phong cách sẽ không gây hại gì:

Kiểu chữ lớn đơn giản. Kiểu chữ rõ ràng, phong cách làm tăng thêm sự đa dạng cho mô hình thiết kế web “thực tế” ở trên. Phông chữ lớn/đậm, dễ đọc cải thiện hiệu quả điều hướng và lấp đầy không gian.

Các nhà thiết kế thường đi theo xu hướng này bằng cách sử dụng chữ in hoa.

Biểu tượng bánh mì kẹp thịt có hình chữ thập để mở/đóng menu. Vì tiêu chuẩn cho phép, sẽ đúng hơn nếu kết hợp chúng trong một biểu tượng để rõ ràng và dễ nhìn hơn.

Dịch chuyển/chồng chéo nội dung khi mở. Menu bật lên hiếm khi được tạo để chiếm toàn bộ màn hình. Thông thường, hiển thị một số nội dung trang, giúp bạn dễ dàng quay lại trên màn hình nhỏ. Trên máy tính để bàn, nó trông giống như một "đồ nhái di động" thời thượng.

2. Ngược lại với các mô hình điều hướng - các lựa chọn thay thế

Trong những ngày đen tối của web, có hai loại điều hướng: menu trên cùng và thanh bên. Với thiết kế đáp ứng, menu hamburger hiện bị chỉ trích rộng rãi vì khiến người dùng khó thu hút hơn/khó khám phá/kém hiệu quả hơn.

Ưu điểm của điều hướng không chuẩn:

  • Thiết kế độc nhất
  • Sự đổi mới thu hút
  • Trải nghiệm người dùng nâng cao (UX)
  • Dành cho nhà thiết kế - những khả năng mới cho thiết kế trang web

Thực tiễn tốt nhất:

Đọc thêm: 11 website sáng tạo của studio thiết kế web trong nước

Các thử nghiệm khác nhau với điều hướng trang web. Với thái độ mơ hồ như vậy đối với “bánh mì kẹp thịt”, năm 2017 chúng ta có thể mong đợi sự xuất hiện của những đổi mới thú vị trong việc điều hướng.

Menu độc đáo của Hillsiderancho.com kết hợp điều hướng trên, trái, phải và cuộn

Không có menu điều hướng nào cả. Người dùng hiện đại phải đối mặt với rất nhiều nội dung và không cần phải được hướng dẫn phải làm gì tiếp theo. Cuộn! Bản chất tự nhiên của hành vi này đã được ghi nhận trong các xu hướng web trước đây (cuộn ngang, cuộn vô hạn, điều khiển bàn phím, cử chỉ...). Một số nhà thiết kế loại bỏ hoàn toàn các menu, mời khách truy cập sử dụng/có được trải nghiệm nghiên cứu trang web “nâng cao”. Việc điều chỉnh các trang web cho thiết bị di động và máy tính bảng cũng tự thay đổi UX/giao diện và mở ra triển vọng cho việc cuộn ngang.

Trang web không có menu điều hướng - bạn được yêu cầu cuộn để tìm nội dung, bạn có thể cuộn bằng con trỏ

Đọc thêm: Các trang web độc đáo và khác thường nhất

Thực đơn. Chúng tôi đam mê Drop-Down đến mức thậm chí không xem xét một giải pháp thay thế đơn giản cho điều hướng Pop-UP. Trong ví dụ bên dưới, menu bật lên ở giữa màn hình. Nhìn chung, các trang web có đủ không gian để tạo điều hướng dễ tiếp cận và nổi bật mà không cần bất kỳ danh sách thả xuống nào.

Điều hướng bật lên được sử dụng khi di chuột qua một trong 6 phần sẽ thay đổi nền của toàn bộ menu toàn màn hình

3. Thẻ - nguồn cảm hứng từ thiết bị điện tử đeo trên người

Giống như người dùng di động đã thay đổi thiết kế của các trang web hiện đại, các thiết bị đeo được đang bắt đầu ảnh hưởng đến thiết kế của họ. Với hàng chục triệu thiết bị đeo được bán ra kể từ năm 2015, người dùng cũng đã học được cách đánh giá cao sự xuất sắc hợp lý trong các lĩnh vực khác. Bằng cách tiết kiệm không gian trên màn hình, thiết bị điện tử có thể đeo sẽ hướng dẫn các nhà thiết kế web đơn giản hóa mọi thứ một cách trực quan và các nhà tiếp thị sẽ học cách chỉ định và chính thức hóa hơn nữa các nhiệm vụ của trang web. Các quy tắc chính của thiết kế web dựa trên nguyên tắc vùng chứa: phong cách, ngắn gọn và không cần nỗ lực nhiều - hệ tư tưởng “càng ít càng tốt” không giới hạn ở kích thước màn hình.

Thuận lợi:

  • Thiết kế UX được tối ưu hóa
  • Ít mơ hồ và phiền nhiễu hơn
  • Chủ nghĩa tối giản tăng tốc độ tải trang web

Thực tiễn tốt nhất:

Ô, nguyên tắc chứa và khối trong cấu trúc của trang web. Xu hướng này đã được duy trì trong hơn một năm (2014 - 2016...) và có thể năm 2017 sẽ tiếp tục xu hướng này. Các mẫu tiện ích mới và phổ biến hiện nay (kính thông minh, đồng hồ, vòng tay, kẹp quần áo, cảm biến tích hợp trong quần áo...) được sản xuất theo phong cách sơn mài và không kém phần kín đáo cung cấp thông tin cho người dùng. Đúng như dự đoán, công nghệ thiết bị đeo sẽ thổi sức sống mới vào các giao diện xếp lớp dễ đọc. Mô hình vùng chứa của giao diện người dùng thẻ được thiết kế khép kín và có tỷ lệ phù hợp với màn hình lớn hơn.

Biểu tượng SVG lớn. Biểu tượng cần có khả năng mở rộng, đơn giản - để nó trông trên các thiết bị HD và được chú ý chỉ bằng một cái nhìn thoáng qua.

Bảng màu nghiêm ngặt. Cách phối màu thời trang giờ đây đang quay trở lại những điều cơ bản. Thiết kế website hai màu (duotone) hay thiết kế đen trắng có thêm một màu đang ngày càng trở nên phổ biến.

Đủ khoảng trắng.Để đảm bảo tính nhất quán giữa các định dạng khác nhau, “air” được thêm vào các trang của trang web. Điều này được gọi là sự tối giản cực độ. Ngoài tính thẩm mỹ: bầu không khí tinh tế-giản dị, tiết kiệm không gian trên trang, cơ hội thu hút sự chú ý, v.v.


4. Thiết kế Vật liệu Lite (MDL)

Đọc thêm: Những thiết kế cửa hàng trực tuyến tốt nhất theo phong cách Flat và Material

Material Design Lightweight (MDL) của Google cung cấp một thư viện các mẫu, bộ thành phần (thẻ, biểu mẫu, biểu tượng, nút...) và là bản giải thích danh mục các thành phần Polymer làm sẵn.

Với các hướng dẫn về các mẫu có sẵn và các thành phần nguồn mở, MDL giúp thiết kế vật liệu có thể triển khai trên bất kỳ trang web hoặc ứng dụng nào. Các lớp giả 3D, bóng đổ, hình động là các thành phần giao diện của thiết kế web cổ điển mang lại khả năng sử dụng gần hơn với việc mô phỏng thế giới thực.

Thuận lợi:

  • MDL khác biệt tốt hơn so với thiết kế của các trang web truyền thống, trong khi vẫn duy trì những lợi ích ban đầu của thiết kế web cổ điển
  • Dễ hiểu nhờ giao diện rõ ràng, chân thực
  • Tính khả dụng đa nền tảng cho tất cả các thiết bị (không ràng buộc với JS)

Thực tiễn tốt nhất:

Cơ học của thế giới vật chất. Hãy coi các yếu tố phong cách của MDL như thể chúng là những vật thể vật lý thực sự, cụ thể là:

  • Bóng sẽ xuất hiện như thể được tạo bởi nguồn sáng tự nhiên
  • Chọn kích thước và độ dày của các phần tử như đối với vật thật - phù hợp với các định luật vật lý
  • Chuyển động – phản ứng với tương tác của người dùng

Tùy chỉnh. Tận dụng thư viện thành phần MDL bằng cách chọn những gì bạn cần theo sự kết hợp phù hợp.

Bảng màu phẳng. Chất liệu kiểu MDL phù hợp nhất với các màu phẳng – sự kết hợp sáng và đậm của chúng. Thông thường, một màu chính và một màu nhấn được chọn. Nó cũng phù hợp với tính thẩm mỹ tối giản được tán thành bởi hai xu hướng trước đó.

Đọc thêm: Màu sắc trong thiết kế Web: xu hướng màu sắc (màu sắc tươi sáng)

5. Màu sắc cổ điển

Trong vài năm qua, web đã bị thống trị bởi tông màu xám: nền màu xám nhạt thay vì màu trắng, văn bản màu xám đá phiến thay vì màu đen và bóng màu xám tinh tế tạo ra chiều sâu trong phong cách thiết kế vật liệu. Năm 2017, những gam màu cổ điển tuyệt đẹp cuối cùng đã quay trở lại.

Cửa hàng giày trực tuyến sử dụng những màu trầm như nâu đỏ. Thiết kế màu sắc mô phỏng phong cách cổ điển với những bức ảnh cũ nhấn mạnh chất lượng cao của sản phẩm (theo truyền thống tốt nhất của thương hiệu gia đình)