Một cuộc sống mới cho hình ảnh: Clip, Mask y Bộ lọc

Kể từ khi xuất hiện gần đây, mọi người đều thích định dạng SVG. Đó là ánh sáng, đi tốt với bất kỳ màn hình bất cứ mật độ điểm ảnh của nó và ở trên nó có thể chỉnh sửa bởi CSS, có thể thay đổi màu sắc, độ dày và làm cho hình ảnh động. Nó thật tuyệt vời. Nếu bạn không biết chúng ta đang nói về cái gì, đây là một ví dụ đơn giản  (bằng tiếng Tây Ban Nha) về những gì chúng ta có thể làm việc với SVG.

Đợt vàng nhỏ này với định dạng SVG đang chuyển sang các định dạng hình ảnh cổ điển khác như .JPG, PNG hoặc GIF: đã đến lúc gia hạn hoặc chết, mặc dù đúng là những định dạng này sẽ không bao giờ biến mất (những bức ảnh hôm nay là không thể sửa đổi được) trong SVG chẳng hạn.)

Nhưng điều chắc chắn là thời trang này, nơi khách hàng muốn đồ họa nhất trong SVG đã kích hoạt sự sáng tạo, nhận ra rằng nó là cần thiết để suy nghĩ lại cách chúng tôi trình bày những hình ảnh này trên web.

Cho đến khi cuộc thi không xuất hiện, chúng tôi không bắt đầu đổi mới và điều này đang xảy ra với hình ảnh ở định dạng cổ điển. Chúng tôi có muốn có JPG trên web không? Hoàn hảo, nhưng làm thế nào để chúng ta cạnh tranh với những SVG này thật tuyệt vời, hoạt hình và tương tác với người dùng? CSS có thể giúp bạn áp dụng một số thuộc tính sau đã bắt đầu được nhìn thấy trong một số thiết kế web:

Chúng tôi nói về clip-path, maskvà filter, tài sản để thay đổi hình thức, áp dụng một hiệu ứng hay thay đổi trong giá trị của hình ảnh (ví dụ lọc gõ Instagram.) Với tất cả điều này chúng tôi quản lý để mang lại một giá trị cho hình ảnh, tích hợp nó vào một thành phần với một hình dạng nhất định và thay đổi diện mạo của nó cho phù hợp với phạm vi màu sắc của chúng tôi hoặc thương hiệu của chúng tôi.

Một số ví dụ thú vị về việc sử dụng các thuộc tính này có thể được tìm thấy trong trang web của Nature Digital , với việc sử dụng GIF (và cả các video) được đặt sau khi cắt và phông chữ:

mặt nạ thiết kế-css

Chúng tôi cho bạn thấy bài viết này của Sara Soueidan trong danh sách Ngoài ra nói về những đặc tính này. Nó là một cái gì đó cũ, nhưng nó vẫn còn tốt để bắt đầu với xu hướng này:

thiết kế-web-CSS

Và trong nhóm này, chúng tôi cũng sẽ bao gồm các bộ lọc, phục vụ để sửa đổi độ tương phản, độ sáng, màu sắc và các giá trị khác của hình ảnh gốc; kết hợp với những điều trên sẽ là một trong những điểm điều tra và thử nghiệm với hình ảnh trong những tháng tới trong thiết kế web:

design-web-CSS-filter-image

Hãy cẩn thận với tính tương thích của các thuộc tính này, vẫn còn hơi kém lý tưởng:

Công cụ thiết kế và bố cục mới

Cách suy nghĩ mới đôi khi đòi hỏi những cách thức làm việc mới và năm nay chúng ta sẽ thấy một số công cụ bị tụt lại bằng cách không đáp ứng nhu cầu và yêu cầu của nhà thiết kế web. Gần đây chúng ta đã thấy nó với các trình soạn thảo mã: Sublime Text , dường như kết hợp độc quyền giữa các nhà thiết kế và nhà phát triển của nhóm HTML + CSS + JS đang bắt đầu mất dần các lựa chọn thay thế như Atom hoặc Brackets . nhu cầu và sở thích của từng nhà thiết kế dựa trên các phần mở rộng và plugin của chúng. Gần đây chúng tôi đã nói về Pug cho Atom và cách nó giúp chúng tôi với HTML.

Điều tương tự xảy ra trong bản lề giữa giai đoạn thiết kế và bố trí. Thiết kế trong trình duyệt ngày nay là một sự thay thế thực sự cho sự tiến bộ của các thanh tra và các công cụ phát triển trước tiến trình cũ của “thiết kế nó trong Photoshop và sau đó tạo nó trong CSS.” Mặc dù quá trình thiết kế trong trình duyệt là một rào cản ưu tiên , chúng tôi có mã thiết kế đáp ứng hiệu quả và nhanh hơn từ các bước đầu tiên của thiết kế. Ngược lại, có ít sáng tạo hơn, mặc dù điều này cũng có thể tranh cãi được. Chúng ta sẽ thấy trong năm nay một sự chuyển giao của người dùng Photoshop sẽ được thiết kế lại trong trình duyệt, mặc dù Adobe đã quyết định giữ lại chúng với các thí nghiệm như Adobe Edge Reflow .

Chúng tôi cũng có cách thứ ba! Các công cụ trung gian với nhiều người dùng đã quay lưng lại như Froont hoặc Webflow cung cấp cho chúng tôi một nửa trải nghiệm giữa thiết kế của pixel thuần túy và bố cục trong trình duyệt.

Chúng ta sẽ thấy các công cụ tương tự mới xuất hiện trong năm mới này, nhưng chúng vẫn còn một chặng đường dài để bắt đầu đánh giá cao chúng như một thực thể hoàn chỉnh, giải quyết tất cả các vấn đề phát sinh trong thiết kế web.

Thiết kế web dựa trên lưới và đường kẻ

Năm nay chúng ta sẽ thấy nếu cuối cùng áp dụng các mô-đun Lưới Layout trong CSS là một thực tế hoặc chúng tôi sẽ phải chờ một vài tháng nữa để bắt đầu để xem thiết kế dựa trên hệ thống này lưới mới, mà nói đến bổ sung cho các thông số kỹ thuật của Flexbox và cho phép chúng tôi xây dựng thiết kế dựa trên hàng và cột.

Định dạng này sẽ cho phép chúng ta tạo cấu trúc linh hoạt, như chúng ta đã nói trước đây, không gian trống không phải là kết quả của tổng lợi nhuận, mà nó bao gồm thực thể và được xác định là khối nhiều hơn trong bố cục.

Mặc dù các thông số kỹ thuật cho phép chúng tôi đánh giá lại một hệ thống phức tạp cho hoạt động đúng đắn của một thiết kế web hoàn chỉnh (trang và trang), chúng tôi tin rằng những Lưới này sẽ bắt đầu trở nên phổ biến trong thiết kế hạ cánh, gần các cấu trúc đã được biết đến như áp phích và tờ rơi . Cảm hứng sẽ trở lại từ thiết kế đồ họa .

Đây là một ví dụ về cách di chuyển một thiết kế đồ họa đến một thiết kế web dựa trên Grid Layout, được thực hiện bởi Jen Simmons . Ở bên trái, áp phích gốc, ở bên phải, thiết kế web dựa trên CSS Grid Layout:

Bố cục web-CSS-thiết kế-web

Ở đây bạn có ví dụ hoàn chỉnh, nhưng bạn cần phải truy cập từ một trong các trình duyệt được hỗ trợ hoặc kích hoạt các chức năng thử nghiệm giống nhau để có thể quan sát nó một cách chính xác.

Đối với sự hỗ trợ giữa các trình duyệt, điều chưa được xác định rõ, vì vậy nếu bạn muốn coi đó là một xu hướng, tốt hơn trong trung hạn hơn trong ngắn hạn:

Cùng với điều này, để lại các hướng dẫn trong đó thiết kế phù hợp không còn là thứ khiến chúng ta xấu hổ. Một số mẫu thiết kế hiển thị các dòng làm quy tắc để căn chỉnh tiêu đề, hình ảnh và hộp văn bản, tìm kiếm khía cạnh "toán học" hoặc "kỹ thuật", như thể ngụ ý rằng dịch vụ hoặc sản phẩm đằng sau tiêu đề được tính toán một cách có trật tự. Đây là trường hợp, ví dụ: trên trang web Uber:

thiết kế-web-với-line

Chúng ta sẽ thấy nhiều thiết kế hơn xuất hiện với những hướng dẫn về màu sắc, độ dày khác nhau và thậm chí là hoạt hình, giống như những ví dụ khác .

Kết luận: Thời gian để thử nghiệm trong thiết kế web

Đây chỉ là một số chìa khóa về thiết kế web mà chúng ta sẽ thấy trong những tháng tới. Không phải tất cả chúng đều đóng vai trò chủ đạo hoặc trở thành tiêu chuẩn, nhưng chúng đóng vai trò là điểm khởi đầu để khám phá và tìm kiếm các cách làm việc khác.

Tôi nghĩ điều quan trọng nhất là hiểu rằng chúng tôi có các công cụ theo ý của mình, đủ các thuộc tính CSS thử nghiệm và một mảnh đất màu mỡ trước mặt chúng tôi. Đã đến lúc làm việc và chơi với những xu hướng này để xem liệu họ có cải thiện thiết kế hiện tại và tác động của chúng đối với trải nghiệm người dùng hay không .

Và bạn, bạn nghĩ điều gì sẽ xảy ra trong năm nay?