디자인 트렌드: 웹 디자인의 반투명 유리 효과

 디자인 트렌드: 웹 디자인의 반투명 유리 효과

John Morrison

디자인 트렌드: 웹 디자인의 반투명 유리 효과

흐림과 투명도의 적절한 조합을 통해 웹사이트 및 앱 디자인에서 가장 인기 있는 트렌드 중 하나인 반투명 유리 효과를 얻을 수 있습니다.

실제 반투명 유리를 통해 보는 것과 같은 요소를 만들기 위해 가우시안 블러, 그림자 및 투명도를 사용하는 디자인 기법입니다.

이 디자인 트렌드를 사용하는 7가지 방법에 대해 자세히 살펴보겠습니다.

그리고 더 많은 영감이 필요하다면 Dribbble이 반투명 유리 디자인 아이디어로 가득하다는 것을 아는 것은 놀라운 일이 아닙니다!

Envato 요소 살펴보기

레이어드 디자인 요소

흐림, 그림자 및 투명도와 같은 효과의 조합 때문에 반투명 유리 기법은 여러 레이어가 있는 디자인에서 잘 작동합니다. .

또한보십시오: 2023년 최고의 YouTube 썸네일 템플릿 35개 이상이 예는 배경의 어둡고 밝은 요소와 투명도가 어떻게 작동하는지 볼 수 있기 때문에 좋습니다.

위의 예와 같이 단일 요소를 위한 것이든 쌓인 것이든 배경 요소가 통과할 수 있는 방식으로 미묘한 깊이를 만듭니다. 이 예는 배경의 어둡고 밝은 요소와 투명도가 작동하는 방식을 볼 수 있기 때문에 좋습니다. 또한 더 큰 "유리" 영역의 흰색 가장자리 주변에 부드러운 그림자가 있어 배경과 명확하게 구분됩니다.

이 효과는 고정 탐색의 일부이기도 합니다. 방법을 잘 모르겠다면유리 효과를 사용하면 이러한 유형의 내비게이션 요소에 아름답게 작동할 수 있으며 시작하기에 좋은 장소가 될 수 있습니다.

또한보십시오: 2023년 명함을 위한 42개 이상의 최고의 글꼴

아이콘 디자인

반투명 유리 아이콘은 대부분의 디자이너가 오랫동안 사용해 온 아이콘 스타일을 새롭게 해석한 것입니다. 그러나 이것은 추세를 더 까다롭게 사용할 수 있습니다.

아이콘이 너무 작기 때문에 반투명 효과는 일부 디자인에 시각적 복잡성을 더할 수 있습니다. 이것은 아마도 오버사이즈 방식으로 사용될 아이콘에 가장 적합할 것입니다.

또 다른 실행 가능한 옵션은 아이콘이 많지 않고 모든 모양과 용도가 꽤 표준적이고 이해하기 쉬운 디자인을 위한 것입니다.

화려한 배경

반투명 유리 효과는 웹사이트 배경의 기초가 될 수 있습니다.

이 작품을 만드는 비결은 사용자가 배경이 무엇으로 구성되어 있는지 추측하려고 하지 않을 정도로 배경 이미지나 색상을 흐리게 처리하는 것입니다. 그것은 단지 더 부드럽고 거의 덩어리에 가까운 색상이어야 합니다.

반투명 유리 배경을 사용하는 대부분의 디자이너들은 시원한 색상(겨울 느낌을 강조함)으로 작업합니다.

위의 예는 배경과 교차하는 중간 바탕 요소가 있는 이중 반투명 레이어를 사용합니다. 배경. 흰색 영역과 색상 배경으로의 곡선은 시각적 요소가 많지 않은 디자인에 대한 흥미를 제공하는 강력한 조합입니다.

카드 스타일 블록

반투명 유리효과는 카드 스타일 블록에 이상적이며 요소 사이를 구분합니다.

위의 유리 카드 예에서 디자인은 신용 카드 스타일 요소를 사용하지만 거의 모든 유사한 오버레이에 대해 다시 상상할 수 있습니다. 이 스타일의 카드 스타일 블록을 잡지 형식의 블로그 게시물에 대한 컨테이너로 사용하거나 앱 디자인에서 두툼한 블록 모양의 버튼으로 사용하는 것을 고려하십시오.

이 디스플레이 옵션을 사용할 수 있는 다양한 기회가 있습니다.

이 예에서 떠오르는 또 다른 사항은 어두운 인터페이스에서 반투명 유리 요소를 레이어링하는 방법입니다. 반투명 유리가 전체 디자인 윤곽선을 부드럽게 만드는 방법에 주목하십시오.

지배적인 예술

웹사이트 디자인에서 반투명 유리 효과를 가장 적게 사용하는 것은 아마도 지배적인 예술 요소일 것입니다. 하지만 이 목적으로도 사용할 수 있습니다.

위의 예에서 불투명한 전경 애니메이션은 애니메이션 배경 텍스트가 스크롤되는 동안 초점 역할을 합니다.

지배적인 예술 요소로 사용될 때 이 효과의 문제는 "너무 부드럽지" 않도록 하는 것입니다. 사용자가 자신이 보고 있는 것을 이해하고 상호 작용하는 방법을 알기를 원합니다. 여기서 핵심은 디자인 효과를 위해 사용성을 희생하지 않는 것입니다.

형태 및 버튼 악센트

반투명 유리 기법은 디자인 내의 특정 사용자 인터페이스 요소에 적용될 수 있습니다.

위의 랜딩 페이지 개념은 사용 방법의 좋은 예입니다.양식 필드용입니다.

이 어두운 디자인 컨셉에서 효과는 화면의 작업 항목에 시선을 집중시키는 데 도움이 됩니다. 당신은 먼저 거기를보고 여자 약혼이 무엇인지 정확히 알고 있습니다.

디자인 관점에서 볼 때 어두운 배경에 더 밝은 양식 필드를 사용하면 순전히 "고스트" 또는 윤곽선이 있는 양식 필드가 아닌 방식으로 사용자를 끌어당길 수 있습니다. 그것은 세련된 디자인 요소를 만듭니다. (일부 사용성을 희생하더라도.)

부드러운 배경 레이어

때로는 반투명 유리 효과 덕분에 배경이 매우 부드럽고 단순합니다. 전체가 흰색인 배경에 대한 작은 색상 영역은 화면에서 약간의 움직임을 보장하기 위해 시각적 초점을 추가할 수 있습니다.

배경에 흐릿한 요소를 전체 화면으로 확장하지 마십시오.

생각할 다른 레이어 없이 순전히 배경에 있기 때문에 불투명 유리 요소의 가장 쉬운 첫 번째 구현일 것입니다.

이 예는 작은 영역에 국한되지만 항상 그런 것은 아닙니다. 하지만 서리로 덥은 배경 요소를 전체 화면으로 확장하지 마세요. 카운터 공백을 사용하면 기술을 강조하는 데 도움이 됩니다. 그렇지 않으면 그라데이션처럼 보일 수 있습니다.

결론

반투명 유리 효과의 재미있는 점은 작은 공간에서 미묘한 요소로 작용하거나 전체 디자인 컨셉으로 작용할 수 있다는 것입니다.프로젝트. 이미 디자인 분야의 거물들이 채택하고 있습니다. 왼쪽이나 오른쪽으로 완전히 스와이프할 때 iPhone의 일부 패널을 살펴보세요.

반투명 유리 요소를 가지고 노는 사람들이 너무 많기 때문에 앞으로도 더 많이 볼 수 있을 것입니다.

John Morrison

John Morrison은 노련한 디자이너이자 디자인 업계에서 다년간의 경험을 쌓은 다작 작가입니다. 지식을 공유하고 다른 사람으로부터 배우는 것에 대한 열정으로 John은 업계 최고의 디자인 블로거 중 한 명으로 명성을 쌓았습니다. 그는 동료 디자이너에게 영감을 주고 교육하는 것을 목표로 최신 디자인 트렌드, 기술 및 도구에 대해 연구하고 실험하고 글을 쓰는 데 시간을 보냅니다. 디자인 세계에서 길을 잃지 않을 때 John은 하이킹, 독서, 가족과의 시간 보내기를 즐깁니다.