사과 CSS 스타일의 투명 버튼입니다. 반투명 버튼. Azure 버튼

매년 웹 디자인의 많은 유형과 요소는 인기 부족으로 인해 사라집니다. 2014년, 오늘날에도 여전히 인기 있는 지배적인 디자인 트렌드 중 하나는 투명 버튼입니다. 오늘은 이 버튼을 사용하는 몇 가지 예를 살펴보고 이 소중한 버튼의 장단점을 나열해 보겠습니다.

고스트 버튼

이 버튼은 대부분 가는 획이 있고 완전히 투명하며 일반적으로 가는 획을 사용하기 때문에 "고스트 버튼"이라고 합니다. 따라서 너무 눈에 띄지 않게됩니다. 또한 투명은 대부분 흰색이며 매우 자주 위치합니다. 또한 고스트 버튼은 거의 항상 미니멀하고 깔끔한 방식으로 사용됩니다. 이제 소중한 버튼의 주요 기능을 살펴보겠습니다.

• 윤곽에 둘러싸여
• 흰색 또는 검은색 텍스트 색상과 동일한 색상 및 획
• 이상 일반 버튼그 자리에서
• 투명 배경

비슷한 버튼을 자주 보았고 보았을 것이며 웹 디자이너라면 사용하기도 합니다. 투명 버튼은 일반적으로 사이트의 다른 버튼보다 크고 일반적으로 상단에 배치된다는 점을 고려할 때 사용자의 관심을 끌기에 좋은 도구로 사용할 수 있습니다. 예를 들어 Startup Framework와 같은 가장 인기 있는 프로젝트에서도 종종 볼 수 있습니다.

고스트 버튼 소스

웹 디자인의 기원은 때때로 추적하기 매우 어려울 수 있으며 투명 버튼도 예외는 아닙니다. 그러나 고스트 버튼이 나온 최초의 웹사이트는 Tumblr였습니다. 또한 투명 버튼이 인기를 끌기 시작하여 활발히 사용되어 Apple 제품(IOS 7)에 사용되고 있습니다. 유사한 버튼이 인터페이스에서 매우 활발히 사용됩니다.

Safari에서 책갈피가 있는 섹션에 주의하십시오.

그리고 앱 스토어 업데이트 화면:

많은 디자이너들은 큰 인기를 얻는 데 도움이 된 것은 고스트 버튼이라고 주장합니다. 하지만 애플사만들지는 않았지만 인기를 얻는 데 도움이 되었을 뿐입니다.

고스트 버튼은 지난 한 해 동안 가장 인기 있는 사용자 인터페이스 디자인 트렌드 중 하나가 되었습니다. 많은 중요한 이점이 있기 때문에 이것은 놀라운 일이 아닙니다. 그러나 이 디자인 요소가 랜딩 페이지를 장식할 뿐만 아니라 작업을 시작하도록 하려면 어떻게 해야 할까요?

투명한 클릭 유도문안 버튼을 선택하는 이유는 무엇입니까?

이 트렌드는 미니멀리즘과 플랫 디자인(플랫 디자인)의 두 가지 주요 트렌드와 결합됩니다. 그들의 주요 장점은 미적 단순성과 사용자의 매력입니다. 세련된 투명 버튼은 보편적이며 대부분의 방문 페이지 인터페이스에 "포함"될 수 있습니다. 컬러 솔루션. 클릭 가능한 요소로 공간을 어지럽히지 않고 공간을 절약할 수 있습니다.

이 버튼은 대조적인 배경 덕분에 읽기 쉽습니다. 물론 선택하는 글꼴과 색상에 따라 많은 것이 달라집니다. 예를 들어 너무 밝은 배경 위에 흰색 텍스트는 방문자를 짜증나게 할 수 있습니다. 그러나 이것은 윤곽 버튼을 선택할 때 접하게 되는 몇 안 되는 함정 중 하나입니다. 그리고 마지막으로 이러한 디자인 요소는 HTML과 CSS를 사용하여 쉽고 빠르게 생성됩니다.

다음은 깔끔하게 맞는 윤곽 버튼의 예입니다. 사용자 인터페이스따라서 회사의 이익을 위해 "일"합니다.

1. 무라카미 하루키

유명한 작가 무라카미 하루키의 사이트가 첫눈에 흥미롭습니다. 이는 단순한 그림이 아닌 소름 끼치는 포식자의 눈을 사실적으로 표현한 어두운 배경에 흰색 텍스트를 사용하여 이루어집니다. 불길한 분위기는 대조되는 클릭 가능한 요소로 보완됩니다.

2 본 그룹

최근 마케팅 회사인 Group FMG는 POD1과의 합병을 발표했으며 현재는 Born Group 브랜드로 알려졌습니다. 방문 페이지는 특별히 설계된 "칩"을 사용합니다. 리소스를 열면 공격적인 영장류의 사진이 보입니다.

본능적인 반응으로 인해 이 사진을 닫고 다음 개요 버튼을 눌러 더 빨리 추가 탐색으로 넘어갈 수 있습니다. 또한 야수는 해당 분야에서 회사의 리더십을 상징하는 역할을 하며 본 그룹의 '알파 상태'를 나타냅니다.

3. 빅 드롭

BigDrop은 웹 디자인 스튜디오입니다. 그녀의 방문 페이지에서 우리는 즉시 관심을 끄는 읽을 수 있는 등고선 버튼 클릭 유도문안(CTA, 클릭 유도문안)을 봅니다. 사용자가 마우스를 가져가면 노란색으로 강조 표시되며 페이지 하단에 투명 아이콘스크롤을 용이하게 하는 마우스.

이것은 전체 개념에 완벽하게 들어맞고 페이지에서 보기 좋게 보이는 정말 창의적이고 매력적인 웹 디자인 요소의 예입니다. 색 구성표와 스타일은 현대적인 미니멀리즘 트렌드와 일치합니다. 이 모든 것은 배경으로 뉴욕의 그림 같은 풍경으로 보완되어 이 도시에 사는 모든 고객들에게 깊은 인상을 남깁니다.

4 번들린

방문 페이지에는 Twitter의 콘텐츠(개발자에 따르면 최고 및 가치 있음)가 있습니다. 이것은 작동 중인 고스트 버튼의 또 다른 예이기도 합니다. 클릭 가능한 각 요소는 예상되는 사용자 행동(사용자 흐름)의 일반적인 개념에 해당합니다. 결과적으로 우리는 잘 구성되고 최대한 논리적인 상호 작용 프로세스를 얻게 되며, 각 단계는 사이트 방문자에게 명확합니다.

5. 네리손

프리랜스 아트 디렉터에 걸맞게 Jimmy Raheriarisoa는 포트폴리오에 윤곽 단추가 있는 세련된 디자인을 선택했습니다. 가장 먼저 클릭할 수 있는 요소는 오른쪽 상단 모서리에 있는 언어 전환 버튼일 것입니다.

그런 다음 리소스의 내용을 탐색하고 모든 페이지에서 최소한 하나의 투명한 버튼을 보고 싶을 것입니다.

6. 시차

Parallax 디지털 에이전시의 랜딩 페이지에 들어서는 순간 밝은 색상과 웹 디자인 요소의 탁월한 구현이 시선을 사로잡습니다. 이러한 솔루션은 회사를 경쟁업체와 차별화합니다. 페이지에서 음소거된 유일한 색상 요소는 마찰을 줄이고 전체 그림을 추가로 구성하는 우아한 고스트 버튼입니다.

7. 거리

Parallax와 달리 앱 개발 회사인 Distance가 구현한 홈페이지랜딩 페이지를 반대로 하고 음소거 배경을 선택합니다. 윤곽선 버튼은 필요한 최소한의 색상을 추가합니다. 보시다시피 이러한 웹 디자인 요소는 실제로 보편적입니다. 방문자의 관심을 끌고, 발생한 전환 마찰을 제거하고, 필요한 곳에 집중하여 주의를 환기시킬 것입니다.

8 파워하우스 컴퍼니

건축 및 디자인 솔루션을 제공하는 회사의 랜딩 페이지에는 물론 가장 세련된 솔루션이 이미 나타날 것으로 예상됩니다. 홈페이지. 그리고 Powerhouse Company는 이와 관련하여 잠재 고객을 실망시키지 않습니다.

9.인테그라

Integra의 방문 페이지는 좋은 사용의 또 다른 예입니다. 시각 효과. 홈페이지에서 우리는 매혹적이고 약간 무서운 원/구의 구조를 봅니다.

그러나 그러한 인상적인에도 불구하고 배경, 윤곽 버튼 프레임이 명확하게 표시됩니다. 덜 투명한 소셜 미디어 버튼은 여전히 ​​유령 범주에 속하지만 스마트 배치와 작은 크기 덕분에 클릭 유도문안을 손상시키지 않습니다.

10 도시의 영향

브랜드 회사인 Urban Influence는 고스트 버튼을 가장 "자유롭게" 사용하는 예를 보여줍니다.

제작자는 개성에 집중하기를 원하므로 이미 홈페이지에 있는 직원 비디오와 애니메이션을 사용합니다. 그리고 그 이유입니다. 자신을 표현할 수 있는 능력은 아마도 가장 중요한 측면브랜딩. 그리고 화려한 클릭 유도문안 버튼은 그런 생각을 산만하게 할 뿐입니다. 따라서 우리는 다양한 윤곽 버튼을 사용하여 사용자 행동에 대한 유능한 알고리즘을 구축하는 것이 가능하다는 것을 다시 한 번 확신합니다.

11. 5분

Five Minutes는 좀비로부터 도망쳐야 하는 중독성 있는 온라인 게임입니다. 사실 영화에 가깝기 때문에 제작자들은 이미 홈페이지에서 적절한 분위기에 몰입하기로 결정했습니다. 그리고 실제로, GUI사용자(HUD, 헤드업 디스플레이)와 컨투어 버튼은 "마이너리티 리포트" 또는 "아이언맨"(아이언맨)과 같은 그림을 연상시킵니다.

12. 부두크노스트

문제의 추세가 미국과 영국에만 관련이 있다고 생각되면 체코 공화국의 한 대학에서 제공하는 사이트에 주의를 기울이십시오. 이 자료에서 귀하는 테스트를 통해 왼쪽 또는 오른쪽 뇌의 어느 쪽이 더 발달했는지 알아낼 수 있습니다.

각 사용자가 테스트 중에 쉽게 탐색할 수 있도록 개발자는 투명하게 클릭할 수 있는 다이아몬드 모양의 요소를 추가했습니다. 또한 읽을 수 있는 대조 버튼은 필요한 경우 언어를 빠르게 변경하는 데 도움이 됩니다.

13. 파놉틱엠

디지털 회사 Panoptiqm의 랜딩 페이지는 애니메이션의 유능하고 적절한 사용의 예입니다. 빨간색 윤곽선 투명 버튼관심을 끌고 요소를 더 잘 보이게 합니다. 이 모든 것은 방문자가 주요 작업에서 주의를 분산시키지 않는 변화하는 비디오를 배경으로 발생합니다.

14. 드라이지탈

Drygital은 우리 트렌드의 일부로 방문 페이지에서 흥미로운 발견을 제시하는 스페인 디지털 마케팅 대행사입니다. 표준 CTA 개요 버튼 외에도 "고스트 화면"이 여기에 사용됩니다.

탐색 키를 누르면 나타납니다. 보라색 메뉴는 모서리에서 확장되어 전체 페이지를 채웁니다. 그러나 메뉴 버튼은 여전히 ​​투명합니다.

15. 로즈워터 필름

최근에 미국 코미디언, 풍자, 배우, 작가 및 프로듀서인 Jon Stewart 감독의 직업 목록에 또 다른 항목이 추가되었습니다. 그의 프로젝트를 홍보하기 위해 그는 Rosewater Film이라는 새로운 웹사이트를 시작했습니다.

여기에서는 간결한 개요 버튼의 사용도 볼 수 있습니다. 또한 개발자가 찾은 것 중 하나는 비디오를 포함하고 전체 개념에 맞는 모서리의 투명한 직사각형입니다.

결론 대신

보시다시피 개요 버튼은 웹 디자이너가 자주 사용합니다. 다른 나라. 이러한 요소는 다양한 주제와 방향의 방문 페이지에 적합합니다. 그들은 미니멀하고 단순하지만 항상 세련되게 보입니다.

투명한 버튼은 방대한 배경 이미지, 애니메이션 및 비디오와 잘 어울립니다. 평면 디자인이 내년의 트렌드가 될 것인지는 아직 미지수입니다. 그러나 오늘날 윤곽 요소는 인기가 절정에 달했으며 디자이너는 헛되이 선호하지 않습니다.