고정 헤더 영역
상세 컨텐츠
본문
UX(사용자 경험)와 UI(사용자 인터페이스)의 세계에서 프로젝트를 시작할 때 항상 염두에 두어야 하는 것 중 하나가 스타일 가이드입니다. 이것은 브랜드의 사용자 경험을 향상시키고 완전히 새로운 수준으로 끌어 올리는 데 도움을 줄 것입니다.
스타일 가이드를 통해 일관된 디자인 시스템을 만들 수 있습니다. 아이디어를 효과적으로 전달하고 훌륭한 콘텐츠를 만들 수 있는 발판을 마련할 것입니다. 생산성을 저해하지 않고 작업할 때 시간을 절약할 수 있으며 무엇보다도 가장 전문적인 관점에서 브랜드와 회사를 선보일 것입니다.
인간의 온라인 행동의 세부 사항을 파악하기 위해 꼼꼼한 계획, 집중적인 연구 및 테스트가 수반되는 UX 프로세스 모든 과정을 통해 사용자가 목표를 달성하고 온라인 브라우징의 목적을 달성하는 동안 회사가 전환할 수 있도록 수행됩니다. 이는 양측 모두에게 윈-윈 상황입니다.
그러나, 이를 위해서는 반복 가능한 결과(성공)를 산출하는 반복 가능한 프로세스가 필요합니다.
스타일 가이드의 이점은 무엇입니까?
모든 응집력 있는 프로젝트의 시작 부분에는 스타일 가이드의 천재성이 숨어 있습니다. 이것이 바로 모든 팀원이 작업할 때, 문서를 최대한 주의를 기울이고 참조해야 하는 이유입니다.
스타일 가이드를 통해 얻을 수 있는 몇 가지 이점을 살펴보겠습니다.
- 모든 중요한 정보와 데이터를 참조하고 색상에 대한 16 진수 코드를 쉽게 찾고, UI 구성 요소, SVG 파일을 재사용하고, 필요한 다른 자산을 신속하게 찾아 추출하여 CSS 및 HTML을 작성하는 것이 프런트 엔드 개발자들에게 더 쉬워질 것입니다.
- UX 디자이너가 브랜드 스타일에 맞는 반응형 레이아웃을 만드는 데 도움이 됩니다.
- 소셜 미디어 관리자는 문서를 참조하여 동일한 서체, 색상 팔레트 및 그래픽 자산을 사용하여 일관된 소셜 미디어 피드를 만들 수 있습니다.
- 창의적인 작가는 브랜드의 특정 목소리 톤에 맞는 카피를 제작할 것입니다.
프로젝트를 시작하기 전에 범위, 스타일, 시각적 방향 및 목소리 톤을 정의하는 스타일 가이드가 있으면 팀 구성원 모두에게 유익할 수 있습니다. 프론트 엔드 개발자부터 디자인 팀, 프로젝트 관리자, 연구원 또는 전략가까지 모두 개발됩니다.
뿐만 아니라, 여러분이 구상한 최종 제품을 제작하고, 길을 잃지 않도록 안내하는 데 도움을 줄 수 있는 기준점이 될 수 있습니다.
UX / UI 스타일 가이드 문서는 마감일을 준수하고 생산성을 항상 높게 유지하며 일반적으로 스트레스를 피하는데 도움이 됩니다.
스타일 가이드 또는 브랜드 가이드 라인?
한 가지를 매우 명확하게 하겠습니다. 스타일 가이드는 브랜드 가이드 라인이 아닙니다.
스타일 가이드는 프로젝트를 시작할 때 최종 제품의 시각적 이미지 / 표현을 얻고 디자인 및 개발 프로세스(예 : 예상할 사항)를 배치할 수 있도록 도와줍니다.
반면 브랜드 가이드라인 북은 로고 타입(기본 및 보조), 그래픽 요소, 패턴 및 아이콘, 웹, 인쇄 및 기타 미디어에서 해당 응용 프로그램과 같은 특정 브랜드 요소의 사용을 명시한 문서입니다. 또한 모든 브랜드 자산에 맞는 최적의 애플리케이션 크기와 간격을 제안합니다.
스타일 가이드의 규칙을 준수하고 제공된 것을 활용하면 다음 사항에 대해 걱정할 필요가 없습니다.
- 타이포그래피 / 타입페이스(Typography / Typefaces)
- 색상 팔레트(Color palette)
- 아이콘(Icons)
- 이미지(Images)
- UI 구성 요소(UI components)
- HEX 코드, CMYK 및 RGB 값(HEX codes, CMYK, and RGB values)
- 목소리 톤(Tone of Voice)
- 코드 문서(Code Documentation)
여러분 앞에 그것을 배치하고 두통과 수십 번의 반복을 피하기 위해 디지털 스타일 가이드 형식으로 C3PO에 문의하기만 하면 됩니다.
그런 것 중 가치가 있는 것은 NASA 그래픽 표준 매뉴얼, Mailchimp의 스타일 가이드 또는 Barnes & Noble의 UI 스타일 가이드입니다.
그래서 이 간략한 소개 후에 여러분은 이미 스타일 가이드가 무엇인지에 대한 개념이 희미하게나마 잡힐 수 있지만, 여러분이 이 가이드의 완전한 개념을 파악하도록 돕기 위해서 이 글을 통해서 방법을 알 수 있도록 돕고자 합니다.
스타일 가이드 및 브랜드 메시징
지금까지 해보셨다면 스타일 가이드가 무엇인지 이미 알고 있을 것입니다. 대신 브랜드 측면을 조금 만져보고 브랜드 메시징에 대해 몇 마디 이야기를 나누어 보도록 하겠습니다.
Marty Neumeier에 따르면 브랜드는 직감( The Brand Gap )입니다.
“브랜드는 제품, 서비스 또는 회사에 대한 사람의 직감입니다. 그것은 여러분이 말하는 것이 아닙니다. 그들이 말하는 것입니다.”. ( Marty Neumeier, The Brand Gap)
사람들이 안전하고, 편하고, 아늑하게 느끼게 하는 것, 그리고 그들이 느끼기를 원하는 모든 것을 만드는 것입니다. 이렇게 생각해보십시오. 잠재고객이 웹 사이트, 앱 또는 기타 디지털 및 인쇄 매체 등과 같은 브랜드의 접점에 접촉할 경우, 색상, 타이포그래피, 카피, 스마트한 UX와 깔끔한 UI를 통해 해당 사용자에게 영향을 미칠 수 있습니다. 이제 여러분의 브랜드가 빛을 발할 때입니다.
스타일 가이드에는 무엇이 포함되어야합니까?
이미 언급했듯이 프로젝트의 설계 및 개발 프로세스 중에 참조할 지점으로 효과적으로 사용할 수 있는 스타일 가이드에는 최소한 다음과 같은 중요한 요소가 있어야 합니다.
1. 타이포그래피(Typography)
2. 색상 팔레트(Color Palette)
3. UI 구성 요소(UI Components)
4. 이미지(Images)
이미 스타일 가이드의 정의 요소에 대해 언급했듯이 이제 하나를 만드는 방법을 배울 때입니다.
스타일 가이드를 만드는 방법?
스타일 가이드를 통해 프로젝트를 처음부터 끝까지 완벽하게 제어할 수 있습니다.
이제 중요한 요소들을 하나씩 세분화하여 모든 퍼즐이 최적의 디자인 결정을 내리고 브랜드 일관성을 유지하는 데 어떤 도움이 되는지 살펴보겠습니다.
타이포그래피(Typography)
타이포그래피를 올바른 방식으로 구현하는 것은 생각만큼 쉽지 않습니다.
예를 들어, 웹 사이트의 카피 형식과 구조 또는 카피 라이팅을 통해 표현 된 브랜드의 전반적인 목소리 톤은 고려해야 할 가장 중요한 측면 중 하나입니다.
따라서 앞서 언급했듯이 잘 작성된 문구와 스토리텔링을 통해 브랜드의 목표와 사명을 요약하거나 사용자가 전환으로 이어질 수 있는 CTA's(클릭 유도 문안)에 참여하도록 유도할 수 있습니다.
한편, 적절한 문자 간격과 라인 높이를 교묘하게 활용한 검색엔진 최적화(SEO) 친화적인 콘텐츠 포맷과 구조는 그 경험을 완전히 새로운 수준으로 끌어올릴 수 있습니다. H1, H2 및 H3과 같은 제목을 사용하여 텍스트에 계층 구조를 도입하는 것은 표준 관행이어야 합니다.
결국, 웹 사이트의 큰 덩어리는 타이포그래피입니다. 홈페이지와 웹 사이트의 나머지 부분이 깔끔하게 보이기를 원합니다.
명확하고 매혹적이며 읽기 쉽고 전환율이 높아야 합니다. 가능한 최상의 가독성을 제공하기 위해 본문과 제목에 적합한 글꼴 크기를 결정하는 것은 우선순위 목록에서 중요하며 가장 중요한 접근성 기능 중 하나입니다.
실험하지 않고 제목과 본문 텍스트에 사용할 서체와 글꼴 크기를 바로 알아내고 스스로 폰트를 찾으려 하는 것은 UX 디자이너와 평소 밀접하게 일하고 있는 개발자에게 시간 절약이 될 수 있습니다.
색상 팔레트(Color Palette)
목소리 톤을 전달하는 데 도움이 되는 웹 사이트나 앱의 타이포그래피처럼 브랜드의 시각적 아이덴티티 안에서 사용되는 색상은 사용자로부터 어떤 감정적인 반응을 불러일으키는 데 도움이 됩니다. 올바른 색상 팔레트는 현재 사용자의 기분에 영향을 미칠 수 있으며 브랜드에 대한 느낌을 향상시켜 전환 가능성이 높아집니다.
색상은 모든 브랜드 아이덴티티와 스타일 가이드의 주요 특징 중 하나입니다. 그들은 음영과 색조에 많은 무게를 지니고 있습니다. 컬러 팔레트는 사용자의 구매 심리에 영향을 미치고 브랜드의 목소리를 반영하는 특정 감정과 분위기를 표현할 수 있습니다.
모든 브랜드에는 기본색과 보조색이 있습니다.
색상 팔레트를 만들 색상을 선택할 때 브랜드 속성과 관련하여 기본 및 보조 색상을 정의해야 합니다. 기본 색상 세트는 주요 브랜드 자산으로 이어지기 때문에 고정하는 것이 중요합니다.
보조 색상 세트는 강조 색상입니다. 웹 페이지의 특정 UI 요소와 텍스트를 컨텍스트화하고 사용자와 고객을 위해 더 명확하게 할 수 있도록 도와줍니다.
강조 또는 보조 색상은 링크, 텍스트, 버튼, 메뉴, 애니메이션, 양식 또는 입력 필드에 사용되어 동작을 설명하거나 컨텍스트를 사용자에게 전달하는 뚜렷한 모양을 제공할 수 있습니다.
한가지 언급할 가치가 있는 것은 강조 색상과 기본 색상이 일치할 때 항상 잘 어울려야 한다는 것입니다. 색의 상호작용이 충돌하지 않는 조화로운 색채환경을 만들고자 하는 것입니다.
그리고 궁극적으로 적절한 색상 팔레트를 선택하면 브랜드 포지셔닝을 만들고 브랜드 가치와 목소리 톤을 대상 고객에게 전달하는 데 도움이 될 수 있습니다.
UI 구성 요소(UI Components)
사용자 인터페이스 디자인 구성 요소는 최고의 사용자 경험을 제공하는 데 있어 중요한 부분입니다.
GUI를 통해 웹 사이트에 생명을 불어넣을 수 있습니다 .
스타일 가이드에 필요한 UI 구성 요소 :
- 버튼(Buttons)
- 양식(Forms)
- 입력 필드(Input Fields)
- 아이콘(Icons)
- 도구 모음(Toolbars)
- 레이아웃(Layouts)
- 메뉴(Menus)
- 목록(Lists)
- 그리드(Grids)
- 스테퍼(Steppers)
- 모달(Modals)
UI 요소는 깨끗하고 기능적이며 픽셀 단위까지 완벽해야 합니다. 그들의 우선순위는 그들을 위해 설계된 특정 의미를 시각적으로 전달하는 것입니다. 사용자는 다음에 무엇을 해야 하는지, 어떻게 해야 하는지에 대한 컨텍스트를 파악할 필요가 있습니다.
예를 들어, 버튼에 명확하게 정의된 상태가 있어야 합니다. 애니메이션, 색상 및 텍스트의 올바른 조합을 얻음으로써 사용자에게 이를 전달할 수 있습니다. 양식도 마찬가지입니다. 사용자의 관점을 염두에 두고 입력 필드를 디자인해야 합니다.
이미지(Images)
브랜드 아이덴티티의 일부인 사진과 일러스트레이션은 브랜드의 비전을 반영해야 합니다.
"천 마디 말보다 한 번 보는 게 더 낫다." 이 말에서 나오는 진리는 분명하고 단순한 것입니다. 때때로 시각적 의사소통은 말보다 훨씬 더 많은 사람들을 감동시킬 수 있습니다.
하지만 브랜드 이미지를 손상시키고 확고하고 일관된 외관과 느낌을 갖는 것이 전부는 아닙니다.
고객이 브랜드에 액세스하거나 도달할 수 있는 모든 접점과 채널에 적합한 색상과 종횡비를 갖는 기술적 측면도 중요합니다.
전문가 팁 : 항상 접근성을 염두에 두고 디자인
사용자 경험을 각계각층의 사람들과 배경에서 쉽게 상호작용할 수 있도록 적응하는 것을 잊지 않는 한 디자인 트렌드를 따르는 것이 좋습니다.
항상 디자인과 디자인 구성요소가 최신 접근성 표준을 준수하는지 확인하고 스타일 가이드에 포함해야 합니다.
결론
요컨대, 스타일 가이드는 브랜드 일관성을 유지하면서 모두가 바람직한 결과를 얻기 위해 반드시 지켜야 하는 정해진 브랜드 기준을 준수하도록 함으로써 팀의 노력을 통합하는 데 도움이 됩니다.
프로젝트의 설계 및 개발 과정에서 참조하는 스타일 가이드는 청중에게 호소력을 발휘하는 최종 제품을 제공하는 데 도움이 되며, 훌륭한 팀 작업과 훌륭한 팀 작업 사이의 모든 차이를 만들 수 있을 것입니다.
원문 링크. How to Create a Style Guide to Enhance your Brand’s UX?
댓글 영역