Xu hướng thiết kế web. Các biểu tượng là yếu tố trang trí chính. Phông chữ lớn và đậm

Ban đầu dự định đăng bản dịch một bài viết bằng tiếng Anh về xu hướng thiết kế web năm 2017, nhưng sau khi nghiên cứu, nguồn khác nhau, quyết định thay đổi một chút ý tưởng của tờ ghi chú này. Đó là tất cả về những gì tháng trước Khá nhiều tài liệu chuyên đề về những cái hiện đại đã được xuất bản trên Internet, và như người ta nói, có nhiều ý kiến ​​​​khác nhau. Một mặt, điều này là hợp lý bởi vì Các tác giả khác nhau có những giả định riêng về những gì sẽ phù hợp với các trang web trong năm nay. Mặt khác, những dự báo này rất chủ quan.

Nói chung, chúng tôi đã thu thập tất cả các tùy chọn và biên soạn một cái gì đó giống như bản tổng hợp các xu hướng thiết kế web năm 2017. Hãy bắt đầu với những xu hướng phổ biến nhất được nhiều chuyên gia ghi nhận và dần dần chuyển sang những ý tưởng “độc đáo” hơn. Nhân tiện, nếu bạn có bổ sung và suy nghĩ về chủ đề này, vui lòng chia sẻ chúng trong phần bình luận. Ngoài ra, chúng tôi khuyên bạn nên đọc về - cũng là một bài viết hữu ích.

1. Thiết kế “trừu tượng” không chuẩn mực

Lưới cho các trang web được coi là đã được thiết lập phần nào Khái niệm cơ bản, giúp tổ chức hợp lý không gian của trang web. Đồng thời, cô đẩy các nhà thiết kế đặc biệt sáng tạo vào những giới hạn nhất định. Tuy nhiên, luôn có những kẻ liều lĩnh tạo ra những giải pháp độc đáo không bị kiểm soát bởi bất kỳ ranh giới cứng nhắc nào. Những tác phẩm như vậy thường được tìm thấy trong các chủ đề hình ảnh và sáng tạo, nhưng vào năm 2017, xu hướng thiết kế trang web này sẽ lan rộng sang các dự án nghiêm ngặt của công ty.

Sự sắp xếp không chuẩn của các phần tử mang lại nhiều hơn cơ hội thú vị: Cho phép bạn sử dụng toàn bộ không gian trang, thêm các lớp đối tượng và tạo cảm giác về chiều sâu cho bố cục của bạn. Bạn sẽ có thể triển khai một thiết kế gây ấn tượng với người dùng ngay cả khi không có màu sắc sặc sỡ video toàn màn hình hoặc hoạt hình. Với hàng trăm nghìn bố cục cổ điển trên web, các thiết kế trừu tượng, độc đáo hầu như sẽ luôn nổi bật và thu hút sự chú ý của khách truy cập trang web (như yếu tố WOW). Và bạn cần phải sử dụng điều này!

2. Tùy chọn điều hướng mới

Đối với một dự án không chuẩn - một menu nâng cao. Ngày nay bạn không cần phải đặt một đường ngang trong tiêu đề. Do sự phổ biến ngày càng tăng bố cục thích ứng Nhiều người dùng đã quen với biểu tượng menu Hamburger (gồm ba sọc ngang), biểu tượng này ngày càng xuất hiện nhiều trên phiên bản thông thường các trang web. Ranh giới giữa thiết kế di động và máy tính để bàn đang dần mờ đi. Năm nay chúng ta sẽ thấy rất nhiều thử nghiệm về vị trí và hình dạng của menu - điều này có thể trở thành một trong những xu hướng thiết kế web chính của năm 2017.

Các giải pháp như vậy cho phép bạn sử dụng không gian trang theo một cách khác. Ngoài việc cuộn xuống và sang một bên một cách trực quan, cũng như được ghim khối dọc Các yếu tố trượt ẩn khác nhau sẽ phổ biến trong điều hướng. Với sự trợ giúp của họ, bạn có thể đặt tất cả các mục menu con cần thiết trên một màn hình. Theo một cách nào đó, điều này làm cho việc điều hướng trang web trở nên chi tiết và hữu ích hơn cho người dùng. Điều quan trọng duy nhất là họ có thể giải quyết vấn đề của bạn giải pháp không chuẩn. Hãy chắc chắn để kiểm tra hiệu quả của nó trong thực tế.

3. Thiết kế thiệp

Thẻ ở xa Xu hướng mới trong thiết kế trang web, nhưng vào năm 2017 nó sẽ tiếp tục phù hợp. Quyết định này trình bày thông tin một cách hiệu quả cho nền tảng khác nhau: bắt đầu bằng ứng dụng di động và kết thúc bằng việc xem trên màn hình TV lớn. Định dạng tổ chức dữ liệu này sẽ giúp người dùng tập trung mọi thông tin vào các đối tượng một cách thuận tiện nhất có thể.

Cách tiếp cận này được nhiều dự án phổ biến trên mạng sử dụng: Facebook, Pinterest, Netflix. Tùy chọn cuối cùng nói chung là một ví dụ tuyệt vời. thực hiện thành công thẻ trong một thiết kế kết hợp sự tối giản, điều hướng và hiệu quả.

4. Chia bố cục với màn hình chia thành 2 phần

Năm nay chúng ta sẽ thấy nhiều bố cục hơn với khả năng hiển thị thông tin chia đôi trên màn hình. Xu hướng thiết kế web này sẽ đặc biệt sôi động trong năm 2017 trên trang chủ và. Nhìn bề ngoài, việc triển khai trông tuyệt vời trong các thiết kế tối giản với hình nền hoặc hình ảnh tương phản.

Nhà thiết kế sẽ có thể sử dụng các kỹ thuật thiết kế trực quan khác nhau trong các khối liền kề trong một dự án web. Và kết quả sẽ trông tự nhiên. Nhân tiện, bố cục phân chia hoạt động tốt cho Kêu gọi hành động trên trang đích. Thêm chi tiết về phương pháp.

5. Kiểu chữ lớn và độc đáo

Tôi nhớ lại vào năm 2009, chúng tôi đã công bố việc sử dụng phông chữ lớn là một trong những xu hướng thiết kế trang web đầy hứa hẹn. Điều tương tự có thể sẽ xảy ra vào năm 2017 (ít nhất là hầu hết các nhà thiết kế đều đề cập đến nó). Lý do chính tất nhiên là để thu hút sự chú ý: ai đó cần làm nổi bật một số đồ vật nhất định trên trang, ai đó muốn giải thích cách sử dụng điều hướng một cách chính xác, v.v. Bất chấp điều đó, kiểu chữ ngày càng dày hơn và lớn hơn. Khi thực hiện, bạn có thể thấy các bài viết trên blog hữu ích và hữu ích.

Đồng thời, nhiều trang web đang loại bỏ tiêu chuẩn phông chữ hệ thống, cho phép bạn đa dạng hóa đáng kể diện mạo của chúng. Với số lượng ngày càng tăng của các dịch vụ phông chữ web gốc miễn phí (Google Fonts, Typekit), mức độ phổ biến của chúng sẽ còn tăng hơn nữa. Có vẻ như năm 2017 chúng ta cũng sẽ chứng kiến ​​những thử nghiệm trong lĩnh vực kiểu chữ trang web. Điều chính trong vấn đề này là không lạm dụng nó - hãy nhớ rằng văn bản phải dễ đọc. Nhân tiện, nếu bạn làm việc với WordPress, thì bài viết Cách kết nối phông chữ trong WordPress (bao gồm cả Google Fonts) có thể hữu ích với bạn.

6. Độ dốc và màu sắc tươi sáng

Một xu hướng thiết kế web khác của năm 2017 là sử dụng màu sáng bảng màu cho độ dốc (và hơn thế nữa). Sự khởi đầu của kỷ nguyên thiết kế phẳng được đưa lên mạng tính năng thú vị, nhưng bạn cần phải làm việc theo phong cách này thật cẩn thận, bởi vì nó có thể góp phần vào việc cá nhân hóa trang web. Để giải quyết vấn đề, một số chuyên gia đã bắt đầu thử nghiệm màu sáng và các giải pháp gradient. Năm nay, xu hướng này sẽ tiếp tục phát triển và không chỉ trên Web (chắc hẳn mọi người đều đã chú ý đến bản cập nhật gần đây của Instagram).

Xu hướng này có thể được sử dụng không chỉ cho nền. Một kỹ thuật phổ biến là tạo sự chuyển tiếp giữa hai màu và phủ chúng lên ảnh. Điều này cho phép bạn làm cho bức ảnh trở nên thú vị hơn và nhìn chung hiệu ứng trông khác thường. Màu sắc tươi sáng tạo thêm chiều sâu, tính năng động và năng lượng dễ chịu cho thiết kế. Họ có thể làm nổi bật một trang và các thành phần trên đó rất tốt.

7. Hoạt ảnh và tương tác vi mô

Bản thân hoạt ảnh trên trang web không phải là mới, nhưng các nhà thiết kế đang học hỏi hàng năm để triển khai nó đẹp hơn và hiệu quả hơn. Người vị thành niên hiệu ứng hình ảnh cho hình ảnh/đồ vật/nội dung không chỉ có thể làm cho dự án của bạn trở nên sống động mà còn thêm vào công cụ bổ sung nhận xét với người dùng. Trong giao diện UI/UX hiện đại, nhiều tương tác vi mô khác nhau biến các quy trình thông thường thành những cách thú vị hơn để lấy thông tin + cho phép người dùng xem và hiểu cách hoạt động của thành phần trang này hoặc thành phần trang kia (menu, điều hướng, nút).

8. Hiệu ứng thị sai

Một xu hướng thiết kế trang web quen thuộc trước đây trong năm 2017 sẽ mở ra một khía cạnh mới. Bản thân Thị sai được thực hiện do tốc độ chuyển động của nền và tiền cảnh khác nhau khi cuộn, điều này tạo ra ấn tượng về chiều sâu và tính năng động của hình ảnh. Năm nay chúng ta có thể mong đợi nhiều hơn nữa công việc phức tạp sử dụng nhiều lớp, hướng chuyển động khác nhau và áp dụng hiệu ứng. Hãy sử dụng kỹ thuật này một cách cẩn thận để không làm người dùng mất tập trung vào nội dung của trang web. Dưới đây bạn sẽ tìm thấy hình ảnh với các liên kết đến các trang nguồn.

9. Thực tế ảo

VR là một trong những chủ đề phù hợp nhất hiện nay, mặc dù thực tế là tình hình thực tế trong lĩnh vực này kém lạc quan hơn nhiều dự báo. Tất nhiên, tính năng này không thể không ảnh hưởng đến các nhà thiết kế. Trong một số bố cục bạn có thể tìm thấy kỹ thuật khác nhau, điều này sẽ tạo ra “hiệu ứng hiện diện” cho người dùng: video và ảnh toàn cảnh 360 độ, chèn video “như trong phim”, trò chơi, v.v.

10. Thiết kế xúc giác, tự nhiên

Xu hướng này kết hợp hai hướng cùng một lúc - màu sắc tự nhiên và thiết kế xúc giác. Nhiệt tình quá mức phẳng các giải pháp đã biến nhiều dự án web thành các bố cục Bootstrap đơn điệu, vô nghĩa. Giờ đây, một số nhà thiết kế đang cố gắng hướng tới các giải pháp tự nhiên hơn, chẳng hạn như họ đăng ảnh và mô hình 3D thực tế để người dùng có cảm giác có thể chạm và chạm vào các vật thể trên trang web. Họ cũng sử dụng các vật liệu tự nhiên làm kết cấu, hình minh họa và hình nền + sắc thái tự nhiên (xanh lá cây, nâu, xám, kim loại trung tính).

11. Xu hướng thiết kế web khác năm 2017

Trong quá trình nghiên cứu các xu hướng thiết kế website chính của năm 2017, chúng tôi đã gặp phải nhiều ý kiến ​​​​khác nhau. Với nhiều nhất những lựa chọn có ý nghĩa Bạn đã đọc nó rồi và bây giờ hãy nói ngắn gọn về một số giả định hóa ra lại ít phổ biến hơn. Nhân tiện, một số trong số chúng đã được sử dụng tích cực trước đó, nhưng năm nay xu hướng này sẽ tiếp tục.

Bạn có thể làm cho nền trở nên ấn tượng hơn nữa bằng cách thêm hoạt ảnh hoặc video. Nhờ YouTube và các dự án tương tự, nội dung video hiện nay rất phổ biến, bạn có thể sử dụng tính năng này trên trang web của mình. Nếu thêm âm thanh thì mặc định không bật, người dùng phải muốn tự mình làm.

Hình dạng hình học

Nếu bạn nhìn kỹ vào ảnh chụp màn hình của các dự án web ở trên, bạn sẽ nhận thấy việc sử dụng các hình dạng hình học khác nhau trong nhiều dự án đó. Đây thường là các hình vuông/hình chữ nhật, nhưng cũng có thể tìm thấy các đường cong, hình tam giác và hình tròn. Các khối như vậy có thể chứa nội dung hoặc được sử dụng để làm nổi bật nền.

Hình minh họa độc đáo

Chúng tôi không tìm thấy nhiều tác phẩm gốc trong việc lựa chọn, nhưng xu hướng thiết kế web này vẫn sẽ phù hợp trong năm 2017. Đầu tiên, hình minh họa mang lại dấu ấn cá nhân cho dự án của bạn (đây là một điểm cộng lớn trong thời đại bố cục phẳng). Thứ hai, phương pháp này hoạt động tốt với kiểu chữ tùy chỉnh, cho phép bạn tạo các bố cục độc đáo hơn nữa. Bạn cũng có thể bao gồm các xu hướng sử dụng ở đây. ảnh thật trong thiết kế/nội dung thay vì hình ảnh từ ảnh có sẵn - tính độc đáo luôn được yêu cầu.

Tổng cộng

Chúng tôi đã xem xét 10 xu hướng thiết kế web hàng đầu cho năm 2017, hiện sẽ được các nhà thiết kế sử dụng tích cực nhất trong công việc của họ. Trên thực tế, không có nhiều kỹ thuật nguyên bản; một phần đáng kể các xu hướng được lặp lại từ những năm trước: thẻ, nền sáng, thị sai, kiểu chữ lớn, v.v. Về phông chữ và điều hướng, có thể chúng ta sẽ thấy các tùy chọn nguyên bản trong năm nay. Ngoài vấn đề thực tế ảo, có thể nói xu hướng chung là hướng tới sự đơn giản hóa vẻ bề ngoài dự án trực tuyến vẫn tồn tại, các nhà thiết kế chỉ tiếp tục tìm kiếm những giải pháp hiệu quả nhất và những cách thú vị việc thực hiện nó.

Mỗi năm nhịp sống tăng lên, kéo theo đó là lượng thông tin ngày càng tăng. Người dùng ngày càng dành ít thời gian hơn cho việc nghiên cứu các trang web, trong khi số lượng yêu cầu đặt ra cho chúng ngày càng tăng. Các công cụ thu hút sự chú ý từng đứng đầu cách đây một năm đang mất dần hiệu quả. Để bắt kịp xu hướng và tạo ra các trang web chìa khóa trao tay thu hút khách hàng, các nhà thiết kế web nên tính đến các xu hướng chính của năm 2017 khi làm việc. Họ sẽ như thế nào? Hãy nhìn vào nó trong bài viết này.

Xu hướng thiết kế website 2017:

    • Trang web đơn

Xu hướng này đang trở nên phổ biến hơn nhờ các thiết bị di động. Tất cả thông tin được đặt trên một trang, thuận tiện để cuộn qua trên điện thoại hoặc máy tính bảng của bạn mà không cần nhấp chuột.

    • Cuộn

Vẫn là một giải pháp tuyệt vời cho các trang web có cùng loại nội dung. Nhưng đừng quên rằng nó làm tăng thêm sức nặng cho trang và làm phức tạp việc tìm kiếm giữa các tài liệu đã được đề cập, vì vậy không nên tạo các cửa hàng trực tuyến. Để tối ưu hóa công việc, bạn có thể sử dụng kết hợp điều hướng và cuộn cổ điển.

    • thiết kế tối giản
Lớn ảnh chất lượng cao, nền hoặc mẫu phẳng sử dụng văn bản tối thiểu với độ cân bằng phù hợp sẽ mang lại cảm giác ngắn gọn và thoáng đãng cho trang web. Điều chính ở đây là không lạm dụng nó.

    • Màu sáng

Sự phổ biến của màu sắc tươi sáng ngày càng tăng. Sử dụng nhiều bảng màu và sắc thái hơn nếu bạn muốn theo kịp thời trang. Để tạo sự tự do về không gian và cảm giác thoáng đãng, bạn có thể sử dụng các sắc thái tương phản. Các sắc thái và độ chuyển màu khác nhau sẽ giúp bạn phân biệt rõ hơn nội dung mà chúng làm nổi bật.

    • kiểu chữ

Phông chữ vẫn mạnh yếu tố đồ họa và đóng một trong những vai trò chính trong việc tạo nên tính thẩm mỹ cho trang web, thay thế các yếu tố khác. Một dòng tiêu đề hay, đầy màu sắc cũng trông tuyệt vời trên máy tính bảng và điện thoại thông minh và giúp truyền tải thông điệp đầy đủ thông tin đến người dùng.

    • Hoạt hình

Các yếu tố hoạt hình nhỏ và thiết kế tương tác thu hút sự chú ý, làm cho trang web thú vị hơn và cải thiện sự tương tác của người dùng với nó. Và sự phát triển của các thư viện JavaScript giúp việc tạo các trang như vậy trở nên dễ dàng hơn.

    • Băng hình

Ảnh nền màn ảnh rộng đang được thay thế bằng video màn ảnh rộng. Giống như hoạt ảnh, nó không chỉ tạo ra sự quan tâm từ phía người dùng mà còn cho phép bạn làm cho trang trở nên sống động. Điều chính ở đây là sử dụng hình ảnh chất lượng cao, tương ứng với phong cách chung của trang web. Video không chỉ giúp thu hút sự chú ý của người xem mà còn giúp truyền tải thông điệp mang tính thông tin đến người xem, chẳng hạn như nói về công ty.

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 chúng ta cuộc sống trực tuyến sẽ được đơn giản hóa bằng 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 thẳng trí óc chút nào. 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 ra Chuyển đổi CSS và hình ảnh động để đảm bảo dễ sử dụng. Cuối cùng Phiên bản chuyển động Giao diện người dùng được trang bị hệ thống dịch vụ nhóm sinh động, linh hoạt mẫu CSS, có khả năng mở rộng để chuyển đổi hoàn toàn và có thể hoạt động với tất cả các loại hoạt ảnh Thư viện 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ó , để đảm bảo bạn 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 thứ 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 ở các công ty lớn, chúng thuận tiện hơn khi sử dụng và tìm kiếm thông tin ở đó dễ dàng hơn, cần thiết cho người dùng người đã truy cập trang web với mục đích cụ thể.

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à mặt 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. 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 thường được sử dụng 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õ: Cái này Cách tốt nhất thêm các lớp thể tích vào trang web , 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 xu hướng nào sẽ đến trong năm 2017. 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 bởi 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?

” 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 thời trang là thiết kế phẳng“giết chết” 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ười thiết kế ngày càng chú trọng hơn khi 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) Nó có nhiều lợi ích hơn dành cho các nhà thiết kế và phát triển web hơn 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 chính xác 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 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 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?

Đường nét, màu sắc, ánh sáng và bóng râm, không gian và hình khối là những yếu tố tạo nên một bức tranh. Mỗi thời đại có xu hướng riêng trong việc đại diện cho thế giới. Các nhà thiết kế web đều là những nghệ sĩ giống nhau, chỉ có điều họ sáng tạo theo định dạng kỹ thuật số. Và nếu xu hướng nghệ thuật không thay đổi thường xuyên, thì thiết kế web sẽ thay đổi theo từng năm. Chúng tôi sẽ cố gắng biên soạn một hướng dẫn về xu hướng thiết kế đồ họa và dự đoán các trang web sẽ thay đổi như thế nào trong năm 2017. Bạn có thể đọc về xu hướng thiết kế web năm 2018.

Vì vậy, 14 hướng tới một giao diện thời trang:

1. Tập trung vào nội dung

Điều gì quan trọng hơn: nội dung hay thiết kế trang. Câu trả lời rất đơn giản - thiết kế phải trình bày nội dung một cách thuận lợi. Các nhà thiết kế dịch vụ WebFlow (người xây dựng trang web) đề xuất chấm dứt cuộc đấu tranh giành quyền tối cao vào năm 2017 bằng cách ưu tiên nội dung. Người dùng truy cập trang web để tìm câu trả lời cho truy vấn, cho dù đó là sản phẩm, dịch vụ hay bài viết hữu ích. Nhiệm vụ của người thiết kế web là trình bày nội dung một cách thuận tiện nhất có thể cho một người.

2. Tránh “hamburger”

Biểu tượng menu nhỏ và tiện lợi trong hình thức của ba Dải đất có biệt danh là “hamburger” vì trông giống với các lớp thức ăn nhanh, đang dần mất đi sự phổ biến. Nó được sử dụng quá thường xuyên. Trong năm 2017, các thử nghiệm về điều hướng và sắp xếp khác thường các phần menu, chẳng hạn như trên khung xung quanh trang web, được khuyến khích.

3. “Thiết kế dựa trên thẻ”

Thiết kế web thẻ đã nhanh chóng chinh phục Internet. Ưu điểm của phương pháp thiết kế này:

  • vị trí thuận tiện của các khối trên trang web;
  • trình bày nội dung thuận lợi về mặt trực quan;
  • khả năng thích ứng cho các thiết bị di động.

Đối với câu hỏi: tồn tại hay không tồn tại thiết kế thẻ năm 2017 chưa có câu trả lời thống nhất. Nó sẽ được sử dụng vì nó đã chứng minh được tính hiệu quả của nó.

Nhưng thiết kế khối đang dần mất đi vị thế được yêu thích do tính chất “lộn xộn” của giao diện như vậy. Chủ nghĩa tối giản và thiết kế phẳng vẫn được ưa chuộng. Các yếu tố điều hướng rõ ràng và thuận tiện mà không cần thao tác không cần thiết, việc chỉ sử dụng một số màu sắc trong thiết kế là những kỹ thuật đã được thử nghiệm theo thời gian.

4. Lưới bị hỏng

Xu hướng này khuyến khích các nhà thiết kế suy nghĩ sáng tạo hơn. Hãy thử sử dụng lưới không chuẩn trên trang web - để các khối "chồng lên nhau" một chút và để các văn bản vượt ra ngoài ranh giới thông thường.

Sự độc đáo luôn có trong thời trang. Bố cục tùy chỉnh và những cách tiếp cận mới thiết kế đồ họa Các nhà thiết kế phương Tây đã thử nó rồi. Các giải pháp táo bạo nhất có thể được triển khai bằng cách sử dụng các mô-đun Flexbox và CSS Grid.

5. Phông chữ khác thường hấp dẫn - kiểu chữ thiên vị

Phông chữ lớn đã là một trong những yếu tố chính của thiết kế web trong vài ngày nay. Xu hướng này sẽ chỉ mạnh lên trong năm mới. Xu hướng là các dòng chữ viết tay và các biểu tượng được cách điệu thủ công.

Một bổ sung tuyệt vời cho thiết kế trang web sẽ là đồ họa phông chữ (nếu thích hợp).

6. Thiết kế đáp ứng

Tính linh hoạt của trang web dành cho các thiết bị có màn hình lớn và nhỏ không còn là xu hướng mới. Cách tiếp cận “di động đầu tiên” vẫn còn phù hợp trong năm 2017. Ngoài khả năng thích ứng với các tiện ích di động, trong thời gian tới các trang web sẽ thích ứng với một người dùng cụ thể tùy thuộc vào:

  • tuổi;
  • kỹ năng (năng lực).

Ví dụ: phông chữ, độ sáng của màu sắc, điều hướng sẽ thay đổi tùy thuộc vào người đã truy cập trang web: người hưu trí, trẻ mẫu giáo, người mới sử dụng Internet hay người dùng tự tin. Điều này sẽ trở nên khả thi nhờ sự phát triển của siêu dữ liệu.

7. Màu sắc

Màu sắc đơn điệu phong phú, sắc thái và bán sắc của chúng đã chuyển từ xu hướng của năm ngoái sang năm nay. Các nhà thiết kế tiếp tục sử dụng gradient và tạo ra những hiệu ứng chuyển tiếp thú vị. Nhân tiện, nếu bạn không thể quyết định lựa chọn màu sắc, hãy xem xét kỹ hơn về "Greenery" thời trang.

Nó giống như cây xanh mùa xuân tươi mát và sẽ giúp thêm điểm nhấn màu sắc cho trang web. Các chuyên gia từ Viện màu sắc Pantone đã gọi nó là màu của năm 2017.

8. Đồ họa thông tin

Kỹ thuật này không mới nhưng hiệu quả. Với sự trợ giúp của đồ họa thông tin, mọi số liệu thống kê trên trang web đều được chuyển thành một bức tranh trực quan dễ hiểu với nội dung thú vị.

9. Ảnh động

Các trang tĩnh thật nhàm chán. Sẽ thú vị hơn nhiều khi người dùng “đi dạo” xung quanh một trang web có các biểu tượng hoạt hình. Thu hút sự chú ý bằng hoạt ảnh đến những yếu tố có lợi cho bạn, chẳng hạn như nút “Mua”.

Sử dụng các tương tác vi mô để người dùng thấy phản hồi khi nhấp chuột, chuyển tiếp và xác nhận trên trang web. Khi đó các hành động máy móc sẽ trở nên tương tác và hấp dẫn.

10. Ảnh và video nền

Hoạt ảnh đã tốt, nhưng ảnh và video nền định dạng rộng dành cho thiết kế trang web thậm chí còn tốt hơn. Video bổ sung tính năng động cho tài nguyên web và cho phép bạn đưa người dùng vào một câu chuyện nhất định, xem “hậu trường” về các quy trình nội bộ của một công ty hoặc thương hiệu. Kể chuyện trong thiết kế web vẫn còn phù hợp. Ảnh - minh họa, tạo không khí.

Nếu bạn cảm thấy mệt mỏi với những yếu tố này, hãy sử dụng đoạn phim (sự cộng sinh giữa ảnh và video). Trong ảnh như vậy, chỉ có một yếu tố liên tục chuyển động mượt mà, như thể một phần của bức ảnh trở nên sống động.

11. Hãy ngừng “chứng khoán”!

Những bức ảnh stock được tìm thấy ở mọi nơi trên Internet và điều này có thể khiến một trang web mất đi cá tính. Năm 2017, web ưu tiên những hình ảnh độc đáo.

12. Cuộn +

Việc cuộn đã trở nên phổ biến nhờ tiện ích di động, từ đó sẽ thuận tiện hơn khi “cuộn qua”. Nhưng nhiều người tỏ ra khó chịu vì không thể vào được cuối trang. Trong số các xu hướng của năm 2017 là sự kết hợp giữa cuộn và điều hướng trang. Cho phép người dùng chọn cách xem nội dung.

13. Di chuyển thị sai

Năm 2017, kỹ thuật thị sai (chuyển động trên tốc độ khác nhau nền và tiền cảnh) sẽ có một luồng gió mới - sự phát triển của các kỹ thuật nhiều lớp phức tạp hơn. Thử nghiệm thị sai, thu hút người truy cập trang web yếu tố tương tác. Nhưng đừng lạm dụng nó để không gây nhầm lẫn cho người dùng.

14. Ảnh toàn cảnh 3D

Ảnh toàn cảnh 360° là một cách khác để giới thiệu sản phẩm một cách hiệu quả cho người dùng hoặc “mang đến” cho khách truy cập cơ hội có mặt ảo ở một nơi nào đó, chẳng hạn như trong văn phòng công ty hoặc khách sạn.

Đây là những xu hướng thiết kế web chính cho năm 2017. Nhưng đừng chỉ tập trung vào chúng. Hãy thử nghiệm, học hỏi từ những đồng nghiệp có kinh nghiệm và khi đó trang web của bạn sẽ trở nên độc đáo và dễ hiểu đối với tất cả người dùng. Và chúng tôi luôn sẵn sàng cho bạn trong việc này!