웹 플로로 확장 된 설계 시스템을 만듭니다.

인생의 실제 문제 : 왜 대기업의 조직이 있습니까? "디자인 제어"는 여기에 없습니까?

이렇게 느낀 적이 있습니까? 관리자 또는 팀 리더로서 회사의 웹 사이트 및 애플리케이션을보고 한숨을 쉬어야합니다 ... 왜 각 제품이 다른 회사와 다르게 보입니까? 팀 A는 진한 파란색 버튼을 사용합니다. B 팀은 Bright Blue를 사용하고 C 팀은 파란색 버튼으로 새로운 기능을 출시했습니다! 이것은 "디자인 불일치"또는 디자인의 일관성없는 설계라고하는 문제입니다. 대규모 조직이 정기적으로 만나야한다는 악몽입니다.

문제는 단지 그가 아닙니다. 상상하다:

• 디자인 : 나는 새로운 프로젝트를 시작할 때마다 거의 새로운 UI 키트를 앉아서 설계해야합니다. 표준화해야 할 무언가를 만들기 위해 시간을 낭비합니다
• 개발자 : 기본 구성 요소 (예 : 버튼, 양식, 카드)에 대한 코드를 반복적으로 작성하고 작성해야하지만 사용해야합니다.
• 제품 관리자 : 모든 팀이 디자인의 "최신 버전"이라는 것을 이해할 수있는 두통 및 커뮤니케이션은 무엇입니까?
• 사용자 (END -SER) : 다른 것처럼 보이는 제품을 사용할 때 혼란 스럽습니다. 브랜드에 대한 신뢰성과 좋은 경험을 줄입니다.

이 모든 것은 부족한 조직의 증상입니다. "고통 스러우고 거대한 조직의 성장을 유지하는 문제인 디자인에 대한 진실의 단일 원천은 발견 단계의 중요성을 장기적 으로이 문제를 줄이는 데 도움이 될 것입니다.

‍

삽화를위한 프롬프트 : 사무실에서 혼란을 보여주는 인포 그래픽 스타일 그림. 컴퓨터 앞에 다른 디자인, 버튼 및 색상을 보여주는 많은 디자이너와 개발자가 있습니다. 국수로 혼란을 전달하고 표준이 없습니다.

‍

그 문제는 이유 : "체계적이지 않은"의 출처

많은 사람들 이이 문제가 팀의 무지에 의해 야기된다고 생각할 수도 있지만 실제로는 그 뿌리가 더 복잡합니다. 이는 꺼지고 조직의 규모에 적합하지 않은 "작업 방법"으로 인해 발생합니다. 주된 이유가 무엇인지 보자.

1. 사일로 작업 : 각 팀은 마치 마치 마치 마치 마치 별도로 일합니다. 마케팅 팀에는 자체 프로젝트가 있습니다. 프로덕션 팀은 또한 자체 기능을 개발했습니다. 각 사람은 디자인 결정을 연결하는 핵심이 없습니다. "다른 스타일의 다른 사람들"을 결과로 만드십시오.

2. "단일 진실의 출처"는 없습니다. 많은 조직에는 "스타일 가이드"가있을 수 있지만 대부분은 PDF 파일 또는 "죽은"슬라이드 형태입니다. 즉, 실제 작업을 업데이트하지 않으며 개발자가 실제로 사용하는 코드에 연결할 수 없습니다. Figma Designer이지만 개발자는 업데이트되지 않습니다. 마지막으로, 웹에서 보여주는 것은 어쨌든 최신 디자인과 일치하지 않습니다.

3. 비효율적 인 핸드 오프 : 전통적인 작업 프로세스는 "디자인 디자이너 -> 파일을 Dave -> Dave에게 보내기 위해 파일을 전송합니다." 이 프로세스에는 "해석"이라는 큰 간격이있어 개발자가 거리, 글꼴 크기 또는 정확한 색상과 같은 추측을 유발합니다. 작업을 느리고 쉽게 오류로 만듭니다

4. 적절한 도구 부족 : 설계 (설계) 및 개발 (개발) 중에 별도의 도구를 사용하는 것이 문제의 중요한 근본입니다. 설계와 코드가 "언어"또는 "플랫폼"에 있지 않으면 항상 유지하는 것은 거의 불가능합니다. 이것은 많은 조직이 대규모 조직을위한 WebFlow Enterprise와 같은 완전한 솔루션을 찾기 시작한 시점입니다 .

‍

삽화를위한 프롬프트 : 별도의 원에 3 개의 팀 (디자인, 개발, 마케팅)이 포함 된 사일로 일정 이미지. 중간에 다른 방향으로 화살표가 있습니다. PDF 문서가 작성된 "스타일 가이드 v.1 (구식)"이 버려집니다. 연결되지 않은 작업을 전달합니다

‍

왼쪽이라면, 그것이 어떤 영향을 미칩니 까 : "웹 사이트는 아름답 지 않습니다"보다 재난.

만성 디자인에서 일관성이없는 문제를 남기는 것은 "아름다움"에 관한 것이 아니라 "비즈니스 번호"와 "기업 문화"에 직접적인 영향을 미칩니다.

1. 비용이 높고 시간 낭비 (비용 증가 및 낭비 시간) : 1 년 안에 팀이 낭비되는 시간을 계산하십시오. "반복적으로 똑같은 것을 만듭니다"와 "일치하지 않는 디자인의 편집". 직원의 시간과 급여는 조직이 헛된 비용을 지불해야합니다.

2. 시내 마케트 느린 시간 : 경쟁 업체는 2 주 안에 새로운 기능을 출시 할 수 있지만 팀은 버튼의 색상에 대해서만 앉아서 논쟁하기 때문에 한 달이 걸릴 수 있습니다. 시스템 부족이 느려집니다. 그리고 그것은 비즈니스 기회를 잃는 것을 의미합니다

3. 브랜드의 가치 감소 (브랜드 희석) : 일관성은 강력한 브랜드 구축의 핵심입니다. 고객이 각 채널에서 다른 경험을 가지고있을 때마다 브랜드의 신뢰도가 점차 줄어 듭니다.

4. 사용자 경험 불량 : 사용자는 웹 또는 앱이 "쉬운"및 "길을 추측"할 것으로 예상합니다. 그러나 다른 얼굴은 파란색이며 사용자가 항상 다시 배울 수있는 부담을줍니다. 사용 중 오류가 발생할 수 있습니다

5. 팀 번 아웃 : 아무도 동일한 문제를 앉히고 해결하기 위해 노력하고 싶지 않습니다. 또는 디자이너와 개발자 모두 반복적으로 일하는 것은 좌절감과 낙담을 느낄 것입니다. WebFlow Agency 또는 Freelancer 중에서 선택한 직원의 작업 분위기 및 사임율에 영향을 미칩니다 .

‍

그림의 프롬프트 : 2 줄 그래프 이미지는 상승하는 "비용"입니다. 그리고 다른 라인은 "개발 속도"이며 아래에서 떨어진 곳에 큰 브랜드 아이콘이 있습니다. 그리고 많은 차원에서 부정적인 효과를 전달하기 위해 혼란스러운 사용자의 얼굴

‍

해결책이 있습니까? 시작해야 할 곳 : "웹 플로우의 확장 가능한 설계 시스템"을 추천하고 싶습니다.

이 모든 것의 해결책은 "디자인 시스템"의 생성입니다! 그러나 일반적인 디자인 시스템뿐만 아니라 조직과 "웹 플로우"와 함께 성장하고 확장 할 수있는 "확장 가능한 설계 시스템"이 가장 완벽한 도구입니다.

디자인 시스템은 무엇입니까? 가장 쉬운 이해에 대해서는 조직의 모든 사람들이 무엇이든 만들 수있는 "브랜드의 레고 도구 상자"입니다. 그러나 같은 상자의 구성 요소를 사용하는 것은 디자인 파일이 아니라 디자인과 코드를 연결하는 "살아있는 시스템"이기 때문에 결과는 항상 동일한 브랜드 일 것입니다.

그렇다면 왜 웹 플로입니까? 웹 플로우는 특히이 문제를 해결하기 위해 생성되었으므로 다음과 같습니다.

• 진실의 단일 소스 : 색상, 글꼴, 거리, 복잡한 구성 요소 (예 : 네이브 바, 슬라이더)에 이르기까지 모든 것을 만들 수 있습니다. 중간에 업데이트하면 모든 구성 요소도 자동으로 업데이트됩니다.
• 재사용 가능한 구성 요소 : 이것은 마음입니다. 이미 모든 것을 설정 한 "지금 구매"버튼과 같은 "구성 요소"를 만들 수 있습니다. 이 버튼을 사용할 때마다 새 버튼을 생성 할 필요가없고 웹의 모든 버튼의 텍스트 나 색상을 변경하려면 메인 컴퓨터를 수정하면 웹 플로우 구성 요소 .
• 개발과 연결 : 웹 플로우 디자이너에서보고 설계 한 내용은 사용자가 웹 페이지에서 실제로 볼 수있는 것입니다. 디자이너와 Dave의 "해석"간격을 0으로 줄였습니다. 두 팀 모두 동일한 도구에서 작업하기 때문입니다
• 변수 : 웹 플로우를 사용하면 색상 견본, 글로벌 글꼴 및 최신 IS 공간 또는 크기와 같은 다양한 값에 대한 CSS 변수를 설정할 수 있으므로 전체 사이트의 스타일 조정을 쉽게 조정할 수 있습니다.

가장 좋은 출발은 Living 웹 사이트 스타일 가이드를 . 웹 플로우는 완전한 디자인 시스템의 기초가 될 것입니다.

‍

그림의 프롬프트 : 인포 그래픽 이미지는 상자의 뚜껑에 웹 플로우 로고가있는 "도구 상자"를 보여줍니다. 버튼, 형태, 색상, 글꼴, 카드가 순서대로 배열된다는 표시가있는 "레고 조각"이 있습니다. 그리고 디자이너와 개발자의 손은 같은 부분을 꺼 냈습니다.

‍

성공했던 실제의 예 : "TechCorp"가 웹 플로우 디자인 시스템으로 게임을 뒤집을 때.

명확하게하기 위해 나는 회사의 해상도 사례 "TechCorp"를 들어 올려서 10 개 이상의 하위 제품이 있기 때문에 너무 빨리 자라서 자라기를 원합니다.

문제 (엉망) : 이전에 TechCorp는 많은 문제를 경험했습니다. 각 제품 팀은 자체 웹 사이트를 만들어 제품 A 및 B의 방문 페이지가 회사와 완전히 다르게 보입니다. 마케팅 팀은 캠페인 마이크로 사이트를 만드는 데 일주일이 걸립니다. 사용자는 익숙하지 않은 웹 사이트와 혼동되기 때문에 모든 새로운 콘도 율을 기다려야하기 때문입니다.

솔루션 : 웹 플로 팀 과 함께 웹 플로우에 "중앙 디자인 시스템"을 만드는 데 투자하기로 결정합니다 그들은 모든 UI 시스템을 감사 (색상, 글꼴) 및 가장 일반적으로 사용되는 구성 요소 (예 : Heeler) 가격 테이블을 작성하도록했습니다. 평가 섹션은 중간 시스템에 저장됩니다.

결과 (결과) : 새로운 디자인 시스템을 사용하기 시작한 지 3 개월 만에. 결과는 매우 인상적입니다.

• 새로운 웹 페이지를 70%로 개발하는 시간을 줄입니다. 마케팅 팀은 개발 팀을 조정하지 않고도 새로운 방문 페이지를 만들 수 있으며 이미 사용 가능한 구성 요소를 드래그하십시오.
• 브랜드 일관성은 100%증가했습니다. 모든 페이지와 동일한 TechCorp 브랜드를 시작하고 느꼈던 신제품.
• 새로운 직원은 2 배 더 빠릅니다. 새로운 디자이너와 개발자는 "매뉴얼"및 "도구"가 있기 때문에 즉시 작업을 시작할 수 있습니다.
• 전환율은 평균이 15%증가했습니다. 더 매끄럽고 안정적인 사용자 경험으로 인해.

이것은 웹 플로우가 조직에 제공 할 수있는 "별도의 작업"에서 "동일한 시스템 작업"으로의 변화의 힘입니다.

‍

삽화 프롬프트 : 비교 전 및 후. 첫 번째 측면은 전혀 일치하지 않는 3-4 웹 사이트 화면을 보여줍니다. 혼란이 있습니다. 화면 화면을 표시 한 후에는 아름답고 질서있는 디자인을 갖도록 조정 된 웹 사이트. 그래프 "생산성"이 증가함에 따라 증가합니다

‍

팔로우하려면해야 할 일 : 웹 플로에서 확장 가능한 설계 시스템을 생성하는 5 단계 (즉시 사용할 수 있음).

조직을위한 질서 정연한 시스템을 만들 준비가 되셨습니까? 웹 플로에서 즉시 시작할 수있는 5 가지 주요 단계입니다.

1 단계 : 감사 및 기초)
새로운 것을 만들기 전에. 우리가 가진 것을 알아야합니다. 조직의 모든 UI를 수집하십시오. (UI 감사)를보고 어떤 구성 요소 (몇 개 버튼, 스타일 수)를 나열하십시오. 조직의 "중앙 표준"및 웹 플로 프로젝트에서 기본 설정을 시작합니다.

• 글로벌 색상 : 글로벌 견본에 메인 색상, 색상, 문자 색상 및 브랜드의 다양한 알림 추가
• 글꼴 설정 (타이포그래피) : HTML 태그를 통해 표준으로 제목 스타일 (H1-H6), 단락, 링크 및 기타를 표준으로 지정하십시오.
• 간격 시스템 설정 : 구성에서 기억하기 쉬운 번호 (예 : 8 점 그리드)를 사용하십시오. 모든 것이 사이트 전체에서 일관된 거리를 갖도록 마진/패딩

2 단계 :
가장 작고 가장 자주 사용되는 곳에서 시작하여 신체를 점차적으로 조립하는 것이 더 큽니다. 각 물건을 만들고 웹 플로에서 즉시 "구성 요소"로 변환하십시오.

• 버튼 : 모든 상태 작성 (1 차, 보조, 비활성화, 호버)
• 양식 (양식) : 입력 필드, 텍스트 영역, 확인란, 드롭 다운 및 양식 버튼을 만듭니다.
• 카드 (카드) : 블로그 게시물, 제품 카드와 같은 디스플레이 디자인 카드

3 단계 : 복잡한 구성 요소 및 섹션을 만듭니다 (빌드 패턴 및 섹션).
핵심 구성 요소를 2 단계에서 더 크고 자주 사용하는 부품으로 가져옵니다. 이들은 종종 "웹 페이지의 다양한 부분"으로 반복적으로 사용할 수 있습니다.

• NAVBAR 및 바닥 글 : 모든 페이지에서 사용할 수 있어야하는 웹 사이트 및 웹 사이트의 구성 요소를 만듭니다.
• 가격 테이블 : 쉽게 편집 할 수있는 가격표를 설계하십시오.
• 영웅 섹션 : 마케팅 팀이 선택할 수있는 다양한 영웅을 만듭니다.

4 단계 : 페이지 생성 페이지 템플릿 생성.
완전한 섹션이 있으면 첫 페이지, 당사에 관한 페이지, 제품/서비스, 블로그 페이지 및 페이지와 같이 자주 사용되는 다양한 유형의 페이지의 "템플릿"으로 조립됩니다. 저희에게 연락하십시오. 템플릿이 있으면 새로운 얼굴을 만드는 데 도움이됩니다. 몇 분 안에 할 수 있습니다

5 단계 : 문서 및 통치,
웹 사이트 스타일 가이드가 될 페이지 작성 이 페이지에는 모든 구성 요소가 팀의 모든 사람을 사용하기 위해 "무엇이 무엇인지"및 "언제"를 표시합니다. (비 디자이너조차도)는 쉽게보고 이해할 수 있습니다. 이 명확한 시스템은 회사 웹 사이트 개발이 매끄럽고 가장 효과적입니다.

‍

그림을위한 프롬프트 : 인포 그래픽 이미지는 왼쪽에서 오른쪽으로 5 단계를 보여줍니다. 각 단계에 대한 아이콘 : 1. 감사 안경 (감사), 2. 레고 (구성 요소), 3. 섹션 (섹션), 4. 문서 (템플릿), 5. 사람들이 흔들리는 (관리)

‍

사람들이 궁금해하는 경향이있는 질문과 정해진 답변

나는 명확한 답변과 이해하기 쉬운 웹 플로에서 디자인 시스템을 만드는 것에 대한 인기있는 질문을 컴파일합니다.

Q1 : 스타일 가이드의 차이점은 무엇입니까?
A : 스타일 가이드는 브랜드의 얼굴이 로고, 색상, 글꼴과 같은 "규칙"과 같지만 일반적으로 안정적인 문서입니다. 디자인 시스템은 반복적으로 사용할 수있는 스타일 안내 (재사용 가능한 컴포넌트)와 길드를 결합한 "살아있는 시스템"입니다. "ACT"및 "실제로 코드에 연결할 수있는 버전"

Q2 : WebFlow와 함께 Figma를 사용해야합니까?
A : "매우 권장"! 최상의 작업 과정은 Figma를 사용하여 아이디어를 탐색하고 와이어 프레임을 수행하며 UI를 초기 탐사에서 매우 유연하기 때문에 설계하는 것입니다. 그 후, 결론이 여전히 디자인을 가져 오면 웹 플로에 "살아있는 시스템을 만듭니다"라는 것은 모든 사람이 계속 사용할 수있는 진실한 진실의 소스가 될 것입니다. Figma의 디자인 시스템 에 대해 자세히 알아 보려면 더 명확한 작업을보십시오.

Q3 : 소규모 팀이나 SME 회사에 디자인 시스템이 필요합니까?
A : "필요한"이지만 대규모 조직만큼 복잡 할 필요는 없습니다. 몇 가지 간단한 글로벌 스타일과 구성 요소 일지라도 "중앙 시스템"을 일찍 만들기 시작하면서 미래의 성장을위한 좋은 기초를 세우는 데 도움이됩니다. 그것은 더 큰 날에 모든 새로운 시스템을 "해체"하기 위해 돌아올 필요가없는 지능적인 투자입니다.

Q4 : 웹 플로에서 설계 시스템을 유지하기가 어렵습니까?
A : 완전히 별도의 시스템 유지 보수보다 쉽습니다. 브랜드의 기본 색상 변경과 같은 업데이트를 원할 때 웹 플로우의 전역 견본을 수정하기 위해 이동할 수 있으며 모든 구성 요소 및 모든 페이지의 색상은 자동으로 변경됩니다. 핵심은 팀의 모든 사람에게 변화를 통제하고 전달하는 1-2 "관리자"(관리자)를 갖는 것입니다.

‍

삽화를위한 프롬프트 : 큰 물음표 아이콘 (?)이있는 Q & A 스타일 이미지와 짧은 질문과 답변이있는 전구 (!). 흥미롭고 소화하기 쉬운 것처럼 보이도록 위의 중요한 문제를 요약합니다.

‍

쉽게 이해하기위한 요약 + 할 시간!

웹 플로에서 설계 시스템을 만드는 것은 단순한 "트렌드"가 아니라 전체 조직의 작업 방법을 변경하는 "전략적 투자"입니다. 혼돈, 복제 및 지연에서 "체계 및 속도 시스템"으로의 변화입니다.

조직이받을 수있는 것은 "좋은"웹 사이트 일뿐 만 아니라 확장 할 수있는 "디지털 자산", 행복하고 효율적으로 함께 일하는 팀, 가장 중요한 것은 "경쟁의 장점"입니다.

비 시스템이 더 이상 조직의 잠재력을 유지하도록하지 마십시오! 오늘부터 규정을 만들기 시작하는 것은 미래의 지속 가능한 성장을위한 재단을 마련하는 가장 중요한 단계입니다.

혼돈을 시스템으로 바꿀 시간입니다! 오늘부터 웹 플로우에 확장 가능한 설계 시스템을 만들 계획을 세우십시오. 문제가 더 확대 될 때까지 기다리지 마십시오!

재단을 마련하고 조직을위한 강력한 설계 시스템을 만드는 데 도움이되는 전문적인 파트너를 찾고 있다면. Vision X Brain Team은 웹 플로우를 통해 웹 사이트 개발을 전문으로합니다 . 오늘 무료 상담을 위해 회사 웹 사이트를 충족하는 시스템을 만들려면 오늘 무료 상담을 위해 문의하십시오!

‍