실제로 작동하는 웹 사이트 스타일 가이드를 설계하십시오 : 브랜드 콘센스를 만들고 더 쉽게 작업하십시오.

이 문제를 겪은 적이 있습니까? 귀하의 웹 사이트는 디자인에서 "Twilight Dan"이됩니다.

이렇게 느낀 적이 있습니까? 당신은 6 개월 전에 출시 된 웹 사이트를 자랑스럽게 생각하는 디자이너, 개발자 또는 프로젝트 소유자입니다. 그러나 오늘 내가 다시 돌아 왔을 때 ... 모든 것이 "왜곡 된"것 같습니다. 제품 페이지의 버튼은 하나의 색상입니다. 연락처 페이지의 버튼은 다른 색상입니다. 블로그 페이지의 제목 크기와 서비스는 동일하지 않습니다. 각 섹션 사이의 간격은 앞뒤로 점프하는 것 같습니다. 각 페이지는 다른 팀에 의해 만들어졌습니다

고전적인 상황은 마케팅 팀이 배너를 얻고 싶어한다는 것입니다. 또한 개발자가 설정 한 16 진 컬러 코드와 일치하지 않는 새로운 파란색 음영을 사용하여 캔버에서 수행합니다. 방금 입력 한 새로운 개발자는 웹의 기본 버튼 스타일이 어떤 스타일을 사용 해야하는지 모르겠습니다. 새 구성 요소를 만듭니다. 마지막으로 ... 예전에는 아름다운 웹 사이트입니다. 각 사람이 지저분해질 때까지 각 색상을 서로 꼭대기에 넣는 예술처럼되었습니다.

삽화를위한 프롬프트 : 사진은 팀 디자인 및 개발의 책상에 혼란을 보여줍니다. 컴퓨터 화면에는 동일하지 않은 Post, UI와 혼란스러운 팀이 많이 있습니다. 디자인의 일관되지 않은 디자인을 전달합니다

왜 "엉망"인가? 디자인은 발생할 수 있습니다 (처음에는 잘 시작되었지만).

이 문제는 좋지 않거나 관심이없는 사람에 의해 발생하는 것이 아니라 프로젝트가 성장할 때 매우 쉽게 발생하는 "시스템 문제"입니다. "팀의 모든 사람이 동일한 표준으로 유지할 진실의 단일 원천이 아닌 주요 원인.

상상하다:

• 더 큰 팀 : 새로운 사람들이 프로젝트 (디자이너, 프로그래머 또는 마케팅 담당자이든)에 들어올 때 이전에 디자인의 "규칙"이 무엇인지 알 수 없습니다. 따라서 그들은 "추측"또는 "새로운 표준을 만들어야한다".
• 사일로 (사일로) : Figma의 작업 디자이너, VS 코드에서 일하는 개발자 및 마케팅 팀은 Canva 또는 Photoshop에서 일합니다. 각각 자체 파일이 있습니다. 그리고 데이터 동기화 또는 중앙 설계 규칙이 없습니다.
• 시간 압력 : "이 배너가 긴급하게!", "이 시간 내에이 버튼을 편집하십시오!" 이 문장은 모든 사람이 바로 가기를 선택할 수있는 좋은 촉매제입니다. 가이드 라인을 보러 돌아가는 대신 (존재하지 않을 수도 있음). 결과는 일관성이 없습니다. 조금씩 축적됩니다
• 명확한 문서 부족 : 여러 번 "가이드 라인"은 회의에서만 이야기되었습니다. 또는 작년에 서로에게 전송 된 PDF 파일만이 항상 액세스하고 업데이트하기 쉬운 문서를 찾지 못했습니다. 모든 사람이 자신의 이해에 따라 일하고 강력한 기업 브랜드를 온라인으로 .

삽화를위한 프롬프트 : 3 개의 팀 (디자인, 개발, 마케팅)을 보여주는 간단한 인포 그래픽 이미지 (Silo)에서 별도로 작동하며 각 팀에서 화살이 비네팅으로 나옵니다. 의사 소통 및 중앙 표준의 부족을 전달합니다

떠나십시오 ... 당신이 생각하는 것보다 더 위험합니다! 없음 스타일 가이드의 영향

"작은 아름다움"이라고 생각하기 때문에이 문제를 간과하는 것은 매우 위험한 오해로 간주됩니다. 그 효과는 단순한 디자인 이상으로 퍼지고 많은 차원에서 비즈니스에 부정적인 영향을 미치기 때문입니다.

• 사용자 경험 (UX (User Experience) : 일관되지 않은 웹 사이트, 사용자가 혼란스럽고 부적절하다고 느끼게합니다. 어떤 버튼이 계속 될지 확실하지 않습니다. 또는 어떤 링크가 실제로이 불확실성을 클릭 할 수 있는지 확실하지 않습니다.
• 브랜드의 가치 감소 (브랜드 희석) : 일관성은 강력한 브랜드의 핵심입니다. 웹 사이트에 색상, 로고 및 다양한 글꼴이 모두 있으면 브랜드 이미지가 약하고 기억에 맞지 않는 것처럼 보입니다. 고객은 귀하의 브랜드에 부착 된 느낌이 들지 않습니다.
• 시간과 예산 낭비 : 개발자가 설계자에 대해 "이 버튼을 사용해야하는 색상은 무엇입니까?"에 대해 질문을 해야하는 시간에 대해 생각해보십시오. 또는 디자이너,이 시간을 사용할 중앙 라이브러리가 없기 때문에 컴퓨터를 반복적으로 반복하는 방법은 낭비적인 비용입니다. 프로젝트 개발이 훨씬 더 지연됩니다.
• 확장 및 유지 보수 지옥 : 언젠가 웹 사이트의 모든 기본 버튼을 변경하려고합니다. 좋은 스타일 가이드가 없다면 실수에 매우 위험한 수백 개의 코드를 쫓아야 할 수도 있습니다. 이 환경에서 작업하면 새로운 기능이 확장됩니다. 두통입니다.

이 간단한 문제를 "불일치"라고하며, "기술 부채"와 "설계 부채"를 만들 수 있으며, 이는 조직이 천천히 발전 할 수 있습니다.

삽화에 대한 프롬프트 : 비교 이미지. 왼쪽은 사용자 이미지입니다. 얼굴은 버튼과 색상이 일관되지 않는 웹 페이지와 혼동됩니다. 오른쪽에는 동일한 사용자 이미지가 있으며 아름답고 일관된 디자인이있는 웹 사이트를 사용하는 동안 웃으며 만족합니다.

올바른 해결책! 팀의 모든 사람들이 사용하고자하는 "웹 사이트 스타일 가이드"를 만들기 시작하십시오.

가장 직접적이고 지속 가능한 솔루션은 "웹 사이트 스타일 가이드"를 . 그것은 한 번 그리고 끝나는 PDF 파일 일뿐 만 아니라 팀의 모든 사람이 팀의 모든 사람들이 "빈 프린트"또는 활기찬 "입니다. 경영진에서 인턴쉽에 이르기까지 동일한 표준으로 볼 수 있습니다.

그리고 어디에서 시작해야합니까? 훌륭하고 실용적인 웹 사이트 스타일 가이드는 다음과 같은 주요 구성 요소로 구성되어야합니다.

• 1. 브랜드 재단 :
  • 로고 : 올바른 사용 방법, 로고 주변의 여유 공간 (명확한 공간) 및 잘못된 사용의 예.
  • палитра цветов (색상 팔레트) : 1 차, 보조, 배경/문자 (중립/회색) 및 다양한 상태에 대한 색상 (성공, 경고, 오류) 색상 코드 (HEX, RGB, CMYK)
  • 인쇄 (타이포그래피) : 제목 및 콘텐츠 용 글꼴 설정 (신체) 다양한 장치 (데스크탑, 태블릿, 모바일)의 크기, 무게 및 선 높이를 지정합니다.
• 2. UI의 구성 요소 (UI 구성 요소) : 이것은 웹 사이트를 일관성있게 만드는 핵심입니다.
  • 버튼 및 링크 : 모든 상태 (기본, 호버, 압박, 비활성화), 기본 버튼, 보조 버튼 및 텍스트 링크에 대한 설계 버튼.
  • 양식 : 입력 필드, 텍스트 영역, 드롭 다운, 체크 박스, 라디오 버튼 및 잘못된 위치를 작성할 때 가장 중요한 경고 메시지 스타일을 지정하십시오.
  • 카드 및 컨테이너 : 제품 또는 기사와 같은 정보를 표시하는 데 사용되는 카드 형식.
  • 아이콘 : 웹 사이트에 사용 된 아이콘 세트와 아이콘 스타일.
• 3. 음성과 톤 :
  • 음성의 톤 : 어떤 종류의 음성 브랜드가 있습니까? 공식적으로 친절하거나 재미 있거나 신뢰할 수 있습니까? 이 부분은 콘텐츠를 작성하고 카피 라이팅하는 데 매우 중요합니다. 브랜드 음성 및 톤의 표준화는 필수 불가결 한 것입니다.
• 4. 이미지 및 미디어 사용 (이미지 및 미디어) 사용 :
  • 사진 : 사용 된 사진의 방법은 무엇입니까? (실제 사진, 스톡 사진, 이미지 톤과 같은)
  • 일러스트레이션 및 그래픽 : 브랜드와 일치하는 그림의 스타일.

이러한 것들을 만들기 시작하는 것은 큰 이벤트처럼 보일 수 있습니다. 그러나 그것을 믿으십시오. 그것은 가장 가치있는 투자입니다. 좋은 예를 볼 수 있습니다. Invision Canva Learn 의 기본 사항을 연구함으로써 의 영감으로 시작을위한 훌륭한 지침을 제공합니다.

그림을위한 프롬프트 : 아름답고 깨끗한 인포 그래픽 이미지는 브랜드 기초 (로고, 색상), UI 구성 요소 (형태, 양식), 음성 및 톤 (단어의 단어) 및 이미지 (아이콘 이미지)의 4 가지 주요 부분으로 나뉩니다.

실제 예 : "Tech Startup"이 게임을 스타일 가이드로 바꿀 때

더 명확 해지려면 예를 들고 싶습니다. 이 혼란에 직면했던 기술 스타트 업 회사의 (실제 이야기에서 수정).

스타일 가이드 : 그들의 팀에는 3 명의 디자이너와 5 명의 프론트 엔드 개발자가 있으며, 모두는 좋지만 별도로 일합니다. 각 디자이너에는 고유 한 Figma 파일이 있습니다. 각 개발자는 자신의 CSS 구성 요소를 만듭니다. 결과적으로 응용 프로그램에는 웹에 5 개의 블루가 사용되는 4 "로그인"버튼이 있습니다. 대신, 매일 디자인에 대한 토론에 회의가 필요했습니다. 엄청난 시간과 예산 낭비를 유발합니다

성경 창조의 사명 : 리드 디자이너와 리드 개발자는 견딜 수 없습니다. 그들은 Figma 및 Storybook에서 "웹 사이트 스타일 가이드"및 "디자인 시스템"의 제작에 전념하기 위해 2 주 동안 모든 새로운 기능 개발을 중단하기로 결정했습니다. 모두 새로운 센터 인 UI 구성 요소 팀의 모든 사람들은 의견을 제시하는 데 관여합니다.

스타일 가이드가있는 후 : 결과는 매우 인상적입니다.

• 개발 속도는 40%증가했습니다. 개발자는 더 이상 추측 할 필요가 없습니다. 생성 된 구성 요소를 선택할 수 있습니다.
• 100%일관성 : 모든 페이지, 모든 버튼, 웹 사이트의 모든 부분은 하나입니다. 좋은 경험을 만들고 전문적인 모습을 보입니다.
• 새로운 온 보딩이 더 쉽습니다. 새로운 디자이너 또는 개발자는 스타일 가이드를 열고 하루도 채되지 않아 작업을 시작할 수 있습니다. 이전과는 달리 일주일이 걸렸습니다

처음 투자에서 수익은 엄청난 증가와 속도입니다. 이것은 명확한 녹색 인쇄의 힘입니다. 신뢰성과 확장 성이 필요한 기업 웹 사이트 개발 에 절대적으로 필요합니다.

그림을위한 프롬프트 : 왼쪽의 응용 프로그램의 전 및 후 화면, 오른쪽에 UI (멀티 컬러 버튼, 많은 크기)를 표시하여 아름답고 구성된 UI를 보여줍니다. 스타일 가이드에 연결된 가이드 라인이 있습니다

무엇을하고 싶습니까? 체크리스트는 웹 사이트 스타일 가이드를 만듭니다 (즉시 사용할 수 있음).

팀을위한 "나침반"을 만들 준비가 되셨습니까? 이 체크리스트를 단계별로 따르십시오. 사용하는 도구에 관계없이 (그림, 스케치 또는 웹 플로에서 웹 페이지로 생성)

1. (감사) 골동품 탐색 : 웹 사이트 및 응용 프로그램을 열십시오. 포착. 사용 가능한 모든 구성 요소 화면 : 모든 색상, 모든 버튼, 모든 글꼴, 모든 아이콘은 전체 "Mess"를보기 위해 한 곳 (예 : Figjam 또는 Miro)으로 결합됩니다.
2. (기초) 브랜드의 기초를 마련했습니다.
   • 색상 : 명확한 색상 세트 이름을 이해하기 쉬운 이름 ( '기본 블루',`텍스트 -Dark`,`error-red`)라는 이름은 모두가 "지금은 우리는 이것에서 색상 만 사용할 것"이라고 알고 있다고 발표했습니다.
   • 타이포그래피 : 제목 (H1-H6) 및 바디 텍스트 용 글꼴을 선택하십시오. 데스크탑 및 모바일의 크기, 무게 및 거리.
   • 로고 : 규칙과 함께 다양한 버전의 로고 (컬러, 흰색 블랙)를 배치하십시오.
3. (구성 요소) UI 창고 생성 :
   • 버튼 (버튼)을 가장 자주 사용하는 것으로 시작하여 모든 상태 (기본값, 호브, 비활성화)를 만듭니다.
   • 양식 (양식) 으로 이동합니다 . 입력 필드, 레이블, 오류 상태.
   • 카드, 모달, 내비게이션 바와 같이 자주 사용되는 다른 구성 요소를 만듭니다.
4. (내용) 정의 지침 :
   • 음성의 톤 : 브랜드에 대한 1-2 단락의 짧은 요약을 작성하십시오. 우리는 어떤 종류의 어조로 고객과 이야기합니다.
   • 이미지 : 사용 된 이미지 및 그래픽에 대한 지침을 설정하십시오.
5. (문서 및 액세스) 모든 사람이 액세스하고 사용합니다.
   • 중앙 도구를 선택하십시오 : Figma는 오늘날 가장 인기있는 도구입니다. 디자이너와 개발자는 한곳에서보고 댓글을 달 수 있기 때문에
   • 팀의 "법률"으로 발표 : 런칭 스타일 가이드를위한 짧은 회의를 개최하고 모든 사람에게 그것을 사용하는 방법을 설명하면서 이것이 모든 사람이 보유 해야하는 "진실의 단일 출처"임을 강조했습니다.
   • "라이브"로 만드십시오 : 스타일 가이드는해야 할 일이 아닙니다. 새로운 구성 요소 설계를 추가 해야하는 경우, 스테이징 환경에서 워크 플로를 실제 사용 전에 새로운 구성 요소 테스트에 도움이됩니다.

명확한 체크리스트와 단계를 갖는 것은 스타일 가이드 생성에 도움이 될 것입니다.

삽화를위한 프롬프트 : 인포 그래픽 형식의 아름다운 체크리스트 이미지 각 항목에는 아이콘이 있습니다. 예를 들어, 제 1 조 (감사)는 안경의 확장이고, 제 2 조 (기초)는 블록의 형태이며, 항목 3 (구성 요소)은 많은 사람들의 아이콘, 항목 5 (액세스)입니다. 클라우드에 연결하는 사람들

사람들이 궁금해하는 질문 (그리고 가장 명확한 답변)

여기에서 답변 할 웹 사이트 스타일 가이드를 만드는 것에 대한 일반적인 질문을 작성했습니다.

질문 : 웹 사이트 스타일 가이드와 브랜드 가이드 라인의 차이점은 무엇입니까?
답변 : 브랜드 가이드 라인은 "더 넓은"범위를 갖게 될 것입니다.이 범위는 철학, 비전, 인쇄 미디어, 명함, 직원에 로고를 사용하지만 웹 사이트 스타일 가이드 (또는 디자인 시스템)와 같은 브랜드의 모든 것을 포괄 할 것입니다. 웹 사이트 스타일 가이드 (또는 디자인 시스템)는 "웹 사이트는 UI의 세부 사항에 대해서만 더 깊이있을 것입니다.

질문 : 프로젝트 만 수행하거나 소규모 팀을 수행하는 경우 여전히해야합니까?
답 : 매우 필요합니다! 일찍 스타일 가이드를 만들어 내더라도 미래를위한 좋은 기초를 마련하는 것이 더 일관되고 빠르게 일하는 데 도움이됩니다. 그리고 당신의 팀이 확장 된 날에, 당신은 즉시 새로운 사람들에게 전달할 준비가 된 "성경"을 갖게 될 것입니다. 모든 것이 혼란 스러울 때 새로운 것을 만들 필요가 없습니다.

질문 : 최선을 다하기 위해 어떤 도구를 사용해야합니까?
답변 : 가장 좋은 도구는 "팀이 실제로 사용하고 쉽게 액세스 할 수있는 도구"입니다. 현재 Figma 는 클라우드 기반이기 때문에 가장 인기가있어 모든 사람이 항상 최신 정보를 볼 수 있습니다. 그러나 스케치, Adobe XD를 구축하거나 웹 플로우 또는 스토리 북으로 코드를 작성하는 실제 웹 페이지를 만들 수도 있습니다. 핵심은 센터가되고 쉽게 접근 할 수 있도록하는 것입니다.

질문 : 스타일 가이드가 얼마나 자주 업데이트해야합니까?
답 : 스타일 가이드는 "살아있는 문서"(살아있는 문서) 여야합니다. 프로젝트에서 새로운 구성 요소를 만들거나 개선 할 때마다 업데이트되어야합니다. 스타일 가이드의 순서를 업데이트하고 유지 관리하는 "Guardian"(Guardian)이 있어야합니다. 팀 및 고객과의 커뮤니케이션은 정기적으로 중요합니다. 고객과 의사 소통하기 위해 최상의 가이드 라인 에서 더 많은 것을 배울 수 있습니다.

삽화를위한 프롬프트 : 사람들은 "FAQ"라는 단어로 화이트 보드를 가리키고 있으며 작은 아이콘이있는 큰 질문 아이콘 (?)이 있습니다. 한 사람의 아이콘, 아이콘, 도구 (망치, 렌치)와 같은 각 질문을 전달합니다.

요약 : 혼돈을 일관성으로 변경하십시오. 오늘 스타일 가이드에서 시작하십시오!

이 시점에서 나는 모든 사람이 웹 사이트 스타일 가이드가 수행되는 "아름다운 문서"가 아니라 디지털 시대에 매우 강력하고 필요한 "비즈니스 도구"인 것과 동일한 이미지를 보았을 것이라고 생각합니다. 작업 혼란을 부드럽게 바꾸고 디자인의 무감각을 브랜드의 강도로 바꾸고 팀이 더 나은 제품을 만들도록 도와줍니다.

오늘날 좋은 스타일 가이드를 만들기위한 좋은 투자와 리소스는 효과적인 "미래를 구매"하고 팀과 조직의 장기적인 두통을 줄이는 것입니다. 귀하의 웹 사이트를 성장시키고 중단없이 확장 할 수있는 안정적인 기반입니다.

더 이상 디자인에서 웹 사이트가 "황혼"이되지 않도록하십시오. 이제 모든 사람을 같은 방향과 우아한 안내 할 수있는 "나침반"을 만들 시간입니다!

System Style Guide 또는 Design System 시스템을 만드는 데 도움이되는 Vision X Brain을 원합니다. 작업을 업그레이드하고 강력한 디지털 브랜드를 만들려면 맞습니까? UX/UI 전문가 팀과 무료로 문의하십시오! 우리는 당신에게 쉽게 복잡성을 바꿀 준비가되었습니다.

‍