안녕안녕~
오늘도 좋은 하루에요 ㅎㅎ
오늘부터는 조금 더 편하게 올리기 위해~어투를 조금 수정할 수도 있을 것 같아요!
프로젝트 진행 준비하랴, 개인 포트폴리오 구상하랴, 친구들과 놀랴 쉴 새가 없네요 ㅋㅋㅋㅋㅋㅋㅋ
수업도 진행하며 같이 일지도 작성해 볼게요!
하루가 지나기 전에 마지막으로 CHECK~하며 복습하기루😆
오늘의 시작은 무드보드 제작!
저번에 태그라인을 완성한 팀은 바로 진행이 가능했는데,
저희는 좋은 의견이 너무 많이 나온 덕에😘 논의가 길어져서 마저 태그라인을 정하기로 했어요!
태그라인은 결국 제일 먼저 나왔던 걸로 정해졌고~
이어서 무드보드에 대한 논의!
무드보드에 요소를 채우고 있는데 의견이 안 좁혀진다!
초반으로 돌아갈 필요가 있다.
키워드를 생각하고, 그걸로도 안 되면 페르소나로 돌아가면 된다!
..라고 말씀하셨어요~
저희는 논의 과정이 꽤나 길어져서....😅
다시 3가지 키워드를 뽑아내고,
다시금 메인+포인트 색감을 정하는 과정을 거쳤어요!
#위생적인 #미니멀리즘 #신뢰감 이라는 세 가지를 정하고,
이러한 느낌을 살릴 수 있는 컬러를 정했네요~
저희는 정해진 시간 내 무드보드 제작을 끝마치지 못했어요ㅜㅜ
그래서 무드보드 제작 후 스타일 가이드를 제작하기로!
Style Guide란?
디자인 작업의 일관성을 유지하고 브랜드 정체성을 효과적으로 전달하기 위해 사용하는 문서에요!
매번 바뀔 수 있는 만큼 진행하며 고쳐갈 수 있어요.
ex) "아까 이 색으로 정했는데, 만들다 보니 센 것 같네..?" -> 수정 가능해요!
웹에서는 이 폰트, 앱에서는 이 폰트에 이 사이즈~등등, 엉망진창으로 분산되는 걸 막아주는 도구로도 쓰여요.
문서에 포함된 스타일가이드는 주로 프로젝트 작업의 체계성을 보여줘요.
함께 작업하는 클라이언트나 협업자와 잘 소통하여 질 높은 작업을 하기 위한 도구로도 활용해요.
협업 능력 어필!
디자인 폰트는 반듯한 폰트, 구부러지지 않은 폰트 사용!
무슨 폰트인지 이름을 기입하는 것은 필수고, 포인트 폰트도 정해둬야 해요.
이건 선택 사항이지만~항상 이 폰트만 사용할 게 아니라면 강조용 폰트는 기입해 주는 것이 좋아요!
타이틀1, 타이틀2, 바디1, 바디2로 나뉘어 있고,
Bold를 사용할지, 폰트 사이즈는 얼마로 할지, 줄간 간격과 자간 간격은 어떻게 할지도 기입해주기!
브랜드 정체성 구성 요소를 정리해 둘게요.
- 로고(색상, 크기, 배치, 보호영역 등에 대한 규칙)
- 컬러 팔레트(색상코드 명시 RGB, CMYK, HEX 등)
- 타이포그래피(사용한 폰트의 종류, 크기, 줄 간격, 서체의 용도 등)
- 이미지 스타일 : 사용하는 이미지 유형과 톤(실사, 일러스트, 캐릭터)
아래는 디자인 시스템!
- 컴포넌트(버튼, 입력, 폼, 아이콘 등 UI 요소의 크기, 간격, 스타일 정의) : UI 아이콘, 버튼 컴포넌트 등을 보여줘요.
필요에 따라 컬러/흑백으로 사용할 수도 있어요.
- 레이아웃(그리드 시스템, 여백 규칙) : 웹 디자이너 포트폴리오가 아니라면 필수는 아닐 것 같다는 강사님의 코멘트!
- 애니메이션(전환효과, 마이크로 인터렉션 등에 대한 규칙과 가이드)
마지막으로 언어 및 톤~!
- 문구 스타일(캐쥬얼, 공식 등 사용하는 단어나 표현의 톤) : 반말, 존댓말 등 공식의 느낌!
- UX Writing
마케팅 업체는 반드시 만나봐야 한다는 조언도 들었어요!
천만원 이상이라면 무조건 미팅~
페인포인트에서 솔루션 -> UX의 시작!
어떤 경험을 줄 것인지 정해졌다면 인터페이스 설계시 유의할 점은
사용자가 빨리 작업할 수 있게 하거나,
실수를 덜 하도록 이끄는 방향으로 인터페이스를 설계하는 거에요.
ex) ~한 고객이 ~한 문제점을 가지고 있었으므로, ~한 방향으로 이끌었습니다!
어떤 기능이 들어가고, 어떤 방향성으로 이끌지 설계하는 것이 목적이에요😊
진행 과정은 다음과 같아요.
전략 > 범위 > 구조 > 골격 > 표면
범위에는 기능, 데이터, 정책 등이 속해요.
정책이란 ~한 것을 선택했을 때 사진 몇 개를 보이겠다! ~를 선택했을 때 필터를 몇 개 정도 구현하겠다! 정도에요.
카테고리가 많은 서비스인 경우 정책을 논의하는 데 시간이 걸릴 수 있다고 말씀하셨어요🤔
구조 - UI 설계
페인포인트 -> 솔루션
솔루션 1, 2, 3을 나타내는 화면 + 자유화면 @ (메인화면일수도!)
최소 4개의 화면 제작 필요, 최대 5개까지만!
IA
Information Architecture 이란?
정보와 콘텐츠를 체계적으로 구성하고 구조화하는 과정.
사용자들이 원하는 정보를 쉽게 찾고 이해할 수 있도록 돕는다.
(대략적인) IA
메인에서 세가지 화면으로 가기까지 어떤 여정을 거치게 되는지.
ex) 사용자가 무엇을 클릭해야 그 화면으로 가는지.
IA-온보딩을 간략하게나마 제작하고 나면 이제는 골격 차례에요!
경쟁사의 UI를 조사하는 과정~😘
우리 서비스의 경쟁사 또는 참고하고 싶은 UI 5-6개 정도를 참고하고,
3개는 최종 표로 정리하는 거에요.
조사사항은 우리가 궁금한 부분이고, 화면에서 가장 중요한 부분이 뭔지를 생각하고 중점적으로 볼 요소들!
강사님의 경우에는 타 잡지사의 메인 구독/기부, 현재 ISSUE, 검색창, 아카이브 정리, 전체적인 비쥬얼 디자인, 메인 레이아웃 등을 조사사항으로 정하셨었어요. 물론 이는 UI 서비스에 따라 우리에게 필요한 게 달라지니까, 참고 정도만 하시면 좋아요!
순서는 다음과 같아요.
1. 우리 화면에 들어가야 할 요소, 내용을 생각한다.
2. 그것들을 구현하기 위해서 어떤 UI를 참고해야할지 찾는다.
3. 이미 구현된 다른 앱의 UI를 보고 분석하고 표로 정리한다.
4. 모두 분석이 끝나면 최종적으로 서비스에 접목할 부분을 가려낸다.
5. 우리 서비스 화면 와이어프레임을 만든다. (흑백으로)
결론!
대략적인 와이어프레임 만들기에요.
와이어프레임Wireframe이란 디지털 제품의 레이아웃과 구조를 시각적으로 설계하는 도구에요.
디자인 초기단계에 만드는 것은 콘텐츠의 배치(상세 정보 X), 사진, 버튼, 내용이 어느정도 크기로 어디에 배치되는지 정도만이에요.
원래는 프레임 흐름까지 제작해야 하지만, 이번에는 프레임 세 가지 정도만 제작해 보기로 했어요😊
프레임에서 X가 들어간다면 보통 사진이 들어간다는 뜻이고, 아니라면 도형이 들어간다는 뜻~
저희가 제출해야 하는 결과물은 총 2가지가 되었네요.
자료 비교 조사한 표 + 와이어프레임 + @
오늘도 많은 일이 있었고요....
너덜해진 채 귀가~^^..
이대로 무사히 포폴을 뽑아낼 수 있을까...
힘내서 진행해 볼게요ㅎㅎ 화이팅~!!
본 후기는 유데미 x 스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (B-log) 리뷰로 작성되었습니다.
'대외활동_콘텐츠디자인 2기 인턴형 프로그램' 카테고리의 다른 글
| 영 차 영 차 영 우리지금이럴때가아닌것같습니다_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (4) | 2024.11.21 |
|---|---|
| 자동저장이나를배신하다_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (3) | 2024.11.19 |
| 즐거운팀플시간이존재할수가있단말이냐_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (1) | 2024.11.16 |
| 안녕하세요 사람인 여러분과 사람이 덜 되신 여러분_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (1) | 2024.11.15 |
| 이제는 더이상 물러날곳이없 다_유데미x스나이퍼팩토리 콘텐츠디자인 인턴형 프로그램 2기 (6) | 2024.11.14 |
