Kết cấu và Hoa văn — Những anh hùng thầm lặng của Thiết kế Hình ảnh

Thật vui khi được học bổng (haha) trong Học bổng Ayagigs Web3, một chương trình học tập được tổ chức với sự cộng tác của Coinbase .

Tôi đánh giá cao công việc của Trưởng nhóm thiết kế sản phẩm, Ajiri Omafokpe và Cộng tác viên chương trình, Folushola Esther . Họ đã thực sự làm được rất nhiều trong việc làm cho chương trình trở nên chào đón, mang tính giáo dục, giải trí và họ mang theo cả nhóm mà bạn thích xem.

Chúng ta đã hoàn thành giai đoạn nền tảng và đang bước vào giai đoạn chính nhưng trước đó, chúng ta đã có một tuần thử thách bắt đầu từ Thứ Hai, ngày 21 tháng 11 năm 2022 để kiểm tra những gì chúng ta đã học được trong suốt Giai đoạn nền tảng. Thật là một thử thách, làm tất cả các loại bài kiểm tra bao gồm MCQ, QA, Bài kiểm tra thực tế (bạn sẽ không tin rằng điều này đã được thực hiện trong 2 ngày), với bài viết này là nhiệm vụ cuối cùng của tuần thử thách.

Tôi đã nhận được rất nhiều yêu cầu viết về việc sử dụng các mẫu và kết cấu, vì vậy tôi quyết định nhân cơ hội này để chia sẻ kiến ​​thức của mình về chủ đề này.

Vì vậy, hãy bắt đầu,

Hoạ tiết và Hoa văn là những yếu tố trực quan đã trở nên không thể thiếu trong thiết kế nói chung. Tôi gọi họ là những anh hùng thầm lặng vì họ hầu như không được chú ý nhưng lại trở nên vô giá khi được phát hiện bởi nhà thiết kế ham học hỏi.

Chúng là những yếu tố vay mượn từ nghệ thuật, bổ sung cho thiết kế kỹ thuật số và mang lại cảm giác có chiều sâu. Kết cấu có thể hiển thị nội dung chính của trang web bằng cách hướng dẫn tầm nhìn của người dùng. Các mẫu có thể làm cho không gian buồn tẻ trở nên sống động. Cả hai đều đóng góp rất nhiều vào việc làm cho giao diện trở nên thú vị, do đó nâng cao trải nghiệm người dùng.

Tuy nhiên, texture dường như đã bị hiểu nhầm là một thiết kế theo phong cách “ GRUNGE ” trong một thời gian dài. Trong nhiều trang web, chúng ta có thể thấy rằng để làm nổi bật các hiệu ứng thú vị, chúng được sử dụng với số lượng lớn và thậm chí bị nghi ngờ lạm dụng. Kết quả của sự lạm dụng là những lợi ích thực sự của nó bị chôn vùi. Để thực sự sử dụng kết cấu một cách tốt nhất, nó phải được sử dụng một cách tinh tế và có chủ ý.

Mặt khác, các mẫu dễ sử dụng hơn và có thể được sử dụng để thu hút sự chú ý đến các khu vực cụ thể của màn hình. Giống như kết cấu, các mẫu có hiệu quả khi được sử dụng một cách tinh tế, tuy nhiên chúng có thể được sử dụng theo những cách rõ ràng hơn khi cần thiết.

Hai từ đôi khi được thay thế cho nhau là sai. Họ chỉ chia sẻ những điểm tương đồng nhỏ. Hoa văn thường bao gồm một số yếu tố nhỏ lặp đi lặp lại, với một nhịp điệu thị giác nhất định. Kết cấu bao gồm các yếu tố lớn hơn mẫu, không nhất thiết phải lặp lại.

Các trường hợp sử dụng Kết cấu và Hoa văn

Kết cấu chủ yếu được sử dụng khi thiết kế cho web hơn là ứng dụng dành cho thiết bị di động. Các mẫu phổ biến trong cả thiết kế ứng dụng web và thiết bị di động. Lý do để thiết kế không phải chỉ vì nó “ đẹp mắt ”, mà phải dựa trên việc đáp ứng một chức năng nào đó, và mục đích sử dụng họa tiết, hoa văn trong khi thiết kế hầu hết là để nâng tầm và tầm nhìn của trang web. Chúng ta hãy xem xét một số trường hợp sử dụng của họ:

Thu hút người dùng click

Các yếu tố như biểu tượng, nút, tiêu đề, v.v. đều có thể được kết cấu. Nó có thể thu hút người dùng nhấp vào các yếu tố tương ứng. Đây có thể là lý do tại sao việc sử dụng kết cấu phổ biến. Công dụng chính của kết cấu là áp dụng nó cho các phần tử để chúng có thể được phân biệt với các phần tử khác trên web.

Trình bày thông tin trực quan nâng cao

Vì kết cấu có thể được sử dụng để hướng dẫn đường nhìn, giống như đường kẻ, hộp và độ tương phản, nên nó cũng có thể được sử dụng để sắp chữ nhằm hiển thị nội dung theo các quy tắc hình ảnh nhất định. Đồng thời, hiệu ứng kết cấu nên được sử dụng hợp lý và phối hợp với các quy tắc hình ảnh khác, và hiệu ứng đầu ra cuối cùng sẽ rất tuyệt.

Đồng thời, kết cấu phải hoàn toàn phù hợp với phong cách và chủ đề của trang web. Ví dụ: các trang web thủ công phù hợp với các mẫu vải và các trang web vẽ phù hợp với các mẫu giấy. Tất cả những yếu tố này có thể phản ánh nội dung của trang web thông qua một quy tắc logic nhất định và củng cố hệ thống phân cấp thông tin tổng thể.

Tạo bầu không khí và làm nổi bật cá tính

Giờ đây, ngày càng có nhiều khách hàng thích trang web của họ có thể sử dụng thiết kế giao diện để truyền tải thêm thông tin về họ. Họ hy vọng rằng trang web có thể làm nổi bật cá tính của riêng họ và tạo hiệu ứng thương hiệu. Kết cấu và hoa văn là những công cụ mạnh mẽ trong việc thiết lập tính cá nhân.

Giữ cho nó rõ ràng

Tính dễ đọc là điểm mấu chốt mà một trang web phải duy trì. Ngay cả khi sử dụng họa tiết, hãy đảm bảo rằng nội dung vẫn dễ quét và đọc. Ngay cả khi đó là một trang web đẹp, người dùng sẽ không tiếp tục sử dụng nó nếu mức độ dễ đọc không tốt. Hãy chắc chắn để tránh tình trạng này như minh họa trong hình bên dưới.

Sử dụng kết cấu một cách tiết kiệm

Như đã nêu trước đó, kết cấu nên được sử dụng một cách tinh tế và không bị lạm dụng. Trong các trang web, chúng ta cần phải hạn chế và không sử dụng chúng trên quy mô lớn, để không cản trở sự chú ý của người dùng đến nội dung chính.

Tập luyện giúp hoàn hảo hơn

Khi sử dụng họa tiết và hoa văn, hãy thử nhiều hơn. Chỉ sau khi dùng thử, bạn sẽ biết kết quả cuối cùng. Đặt kết cấu ở nơi bạn chưa bao giờ nghĩ tới và bạn có thể tìm thấy những thứ khác. Bạn càng sử dụng nhiều mẫu và kết cấu, bạn càng nhận được nhiều hơn.

Sử dụng nó với ý định

Khi sử dụng các mẫu và kết cấu, bạn cần phải có chủ ý. Giống như với thiết kế, bạn không làm điều đó vì lợi ích của việc làm. Việc bạn sử dụng kết cấu và hoa văn phải là phương tiện để đạt được mục đích.

Khám phá, khám phá, khám phá...

Có hàng ngàn trang web cung cấp các kết cấu và mẫu tuyệt vời miễn phí. Dành thời gian khám phá và bạn sẽ thích những gì bạn nhận được. Để tiết kiệm rất nhiều thời gian khi thiết kế, tin tôi đi, đó là giải pháp tốt nhất để làm tài nguyên dự phòng trong thời bình. Nếu dùng thời gian thiết kế để tải xuống và thu thập tài nguyên, tôi sợ rằng bạn sẽ rất thiếu thời gian.

Các liên kết được chọn thủ công để khám phá Kết cấu

365 Hoạ tiết để tải xuống (JPG, PSD, PAT, ABR) — WeGraphics

Hình nền | Đồ HọaBurger

Thư viện mẫu

mẫu ava7 /// 1905 mẫu nền liền mạch miễn phí

Các liên kết được chọn thủ công để khám phá Mẫu

Trình tạo SVG miễn phí, công cụ màu & công cụ thiết kế web (fffuel.co)

Quái vật mẫu — Trình tạo mẫu SVG

Hoa Văn Tinh Tế | Kết cấu miễn phí cho dự án web tiếp theo của bạn (toptal.com)

Trình tạo mẫu | Tạo các mẫu liền mạch, miễn phí bản quyền (doodad.dev)

Cảm ơn bạn đã đọc và có một ngày tuyệt vời!

Người giới thiệu

• UXdesign.cc