Thực đơn
trang chủMicrosoft

Xu hướng hiện đại trong phát triển web. Hoạt hình và tương tác vi mô. Các đối tượng hoạt hình, video và tương tác

Chủ sở hữu tốt Trang web liên tục làm việ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 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/

Tiếp theo nguyên tắc cơ bản khả năng sử dụng giúp các 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: văn bản dài không ai đọc. Các trường hợp ngoại lệ bao gồm sách và bài báo. Khi một khách hàng muốn đặt mua một số dịch vụ hoặc sản phẩm, anh ta quan tâm đến 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 đã lớn 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 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ó phù hợp hoặc bạn đọc bài viết và nhận thấy yếu tố lỗi thời- chú ý đến dịch vụ

Hàng năm, số lượng trang web gây ngạc nhiên và thích thú với các tính năng thiết kế mới đang tăng lên. Hai năm trước chúng tôi đã đăng một bài dịch về xu hướng thiết kế web năm 2015. Điều gì đã thay đổi kể từ đó? Vẫn có sự nhấn mạnh vào đồ họa chất lượng cao và sự tối giản, phông chữ lớn và yếu tố tương tác(Ví dụ, thực đơn ẩn). Tuy nhiên, công nghệ không đứng yên và các nhà thiết kế web đang thử nghiệm tính năng động, hoạt ảnh và sắp xếp các đối tượng trên màn hình mà không ảnh hưởng đến hiệu suất của trang web. Chúng tôi mang đến cho bạn cái nhìn tổng quan về các xu hướng mà theo truyền thống, do các đồng nghiệp phương Tây của chúng tôi đặt ra.

1. Nguyên tắc ưu tiên thiết bị di động

Tên của nguyên tắc đã nói lên điều đó: thiết kế được phát triển trước hết có tính đến khả năng dễ xem trên màn hình thiết bị di động. Nguyên tắc này không mới nhưng vì hơn 60% người dùng truy cập Internet từ điện thoại thông minh nên nó đã trở nên có tính quyết định trong năm nay. Vì màn hình thiết bị di động nhỏ nên các nhà thiết kế cung cấp nhiều thông tin nhất nhưng đồng thời hiển thị nội dung hiệu quả. Điều tương tự cũng xảy ra với văn bản - nước và các cụm từ trống rỗng không có chỗ đứng trong khái niệm “ưu tiên thiết bị di động”.

2. Minh họa tự do

Đây là một cách tuyệt vời để truyền đạt ý tưởng hoặc tâm trạng theo cách nguyên bản. Các hình minh họa vẽ tay rất độc đáo, bổ sung thêm sự đa dạng và cảm giác gần gũi cho sự tương tác của người dùng với trang web, làm cho thiết kế trở nên ấm áp và thân thiện.

Ví dụ minh họa từ dropbox.com

Những họa sĩ minh họa tài năng có thể tạo ra những hình ảnh cách tốt nhất sẽ tương ứng với thương hiệu và phong cách công ty, với sự giúp đỡ của họ, bạn có thể đạt được sự cá nhân hóa sâu sắc.

3. Hoạt hình

Các nhà thiết kế đang dần chuyển dần khỏi việc chỉ sử dụng hình ảnh tĩnh và đang tìm kiếm những cách mới để thu hút khán giả và khiến họ nổi bật hơn những người khác. Các thương hiệu cần được cá nhân hóa và hoạt ảnh, phần lớn nhờ vào sự phát triển của HTML5, CSS và jQuery, đóng một vai trò quan trọng ở đây.

Hoạt ảnh có thể được triển khai theo nhiều cách khác nhau: từ thanh trạng thái tải bất thường sẽ khiến bạn phải chờ đợi nhiều hơn cho đến thay đổi giao diện của đối tượng khi di con trỏ. Ngoài ra còn có hoạt ảnh toàn màn hình, đây là yếu tố trung tâm thu hút sự chú ý của người dùng.

Nhưng hoạt ảnh nên được sử dụng một cách cân bằng để tăng cường sự tương tác của người dùng với trang web và không khiến họ sợ hãi. Rốt cuộc, không ai muốn chờ đợi để xem nội dung chính trong khi tải hình ảnh động lố bịch và vô dụng - mọi thứ phải trông tự nhiên, phù hợp và không gây mất tập trung.

4. Màu sắc đậm

Cho đến gần đây, các chuyên gia khuyến nghị chỉ sử dụng các màu “tương thích với web” trong thiết kế - những màu không gây kích ứng và không làm mỏi mắt. Ngày nay mọi thứ đang thay đổi - khi được sử dụng đúng cách, màu sắc đậm sẽ tạo nên điều kỳ diệu, biến các trang web bình thường thành những trang web tươi sáng, phong phú và đáng nhớ.


Ví dụ về sử dụng màu đậm trên Spotify.com

Màu sắc tươi sáng là một cách cá nhân hóa trong xu hướng thời trang toàn cầu hướng tới sự tối giản trong thiết kế. Có khả năng các nhà thiết kế sẽ tiếp tục thử nghiệm các bảng màu, tạo ra các dải màu chuyển sắc và nổi bật độc đáo.

5. Cuộn và thị sai bất thường

Trong quá khứ, các nhà thiết kế đã cố gắng hết sức Thông tin quan trọngđặt nó vào phần của trang mà người dùng nhìn thấy ngay sau khi truy cập trang web. Ngày nay, rất khó để xác định phần nào của trang sẽ “hiển thị”, vì quá trình chuyển đổi được thực hiện từ các thiết bị có độ phân giải màn hình khác nhau. Vì vậy, cần có một cách tiếp cận khác.

Cuộn, ban đầu cần thiết để di chuyển lên và xuống một trang, hiện đang được các nhà thiết kế sử dụng một cách sáng tạo. Khi được triển khai một cách khéo léo, nó sẽ trở thành một công cụ phổ biến để trình bày nội dung. Do đó, bạn có thể tự động định cấu hình hiển thị và dừng video hoặc hoạt ảnh khi cuộn, sự xuất hiện của văn bản và hình ảnh, v.v.

6. Các mẫu bất đối xứng

Năm 2016 bị ảnh hưởng bởi họa tiết lưới, còn năm 2017 lại có xu hướng sử dụng họa tiết bất đối xứng và “rách”. Mặc dù thực tế là đại đa số các thương hiệu thích các mẫu giao diện người dùng thẻ truyền thống và rõ ràng (xét cho cùng, chúng hợp lý và dễ điều hướng), một số vẫn đang bắt đầu thử nghiệm để nổi bật và khác biệt với các đối thủ cạnh tranh.


Ví dụ về thiết kế bất đối xứng (isaidicanshout.com)

Thiết kế bất đối xứng được tạo ra với bàn tay khéo léo, rất phù hợp để thu hút sự chú ý đến một số phần nhất định của trang. Nhờ vào kích cỡ khác nhau phông chữ và cách sắp xếp các thành phần có thể tạo điểm nhấn trên trang một cách chính xác và hướng dẫn người dùng đi đúng hướng.

7. Bóng tối

Bản thân Shadows không phải là một sự đổi mới trong thiết kế web. Có thời chúng nổi tiếng, sau đó chúng bị lãng quên. Vậy thì xu hướng là gì? Trong việc sử dụng các bóng rất lớn, đôi khi thậm chí còn phóng đại do hình ảnh tạo ra khi di con trỏ.


Bóng tối sâu khi di chuột qua hình ảnh (abduzeedo.com)

Cách tiếp cận này cho phép một mẫu phẳng tập trung vào yếu tố hoạt động và tham gia tương tác. Điều này tạo ra hiệu ứng chiều sâu - thật tuyệt khi chỉ cần di chuyển con trỏ qua những hình ảnh như vậy.

8. Phông chữ lớn và đậm

Kiểu chữ là một cách cá nhân hóa khác. Phân phối thiết bị có độ phân giải cao Màn hình làm cho phông chữ có thể đọc được và phân biệt rõ ràng, vì vậy các nhà thiết kế ngày càng thử nghiệm chúng.


Ví dụ sử dụng Phông chữ lớn(bigyouth.fr)

9. Chủ nghĩa tối giản

Chủ nghĩa tối giản từ lâu đã là xu hướng được xác định trong thiết kế web. Nhưng một số còn đi xa hơn, loại bỏ mọi gợi ý trang trí khỏi trang web, chỉ để lại những yếu tố quan trọng nhất đối với người dùng.


Chủ nghĩa tối giản tuyệt đối (mathieuboulet.com)

Trong ví dụ đã cho, chỉ có dấu hiệu “Cuộn”, liên kết đến phần “Giới thiệu về tôi” và liên kết đến hồ sơ trên mạng xã hội. Tiếp theo, khi cuộn sẽ thấy portfolio của nhà thiết kế.

10. Trộn văn bản ngang và dọc

Thay đổi thông thường sắp xếp theo chiều ngang văn bản “làm mới” trang web và thúc đẩy bạn đọc những gì được viết ở đó.


Ví dụ về hướng văn bản bất thường (takewhatyoucancarry.com)

Xin lưu ý rằng việc trộn được thực hiện tốt - không có yếu tố khó hiểu không cần thiết. Từ “lấy” được viết theo chiều dọc - điều này là đủ để trình bày nội dung có thương hiệu.

11. "Điều chế"

Trong trường hợp này, văn bản nên tương phản với hinh nênđể chúng không hợp nhất.

13. Hai màu

Thiết kế trang web dựa trên 2 màu sắc cơ bản. Nó trông phong cách và hiện đại. Ví dụ: trang web Australian Design Radio được thiết kế chính xác theo phong cách này:

14. Phông chữ hình học

Trong trường hợp này, phông chữ được kết hợp với nhiều hình dạng hình học khác nhau. Các phông chữ như Futura, ITC Avant Garde và Proxima Nova phù hợp cho mục đích này.


Một ví dụ về sử dụng phông chữ “hình học” (hugeinc.com)

Bạn có thể thêm tính biểu cảm, tính quả quyết và thậm chí một số tính năng gây hấn cho trang web của mình bằng cách sử dụng các phông chữ rất đậm từ các họ trên.

Hãy tóm tắt lại

Vào năm 2017, các nhà thiết kế sẽ cố gắng thêm những nét cá tính vào chủ nghĩa tối giản thông thường. Một số sẽ thực hiện điều này bằng màu sắc, một số có phông chữ và một số có vị trí khối khác thường.

Khi phát triển và phê duyệt một thiết kế, đừng quên nguyên tắc chính - nó phải thân thiện với người dùng và tạo động lực để thực hiện hành động mục tiêu. Bạn có tự tin vào hiệu suất của nguồn lực của bạn? Báo cáo kiểm tra địa điểm do “dịch vụ” thực hiện có thể cho bạn biết về điều này. Người quản lý cá nhân” SeoPult. Ngoài việc kiểm tra thiết kế và khả năng sử dụng, bạn sẽ nhận được phân tích chi tiết về thành phần kỹ thuật, ngữ nghĩa, vị trí so với đối thủ cạnh tranh, v.v. Tất cả điều này sẽ giúp bạn cải thiện trang web của mình và tăng hiệu quả của nó như một công cụ bán hàng.

Ryan McCready, biên tập nội dung cho dịch vụ đồ họa thông tin Venngage, nói về xu hướng hiện nay trên thế giới. thiết kế đồ họa, và những kỹ thuật nào đã phải bị loại bỏ trong năm nay.

Màu sắc đậm và rực rỡ

Trong vài năm qua, nhiều nhà lãnh đạo công nghệ đã sử dụng những màu sắc nhẹ nhàng và dễ đọc. Vì vậy, họ đã cố gắng tạo ra một sơ đồ thiết kế rất rõ ràng và cho thấy rằng tương lai trang nhã và tiện dụng thường thấy trong các bộ phim khoa học viễn tưởng đã đến.

Phương pháp này đã giúp công ty chuyển sang Giai đoạn mới phát triển và hợp nhất tất cả các ứng dụng của bạn dưới một màu. Giống như Spotify, việc sử dụng màu sắc tươi sáng táo bạo này đã khiến thương hiệu trở nên nổi bật.

Thời trang cho sự táo bạo và màu sáng Thiết kế tuân theo các nguyên tắc Thiết kế Vật liệu của Google. Công ty đã chọn mặt phẳng, sắp xếp hợp lý và thiết kế trực quan với việc bổ sung "màu sắc bất ngờ và tràn đầy năng lượng, cũng như các phông chữ và hình ảnh tiện dụng và đẹp mắt."

Nói chung, nhiều xu hướng hiện nay Năm 2017 nảy sinh dưới ảnh hưởng của nguyên tắc Vật chất thiết kế của Google.

Chúng tôi cũng sử dụng chúng để làm hình ảnh quảng cáo này. sách điện tử. Kết quả là hình ảnh trở nên vô cùng nổi tiếng.

Nếu bạn không thể chọn màu sắc tốt nhấtđối với thiết kế của bạn, hãy đọc tiếp để biết một số ví dụ tuyệt vời về bảng màu. Và đừng ngại sử dụng những màu sắc tương phản với nhau.

Kiểu chữ in đậm

Phông chữ in đậm thu hút sự chú ý của người đọc. Bạn vô tình chú ý đến những dòng chữ lớn và bắt mắt.

Ví dụ yêu thích của tôi là Wired. Nó sử dụng các phông chữ khác nhau để làm nổi bật các tiêu đề cụ thể và duy trì thứ tự thông tin có thứ bậc trên trang.

Hãy thử nhìn mà xem:

Khác ví dụ tốt sử dụng phông chữ hấp dẫn - HubSpot. Văn bản ở phía trước và được hỗ trợ bởi đồ họa:

HubSpot hiểu rằng mỗi năm lượng thời gian cần thiết để tiếp thu thông tin từ một tweet có xu hướng bằng không. Vì vậy, để thu hút sự chú ý của người đọc, họ sử dụng những dòng chữ ngắn gọn, súc tích bằng chữ in đậm.

Ngoài ra, hiện nay ngày càng có nhiều người lướt Internet bằng điện thoại di động. Do màn hình có độ phân giải cao nên nhu cầu sử dụng phông chữ đậm ngày càng tăng. Vì vậy, để giữ chân độc giả, bạn cần cung cấp nội dung của mình đúng cách.

Bộ đệm làm nổi bật các tiêu đề xuyên suốt toàn bộ bài viết chứ không chỉ ở phần đầu - giúp bài viết dễ đọc hơn trên tất cả các thiết bị. Tôi khuyên bạn nên sử dụng phương pháp này cho các bài viết dài - bằng cách này bạn sẽ giúp người đọc điều hướng chúng.

Chúng tôi đã áp dụng phương pháp này khi tạo đồ họa thông tin này. Sự kết hợp in đậm và các giải pháp màu sắc thú vị thu hút sự chú ý:

Phông chữ từ Google Fonts

tôi sử dụng Phông chữ của Google trong một thời gian rất dài, bởi vì chúng mang tính phổ quát. Nếu tôi cần đưa ra một thiết kế cho một ấn phẩm trực tuyến và sau đó thêm nó vào bản trình bày, tôi tin chắc rằng tất cả các phông chữ sẽ phối hợp tốt với nhau. Tất cả đều trông tuyệt vời trên bất kỳ nền tảng blog hoặc trang web nào.

Nhân tiện, tất cả 810 phông chữ đều hoàn toàn miễn phí! Ồ vâng, mọi người thích những thứ miễn phí. Họ cũng thích những thứ rất dễ sử dụng. Đây là một ví dụ về việc kết hợp nhiều phông chữ phổ biến từ Google:

Trên trang web của chúng tôi, chúng tôi sử dụng phông chữ Roboto và Open Sans.

Những tấm hình gốc

Mỗi năm số lượng nội dung tăng lên, cũng như nhu cầu hình ảnh chất lượng cao. Để những bức ảnh có thể tồn tại lâu dài lâu dài, các tác giả cố gắng làm cho chúng trở nên phổ biến nhất có thể.

Chỉ có một vấn đề: những hình ảnh chung chung nhất có xu hướng trở nên cũ kỹ theo thời gian. Nếu bạn hay theo dõi tin tức trong lĩnh vực công nghệ và marketing thì chắc hẳn bạn đã quen thuộc với bức ảnh này:

Nó được sử dụng trong các trang đích, blog và thậm chí trong các bài đăng trên Instagram. Thành thật mà nói, tôi đã tự mình lấy nó cho một trang web mà tôi đã làm việc cách đây vài năm. Do sự phổ biến của những hình ảnh stock như vậy, tính độc đáo của nội dung đồ họa đã giảm mạnh.

Và nhu cầu sử dụng những bức ảnh rõ nét và hoàn hảo chỉ khiến tình hình trở nên tồi tệ hơn.

Khi một người đọc nhìn thấy cùng một bức tranh lần thứ một trăm, anh ta sẽ nghĩ rằng tác giả của bài báo đã không cố gắng tỏ ra độc đáo ít nhất một chút. Vậy tại sao lại đọc một bài báo như vậy?

Đây là lý do tại sao bạn nên sử dụng hình ảnh gốc. Hãy ngừng chụp những bức ảnh phổ biến, hãy bắt đầu tạo ra những bức ảnh của riêng bạn.

Tôi chắc chắn rằng mọi người trong nhóm của bạn đều có điện thoại chụp ảnh. Tại sao bạn không sử dụng chúng? Chụp ảnh văn phòng hoặc logo của bạn và sử dụng những bức ảnh đó.

Tìm hiểu xem có một nhiếp ảnh gia đầy tham vọng nào trong số các đồng nghiệp của bạn không. Hãy cho anh ấy vài ngày để thuê một văn phòng - và bạn sẽ có đủ ảnh cho cả năm!

Khi tạo trang web mới, chúng tôi đã chụp ảnh nhân viên của mình và rất hài lòng với kết quả đạt được.

Hình ảnh và biểu tượng vẽ tay

Không chỉ các bức ảnh phải là bản gốc mà còn cả các biểu tượng và hình vẽ. Một số thương hiệu đã nhận ra điều này và đang cố gắng nổi bật giữa đám đông theo cách này. Cách tiếp cận này bổ sung thêm yếu tố cá nhân và thú vị cho thiết kế.

Một số người cho rằng xu hướng này có vẻ thiếu chuyên nghiệp và trẻ con nhưng chắc chắn vẫn rất bắt mắt. Giống như hầu hết các xu hướng của năm 2017, nó hoạt động như một sự thay thế cho thiết kế sạch sẽ vô trùng của những năm gần đây.

Dropbox sử dụng hình minh họa vẽ tay xuyên suốt. Họ đã trở thành một phần thương hiệu của công ty và khiến nó trở nên dễ nhận biết.

Những hình ảnh minh họa như vậy tạo ra tâm trạng thoải mái và làm hài lòng đứa trẻ sống trong tâm hồn mỗi chúng ta. Chúng làm cho sản phẩm trông có giá cả phải chăng hơn. Chúng đặc biệt hiệu quả tại các công ty công nghệ lớn như Dropbox.

Khác ví dụ tốt Cách tiếp cận này là của công ty nệm Casper. Hầu như toàn bộ trang web của cô bao gồm các bản vẽ vẽ tay. Đây là một trong số chúng:

Xu hướng này cũng được dịch vụ MailChimp đón đầu. Trong báo cáo năm 2016, ông cũng đưa ra những bức vẽ tương tự.

Moz, một công ty phát triển phần mềm tiếp thị, chèn hình ảnh minh họa vào tiêu đề bài viết:

Đôi khi tình yêu của chúng tôi dành cho bản vẽ thể hiện trong các dự án khác:

Trở về cội nguồn của chủ nghĩa tối giản

Nếu bạn được yêu cầu giải thích đến một người lạ, Chủ nghĩa tối giản là gì, có lẽ bạn sẽ trả lời rằng đó là lúc bạn phải từ bỏ tính trang trí để chuyển sang tính chức năng. Rất có thể bạn sẽ nghĩ ngay đến sự trung lập bảng màu, bao gồm các sắc thái đen, xám và trắng.

Có vẻ như tinh thần thực sự của chủ nghĩa tối giản đã bị thay thế bởi việc sử dụng những gam màu đen trắng nhàm chán. Tôi nghĩ việc này được thực hiện nhằm mục đích đền bù kích thước nhỏ màn hình và năng lượng thấp của thiết bị di động.

Nhưng vào năm 2017 mọi thứ sẽ thay đổi. Chủ nghĩa tối giản sẽ trở lại đúng hình dạng của nó. Điều đó có nghĩa là sẽ có nhiều màu sắc hơn. Trong thời đại của chúng ta thiêt bị di động Chúng mạnh mẽ như máy tính và một số thậm chí còn có màn hình tốt hơn.

Ví dụ yêu thích của tôi về thiết kế tối giản là logo nền tảng Medium. Những người sáng tạo ra nó đã có thể kết hợp nhiều màu sắc khác nhau mà vẫn duy trì phong cách tối giản.

Google đã thực hiện một thiết kế lại logo khác theo hướng tối giản và kết hợp các màu sắc tươi sáng. Đáng chú ý là chính công ty này đã đóng vai trò là chất xúc tác cho sự xuất hiện của nhiều xu hướng mới. Các nhà thiết kế đã cắt bớt một chút kiểu phông chữ và trình bày loại mới một logo hình chữ G mà tôi rất thích.

Tinh thần tối giản được cảm nhận trong tất cả những điều này, nhưng báo chí đã không viết về nó. Mọi người đã quên chủ nghĩa tối giản thực sự là gì. Logo không phải không màu và được làm dưới dạng duy nhất nên không ai nghĩ rằng nó được làm theo phong cách tối giản.

Logo mới sáng sủa và bắt mắt - đồng thời vẫn duy trì vẻ ngoài tối giản. Sau khi thiết kế lại, những người xung quanh bắt đầu bắt chước Google, như họ đã làm trước đây ở các khía cạnh khác.

Bản thân chúng tôi bắt đầu sử dụng phong cách tối giản hơn cho thiết kế blog của mình.

Thiết kế hình ảnh đơn giản dễ dàng truyền tải những thông tin cần thiết.

Sử dụng ảnh GIF

Mọi người (à, hầu hết mọi người) đều yêu thích ảnh GIF. Chúng giúp ích cho chúng ta trong cuộc trò chuyện vì đôi khi chúng có thể truyền tải cảm xúc tốt hơn văn bản.

Ngoài ra, để chơi chúng bạn không cần bất kỳ chương trình đặc biệt. GIF thường có kích thước nhỏ và có thể được nhúng ở hầu hết mọi nơi.

Chúng tốt hơn video và hình ảnh, đặc biệt khi bạn muốn giảm thời gian tải trang và lưu lượng truy cập. Tôi tin rằng nhờ tính linh hoạt của chúng, GIF sẽ còn trở nên hữu ích hơn nữa. yếu tố hữu ích thiết kế.

Tôi thực sự thích đặt ảnh gif vào tiêu đề của một bài viết. Thay vì đặt một hình ảnh nhàm chán ở đó, hãy dành vài phút và tạo một ảnh GIF như thế này.

Để làm được điều này, bạn không cần phải thực hiện bất kỳ nỗ lực sáng tạo đặc biệt nào, nhưng bằng cách này, bạn chắc chắn sẽ thu hút sự chú ý đến bài đăng của mình trong trong mạng xã hội. Đây là một ví dụ điển hình khác về việc sử dụng GIF trong tiêu đề của bài viết.

Hình ảnh hai màu

Đây là sự kết hợp của hai màu, thường rất sáng hoặc tương phản trong một hình ảnh. Để tạo ra những hình ảnh như vậy, bạn sẽ phải phát huy kỹ năng thiết kế của mình, nhưng điều đó rất đáng giá.

Chỉ có một nhà thiết kế rất lành nghề mới có thể tạo ra những bức tranh hai màu đẹp như vậy. Tôi chắc chắn rằng tôi không thể tạo ra thứ gì đó như thế này, nhưng điều đó không có nghĩa là bạn nên loại bỏ kỹ thuật này khỏi kế hoạch thiết kế của mình.

Đang xem xét phát triển tích cực công nghệ, 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 là 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 trong năm 2017, nó sẽ được sử dụng ngày càng nhiều hoạt hình đơn giản, nó không quá khó chịu nhưng nó thực hiện hoàn hảo chức năng thu hút sự chú ý của mình.

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 để hiệu ứng 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 điều này 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. Người thật 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 nhiều 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 tiềm ẩn 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 sẵn có mà không cần thực hiện thêm hành động nào.

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

Kế hoạch tốt trang đíchđư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.

Ưu đãi liên quan và Sản phẩm 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 đặt hàng để tăng hóa đơ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 tiếp cận một cách sáng tạo việc tạo các thông báo như vậy và không yêu cầu đổi lại bất cứ điều gì, chẳng hạn như hãy cung cấp miễn phí vận chuyển, viết mã phiếu giảm giá hoặc tải xuống mã miễn phí phiên bản dùng thử, thì cách tiếp cận này gây ra sự 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

Hôm nay khi khán giả di động Vốn đã thích duyệt Internet, tầm quan trọng của không gian màn hình trở nên 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 và 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 vẻ bề ngoài màn hình đầu tiên
  • Hơn cấu trúc linh hoạt thiết kế

Đọc thêm: 20 ví dụ tốt nhất thiết kế trang chủđịa điểm

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 ứng tối đa Kiểu đơn giản hóa trang web 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 thực hiện để chiếm toàn bộ màn hình. Thông thường, họ để lại một số nội dung trang hiển thị, 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: Thực đơn trên cùng và bên. VỚI thiết kế thích ứng menu hamburger xuất hiện, hiện đang bị chỉ trích tích cực: nó khiến người dùng khó tham gia 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 giải thích 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 (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ó Chức năng điều hướng– họ yêu cầu bạn cuộn để khám phá 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 quá đam mê Drop-Down đến mức thậm chí còn 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ẻ – cảm hứng thiết bị điện tử đeo trên người

Làm sao người dùng di độngđã thay đổi thiết kế của các trang web hiện đại, vì vậy các thiết bị đeo được đang bắt đầu ảnh hưởng đến thiết kế của chúng. 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 ngắn gọn và không kém phần kín đáo cung cấp thông tin cho người dùng. Dự kiến, công nghệ thiết bị đeo sẽ hít thở cuộc sống mới vào các giao diện lát gạch 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. Hợp thời trang cách phối màu bây giờ quay trở lại vấn đề 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 thống nhất giữa định dạng khác nhau, họ thêm “không khí” 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

Triển khai nhẹ nhàng vật liệu thiết kế từ Google (MDL) 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 nhau ở mặt tốt hơn từ 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ể thực sự, cụ thể là:

  • Bóng sẽ trông giống như đượ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 hồ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

Tông màu xám đã thống trị trang web trong vài năm qua: 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 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)