1, 친숙한 인터페이스
우호적인 접촉 인터페이스는 항상 친근함을 느끼게 한다. 만약 몇 가지 기능이 있고 읽기가 쉽다면, 사용자는 더욱 편안함을 느낄 것이다. "우리가 당신을 도울 수 있는 것" 은 사용자가 "우리와 함께", "우리를 고용" 및 이메일 구독에 참여하도록 안내할 수 있습니다.
2. 세계 각지의 사무실을 표시합니다
Tool 의' 우리 정보' 페이지에서 디자이너는 로스앤젤레스, 뉴욕, 프랑스에 있는 팀의 주소와 연락처 정보를 굵은 글씨로 표시했습니다. 이것은 바로 우리 페이지를 클릭하는 사용자가 알고 싶어하는 것이 아닙니까? 올바른 연락처 정보, 간단하고 직접적인 디자인, 바로 이렇게 하는 것이다.
3. 커뮤니케이션 프로세스 간소화
Productiong Location 의 연락처 페이지도 대담하고 시각적인 페이지 디자인을 채택하고 있지만, 다른 유사한 페이지와는 달리 커뮤니케이션 프로세스를 단순화하고, 사용자가 관심을 가질 수 있는 콘텐츠와 커뮤니케이션이 필요한 특정 부분을 분할하여 서로 다른 요구 사항을 가진 사용자가 특정 페이지와 부분으로 직접 안내할 수 있도록 하여 단순화 및 전환 목적을 달성합니다.
4. "아바타" 및 개인화 된 정보
디자이너와 팀원의 사진을 올려 사용자가 당신을 알 수 있도록 합니다. 가장 중요한 것은 너의 프로필 사진이 충분히 예쁘지 않느냐가 아니라, 사용자에게 이 아름다운 사이트 뒤에 너와 나처럼 진실하고 평범한 디자이너가 있다는 것을 알려주는 것이 그의 노력의 결과이다. 아바타' 는 페이지를 더욱 개인화할 수 있고, 더욱 사실적이고 친근하게 만들 수 있다.
5. 사용자 교류를 독려합니다.
우리 페이지의 핵심 디자인 목적은 일반적으로 의사 소통입니다. Hello Innovation 의 페이지 디자인은 사용자가 웹 사이트와 적극적으로 의사 소통하도록 장려하는 개념을 완전히 구현합니다. 친절하고 우호적인 디자인으로 연락처를 남기고 문건에서 우편함 남김에 이르기까지 사용자들을 독려한다. 말하는 것이 얼마나 어렵습니까?
6. 그림으로 은유를 전달한다
디자인 박물관에는 디자인과 관련된 소장품이 많은데, 우리 페이지에 있는 이 휴대전화는 웹사이트의 소장품일 뿐만 아니라 사용자에게' 소통' 이미지를 전달하는 중요한 은유이기도 하다. 디자인의' 쌍관' 이라고 할 수 있다.
7. 잊을 수 없는 디자인 만들기
괴이한 디자인, 재미있는 문안, 항상 기억에 남는다. 매일 엄청난 양의 정보 섭취가 가장 두드러진 것만 기억하게 한다. (윌리엄 셰익스피어, 윈스턴, 독서명언) 하지만 이상한 디자인은 어떤 브랜드나 사이트에도 적합하지 않을 수 있지만, 그 고아한 사이트에는 그 독특한 뇌동들이 항상 작용한다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
8, 브랜드 캐릭터 성능
웹사이트의 경우, About Us 페이지에 자신의 브랜드 개성을 드러내는 것은 당연히 합리적이다. 분 선택은 브랜드 배색과 관련 디자인 요소를 우리 웹 페이지에 통합하는 우아하고 전문적인 방법입니다. 전문 와인 수입업체인 분 선정 (Boone Selections) 의 About Us 페이지는 독특한 조판과 스크롤 페이지 디자인으로 독특한 브랜드 분위기를 자아냈다.
9. 연락처 정보를 표시합니다
페이지 지도에 회사의 위치가 표시되더라도 페이지 디자인이 안정적이고 제자리에 있다는 점도 이에 관한 것입니다. (윌리엄 셰익스피어, 윈스턴, 페이지, 페이지, 페이지, 페이지, 페이지, 페이지, 페이지) 페이지 아래로 스크롤하면 자세한 주소 설명, 지하철 이용 상황, 통신사서함, 전화 등도 볼 수 있습니다.
10, 힌트를 주세요
웹사이트 Deux Huit Huit 의 "정보" 페이지는 전통적인 커뮤니케이션 방식을 제공하는 것이 아니라 직관적이고 간단한 대화 상자로 설계되었습니다. 맨 위에 있는' 인사' 대화 상자는 내용을 입력하기만 하면 사이트 개발자가 볼 수 있다는 것을 사용자에게 직접 일깨워 준다.
1 1, 개업/근무시간을 명시합니다.
구체적인 영업시간이 있는 기관 공식 홈페이지의 경우 식당 박물관 상점 등. , "우리 정보" 페이지에 점포의 개장 시간과 전화 상담 시간을 표시해 사용자가 서비스를 더 효율적으로 받을 수 있도록 했다.
12, 눈에 띄는 글꼴 사용
Panache 는 우리 페이지의 제목 글꼴에 매우 눈에 띄는 "Travaillons Ensemble" 을 사용합니다. 이 글꼴은 더 가볍고 독특하지만 인식도가 높습니다.
13, 굵은 색 구성표 사용
스펀지의' 우리에 대한 정보' 페이지는 고전적인 흑백색 배색을 채택하고 있다. 이 강렬하게 대비되는 배색 구성표는 상세한 묘사와 결합하여 전체 페이지를 선명하고 질감이 있는 것처럼 보이게 한다. 디자이너는 가장 중요한 정보에 밝은 색상을 사용하여 사용자가 쉽게 알아차릴 수 있도록 합니다.
14, 시각적 그림 사용
일러스트레이션은 항상 더 시각적인 방식으로 사용자의 주의를 끌 수 있다. 특히 일러스트레이션이 충분히 스타일화되고 개인화될 때 더욱 그렇다. Legwork Studio 의' 우리 정보' 페이지에는 늑대의 머리 그림이 추가되어 손으로 쓴 글씨체와 결합해 개인화된 분위기를 조성했다.
15, 간단한 그래픽 사용
Giampiero Bodini 의 About Us 페이지는 복잡한 디자인 기술을 사용하지 않고 복잡한 스케치 배경에 간단한 직사각형을 넣어 연락처 및 관련 정보를 넣었습니다. 복잡함과 단순함, 손으로 그린 것과 도형이 뚜렷한 대비를 이루었다.
16, 양식과 통신
교류는 상호적이다. 웹 사이트에 메시지를 보내거나 연락처 정보를 남겨 사이트 운영자가 메시지를 보낼 수 있도록 할 수 있습니다. QED 그룹은 연락처 페이지에 직접 양식을 남겼습니다. 이 양식을 통해 연락처를 남길 수 있습니다.
17, 단색 배색 사용
간결하고 우아하며 가독성은 조셉 아보에 웹 사이트 연락처 페이지의 디자인 스타일이다. 화려한 디자인도, 화려한 기능도 없고, 날씬한 반지 하나, 중간이 가장 기본적인 연락처인데, 바로 이렇게 직설적입니다.
18, 유머
유머러스한 디자이너는 결코 웃긴 기회를 놓치지 않을 것이다. Bio-Bak 의 디자이너는 심지어 연락처 페이지에서도 사람들의 환심을 사려고 한다. 낙서의 글씨체, 장난스런 문안, 웃음을 자아내고, 모든 디테일에서 이 디자이너의 유머를 느낄 수 있다.
19, 양식 작성
아나킨의 "우리에 대한 정보" 페이지도 사용자가 연락처를 채울 수 있도록 해 주지만 양식의 디자인은 더욱 독특하다. 특별한 양식은 없고, 단지 자리 표시자로 각 위치에서 무엇을 채워야 하는지, 매우 친밀하고, 매우 직관적이며, 또한 매우 친밀하다는 것을 사용자에게 일깨워 줄 뿐이다. (윌리엄 셰익스피어, 템플릿, 독서명언)
20. 사무실 위치 표시 개인화
두 번째 사례와 마찬가지로 CPB 그룹은 전 세계에 사무실이 있지만 디자인 스타일도 더욱 독특합니다. 각지의 사무실 콘텐츠와 개인화된 배경이 어우러져 정보가 하나로 어우러져 개성이 넘친다.
2 1, 업무 소개.
"우리 정보" 페이지에서 자신을 소개하는 것은 드문 일이 아니지만, 자신의 업무 소개, 브랜드 전시, 사용자 채팅 유치 등 다른 많은 일을 할 수 있습니다. 이것은 "안녕하세요, 월요일" 의 "우리에 관한" 페이지에서 한 일입니다.
22 비디오 배경
웹 사이트에 동영상 배경을 추가하는 것은 이미 매우 인기 있는 수단이 되었으며, 영화 제작 스튜디오로 존재하는 Moodboard 는 About Us 페이지에서 동영상 배경을 사용하여 팀의 업무 특성뿐만 아니라 전체 About Us 페이지도 더욱 생동감 있게 만들어 줍니다. (윌리엄 셰익스피어, Northern Exposure (미국 TV 드라마), 영화명언)
23. 그리드 레이아웃 사용
구조화된 페이지를 디자인하기 위해 격자는 항상 가장 친한 친구이다. (조지 버나드 쇼, 친구명언) Urban Influence 우리 페이지에 대한 정보는 그리드를 사용하여 전체 페이지, 표시할 내용, 사용자가 입력한 부분, 장식된 부분, 표시된 지도가 페이지에 명확하게 분포되어 있습니다.
24. 인터페이스를 더욱 친근하게 만듭니다.
만약 우리가 인터페이스를 더욱 우호적으로 만든다면, 디자이너들은 해야 할 일이 많다. 명확하고 읽기 쉬운 인터페이스 디자인이 가장 기본적이다. 메시지는 분명히 전달해야 하고, 공격적인 배색, 친숙한 표현, 조작이 쉬운 상호 작용이 없어야 한다. 이것들은 모두 디자이너가 잘 해야 할 곳이다.
25, 단계별 지침
연락을 받으려면 일련의 작업이 필요합니다. 전체 상호 작용 과정을 여러 단계로 나누고, 한 단계씩 단계별로 진행하도록 안내하고, 동적 효과와 마이크로상호 작용을 더하면, 반드시 다른 경험이 될 것이다. (윌리엄 셰익스피어, 윈스턴, 상호, 상호, 상호, 상호, 상호, 상호)
26, 연락처 바로 가기 추가
팀의 다른 부분의 책임자는 보통 다르다. 사용자는 일반적으로 연락처 페이지를 열 때 명확한 목표를 가지고 있습니다. FAQ 섹션에 가입하고 특정 연락처의 연락처를 가입하여 사용자가 다른 담당자와 보다 직접적으로 교류할 수 있도록 하는 방법.
27. 웹 사이트의 다른 부분과 통합.
로비 레온나디의 웹사이트는 마치 평면 컴퓨터 게임으로 디자인된 것 같다. 페이지를 탐색할 때, 다른 페이지로 가서 주인공과 다른 일을 하고, 우리 페이지도 그 중 하나이다. (존 F. 케네디, 페이지명언) 이것은 "장면" 입니다. 이것은 페이지를 통합하는 방법이며 배울 가치가 있습니다.
28. 팀 사진
많은 웹사이트가 전체 개발설계팀이 운영하고 있기 때문에 우리 페이지의 배경지도로서 사진을 찍는 것도 합리적이고 개인화된 것이다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
29. 공백을 사용합니다
일반적으로 공백은 전체 페이지의 공간감과 구조감을 강화하는 반면, Betataki 는 우리 페이지에 디자인감 있는 휴대폰을 배치해 공백을 통해 연락처와 같은 내용의 존재감을 높인다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), Northern Exposure (미국 TV 드라마), 예술명언
30, 유연한 글꼴 조판
잘 디자인된 서체 조판은 장식적일 뿐만 아니라 일정한 내용도 담을 수 있다. Pauline Osmont 의 연락처 우리 페이지는 블랙, 실버, 골드 컬러를 사용하여 글꼴 조판기의 매력적인 비주얼 디자인을 구축합니다. 페이지를 아래로 스크롤하면 쉽게 읽고 조판할 수 있는 양식을 볼 수 있습니다.
3 1, 개인쇼
이것은 또한 최근 몇 년 동안 흔히 볼 수 있는 콘텐츠 전시 방식이다. 디자이너는 전시판을 들어 그들의 디자인 작품을 전시했다. 연락처 페이지에 사용하면 이 디자인 기술도 매우 적합합니다. 마크 자보스키 (Mark Jaworkski) 의 페이지처럼 디자이너의 기교, 소개, 댓글 표가 이 평평한 화이트보드에 가지런히 전시되어 있다.
32. 소셜 미디어 연락처 정보를 나열합니다.
지금 어느 사이트에 소셜 미디어 계정이 몇 개 없나요? 많은 사용자들에게 우리 페이지에 있는 자신의 사이트에 대한 소셜 미디어 링크를 연락하는 것이 더 편리하다.
33. 전통적인 소통 방식을 차용하다.
복고풍은 좋은 선택이지만, 전통적인 연락처로 디자인하는 것이 더 사상적이고 재미있을 것 같다. Lionway 의 연락처 페이지는 엽서로 디자인되었으며 일부 고정 정보는 인쇄된 청구서에 간단히 기재되어 있습니다.
34, 재치있는 카피 라이팅
문안의 디자인도 우리 페이지에 연락하는 중요한 부분이다. 친근하고 유머러스한 문안 디자인은 사용자를 친근하게 만들지만, 똑같이 익살스러운 문안도 사용자들을 잊을 수 없게 한다.
35. 개성을 보여주세요
디자인 스튜디오 Resn 에게 연락하세요. 저희 페이지 디자인은 이 사례에서 가장 개인화된 페이지 중 하나입니다. 80 년대 풍채가 가득한 디자인 요소와 동물 머리 덮개를 쓴 선수 사진이 페이지의 주체를 구성한다.
36, 정보지도 사용
정보지도는 최근 몇 년 동안 부상한 설계 기술이다. 적절한 전시 내용이 있다면' 정보' 페이지에서 정보도를 사용하는 것도 좋은 선택이다. Quicksprout 의 "정보" 페이지는 정보 차트를 사용하여 명확하고 읽기 쉽고 정확한 콘텐츠를 제공합니다.
37. 애니메이션과 만화
연락처 페이지에서 만화와 애니메이션 이미지를 사용하여 디자이너와 디자인 팀을 소개하는 것은 매우 일반적이고 효과적입니다. Melonfree 의' 우리에 대한 정보' 페이지는 디자이너와 개발자의 만화 이미지를 보여준다.
38. 반투명 그래픽 사용
사람의 눈은 항상 비석의 내용을 의식적으로 인식하기 때문에 반투명한 원소가 함께 들어와도 독서 경험에 심각한 영향을 미치지 않는다. Indofolio 의 페이지 디자인은 반투명 요소를 최대한 활용하여 반투명 직사각형에 핵심 연락처 정보를 배치합니다. 그래픽을 통해 사용자는 여전히 배경의 세부 사항을 볼 수 있지만 중요한 연락처 정보는 잘 보이지 않습니다.
39, 손으로 그린 효과
손으로 그린 연락처 우리 페이지, 특히 눈에 띄는 페이지는 항상 사용자가 디자이너의 친밀함을 느낄 수 있게 해준다. 마리오 페트론의 페이지 디자인은 상당히 재미있습니다.
40. 드롭다운 상자를 하나만 사용합니다.
스포크 세발 자전거의 연락처 페이지는 사실 완전한 페이지가 아니라 드롭다운 상자로 대체되었다. 탐색 중인 링크를 클릭하면 이 강조 표시된 주황색 드롭다운 상자가 나타납니다.
웹 디자인 컬러 시스템 사례 연구
오렌지색은 오렌지색 또는 오렌지색이라고도 합니다. 그것의 관통력은 붉은색에 버금가고, 색감은 붉은색보다 더 따뜻하다. 오렌지색은 웹 디자인에서 매우 활발한 컬러로 럭셔리하고 따뜻하고 신나고 열정적이며 즐겁고 활기찬 느낌을 주며 흥미진진한 컬러입니다.
오렌지색은 홈페이지에서 널리 사용되고 있습니다. 색깔을 바꿔 다양한 하위 분위기를 조성할 수 있어 청춘의 활력을 과시하고 차분한 효과를 얻을 수 있다. 오렌지색의 파장은 빨간색과 노란색 사이에 있으며 건강, 활력, 용기, 자유 등 상징적인 의미를 지닌다. Orange 에 대해 더 잘 이해할 수 있도록 다양한 유형의 웹 페이지를 분석해 보겠습니다.
1. 케이터링 웹 사이트 디자인 사례 분석
권장 사례: 주황색+노란색+진한 주황색
전체 페이지는 오렌지색을 위주로 광도와 순도가 다른' 노란색' 으로 조화를 이루며 페이지가 매우 조화롭고 단조롭지 않다. 좋은 그림, 음식 사진 색깔이 비슷해서 갑작스럽지 않아요. 웹페이지를 흰색으로 레이어드해 레이어드감이 있어요.
엔터테인먼트 웹 페이지 사례 연구
추천 사례: 진한 오렌지+카키+옐로우.
전체 페이지는 진한 오렌지색과 연한 노란색의 조합으로 보여지며, 페이지를 더 따뜻하게 보이게 하고, 어두운 깔개와 노란색 문자를 깔고, 눈에 띄지만 선전하지 않는 비주얼을 달성하며, 웹 사이트에 활력을 불어넣는다.
셋. 전자 상거래 웹 사이트 사례 연구
추천 사례: 오렌지+카키+그린
이 경우 색상이 상대적으로 많고 밝기가 높은 카키색 보조 오렌지 네비게이션은 지저분해 보이지 않고 더욱 특색이 있고 발랄합니다. 녹색 버튼을 추가하여 페이지를 장식하면 페이지가 그렇게 단조롭지 않고, 오렌지만 오렌지에는 약간의 녹색 시각 효과가 있다.
넷. 과학 기술 개발기구 웹 사이트 사례 연구
페이지에 사용된 색깔은 비교적 복잡하지만, 주는 느낌은 어수선하고 질서 정연하다. 보시다시피, 페이지는 진홍색으로 쓰여져 있으며, 오렌지색은 위쪽의 오렌지색 하단에 있는 붉은 글자와 오렌지색의 큰 제목과 붉은색의 작은 제목과 같이 빨간색 텍스트 근처에 나타납니다. 이렇게 하면 페이지가 질서 정연하게 되어 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
요약: 오렌지색은 널리 사용됩니다. 채도와 순도를 조정하면 아주 좋은 시각 효과를 얻을 수 있다. 물론 시각적 충격과 동시에 약간의 대비색으로 시각적 피로를 완화하고 완화할 수 있다.