Xu hướng thiết kế phẳng của năm Đơn giản hóa quy trình từ nhà thiết kế đến nhà phát triển. Hình ảnh và biểu tượng vẽ tay

” 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” chính tinh thần thiết kế. Chúng tôi hy vọng cuộc tranh luận này sẽ tiếp tục trong năm tới, nhưng trọng tâm sẽ vẫn là nội dung - nền tảng của bất kỳ công việc thiết kế nào.

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

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

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

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

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

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

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

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

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

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

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

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

Đối tác Heco #MadeInWebflow

Như bạn có thể thấy từ các ví dụ, “lớn” và “đậm” không chỉ đề cập đến mô tả của phông chữ. Nhanh hơn, Chúng ta đang nói về rằng một phần đáng kể của màn hình chính được dành riêng 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 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ế 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ế thích ứngđã thay đổi hoàn toàn cách chúng ta nhìn vào các ứng dụng web và cách 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?

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

Giới thiệu

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

Con đường dẫn đầu

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

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

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

Đường dẫn hỗ trợ

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

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

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

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

Vì vậy, trong bài viết này, chúng tôi không chỉ cung cấp danh sách các xu hướng thiết kế web mà còn đưa ra các 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 do 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 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ê thế giới, tháng 10 năm 2016 số lượng người dùng di động có nhiều thứ hơn máy tính để bàn.

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

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

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

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

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

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

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

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

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

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

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

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

Không có gì ngạc nhiên khi ngành CNTT đang phát triển nhảy vọt. Công nghệ mới, phần cứng mới, dự án mới. Tất cả điều này cũng không ảnh hưởng đến việc phát triển web. Ngày nay, các trang web này không còn giống như cách đây ít nhất vài năm nữa. Khá nhiều thứ đã thay đổi, và bây giờ chi tiết hơn một chút.

Sử dụng nền video

Có vẻ như nền đã được sử dụng từ lâu. Nhưng nó đã trở thành một phần thực sự quan trọng của nội thất trang web chỉ trong năm nay. Đối với nhiều người dùng, nó tạo ra hiệu ứng “wow” thực sự.
Một ví dụ về cách triển khai tốt nền video - http://globalmonitoring.ru/

Hiệu ứng paralax

Một khái niệm tưởng chừng như thịnh vượng khác nhưng gần đây nó mới bắt đầu được áp dụng ở khắp mọi nơi. Nếu ai chưa biết thì đây là một cách để thêm các lớp thể tích vào trang web và khiến chúng di chuyển theo ý muốn. Nói cách khác, thêm nhiều tương tác hơn.
Ví dụ - https://www.grabandgo.pt/

JavaScript và thư viện

Nói về tính tương tác. Bạn đã thấy ít nhất một trang web không có js trong năm 2017 chưa? tôi không. Và nó thậm chí không phải về bản thân js mà là về các thư viện của nó. Đúng, jQuery là một điều thú vị, nhưng tất cả các nhà phát triển front-end hàng đầu đã chuyển sang Reac.js, Angular.js, vue.js và các thư viện khác. Tôi sẽ tự mình học một trong số chúng trong tương lai (có thể là vue.js).
Bạn muốn đi đâu mà không có js? Tất cả những yếu tố nhảy vọt, mất điện, chuyển tiếp suôn sẻ v.v. - tất cả đều thuận tiện khi triển khai thông qua tập lệnh.

Khả năng thích ứng

Điều gì đó đáng nói riêng và chúng tôi chắc chắn sẽ nói về nó. Thiết kế trang web thích ứng thậm chí không phải là xu hướng của năm 2017. Đây là xu hướng chung những năm gần đây. Với tư cách là người dùng của một trong những sàn giao dịch tự do Runet, tôi nhận thấy các yêu cầu hàng ngày như: “Tạo một trang web thích ứng” hoặc “Chúng tôi đã có một trang web, chúng tôi cần một trang web thích ứng”, v.v. Mọi người hiểu rằng hiện nay nhân loại dành nhiều thời gian cho điện thoại thông minh hơn là trên máy tính, vì vậy việc tạo một trang web thích ứng (với nguyên tắc Mobile First) là một thành phần rất quan trọng trong việc tạo một trang web về nguyên tắc.

Bot

Có lẽ là nhất điểm thú vị của bài viết này - bot. Hiện nay trang đơn giảnít người cần. Cung cấp cho mọi người tính tương tác và sự sống động cho trang web. Bot là một loại trợ lý đã được sử dụng tích cực. Hầu hết ví dụ đơn giản— Các bot VKontakte và Telegram tự gửi cho bạn bất kỳ thông tin nào theo yêu cầu hoặc không có thông tin đó. Điều này rất thuận tiện cho quản trị viên của cộng đồng nơi bot hoạt động. Mọi thứ đều nhanh chóng, đẹp mắt và tự động.

Ryan McCready, biên tập nội dung của 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 các nguyên tắc Vật liệu thiết kế 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 chắc chắn rằng tất cả các phông chữ sẽ hoạt động 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 màu đen, xám và trắng.

Có vẻ như tinh thần tối giản thực sự đã bị thay thế bởi việc sử dụng màu đen trắng nhàm chán. cách phối màu. 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.