Adobe 일러스트 기획 프로세스
Adobe 직원이 직접 썼다!어도비는 일러스트도 그냥 안 그리는구나...
목차
1.서론
2.Adobe 제품 일러스트의 간략한 역사
3.이제는 트렌드를 버릴 때
4.원칙과 연구 방향 설정하기
5.시각 언어 정의하기
6.텍스처와 선
7.쇼케이스
1.서론
일러스트는 최근 UX에서 중요한 파트로 떠오르고 있다. 브랜드를 직접적으로 제품과 연결하여 표현해주기 때문이다. 어도비에서는 일관성 있는 브랜드 일러스트 스타일의 필요성에 대한 아주 많은, 중요한 토론들을 했다. 우리의 제품이 발전할수록, 우리는 더 나은 브랜드 인지도와 유저-제품 간 긴밀한 연결성을 강화하고 싶었다.
팀원들의 지난 아티클을 읽었다면(Sonja Hernandez의 brand system article/ Anny Chen의 filetype icon case study), 우리 제품처럼 커다란 규모의 프로덕트는 고려할 점이 아주 많다는 것을 알 것이다. 어도비는 크리에이티브 툴부터 커뮤니케이션, 마케팅 툴까지 100개가 넘는 제품, 서비스, 커뮤니티를 제공한다. 어떻게하면 어도비 제품 라인업에 맞는 창의적이고 장난기 어린 일러스트 스타일을 제공할 수 있을까?
2.Adobe 제품 일러스트의 간략한 역사
우리 제품의 컬러 일러스트를 둘러보기 전에, 아직도 우리 제품군에서 넓게 쓰이고 있는, 우리 아이콘 팀이 2016년에 벌써 만들어두었던 선 형태의 일러스트를 보자. 이 선 일러스트들은 전형적으로 빈 상태나 튜토리얼 같은 영역의 정보 콘텍스트에 쓰인다.
처음에는, 새 브랜드 일러스트 시스템을 아이콘 디자이너 Marco Mueller가 디자인한 이 선형 일러스트 스타일로 통일하고 싶었다. 두 영역이 가능한 부드럽게 연결되기를 원했기 때문이다. 나는 스토리라인을 만들기 위해 선형 요소와 어울리는 모양들을 더하려고 시도했다. 초기 오리지널 버전의 스타일은 2001년 Acrobat 5.0 패키지에서 영감을 얻었다.
(좌)초기 일러스트 스타일 (우)Adobe Acrobat 5.0 패키지 일러스트
Adobe 튜토리얼 일러스트
CC 라이브러리 일러스트첫 번째 릴리즈 후, 우리는 비주얼 아이덴티티와 관련한 걱정들을 쏟아내며, 어도비 내 원칙적인 디자이너 Khoi Vinh와 이 스타일에 대한 내부 회의를 가졌다. 그것의 흥미로운 역사적 기원과는 관계없이, 이러한 접근은 이미 테크 업계에서 많이 쓰이고 있는 벡터 모양과 사람 형상의 조합으로 이루어져있다. 그래서 우리 팀은 이 프로젝트를 다시 논의하고 다른 방향을 찾아보기로 했다.
“하지만 우리 제품을 다시 검토하려고 돌아간 것과, 우리가 왜 이러한 접근을 했는지 이해하려고 시도한 것은 가치 있는 일이었어요.” <Two Very Different Kinds of Illustration>, Khoi Vinh
난 주목할 만한 일러스트레이터/아티스트 Kyle Webster와 함께 일하게 되어서 영광이었다. 그 당시에는, 우
리는 일러스트 스타일에 있어 몇 가지 목표를 세워뒀다.: 우리는 창의력과 장난스러움을 통해, 어도비가 가진 세계적인 수준의 일러스트에 대한 헌신을 보여주고 싶다. 일러스트 언어는 다양한 스타일로 만들어질 수 있어야 하며, 그래서 제품과 메시지의 시스템, 시간을 넘어 확장할 수 있어야 한다. 또한 다른 일러스트레이터가 기여할 수도 있어야 한다. 우리는 어도비가 유니크하게 느껴져야지, 다른 회사에게 “소유된"것처럼 느껴지지 않았으면 한다.
먼저, Kyle은 우리가 기존 일러스트 스타일을 강화할 수 있는 시각적 요소를 더할 수 있는지를 보려고 했다. 당신도 볼 수 있듯이, 그는 피부색을 포함하여 디테일한 옷 스타일, 캐릭터마다 깊이를 주는 그림자 등의 특징을 통해 개성을 더했다.
“내가 본래의 재료를 가지고 얼마나 다른 스타일로 표현해낼 수 있는지 보는 것도 재미있는 반면, 좀 더 전통적인 인간 형태의 드로잉을 유지하면 이 방향이 우리가 원하는만큼 유연할 수 없다는 것이 명백해집니다. 동시에 우리게에 정말로 재미있게 놀면서 실험해볼 수 있는 공간을 주기도 하죠. 저는 방향을 바꾸고, 엠마가 독보적이고 확장 가능한 시각적 언어를 개발하기 위한 올바른 길로 갈 수 있도록 작업을 잘해줘서 기쁩니다.” -Kyle Webster
Kyle이 말했듯, 초기 리서치는 여전히 이전 스타일에 갇혀 있었고, 몇 번의 브레인 스토밍 세션 후에 우리는 좀 더 추상적인 시각 언어를 탐험하기 위해, 일반적인 사람 형태에서 멀어지기로 결정했다.
어도비 스펙트럼 인클루시브 디자인 모바일 배너3.이젠 트렌드를 버릴 때
우리는 일러스트가 유니폼 같고(더 적절한 단어를 찾지 못 했다) 무난무난한 소프트웨어 환경에 존재한다. 종종, 일러스트레이터들은 넓은 타깃군을 잡기 위해, 그들의 일러스트에 등장하는 사람들의 개인적이고, 창의적인 개성을 지워버리곤 한다. 그들은 형태에 집중하고 그들의 아이디어를 더 추상적으로 표현할 방법에 대해 탐구하지 않는다.
Meg Robichaud의 훌륭한 아티클 <You Can’t Just Draw Purple People and Call it Diversity>에서, 그녀는 제품 속에 포함된 일러스트의 포괄성에 대한 이슈를 다뤘다. 나는 모든 개개의 일러스트에서 인간의 다양성을 표현하는 것에서 초점을 바꾸어서, 대신 추상적인 도형으로 이루어진 똑같은 콘셉트를 유저들이 서로 다르게 받아들이는 가능성에 대해 초점을 맞추고 싶다.
4.원칙과 연구 설정하기
일러스트는 다양한 플랫폼과 제품을 가로질러 적용되는 시스템적인 언어로 치환되기 어려운, 직감적이고 주관적인 형태의 예술 형태이다.
새로운 스타일을 정의하고 탐구하기 위해, 네 가지 요소로만 간추려봤다.
인간의 형태와 관점
텍스처
모양
컬러
나는 각각에 대해 이야기하고 몇몇 예시를 통해 가이드하는 데에 시간을 할애할 것이다.
인간의 형태와 관점
인간의 형태를 포함하는 것은 유저와 즉각적으로 연결을 만들 수 있지만, 어떤 수준까지 그 형태들을 추상화하여 연결 상태를 유지할 수 있을까? 언제나 100% 구체적인 형태만을 취해야 할까? 그림자나 크기 같은 디테일한 관점을 꼭 포함해야 할까?
심장 무게 재기: 아누비스는 후네퍼의 심장의 무게를 쟀다. 이러한 주술은 Hatschepsut과 Tuthmose 3세 통치기간에 처음으로 알려졌다.
사이드 프로필 탐구고대 이집트 예술 스타일에서 영감을 받아, 프로필에 있는 머리들은 그림자가 없고, 스토리를 이야기하기 위해 몇몇 사이드 프로필 시리즈와 다른 형태로 집합되어있는 팔/손의 조합을 시도해봤다.
Kyle의 텍스처 탐구텍스처
텍스처는 이 모양들을 실제 삶으로 끌어오고, 개성 및 구분되는 스타일을 더하는 인간적인 터치를 더하는 좋은 방법이다. Kyle은 일러스트 안에서 미묘하면서도 아주 흥미로운 텍스처를 만들어내는 브러쉬 시리즈들을 골랐다. 우리는 위 연구에 개괄적으로 표현된 구성과 텍스처 스타일을 갖고 놀았다. 궁극적으로, 우리는 열려있고 공기처럼 보이는 옵션 A를 택했으나, 옵션 E가 형태에 적용되었을 때의 브러쉬 효과도 마음에 들었다. 그래서, 우리는 두 스타일을 섞어서 연구를 진행하기로 했다.
Alexander Rodchenko와 Varvara Stepanova의 Books!포스터는 노동자 교육 캠페인을 알리기 위해, 간단한 도형과 플랫한 컬러의 간결한 문법을 사용했다.모양
모양은 우리의 디자인 원칙에 있어 큰 역할을 한다. 그리고 그들은 이러한 새로운 스타일과 이전에 개발해 두었던 정보성 일러스트와 연결되도록 도와준다. 그래픽 디자인의 배경에서 시작하자면, 나는 미니멀하고 현대적인 느낌을 주기 위해, 혼합된 기하학적 요소를 우리 스타일에 적용해보고 싶었다. 절대주의와 구성주의, 두 탁월한 예술적 운동과 그래픽 디자인 철학에 언제나 영감을 받아왔다. 두 예술 운동은 기본적인 기하학적 형태를 사용하는 것과 강렬한 비주얼 디자인을 하기 위한 구성의 중요성에 강하게 초점을 맞추고 있다.
일러스트에서 사용한 모양컬러
컬러는 일러스트와 제품의 연결을 강화할 수 있다. 그래서 우리는 제품의 브랜드 컬러를 기반으로 한 컬러 팔레트를 만들었고, 그 다음에 메인 컬러를 보충할 수 있는 보조 컬러를 포함시켰다. 우리는 컬러 조합이 좀 더 유연하기를 바랐고, 그래서 보조 컬러는 각각의 일러스트에 가장 잘 어울리는 색으로 디자이너가 고르고 선택할 수 있도록 열어두었다. 색에 있어서 우리가 제공했던 유일한 가이드라인은 어떻게 레이어드되는가였는데, ‘가장 어두운 컬러는 라인과 형태에만 쓸 것’이었다. 중간/밝은 컬러는 솔리드한 모양 혹은 배경에만 사용해야 한다.
5.시각 언어 정의하기
스토리텔링과 추상성의 수준
스토리텔링을 하기 위한 적절한 시각 언어를 찾기 위해, 위에서 말한 요소들을 한데 모았다. 아래는 초기 연구 때 나왔던 예시들이다.
아이디어는 심플하다.: 최소한의 요소를 사용하여 최대한의 스토리를 표현하자.
나는 일러스트에서 모양의 개수를 최대한 줄이려고 노력했다. 아이디어는 심플했다.: 최소한의 요소를 사용하여 최대한의 스토리를 표현하자. 하단에 있는 두 일러스트는 형태에서 본질을 끌어내어 명백히 이런 콘셉트를 전달하고 있다.
6.텍스쳐와 선
이 단계에서, 나는 선, 텍스처, 모양의 조합이 각 일러스트에서 시각적으로 충분히 흥미로우며 동시에 눈으로 보기에도 밸런스 있는 스위트 스팟을 찾으려고 노력했다.
목표는 전경과 배경, 레이어와 크기 사이를 명확하게 정의하는 것과, 메시지를 강화할 수 있도록 선과 모양 사이에서 흥미롭게 배열된 상호작용이다.
선형 모양 연구
Acrobat DC 튜토리얼 카드
Creative Cloud 모바일 튜토리얼 카드
Creative Cloud 모바일 튜토리얼 카드
어도비 I/O 콘솔 XD 플러그인 웹페이지
어도비 일러스트레이터 CC 2019 튜토리얼 배너7.쇼케이스
다음은 이번에 새로운 시스템을 기반으로 만든 일러스트 몇 점이다. 최근 Document Cloud(Acrobat)과 이번 주 Creative Cloud 업데이트에서 볼 수 있을 것이다. 좋아하는 어도비 앱의 다음 릴리즈에서는 이러한 기능을 눈여겨 보시길!
저자: Emma Zhang
원문 링크: https://blog.usejournal.com/designing-adobes-brand-illustration-style-3c982ded31f6
번역: REASIGN
문의: reasign.newsletter@gmail.com
*무단 전재 및 재배포 금지
[2018.11.13]
오늘의 아티클은 어도비 제품군 일러스트 디자인 후기입니다. 타 디자이너가 리디자인을 하거나, 케이스 스터디를 한 사례가 아닌 직접 작업한 당사자가 남긴 후기라 더 자세하고 생생한 아티클입니다. 개인적으로는 다양성을 표현하기 위해 구체적인 오브젝트의 갯수를 늘리는 것이 아니라, 추상적인 재료를 택한 것이 흥미로웠습니다.
여유가 되신다면 글쓴이가 추천한 동료들의 글들도 읽어보심을 추천드립니다. 조금 지난 글이지만 충분히 가치있는 글이랍니다.
진화하는 어도비의 브랜드 시스템 디자인
어도비 파일 타입 아이콘 시스템 리디자인
REASIGN 드림
