반응형
디자인은 주관적인 감보다 리서치와 사용자를 바탕으로 구조화해야 한다.
디자인에도 구조와 논리가 필요함.
🔽
사용자의 인생을 절약해준다는건 UX작업이 잘 됐다(효율적인 시스템을 구축)는 의미이며
잠재적으로 그들이 놓칠뻔한 기회를 제공한다는 의미이기도 함.
웹디자인 프로세스
- 어떻게 배치할지 우선순위와 구성(흐름,배치)을 고민한다.
예시)
GNB - 랜딩페이지 - 베스트셀러 아이템 - 브랜드 소개 - 신제품 - 이벤트 이슈 - 인스타그램 안내 - 푸터(위치 연락처 등)
✔️같은 분야의 홈페이지를 참고해 UX적으로 접근한다.
왜 베스트셀러 아이템을 상단에 올리고, 브랜드 소개를 그 뒤에 배치하는지, 중도이탈을 막기 위해 어떻게 배치되어야 효율적인지
✔️홈페이지 로고는 주로 좌측에 배치 - 브랜드 이미지를 설정하고 그에 맞는 톤(컬러) & 서체 느낌을 정한다.
예시)
✔️처음부터 마지막까지 톤앤매너를 유지할 수 있도록 설정한다.스톤헨지 홈페이지 제작 브랜드 이미지 클래식, 우아, 모던함, 사랑스러움 모델 한소희 톤(color) 연두, 그린, 상아 (+그레이)
전반적으로 파스텔톤서체(메인, 소타이틀, 설명) 세리프 + 산세리프
[영문 - 가라몬드체(노멀, 레귤러, 볼드), 오그체(로마), 멤피스체, 칼리가체(서브 타이틀에 사용)
국문 - 프리텐다드, SD고딕]
✔️톤의 경우에는 최대 3가지를 넘지 않도록 한다. 색이 많아질수록 통일감이 떨어진다. - 메인에 어울리는 레이아웃과 타이포를 찾는다.
✔️타이틀은 조금 과감한 타이포를 사용해도 OK. 메인은 첫인상을 강하게 남겨야하는 중요한 포인트이기 때문에 - 소타이틀 타이포 그리고 하단 구성에 걸맞는 레이아웃을 찾는다.
✔️소타이틀은 여러번 중복해서 사용하기 때문에 제대로 1개를 만든다는 생각으로 레퍼런스를 찾고 결정한다.
디자인에 작용하는 여러요소
about 레이아웃&가독성
- 좋은 레이아웃 -
높은 가독성과 지루하지 않은 조형감.적절한 통일과 변화가 필요하다.
통일감은 가독성을 높이고 덩어리감을 주지만 지나치면 지루함을 유발할 수 있기 때문에 적절한(극단적인X) 변화를 주어야 한다. - 적절한 여백 -
서정적인 분위기와 가독성을 높인다.
여백이 너무 좁으면 지루하고 답답한 느낌을 주고 너무 넓으면 공허한 느낌을 준다. - 가독성 & 이해력 - 볼드, 색상, 서체 등을 활용해 강조|비강조를 주어 시각적 위계를 만든다.
- 콘텐츠에 역피라미드 모델 적용 -
내용이 너무 많으면 사용자가 읽기를 거부하지만 원하는 것을 찾고나면 내용 읽기를 마다하지 않는다.
따라서 사용자 여정이 시작될 때 탐색항목과 사용자의 선택을 돕는 주요 정보를 큰 비중으로 두고 세부 콘텐츠는 최소화한다.
그리고 사용자가 원하는 콘텐츠에 도달하면 그 때 주제와 연관된 모든 세부 내용을 제공한다.
역피라미드 모델 ) 온라인 쇼핑, 뉴스, 기타 콘텐츠 중심 시스템
피라미드 모델 ) B2B, SAAS, 엔터프라이즈 등 콘텐츠 중심이 아닌 사이트 or app
about 해상도&그리드
- 정렬과 그리드 -
인쇄 기반 디자인에서 시작, 화면 기반의 디자인 요소를 더해 반응형 디자인 및 개발 프로세스를 지원한다.
*구글의 material design 에서 그리드의 기준을 제시
구성)
컬럼[단] : 실제 콘텐츠 포함 부분
거터[컬럼과 컬럼사이 공간] : 브레이크 포인트(반응형 디자인의 레이아웃이 변화하는 해상도 지점)에 의해 너비를 결정
마진[가장자리 여백] : 마진값만큼 띄우고 콘텐츠를 시작하라는 의미. 마찬가지로 브레이크 포인트에 의해 너비 결정. 모바일은 좁고 패드~웹으로 갈수록 넓어진다.
**보통 반응형 웹은 12컬럼 그리드 시스템을 사용한다. 웬만한 것에 대응이 가능하기 때문이다. - 시각적 위계[visual hierarchy] -
레이아웃 배치에 관련된 것으로 정보의 우선순위, 분류, 구성 요소 내 인터랙션과 연관된다.
*위계 구조를 잘 디자인하려면 흑백계열로 작업하는 것을 추천함 >
색상없이도 위계질서가 도드라진다면 시각 장애인에게도 유용하고 섬세한 작업을 할 때 문제를 더욱 쉽게 발견할 수 있기 때문에 - 구성 -
ex) 캐러셀 슬라이드, 폴드디자인, 아코디언 UI etc..
해상도와 화면 크기에 따라 디자인 작업이 이루어지기 때문에 기기와 해상도의 차이를 아는 것이 매우 중요하다. - 화면 해상도 -
Full screen이 아닌 브라우저 화면의 일부만 분할해서 사용하는 경우가 많기 때문에 '브라우저 크기'를 보조 측정 기준으로 설정해 실제 시스템을 보는 해상도가 어떤지 확인해야 한다.
간단하게 정리하자면 1440px(4:3)으로 작업하고 1280px(16:10), 1920px(16:9)으로 띄웠을 때 문제의 유무를 체크하면 된다.
- 반응형 레이아웃 잡는 기준[from app to web] :
360px -> 800px -> 1200px -> 1440px - GA에서 제공하는 해상도 사용빈도 보고서 :
1440x900 & 1920x1080 & 1680x1050 - 30%
1366x768 & 2560x1440 - 15%
*2020년 기준 애플, 구글, 아마존 연결 페이지는 모두 1366px이나 더 낮은 960px 넓이로 제공됨
**1366x768 비율이 데스크탑, 랩탑의 보편적인 크기라고 가정하고 시작하기.
고로 최소 1440px으로 잡고 시작하면 웬만한 비율에 대응이 가능해짐.
- 반응형 레이아웃 잡는 기준[from app to web] :
about 배치
- 범위 -
디자인에서 탐색과 콘텐츠 구조를 명확하게 정의하는 것. 사용자에게 탐색과 콘텐츠 구조 사이 관계를 분명히 알려줘야 한다.
예시 ) 검색창을 콘텐츠와 가까이 배치하지 않는다면? 구조 사이 관계의 모호성 때문에 사용자는 이 검색창이 어떤 콘텐츠와 연관된 것이며 어디까지 세부 정보를 제공하는지 혼동을 겪을 여지가 발생한다. - 구도, 시선패턴
- 황금 사각지대 :
왼쪽 상단 삼각형. 시선이 자연스럽게 향하고 주의를 가장 많이 끄는 부분임.
그러므로 중요한 전환(다른 콘텐츠로 들어가는 입구) 내용을 이 구역에 배치하는 것이 좋다. - F패턴, Z패턴 :
왼쪽에 존재하는 시각적 위계에서 다음 중요 요소로 이동하는 시선의 흐름.
페이지를 구성할 때 시선 패턴을 조사하는 방식을 고려하되 이는 단순히 읽기전략 이므로 절대적 기준으로 삼을 필요는 없다. - 황금분할(1.618:1), 백은비율(1:루트2)을 활용 :
여러장 이미지를 리듬감있게 배치해서 안정감을 준다.
예시 ) 트위터&애플 로고
*황금비율/백은비율 계산 사이트
- 황금 사각지대 :
about UI 심리학
- 게슈탈트 패턴 -
'유저의 효율적인 목적지 도달'을 위해 '개별적 요소보다 윤곽, 패턴, 형태적 차이를 먼저 파악하려는 뇌의 인지적 습성'을 이용해서 인터페이스를 시각화한다.
거시적 관점 > 미시적 관점
- 유사성의 원리 :
비슷한 항목끼리 덩어리화. 색/모양/크기에 따라 범주를 구분한다.
*텍스트 기반 콘텐츠는 시각적 신호(색상, 글꼴, 크기, 간격 등)와 더불어 사용자의 기대에 따라 비슷한 항목으로 분류[그룹화]하고 이름을 붙이는 작업[네이밍]을 진행해야 한다.
예시) 그룹1[지역] , 그룹2[연령대], 그룹3[관심사] - 근접성[공통영역]의 원리 :
서로 이웃된 요소로 그룹핑(chunk)화. 서로 연관된 정보는 가까이에 아닌 것은 멀리 배치한다.
박스형식으로 묶어 섹션을 구분한다. - 폐쇄성의 원리 :
연결되지 않은 모양의 그룹에서 이미지를 만들어내는 형식.
일반적으로 인터페이스에 테두리처럼 작동하는 실선을 사용해 공통영역을 표시하는건 좋은 방법이 아니다.
-> 굳이 선을 직관적으로 사용하지 않고 그룹화를 통해 새로운 구역과 이미지를 만드는 것이 고도화된 디자인임을 의미하는듯 함 - 연속성의 원리 :
레이아웃에서 시각적 위계를 제공하고 사용자의 시선을 끌기 위해 사용한다.
일반적인 F,Z 시선 패턴에 벗어나 나의 의도대로 사용자의 움직임을 유도할 수 있다.
예시) 콘텐츠 리스트 - 크기와 대비 :
크기는 레이아웃에서 계층을 정의하는 방법 중 하나이며 대비는 가독성을 높이는 중요한 요소이다.
https://brunch.co.kr/@clay1987/106
- 유사성의 원리 :
게슈탈트 이론을 통해 만드는 UI디자인 (번역본)
UI 디자이너를 위한 실무적인 게슈탈트 이론 | 이 게시물은 Medium - Muzli 채널의 'Gestalt principles in UI design' 이라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했기 때문에 정확
brunch.co.kr
about UI 심리학2
- 사용성
- 제이콥의 법칙 : 익숙한 디자인 패턴을 제공해 사용자의 학습 과정을 단순화.
- 멘탈 모델(mental model, 심성 모형) : 사용자가 어떤 제품의 작동 방식에 대해 알고 있다고 여기는 것.
사용자 경험 기반의 멘탈 모델을 고려해 디자인을 진행해야 한다.
- 행동유도성
- 어포던스(affordance) : 의도된 기능과 프로덕트의 어포던스가 일치할 때 효율성과 직관성이 올라간다.
예시 ) CTA - 힉의 법칙 : 선택 옵션이 많을수록 의사결정 시간도 비례해 증가한다.
그러므로 복잡한 테스크 일수록 작은 단계로 쪼개 선택지를 최소화시켜 유저의 피로도를 줄인다.
- 어포던스(affordance) : 의도된 기능과 프로덕트의 어포던스가 일치할 때 효율성과 직관성이 올라간다.
- 접근성
- 피츠의 법칙 : 어포던스를 높이기 위해 목표물까지 도달 거리는 짧게, 크기는 크게 해서 도달시간을 줄인다.
예시 ) Thumb zone, 탐색과 콘텐츠 구조를 명확하게 정의
- 피츠의 법칙 : 어포던스를 높이기 위해 목표물까지 도달 거리는 짧게, 크기는 크게 해서 도달시간을 줄인다.
늘 명심하자! 모든 서비스는 유저에 의한, 유저를 위한 것에서 부터 시작한다는 것을.
(UX 기획의 기술 내용 발췌)
반응형
'📔 실무에 써먹는 포토샵 > UIUX & 웹디자인 공부' 카테고리의 다른 글
| 읽어볼만한 자료모음 (UX UI 기획 ...) (0) | 2022.11.20 |
|---|---|
| User story / User scenario / User flow / User Journey Map (2) | 2022.11.12 |
