디자인 심리학: 온라인 이미지 형성

게시 됨: 2023-02-15

우리는 디자인 심리학 시리즈의 이전 두 편에서 색상의 중요성을 철저히 다루었습니다. 그러나 색상 선택은 나쁜 디자인에 대한 투쟁의 한 부분일 뿐입니다.

새로운 웹 디자인을 위한 배경 패턴을 만들거나 새로운 제품의 포장에 대해 구상할 때 결국 종이에 연필을 대고 스케치를 시작해야 합니다. 어떤 모양을 만들기 시작하든 시청자에게 강력한 영향을 미칩니다.

고객이 선택한 모양과 전체 브랜드에 대해 말하는 내용 사이에서 만드는 일반적인 연관성에 대해 자세히 알아보십시오. 또한 이러한 모양이 모든 종류의 디자인에 어떻게 사용되었는지에 대한 실제 사례를 확인하십시오!

  • 윤곽
  • 원과 타원
  • 삼각형
  • 사변형
  • 다각형
  • 추상적인 모양

직선과 곡선

선 작업에 관해서는 실제로 각도와 곡선 사이의 선을 견인해야 합니다. 라인은 모든 아트워크를 만드는 기본 모양일 수 있지만 라인워크에 크게 의존하는 로고와 웹 디자인은 단순하지 않습니다.

일반적으로 인간은 직선보다 곡선을 선호합니다. 이것은 시각 시스템의 신경 생리학에 기인할 수 있습니다. 눈이 완전히 형성되지 않은 유아도 날카롭고 각진 선보다 곡선 모양에 더 오래 주의를 집중합니다.

둥근 삼각형 로고가 있는 Affinity 웹사이트의 스크린샷
Affinity 로고의 둥근 모서리는 사용자에게 주는 전반적인 효과를 부드럽게 합니다.

그러나 곡선이 반드시 사용자가 디자인에 집중하는 시간을 늘리는 것은 아닙니다. 실제로 날카로운 각도는 사용자의 빠른 관심을 끌 가능성이 더 큽니다. 곡선이 부드러움과 복잡함을 내포한다면 날카로운 선과 각도는 심각함과 단순함을 내포합니다.

연구에 따르면 각진 물체는 위협감을 유발할 수 있습니다. 모양의 선명도는 공포를 처리하는 뇌 영역인 편도체의 활동을 증가시키는 것으로 나타났습니다. 이러한 이유로 예리한 각도는 종종 청중의 주의를 끌며 곡선에 비해 더 빨리 시선을 끕니다.

이러한 자연스러운 인간 반응 패턴을 사용하여 청중이 무언가를 느끼게 하는 디자인을 만들 수 있습니다. 재미 있고 가벼운 브랜드를 위해 곡선은 사이트에서 텍스트 블록을 분해하고 기발한 느낌을 만드는 데 도움이 될 수 있습니다. 그러나 좀 더 진지한 브랜드 페르소나의 경우 날카로운 각도와 직선이 중력감을 느끼게 하는 데 도움이 됩니다.

흰색 배경과 3개의 수직선이 있는 The Inlay 웹사이트의 스크린샷
Creative studio The Inlay는 가늘고 직선을 사용하여 미니멀리스트 사이트를 분해하고 눈을 움직이게 합니다.

Creative studio The Inlay는 직선과 미니멀한 디자인을 사용하여 페이지를 스크롤할 때 시선을 끌지만 부정적인 반응을 유발할 수 있는 날카로운 각도를 과도하게 사용하지 않습니다.

그러나 기술 컨설팅 회사인 Affinity는 웹 사이트 전체에서 관계 지향 언어를 많이 사용합니다. 디자인 전반에 걸친 둥근 화살표 로고와 곡선 모양은 기술 공간에서 사용되는 기존의 딱딱한 이미지보다 훨씬 더 친근하게 느껴집니다.

원과 타원

누군가를 정사각형이라고 부르는 것은 아마도 그들이 지루하다는 것을 암시하는 것입니다. 그렇다면 그 반대는 원이 재미, 젊음, 평온한 사고 방식을 의미한다는 것을 의미합니다. 아기의 주의력은 곡선에 더 오래 머무르는 것으로 나타났기 때문에 원형 장난감을 선호하는 경향도 있습니다.

시청자가 원을 볼 때 개방성과 공생이 떠오릅니다. 둥근 모양은 또한 자신의 거품 속에서 안전하거나 멋진 포옹과 같은 공동체 또는 보호의 느낌을 내포할 수 있습니다. 서클의 다른 특성에는 우정, 따뜻함, 여성성, 재생이 포함될 수 있습니다(생각: 생명의 서클 ).

초인종 제품 4개가 포함된 Ring 웹사이트의 스크린샷
제품 자체의 링 모양 버튼 표시등은 링 사용자에게 또 다른 시각적 신호입니다.

이름 지정 관점에서 링 초인종은 사용자의 감각을 활용했습니다. 청각적으로는 초인종 "링"을 상상할 수 있지만 시각적으로 상상된 "링"은 로고와 물리적 하드웨어가 설계된 방식 모두에 연결되어 있습니다.

쇼 The Circle의 Netflix 메인 메뉴 페이지 스크린샷. 두 명의 여성 인물의 등이 참가자의 화면을 보고 있습니다.
프로필 사진, 버튼 모양, 심지어 참가자가 거주하는 건물의 건축 디자인에서도 원을 찾을 수 있습니다.

Netflix 리얼리티 경쟁 쇼인 The Circle은 순환 브랜딩이 가장 적합한 또 다른 장소입니다. 전제는 자신의 정체성에 대해 진실을 말하거나 말하지 않을 수 있는 사람들이 The Circle이라는 소셜 미디어 플랫폼을 통해서만 동료들 사이에서 인기를 얻으려고 한다는 것입니다. 목표? 커뮤니티에 머무르세요. The Circle에 남아 있으세요.

삼각형

가속, 동작 및 균형, 삼각형은 활동을 쉽게 설명합니다. 흥분에서 주의에 이르기까지 다양한 감정을 불러일으킬 수 있는 활기차고 강력한 모양입니다.

삼각형은 영향력이 있으며 방향이 소비자의 마음에서 의미를 변경하기 때문에 방향이 결정되는 방식이 중요합니다. 예를 들어 위쪽을 가리키는 삼각형은 강도를 나타낼 수 있지만 조금이라도 비스듬히 돌리면 불안정성을 나타낼 수 있습니다. 그러나 서로 다른 방향의 여러 삼각형은 색종이 조각처럼 재미나 흥분을 나타낼 수 있습니다!

중간에 삼각형 재생 아이콘이 있는 Rick Astley의 대히트 "Never Gonna Give You Up" 미리보기 이미지 스크린샷
이 YouTube 동영상의 미리보기 이미지는 삼각형 "재생" 아이콘을 사용합니다.

좋아하는 비디오 또는 음악 스트리밍 서비스의 재생 버튼은 오른쪽을 가리키는 삼각형일 가능성이 높습니다. 일시 중지(문자 그대로 두 직선 사이의 "단절")를 나타내는 두 개의 직선과 달리 전진 동작을 나타내는 화살표와 비슷합니다.

로고가 있는 HGTV 홈페이지 스크린샷
"Home & Garden Television"은 로고 위에 단순한 삼각형이 있는 집을 보여줍니다.

HGTV는 삼각형 디자인을 영리하게 사용합니다. 이등변 삼각형은 집의 지붕을 명확하고 간단하게 설명하는 워드마크 상단에 있습니다. 로고의 다른 쪽 끝에 있는 "V"는 아래쪽을 가리키므로 큰 균형을 이룹니다.

사변형

사변형에는 모든 네면 모양이 포함됩니다. 정사각형과 직사각형이 가장 일반적인 예이지만 여기에는 사다리꼴, 다이아몬드 등도 포함됩니다. 정사각형과 직사각형은 종종 안정성과 꾸준함, 적합성 또는 직설성의 상징입니다. 그들의 직각은 합리성, 질서 및 구조를 시각적으로 암시합니다.

정사각형과 직사각형은 실용적이거나 실용적인 브랜드로 자주 사용됩니다. National Geographic에서 LinkedIn, Dominos에 이르기까지 다양한 산업 분야에서 특히 로고의 경우 정사각형과 직사각형이 일반적입니다.

다른 유형의 사변형도 이러한 규칙적인 느낌을 전달하지만 보다 아방가르드하고 현대적인 시각적 트위스트가 있습니다. 다이아몬드는 모양과 보석 사이의 무의식적 연관성 때문에 고급 제품이나 고급 제품을 전달하는 데 사용될 수 있습니다. 연이나 마름모꼴과 같은 사변형은 과도하게 사용되는 패턴에 의존하지 않고 안정성 수준을 암시하는 데 좋습니다.

Mokthar Saghafi의 디자인 사이트에 있는 평행사변형 패턴의 스크린샷
Mokthar Saghafi의 디자인 사이트 스크린샷

호주에 기반을 둔 웹 디자이너 Mokthar Saghafi는 자신의 웹사이트의 기하학적 패턴에 평행사변형 모양을 사용합니다. 4면체 도형이 가지런히 쌓여 있어 4면체 형태가 내포하는 안정감을 엿볼 수 있다. 그러나 실제 직사각형 대신 마름모꼴로 약간 어긋나도록 설정하면 또 다른 시각적 흥미를 더할 수 있습니다.

레고 로고가 새겨진 블록 모양의 도로 표지판
파이즈 자키의 사진

레고가 현실적이지 않거나 순응하지 않는 것처럼 보일 수 있지만 확실히 안정적입니다. 다른 레고로 어떻게 만들겠습니까? 사각형 로고는 제품에 대한 시각적 콜백이기도 합니다. 4개의 스터드가 있는 정사각형 레고 블록과 매우 유사해 보입니다.

오각형, 육각형 및 팔각형

수학과 디자인 분야에서 이 모양의 집합체를 "다각형"이라고 합니다. 다각형은 모든 2D 기하학적 모양을 설명하는 데 사용되는 포괄적인 용어이지만 일반적으로 면이 5개 이상인 경우에 사용됩니다.

자연에서 이러한 모양은 벌집에서 껍질 패턴, 결정 및 암석에 이르기까지 모든 곳에서 발견됩니다. 그러나 웹 디자인에서는 덜 자주 사용됩니다. 이는 더 일반적인 디자인 트렌드와 차별화되는 데 도움이 되기 때문에 클라이언트에게 좋은 일이 될 수 있습니다!

복잡하고 미래 지향적인 다각형은 여전히 ​​잘 구성된 현대적이고 현대적인 분위기를 만드는 데 자주 사용됩니다. 그러나 특정 폴리곤은 일반적으로 틈새 산업에서 사용됩니다. 예를 들어 자동차 및 기계 제조 및 수리 회사는 육각형과 팔각형이 볼트 머리와 유사하기 때문에 디자인에 종종 사용합니다.

주요 프로젝트가 벌집 모양으로 표시된 Buffalo 홈페이지의 스크린샷
이 패턴을 사용하여 그들의 작업을 보여줌으로써 Buffalo가 구축한 것은 아주 작은 웹 공간에서 많은 프로젝트를 보여줄 수 있습니다.

영국 웹 디자인 대행사 Built By Buffalo에서 사용하는 육각형 레이아웃은 홈페이지를 압도하지 않으면서 작업의 많은 예를 미리 보여줄 수 있는 좋은 방법입니다. 그런 다음 웹 사이트 전체에서 팀 얼굴 사진을 보여주고 재미있는 사무실 사진을 보여주고 중요한 정보를 불러오는 데 사용됩니다.

펜타곤 투어 웹사이트 정보 페이지의 스크린샷. 그래픽 요소로 투어 사진을 가로지르는 3개의 대각선
Pentagon Tours 로고의 강한 선은 사이트의 이미지에 대한 그래픽 처리로 모방됩니다.

펜타곤은 세계에서 가장 잘 알려진 건물 중 하나이며 5면 구조에서 적절하게 이름이 붙여졌습니다. 건축 디자인에 다각형을 사용하는 대표적인 예인 건물 자체가 금욕주의와 안정성을 전달합니다.

추상적인 모양

웹 및 제품 디자인, 판촉 및 브랜딩 작업에서 일반적으로 사용되는 몇 가지 다른 기하학적 및 추상 모양이 있습니다. 인기 있는 모양과 그 의미에 대해 간단히 살펴보겠습니다.

얼룩

Blob은 종종 재미있거나 어리석은 것으로 특징지어지는 모양입니다. 유명한 "부바/키키 효과"는 문화와 작문 체계에 상관없이 개인이 의미 없는 단어 "부바"를 얼룩 모양으로 돌리는 반면 "키키"는 뾰족한 추상 모양과 관련된다는 것을 입증했습니다.  

가장자리가 뾰족한 날카로운 추상 모양을 사용하도록 선택하면 보는 사람의 관심을 빠르게 끌 수 있습니다. 그러나 더 둥근 모양을 사용하면 더 편안하고 장난스럽게 느낄 수 있습니다.

"work. studio. team. contact. funhouse"라는 단어와 함께 사진이 있는 구근 모양의 Buzzworthy 탐색 메뉴의 스크린샷.
Buzzworthy 탐색 메뉴를 열면 움직이는 "부바" 모양이 나타납니다.

브루클린에 기반을 둔 맞춤형 WordPress 디자인 스튜디오 Buzzworthy는 재미있고 펑키한 스타일을 보여주기 위해 많은 얼룩 모양과 구근 모양의 전환 애니메이션을 사용합니다.

십자가

종종 영성과 치유, 연결 또는 균형을 보여주는 데 사용되는 십자가는 웹 디자인에서 항상 나타납니다. 두 가지의 만남이나 연결을 시각적으로 암시하는 가장 일반적인 방법입니다. 교차 디자인의 또 다른 일반적인 용도는 장바구니에 무언가를 추가하거나 더 많은 정보를 위해 확장할 수 있음을 나타내는 "더하기" 기호입니다.

로고에서 십자가는 강한 종교적 유대로 인해 일반적으로 종교 단체를 위해 예약되어 있지만 다른 형태의 더 불가지론적인 용도도 성공적이었습니다.

상징적인 "red cross" 로고가 있는 The American Red Cross 웹사이트의 스크린샷
미국 적십자 웹사이트의 스크린샷

미국 적십자는 교차 이미지를 사용하는 가장 주목할만한 조직 중 하나입니다. 그들의 업무는 도움이 필요한 개인과 재해 중 또는 재해 이후에 도움을 줄 수 있는 개인의 교차점에 있습니다. 적십자의 로고는 치유와 건강을 시각적으로 암시하면서 이 두 가지의 교차점에 그들을 배치합니다.

나선

나선은 움직임과 진행을 의미합니다. 둥근 나선과 고리는 종종 완벽함, 아름다움, 진화를 나타냅니다. 나선형이 지그재그 동작처럼 더 뾰족하면 제품, 회사 또는 서비스가 취하고 있는 중심축, 변화 또는 새로운 방향을 전달할 가능성이 더 큽니다.

나선의 방향은 특히 애니메이션을 적용할 계획인 경우 인식되는 방식과 많은 관련이 있습니다. 마지막으로 원하는 것은 개발, 성장 또는 창의성을 전달하려고 시도하고 결국 사용자를 문자 그대로 하향 나선으로 보내는 것입니다. 대부분의 경우와 마찬가지로 가능한 경우 나선형을 위로 오른쪽으로 움직여 긍정적인 움직임을 전달하세요.

흰색 배경에 노란색 나선형이 있는 Rally 홈페이지의 스크린샷
스크롤하면 나선형이 더 빠르게 움직이고 색상이 변경됩니다. 읽기 위해 잠시 멈추면 나선형이 천천히 위쪽으로 움직입니다.

유타 주 솔트레이크시티에 있는 디지털 제품 스튜디오인 Rally는 사이트 전체에 흰색 배경에 단순한 나선형을 사용합니다. 나선형의 변화하는 색상과 역동적인 움직임은 시각적인 관심을 유지하고 응집력 있는 사용자 경험을 만듭니다.

유기적 모양

유기적 모양에는 잎, 가지, 뿌리, 파도, 별, 구름 등이 포함됩니다. 기하학적 모양을 함께 사용하여 이미지를 만들 수 있는 경우(예: 위에 삼각형이 있는 사각형이 단순한 집이 됨) 유기적 모양은 일반적으로 자체 이미지로 독립형입니다.

이러한 모양은 일반적으로 불규칙하거나 비대칭적이며(항상 그런 것은 아님) 어떤 식으로든 자연 세계와 관련이 있습니다. "클라우드"라는 아이디어는 유기적 이미지를 완벽하게 사용하는 것입니다.

SoundCloud 홈페이지의 스크린샷. 왼쪽 모서리에 있는 로고는 구름 모양이며 왼쪽 절반은 오디오 파일에서 볼 수 있는 여러 개의 가는 세로선으로 구성되어 있습니다.
SoundCloud의 로고는 자연스러운 이미지를 사용하여 기술을 보다 재미있고 시각적으로 접근하기 쉽게 만듭니다.

"클라우드" 스토리지라는 아이디어는 정보를 보유하고 있는 무형의 "위치"와 같은 매우 복잡하고 기술적인 것을 연결하고 이를 자연 세계와 연결하여 기술 초보자가 더 쉽게 접근할 수 있도록 합니다. 예를 들어 SoundCloud는 사용자가 오디오 파일을 업로드하고 전 세계적으로 점점 늘어나는 음악 애호가 커뮤니티와 공유할 수 있는 음악 공유 사이트입니다.

디자인 이면의 마음

항상 그렇듯이 이것은 어렵고 빠른 규칙이 아닙니다. 디자인 내에서 여러 모양, 선 두께 및 정렬을 사용하여 시각적인 흥미를 유발합니다. 여러 요소를 함께 사용하면 독자가 눈으로 보고 직감으로 느낄 수 있는 이야기를 전달할 수 있습니다.

WP 엔진 리소스 센터는 디자인에 관한 모든 정보의 출처이며, 당사의 디자인 심리학 시리즈는 디자인의 기본 요소를 사용하여 잘 계획된 브랜딩으로 고객을 끌어들이는 것입니다.

색상의 의미와 시각적 스토리텔링에서 색상을 사용하는 방법에 대해 자세히 알아보려면 1부와 2부를 읽어보세요. 그런 다음 서체, 콘텐츠 배치 및 단어 선택의 중요성을 살펴보는 4부를 살펴보십시오.

1 부
2 부