배너 디자인 기획 및 제작
1. 디자인 기초 개념
# 배너 디자인?
심미적인 완성도에서 그치는 것이 아닌, 고객의 다음 행동을 이끌어내야 하는 목적이 있다.
그렇기 때문에 고객의 흥미를 일으킬 수 있는 카피라이팅 / 이벤트 이미지 / 제품이 포함된,
마케팅 영역과 디자인 영역이 공존하는 분야이다.
디자인 기초 이론
* 컬러
메인 컬러 : 브랜드의 대표 색, 회사의 정체성이 드러남
포인트 컬러 : 눈길을 끌고 싶을 때 쓰는 색,
메인 컬러와 같이 사용하는 경우 메인 컬러와 잘 어울리게 혹은 강조될 수 있게 사용한다
보조 컬러 : 배경이나 부가적인 요소에 쓰는 색
한 배너에서 색은 2~3개만 쓰는 게 깔끔함
강조하는 부분은 눈에 확 띄는 색으로 사용
* 폰트
굵고 큰 글씨 : 제목이나 강조할 메세지
얇고 작은 글씨 : 설명 문구
특별한 글씨 : 이벤트 배너 혹은 포인트용
한 배너에 폰트는 2개까지만
제목은 크게, 본문은 작게
줄 간격은 120% 정도
* 여백
제목, 이미지, 버튼 사이의 간격은 일정하게
바깥쪽 여백(마진)은 최소한 16px 이상
CTA 주변 공간은 넓게 두어 시선이 잘 가도록 한다
2. Image FX + Chat GPT _ 프롬프트 작성
# Image FX를 사용하는 이유
무료, 스톡 이미지 검색없이 그리고 유료 이미지 구매 없이 바로 생성
여러 스타일을 빠르게 시물레이션 하여 컨셉 테스트 가능
아이디어 스케치 도구로 사용하여 최종 배너는 피그마에서 편집
[목적] + [스타일] + [색감] + [대상] + [구체 요소] 를 프롬프트에 입력
3. 배너 기획안 작성
* 1안
주제 : 지그재그 _ 어텀 브랜드 소개
배경 : 지그재그의 구매 고객층을 늘린다
목표 : 클릭 유도 및 구매
타깃 : 눈이 높은 20대 젊은 소비자
메세지 : 에디터가 추천하는 브랜드
눈에 보이지 않은 디테일까지 신경쓴 어텀의 이야기
CTA : 핀터레스트 무드가 취향이라면
레퍼런스 이미지
기존 이미지
> 개인적인 의견
오프 더 레코드가 브랜드 이름인지, 어텀이 브랜드 이름인지 헷갈린다. 나도 클릭을 해보고 나서야 브랜드 이름이 뭔지 알았다.
이미지 하단부가 블러 처리 되어 있어 시선을 뺏고 있다. 어디에 집중을 해야하는거지?
해당 배너를 클릭하면 사장님의 스토리가 나오는데, 읽어보니 옷에 진심인 사람이다.
그런데 세일이라는 문구만 배너에 있으니 앞뒤가 안맞는 느낌이다.
할인을 중점에 두기 보다는 상품에 대한 디테일이나 감도를 중점으로 두면 좋을 것 같음.
인스타그램 카드 뉴스처럼 사진 한 장을 보고도 클릭하고 싶도록,
불필요한 요소는 제거하고 감도 높은 이미지 중심으로 수정
주제는 브랜드의 이야기가 궁금하도록 설정하고 할인은 부가적인 설명으로 제작해볼 예정
* 2안
주제 : 지그재그 - 마뗑킴 입점 특가
배경 : 지그재그의 구매 고객층을 늘린다
목표 : 클릭 유도 및 구매
타깃 : 눈이 높은 20대 젊은 소비자
메세지 : 마뗑킴 입점, 30% 할인 쿠폰
CTA : 지금 확인하기
레퍼런스 이미지
기존 이미지
> 개인적인 의견
중앙 이미지가 쿠폰이라고 나와있는데, 몇 퍼센트 할인인지 안나와있어서 하단 글씨까지 읽어야 하는 한 단계 번거로움 발생하고 있다.
마뗑킴 브랜드는 로고가 시그니처인데, 이미지에는 강렬한 컬러와 함께 쿠폰 박스만 나와있어서 이게 전 상품 쿠폰인지, 마뗑킴 쿠폰인지 또 시선이 번거롭다.
바로가기만 버튼을 두고 닫기 버튼은 x 상단에 작게 두면 좋을 것 같다. 구매에 있어서 강조하지 않아도 될 부정적인 요소는 빼기.
NEW 라는 폰트만 다른데, 굳이? 뒤에 입점 기념이라는 말이 있어서 그냥 아예 빼도 될 것 같다.
브랜드가 돋보이는 이미지로 표현하여 마뗑킴을 우선 순위로,
30% 할인과 무료 배송은 부가적인 설명으로 재작성할 계획.
피그마 강의 정리
- 디자인 시스템 : 효율성과 디자인의 일관성을 갖추는 것이 중요할 때 사용하는 기능
만드는데 시간이 오래 걸리지만 누가 만들어도 동일한 품질의 디자인이 가능
- UI 키트 : 디자인의 변화가 잦을 때 사용하기 좋은 기능
만드는데 시간이 비교적 적게 걸리지만 효율성과 일관성이 부족해질 가능성이 있음
- 아토믹 디자인 시스템 : 디자인 요소 (원자)를 결합해 만드는 UI
- 마스터 컴포넌트 : 여러개의 개체를 한번에 수정할 때 하나의 개체로 여러개를 수정할 수 있게 만드는 기능
- 인스턴스 : 마스터 컴포넌트를 복제하면 생기는 것. 마스터 컴포넌트를 수정할 때 수정되는 개체
- UI 디자인의 기본
액션 : 버튼
인풋 : 텍스트 박스
인포메이션 : 안내 사항
컨테이너 : 카드
네비게이션 : 페이지를 이동할 때 사용
컨트롤 : 사용자가 값을 수정
- 의사 상태 (Pseudo)
실제로 개체의 속성이 변하게 하는 것이 아니라, 가상의 상태로 바뀌는 것
ex) 버튼에 마우스를 올릴 때 색깔이 바뀌는 건 속성이 바뀐게 아니라 가상의 상태로 바뀐 것임
- 버튼 컴포넌트
누름으로써 중요한 동작을 수행한다.
행동 유도성이 있어야 함. (Affordance)
컨테이너 : 프레임
라벨(레이블) : 사용자에게 안내하는 글씨. 사용자가 글씨를 입력하는 텍스트와는 다름
리딩 엘리먼트 : 버튼 앞에 있는 것
트레일링 엘리먼트 : 버튼 뒤에 있는 것
. . .
* 버튼의 종류
박스 버튼 : 가장 중요한 버튼, 일반 버튼이다.
아웃라인 버튼 : 고스트 버튼, 엠티 버튼. 프라이머리 버튼 (박스 버튼)의 하위 버튼
스플릿 버튼 : 보조 액션 버튼
텍스트 버튼 : 중요도가 낮은 버튼
- 텍스트 필드 컴포넌트
인풋 컨테이너
라벨
리딩 엘리먼트
트레일링 엘리먼트
텍스트
헬퍼 텍스트
* 플레이스 홀더 : 입력 예시 (ex : 이름을 입력하는 칸에 예. 홍길동 이런식으로 써 있는 것)
* 유효성 검사 : 벨리데이션. 지켜야하는 것을 안내
- 컨트롤 컴포넌트
* 기능주의적 관점 : 심미적인 것보다 기능을 수행하는데 불편함이 없는 것을 중요하게 바라보는 관점.
컴포넌트 프로퍼티 : 컴포넌트의 의사 상태를 쉽게 하는 기능
베리언츠 : 프로퍼티의 한 종류. 파운데이션 요소를 변경할 때 주로 사용함
불리언 : 보였다가 안보였다가 하는 기능
인스턴스 스왑 : 인스턴스를 다른 인스턴스로 교체하는 기능
텍스트 : 컴포넌트의 텍스트를 수정하는 기능
수업을 들으면서 노트에 정리, 그리고 블로그로 2차 정리를 하니 이해가 안가던 부분이 뭔지 알게 된다.
이해가 잘 안 가던 부분은 회색으로 표시했다. 남는 시간에 다시 정리 해야겠다.
* 이번주에 할 일 ~5/31
1 피그마 3주차 강의 아티클 정독
2 타이포그래피, 색에 관련된 디자인 서적 읽기
* 사전 캠프가 끝나기 전 할 일 ~6/7
1 AI Literacy TIL 작성
2 디자이너 AX 리서치 퀘스트
3 개인 프로젝트 완성
과연 다 할 수 있을까 🥵