20 xu hướng thiết kế web đang nổi lên trong năm 2017
Một năm nữa đã trôi qua và các nhà thiết kế đang hướng tới tương lai. Nhiều xu hướng thiết kế đầy hứa hẹn chắc chắn sẽ nổ ra vào năm 2017. Năm ngoái tôi đã bao quát các xu hướng thiết kế hàng đầu năm 2016 và chúng ta đã thấy rất nhiều thay đổi kể từ đó.
Vì vậy, đối với bài đăng này, tôi đã chọn 20 xu hướng hàng đầu mà tôi đã nhận thấy đạt được lực kéo trong năm 2017. Những xu hướng thiết kế có thể áp dụng cho bất kỳ trang web, vì vậy hãy chú ý đến những kỹ thuật này khi chúng ta chuyển qua năm 2017 và hơn thế nữa.
1. “Nổi bật trong” danh hiệu
Các công ty khởi nghiệp, blog, dự án SaaS và thậm chí các doanh nghiệp nhỏ hiện đang sử dụng “như đặc trưng trong” danh hiệu trên trang web của họ. Những huy hiệu này thường liên kết đến các bài viết trên blog chính chẳng hạn như HuffPo, Forbes, CNN, Fox và các cơ quan báo chí khác.
Mục tiêu là để xác nhận một trang web và xây dựng lòng tin với du khách mới. Ai đó dễ dàng tin tưởng một trang web hơn khi họ có thể thấy rằng nó đã được đề cập trong các ấn phẩm có thẩm quyền.
Trong thực tế nhiều blog hàng đầu đánh giá cao sự tiếp xúc, Vì vậy, nó thực sự giúp tất cả mọi người tham gia. Những trang web lớn thường phát hành logo của họ trực tuyến nhưng bạn cũng có thể tìm thấy các PNG hoặc SVG trong suốt chỉ bằng cách đi vòng quanh.
Ngoài ra, bạn nên liên kết trở lại bài viết gốc đề cập đến trang web của bạn. Điều này chứng tỏ rằng bạn đã thực sự được đề cập trên trang web và bạn không chỉ đưa ra yêu cầu bồi thường.
2. In đậm liên kết điều hướng mũ
tôi đã thấy hàng tá menu điều hướng kiểu dáng đẹp Tất cả đều dựa vào cùng một thiết kế. Những liên kết điều hướng khác nhau về phông chữ và kích thước nhưng họ thường có tính năng tương tự, nhu la:
- Tất cả mũ
- In đậm
- Khoảng cách đều nhau
- Căn chỉnh vào góc bên phải
Trang chủ của Zazzle là một ví dụ tuyệt vời. Nhưng bạn có thể tìm thấy điều này trên nhiều trang web khởi nghiệp bởi vì đó là một cách sạch sẽ để chia sẻ liên kết dễ đọc và dễ duyệt.
Tôi chủ yếu liên kết xu hướng này với các doanh nghiệp và công ty khởi nghiệp công nghệ nhưng nó cũng có thể phổ biến trên blog.
Hãy lưu ý về lần tiếp theo bạn thấy xu hướng này bởi vì nó ở khắp mọi nơi. Và tôi hy vọng nó sẽ tiếp tục phát triển tốt trong năm 2017.
3. Blog kiểu tạp chí
Viết blog là một khái niệm thích hợp trở lại vào đầu những năm 2000. Nếu bạn điều hành một blog vào năm 2003 thì đó được coi là một sở thích nhỏ dễ thương. Chỉ trong hơn một thập kỷ, xu hướng đã thay đổi hoàn toàn. Bây giờ blog có thể cung cấp thu nhập toàn thời gian, và họ đang bắt đầu trông rất giống tạp chí kỹ thuật số.
Nhìn lại thiết kế ban đầu của TechCrunch khi nó ra mắt lần đầu tiên vào năm 2006. Trông giống như một blog WordPress chung phải không?
Bây giờ hãy nhìn vào trang chủ hiện tại của Techcrunch trong năm 2017:
Nó không chỉ trông giống như một tạp chí, nó cũng chức năng như một. TechCrunch xuất bản hàng chục (nếu không phải hàng trăm) bài đăng mới mỗi ngày. Chúng là nguồn cung cấp số 1 cho tin tức khởi nghiệp.
Các xu hướng thiết kế theo phong cách tạp chí tạo ra một sự khác biệt lớn. Trang chủ sử dụng một phần câu chuyện nổi bật lớn, mỗi bài có hình thu nhỏ của riêng mình, và các trang bài viết trung tâm xung quanh tiêu đề.
Khi bạn nghĩ về nó, TechCrunch đã không thay đổi nhiều. Nó vẫn “chỉ là một blog”. Nhưng nó được thiết kế và quản lý như một tạp chí, và điều này làm cho tất cả sự khác biệt.
4. Nền video
Tự động phát âm thanh có lẽ là xu hướng khó chịu nhất trên web. Nhưng thật đáng ngạc nhiên, tự động phát video (không có âm thanh) là một xu hướng phát triển nhanh chóng. Bạn có thể thấy điều này trên hàng chục trang web kinh doanh nơi có nền video chiếm toàn bộ màn hình.
Tôi thực sự thích kỹ thuật này khi nó được áp dụng đúng cách. Miễn là video liên quan đến trang web và không cản trở nội dung, Tôi nghĩ rằng đó là một hiệu ứng tuyệt vời để sử dụng trong tiêu đề của bạn.
5. Nút ma
Như chủ nghĩa tối giản tiếp tục ăn vào thiết kế web, nhiều xu hướng mới đang nổi lên. Một trong những xu hướng như vậy là nút tăng không có phần bên trong nhưng có viền ngoài.
Hầu hết thời gian các nút này tương phản với những người khác để thu hút sự chú ý. Bạn có thể thấy điều này trên trang chủ của Instantmojo với nút đăng ký màu xanh lá cây nằm ngay bên cạnh nút ma liên kết đến bản demo trực tiếp.
Các trang web khác đã thông qua một phong cách thiết kế hoàn toàn ma để nút của họ sitewide. Một ví dụ tuyệt vời ở đây là cách bố trí Bootstrap mới.
Tôi nghĩ rằng các nút ma hoạt động trên các trang web nghiêng về chủ nghĩa tối giản. Chúng có thể không phù hợp với mọi trang web, nhưng tôi thấy việc sử dụng chúng tăng lên qua mỗi năm..
6. Chọn tham gia cửa sổ phương thức
Cửa sổ phương thức cực kỳ khó chịu và tôi không thể tưởng tượng bất kỳ người dùng nào cũng thích chúng. Tuy nhiên họ được chứng minh là tăng đăng ký, và các nhà tiếp thị không thể bỏ qua các kỹ thuật làm việc.
Đây là lý do tại sao tôi nghĩ cửa sổ chọn tham gia phương thức sẽ tiếp tục leo năm 2017.
Chúng không phải là thứ tôi thích và tôi không bao giờ thêm chúng vào trang web của mình. Nhưng nếu mục tiêu là tăng số lượng đăng ký thì các cửa sổ phương thức là một cách chắc chắn để khiến mọi thứ trở nên thuận lợi.
Các plugin mới thậm chí có thể mục đích thoát mục đích mà kích hoạt một phương thức Bất cứ khi nào người dùng cố gắng rời khỏi trang web. Các phương thức khác xuất hiện sau x giây hoặc được đặt thành mở khi người dùng cuộn xuống đủ xa.
Bất kể phương thức được kích hoạt như thế nào, chúng được thiết kế như thế nào hoặc bạn cảm thấy thế nào về chúng, tôi nghĩ rằng chúng sẽ xuất hiện trong một thời gian dài.
7. Minh họa & nghệ thuật vector
Với các chương trình thiết kế vector mới như Phác thảo và Nhà thiết kế mối quan hệ, sẽ có một làn sóng các họa sĩ minh họa mới xuất hiện trên web. Thiết kế đồ họa và thiết kế giao diện liên tục hợp nhất với các nhà thiết kế đa ngành hơn bao giờ hết.
Điều này có nghĩa là chúng ta sẽ thấy nhiều biểu tượng tùy chỉnh hơn và minh họa toàn trang trong tương lai gần.
Nhiều họa sĩ minh họa là những nghệ sĩ thực hành nên tôi nghĩ chúng ta sẽ thấy hình nền trang đầy đủ hơn được làm bằng phần mềm vẽ kỹ thuật số, được thể hiện chi tiết như ý tưởng nghệ thuật.
8. Đã sửa lỗi cuộn thanh bên
Làn sóng đầu tiên của thiết kế cố định tập trung vào các thanh điều hướng. Đây là tất cả quá phổ biến đặc biệt là trong các thiết kế đáp ứng trong đó thanh điều hướng cố định tái tạo cảm giác của một ứng dụng di động bản địa.
Nhưng vào năm 2017, tôi hy vọng sẽ thấy thêm một yếu tố dính-thanh bên dính.
Hầu như tất cả các blog lớn đều sử dụng loại thanh bên dính này. Nó giữ nội dung trong tầm nhìn mọi lúc và tăng khả năng người dùng sẽ tương tác với nội dung thanh bên.
Ngoài ra, với hàng tá plugin jQuery miễn phí có thể nhân rộng hiệu ứng thanh bên. Dễ dàng hơn bao giờ hết để thiết lập điều này trên bất kỳ trang web nào.
9. Mục lục trong trang
Một nghiên cứu trường hợp gần đây cho thấy nội dung longform vượt trội so với shortform trong cả bảng xếp hạng và chất lượng giữ chân người dùng. Cấp điều này không phải lúc nào cũng đúng bởi vì một số truy vấn có thể được trả lời nhanh chóng.
Nhưng với nội dung dài hơn trên web, thật tự nhiên khi thấy thêm bảng mục lục được thêm vào bài viết. Bạn sẽ thấy điều này trên các trang web đánh giá dài hoặc trong các bài viết chia thành các mục được liệt kê.
Thêm một bảng nội dung có thể cải thiện trải nghiệm người dùng và giúp chia tay đọc thành khối nhỏ hơn. Mục lục cũng có thể giúp trang web của bạn xếp hạng tốt hơn! Nếu Google thấy trang của bạn có giá trị, bạn có thể có được liên kết nhảy trong kết quả tìm kiếm.
Có thể đúng là ToCs khá khan hiếm ngay bây giờ. Nhưng tôi hy vọng xu hướng này sẽ nổ tung trong năm 2017 và nhiều năm sau.
10. Thiết kế đầy màu sắc tươi sáng
Tôi không chắc xu hướng này xuất hiện từ chủ nghĩa tối giản hay là một phản ứng đối với thiết kế vật liệu của Google. Nhưng tôi đã vấp vào hàng tá trang web sử dụng màu pastel tươi sáng pha trộn với màu sắc rực rỡ khác để tạo ra một vẻ ngoài rất huyền ảo.
Trang chủ của Rentberry là một ví dụ tuyệt vời cũng sử dụng tấn độ dốc. Và nó thậm chí đã nói ở trên “Nổi bật trong” phù hiệu nằm bên dưới! Hai xu hướng trên một trang web.
Bạn sẽ nhận thấy rằng màu sắc không thấm vào toàn bộ trang, và chúng bị tắt tiếng với các sắc thái khác của màu trắng và xám.
Tôi đã thấy đủ những thứ này phối màu rực rỡ tin rằng họ đang gia tăng.
11. Hoạt hình cuộn
Các nhà thiết kế web biết về jacking cuộn và nó khủng khiếp như thế nào. Tuy nhiên đó không phải là ý tôi với tiêu đề “cuộn hình ảnh động”. Tôi đã thấy nhiều trang web bây giờ nội dung animate vào xem khi bạn cuộn qua một phần nhất định của trang.
Xu hướng này chủ yếu là giới hạn các trang chủ khởi nghiệp và các công ty SaaS muốn có một số pizzazz trong thiết kế của họ.
Tôi không thể nói nếu đó là một xu hướng đặc biệt hữu ích. Nó chắc chắn không bắt mắt nhưng tôi không nghĩ rằng nó mang lại nhiều tính thẩm mỹ. Tuy nhiên, đó là một xu hướng dường như đang lan rộng nhanh chóng, và khi sử dụng một cách tiết kiệm nó có thể rất gọn gàng.
12. Ứng dụng một trang (SPA)
Các ứng dụng một trang là các trang web được xây dựng hoàn toàn với các cuộc gọi Ajax. JavaScript lấy nội dung từ máy chủ và tải nó một cách linh hoạt, vậy trang không bao giờ làm mới.
Ví dụ phổ biến là các trang web như Gmail và Facebook. Nhưng vơi thêm công nghệ JS, Tôi nhận thấy ngày càng nhiều SPA phát triển mọi lúc. Heck, thậm chí CodePen có thể được coi là một SPA.
Với các thư viện lối vào mạnh mẽ như React & Aurelia, việc tạo ra một SPA từ đầu năm 2017 sẽ dễ dàng hơn nữa.
13. Thanh tìm kiếm có thể chuyển đổi
Nó từng là các trường tìm kiếm luôn luôn trong tầm nhìn ở đâu đó trên trang web, trong thanh bên hoặc điều hướng. Nhưng gần đây tôi đã nhận thấy rất nhiều lĩnh vực tìm kiếm nhận được ẩn theo mặc định, và phải bật tắt.
Chắc chắn là một xu hướng tiện dụng để tiết kiệm không gian trên trang trong khi vẫn giữ cho tính năng tìm kiếm có thể truy cập. Nếu bạn không chắc chắn nơi đặt biểu mẫu tìm kiếm trong thiết kế mới, bạn có thể cân nhắc sử dụng trường chuyển đổi được liên kết với biểu tượng kính lúp trong điều hướng.
14. Tin nhắn quảng cáo
Không thể phủ nhận sự thật rằng chặn quảng cáo đang gia tăng. Câu hỏi duy nhất là làm thế nào các nhà xuất bản sẽ xử lý xu hướng này. Một số trang web lịch sự thêm tin nhắn vào không gian quảng cáo như Time.com. Trên Hongkiat, bạn sẽ chú ý quảng cáo nội bộ để lấp đầy khoảng trống liên kết đó sâu hơn vào trang web.
Một xu hướng nghiêm trọng mà tôi thấy ngày càng tăng là khối nội dung quảng cáo. Đây là một kỹ thuật để “chặn các trình chặn quảng cáo”. Tính năng này đã có trên nhiều trang web lớn như Business Insider và Forbes. Thật không may, điều này làm tổn thương cả người dùng và nhà xuất bản và tất cả bắt nguồn từ các kỹ thuật quảng cáo chất lượng kém.
Cuối cùng, không quan trọng bạn trách ai hay bạn đứng ở đâu trong cuộc tranh luận chặn quảng cáo. Nhiều người đang cài đặt plugin adblock và tôi đang mong đợi nhiều nhà xuất bản đẩy lùi.
15. Biểu tượng SVG thuần túy
Đồ họa SVG đã thấm vào web nhưng chúng ngày càng lớn hơn. Và tôi có cảm giác rằng năm 2017 sẽ là một năm lớn đối với các SVG trên web.
Bạn có thể tìm thấy hàng ngàn bộ biểu tượng SVG miễn phí trên các trang web như Flaticon nếu bạn biết cách tìm kiếm. Nhưng bạn cũng có thể mã SVG thành HTML, ví dụ bằng cách sử dụng ví dụ này trên CodePen.
Vì vậy, các nhà thiết kế có cách sử dụng SVG và nhà phát triển cũng có cách sử dụng SVG. Hỗ trợ trình duyệt hiện đại có vẻ tốt trên bảng, do đó không có vấn đề với khả năng tương thích. Tất cả những gì cần thiết là đủ các nhà thiết kế để công nhận sức mạnh của SVG và bắt đầu sử dụng chúng!
16. Adobe XD
Adobe đưa ra bản beta đầy đủ của Adobe XD vào năm 2016, và nó đã phát triển nhanh chóng. Nó hiện tại hỗ trợ cả Mac và Windows, và nó trong giai đoạn thử nghiệm trước khi hoàn thành.
Bạn có thể chế giễu ý tưởng về bất kỳ chương trình nào vượt qua Phác thảo nhưng Adobe là công ty phần mềm chính của công việc sáng tạo vì một lý do. Plus Sketch vẫn chỉ dành cho Mac trong khi Adobe là mong muốn hỗ trợ tất cả mọi người.
Tôi tin chắc rằng chúng ta sẽ đọc nhiều hơn về Adobe XD trong năm tới. Nó có thể trở thành phần mềm đi đến thiết kế mockup UI-vì vậy cuối cùng chúng ta có thể sử dụng Photoshop như một công cụ xử lý ảnh (theo dự định).
Với sự phát triển của phần mềm mới, xuất hiện hàng tá hướng dẫn và bộ dụng cụ GUI miễn phí cũng. Bạn có thể tìm thấy rất nhiều phần mềm miễn phí Adobe XD trong Dribbble cùng với hai trang web miễn phí tập trung vào XD mới Designmine và XD Guru.
17. Thêm thực đơn hamburger
Yêu hay ghét nó, hamburger ở đây để ở lại. Có rất nhiều nghiên cứu về khả năng sử dụng tranh luận chống lại các menu ẩn từ xem. Nhưng với một màn hình nhỏ và chỉ có rất nhiều lựa chọn thay thế, hiện tại không có lựa chọn nào tốt hơn.
Biểu tượng Hamburger đang chậm trở thành biểu tượng dễ nhận biết cho các menu điều hướng. Giống như một biểu tượng kính lúp ngụ ý “Tìm kiếm”, biểu tượng hamburger ba thanh sẽ sớm đồng nghĩa với “thực đơn”.
Điều này đã đúng với hầu hết các cá nhân am hiểu công nghệ. Nhưng với mỗi năm trôi qua, nhiều người hơn có được điện thoại thông minh và bắt đầu duyệt web trên thiết bị di động. Và họ đang học liên kết hamburger đó với một menu nav không có kết thúc trong tầm nhìn.
18. Biểu tượng tính năng sản phẩm
Tôi đã viết về xu hướng này trên Treehouse nhưng gần đây không đề cập đến nó. Và đi vào năm 2017 xu hướng này là sẽ rất lớn. Đây có lẽ là cách phổ biến nhất để chia sẻ các tính năng sản phẩm trên trang chủ.
Bạn bắt đầu bằng lập danh sách các tính năng cho sản phẩm của bạn. Sản phẩm có thể là bất cứ thứ gì, từ chương trình SaaS đến chủ đề WordPress hoặc thậm chí là một vật phẩm.
Sau đó, bạn có thể thiết kế biểu tượng tùy chỉnh hoặc là tìm một bộ biểu tượng để đại diện cho các tính năng này. Tốt nhất là tránh các tính năng chung nhu la “đáng tin cậy” hoặc là “Nhanh” bởi vì hầu hết mọi người mong đợi những thứ này.
Thay vào đó, liệt kê các tính năng điều đó thực sự quan trọng. Nếu đó là một chủ đề WP cao cấp có thể liệt kê rằng nó phản hồi, có bao nhiêu vật dụng đi kèm hoặc cách thức hoạt động của menu.
Những biểu tượng tính năng làm việc như hình ảnh giúp đỡ bán từng tính năng. Văn bản một mình là khó tiêu thụ nhưng hình ảnh dễ hơn nhiều hiểu trong nháy mắt.
19. CTA trên màn hình đầu tiên
Kêu gọi hành động theo truyền thống đã được đặt trên một trang web. Nhưng với du khách dành ít thời gian hơn cho các trang web, điều quan trọng là phải có CTA mạnh ngay trên nếp gấp.
Các lệnh gọi hành động này có thể là các nút, biểu mẫu đăng ký hoặc các đầu vào khác để thúc đẩy mọi người hành động chẳng hạn như đăng ký hoặc đọc một bài đăng trên blog.
Tôi không thể cho bạn biết cách thiết kế CTA hoặc cách tối ưu hóa nó cho chuyển đổi. Nhưng tôi có thể nói xu hướng dường như đang đặt những CTA này phía trên nếp gấp và trong tầm nhìn rõ ràng cho tất cả du khách xem.
20. Khu vực nội dung nhỏ hơn
Màn hình đã phát triển lớn đến mức hầu hết các trang web phải đặt chiều rộng tối đa. Việc đọc câu khó hơn nhiều khi chúng rộng 2000px so với chỉ rộng 700px.
Nội dung nhỏ hơn là dễ tiêu thụ hơn, và cuối cùng tạo ra một trải nghiệm tốt hơn trên các trang web nặng nội dung.
Tôi nghĩ rằng nhiều nhà thiết kế đang nhận ra điều này, và sẽ từ từ giảm kích thước của các khu vực nội dung của họ. Tôi thích chiều rộng tối đa 750px nhưng bạn có thể nhỏ tới 600px trở xuống.
Đoạn văn ngắn hơn với ít câu hơn và khu vực nội dung nhỏ hơn Se luôn luôn tăng khả năng đọc. Các ấn phẩm lớn như NY Times có thể đi chệch hướng với các hướng dẫn cấu trúc của riêng họ. Nhưng đối với một blog hoặc trang web kinh doanh đơn giản, xu hướng đang chuyển sang nội dung dài hơn với các đoạn nhỏ hơn và các khu vực nội dung.
Gói lại
Có nhiều xu hướng khác tôi không thể đề cập trong bài viết này, nhưng tôi nghĩ 20 điều này là thú vị nhất. Khi chúng ta tiến tới năm 2017, rõ ràng xu hướng nào đang bùng nổ và xu hướng nào không.
Và nếu bạn có ý tưởng hoặc đề xuất khác cho xu hướng thiết kế sắp tới, vui lòng gửi bình luận bên dưới.
