질감과 패턴 — 시각 디자인의 숨은 영웅

Coinbase 와 공동으로 진행하는 학습 프로그램인 Ayagigs Web3 Fellowship 에서 즐거운 친교 시간을 보냈습니다( 웃음 ) .

제품 디자인 리드인 Ajiri Omafokpe 와 프로그램 동료인 Folushola Esther 의 노고에 감사드립니다 . 그들은 프로그램을 환영하고 교육적이며 즐겁게 만드는 데 정말 많은 노력을 기울였으며 여러분이 보고 싶어하는 전체 그룹을 이끌고 있습니다.

우리는 기초 단계를 마치고 주요 단계로 향하고 있지만 그 전에 기초 단계에서 배운 내용을 테스트하기 위해 2022년 11월 21일 월요일에 시작된 챌린지 주간을 가졌습니다. MCQ, QA, Practical test( 이것이 2일 만에 완료되었다는 것이 믿기지 않을 것입니다)를 포함한 모든 종류의 테스트를 수행하면서 도전적 이었습니다. 이 기사가 챌린지 주간의 마지막 작업입니다.

패턴과 질감의 사용에 대한 글을 써 달라는 요청이 많았기 때문에 이 기회를 이용하여 주제에 대한 지식을 공유하기로 결정했습니다.

자, 시작하겠습니다.

텍스처와 패턴은 일반적으로 디자인에서 없어서는 안될 시각적 요소입니다. 대부분 간과되지만 호기심 많은 디자이너가 발견하면 매우 귀중해지기 때문에 이름 없는 영웅이라고 부릅니다.

예술에서 차용한 요소로 디지털 디자인을 보완하고 깊이감을 줍니다. 텍스처는 사용자의 시야를 안내하여 웹 페이지의 주요 콘텐츠를 표시할 수 있습니다. 패턴은 지루한 공간을 생기있게 보이게 할 수 있습니다. 둘 다 인터페이스를 즐겁게 만들어 사용자 경험을 향상시키는 데 크게 기여합니다.

하지만 질감은 오랫동안 " GRUNGE " 스타일의 디자인 으로 오해를 받아온 것 같습니다 . 많은 웹 페이지에서 멋진 효과를 강조하기 위해 대량으로 사용되며 심지어 남용이 의심되는 것을 볼 수 있습니다. 남용의 결과는 그 진정한 혜택이 묻히는 것입니다. 텍스처를 최대한 활용하려면 미묘하고 의도적으로 사용해야 합니다.

반면에 패턴은 사용하기 쉽고 화면의 특정 영역에 주의를 집중시키는 데 사용할 수 있습니다. 텍스처와 마찬가지로 패턴은 미묘하게 사용될 때 효과적이지만 필요할 때 더 분명한 방식으로 사용될 수 있습니다.

두 단어는 때때로 서로 바뀌어 잘못된 것입니다. 그들은 약간의 유사점만을 공유합니다. 패턴은 일반적으로 특정 시각적 리듬과 함께 몇 가지 작은 반복 요소로 구성됩니다. 텍스처는 패턴보다 더 큰 요소로 구성되며 반드시 반복되지는 않습니다.

텍스처 및 패턴 사용 사례

텍스처는 모바일 앱보다는 웹용으로 디자인할 때 주로 사용됩니다. 패턴은 웹 및 모바일 앱 디자인 모두에서 널리 사용됩니다. 디자인을 하는 이유는 단순히 " 아름답 기 " 때문이 아니라 어떤 기능을 만족시키는 것이 기본이 되어야 하며, 디자인을 하면서 질감과 패턴을 사용하는 목적은 대부분 웹 페이지의 수준과 시각을 높이기 위함입니다. 몇 가지 사용 사례를 살펴보겠습니다.

사용자의 클릭 유도

아이콘, 버튼, 제목 등과 같은 요소는 모두 텍스처링될 수 있습니다. 사용자가 해당 요소를 클릭하도록 유도할 수 있습니다. 텍스쳐 사용이 인기를 끄는 이유가 아닐까 합니다. 텍스처의 주요 용도는 웹상의 다른 요소와 구별될 수 있도록 요소에 적용하는 것입니다.

향상된 시각적 정보 표현

텍스처는 선, 상자 및 대비와 마찬가지로 시선을 안내하는 데 사용할 수 있으므로 특정 시각적 규칙에 따라 콘텐츠를 표시하기 위한 조판에도 사용할 수 있습니다. 동시에 텍스처 효과를 적절하게 사용하고 다른 시각적 규칙과 조정해야 최종 출력 효과가 커집니다.

동시에 텍스처는 웹사이트의 스타일 및 테마와 완벽하게 일치해야 합니다. 예를 들어 수제 웹사이트는 옷감 패턴과 일치하고 색칠된 웹사이트는 종이 패턴과 일치합니다. 이러한 모든 요소는 특정 논리 규칙을 통해 웹 사이트의 콘텐츠를 반영하고 전체 정보 계층을 강화할 수 있습니다.

분위기를 조성하고 개성을 강조

이제 점점 더 많은 고객이 자신의 웹사이트가 인터페이스 디자인을 사용하여 자신에 대한 더 많은 정보를 전달할 수 있다는 점을 좋아합니다. 그들은 웹사이트가 자신의 개성을 부각시키고 브랜드 효과를 발휘할 수 있기를 바랍니다. 질감과 패턴은 개성을 확립하는 강력한 도구입니다.

읽기 쉽게 유지

가독성은 웹 페이지가 유지해야 하는 최종선입니다. 텍스처를 사용하는 경우에도 콘텐츠를 쉽게 스캔하고 읽을 수 있습니다. 아무리 아름다운 웹 페이지라도 가독성이 좋지 않으면 사용자는 계속 사용하지 않을 것입니다. 아래 그림과 같이 이러한 상황을 피하십시오.

텍스처를 아껴서 사용

앞서 언급했듯이 텍스처는 미묘하게 사용되어야 하며 남용되어서는 안 됩니다. 웹 페이지에서는 주요 콘텐츠에 대한 사용자의 관심을 방해하지 않도록 제한하고 대규모로 사용하지 않아야 합니다.

연습이 완벽을 만든다

질감과 패턴을 사용할 때 더 많이 시도하십시오. 재판을 거쳐야 최종 결과를 알 수 있습니다. 생각지도 못한 곳에 텍스처를 배치하면 다른 것을 찾을 수 있습니다. 패턴과 질감을 많이 사용할수록 더 좋아집니다.

의도적으로 사용

패턴과 질감을 사용할 때는 의도적이어야 합니다. 디자인과 마찬가지로 하기 위해서 하는 것이 아닙니다. 질감과 패턴의 사용은 목적을 위한 수단이어야 합니다.

탐색, 탐색, 탐색...

훌륭한 질감과 패턴을 무료로 제공하는 수천 개의 사이트가 있습니다. 탐색하는 데 시간을 보내면 얻은 것을 좋아할 것입니다. 설계할 때 많은 시간을 절약하기 위해 평시에 백업 리소스를 만드는 것이 최상의 솔루션이라고 믿습니다. 디자인 시간을 리소스 다운로드 및 수집에 사용하면 시간이 부족할 것 같습니다.

텍스처 탐색을 위해 엄선된 링크

다운로드할 365 텍스처(JPG, PSD, PAT, ABR) — WeGraphics

배경 | 그래픽버거

패턴 라이브러리

ava7 패턴 /// 1905 무료 원활한 배경 패턴

패턴 탐색을 위해 엄선된 링크

무료 SVG 생성기, 색상 도구 및 웹 디자인 도구(fffuel.co)

패턴 몬스터 — SVG 패턴 생성기

미묘한 패턴 | 다음 웹 프로젝트를 위한 무료 텍스처(toptal.com)

패턴 생성기 | 로열티가 없는 원활한 패턴 만들기(doodad.dev)

읽어주셔서 감사하고 좋은 하루 되세요!

참조

• UXdesign.cc