Divi 디자인 및 개발 프로세스 개선 및 표준화

게시 됨: 2017-06-02

Divi 웹 디자인 비즈니스 조직 및 제어 시리즈의 5부 중 4부에 오신 것을 환영합니다 . 이 시리즈에서 우리는 Divi 웹 디자이너로서 우리 모두가 직면하는 일상적인 어려움을 극복하는 데 도움이 될 몇 가지 전술, 도구 및 전략을 탐구하고 있습니다. 일상의 최적화에서 시스템 및 프로세스 생성, 고객에게 최고의 웹 디자인 경험 제공에 이르기까지; 우리는 솔로 프리랜서, 소규모 대행사 또는 원격 팀이든 관계없이 Divi Web Design 비즈니스를 제어할 수 있도록 돕기 위해 즉시 구현할 수 있는 실행 가능한 항목과 단계를 제공하고 있습니다.

Divi 웹사이트를 디자인하고 개발하기 위한 표준화된 프로세스를 만드는 것은 웹 디자이너로서의 생산성과 웰빙에 매우 중요합니다. 웹사이트 디자인 프로젝트가 계획대로 정확히 진행되는 경우는 드물지만, 따라야 할 프로세스와 경로가 있다면 상당한 시간을 절약하고 프로젝트가 성장할 때 기한을 맞추는 데 도움이 될 것입니다.

Divi 디자인 및 개발 프로세스 개선 및 표준화

어제 우리는 고객을 준비하는 데 도움이 되는 시작 페이지 생성에 대한 이전 게시물을 참조했습니다. 그 게시물에서 우리는 당신의 프로세스를 새로운 고객에게 어떻게 제시하는지에 대해 이야기했습니다. 내 프로세스를 고객에게 제시하는 방법은 다음과 같습니다.

레이아웃 및 디자인 – 웹 사이트 디자인의 많은 시간이 소요되는 부분은 프로세스의 계획 및 레이아웃 단계에 있습니다. 먼저 승인을 위해 웹사이트의 사이트맵(페이지/메뉴 계층)을 만든 다음 승인을 위해 홈페이지와 하위 페이지(또는 요청 시 추가)를 디자인합니다.
개발 – 사이트 레이아웃 및 디자인이 승인되면 전체 사이트, 페이지 디자인을 진행하고 모든 기능과 플러그인을 추가합니다. 최종 단계로 넘어가기 전에 사이트가 모든 기기와 웹 브라우저에서 멋지게 보이고 제대로 작동하는지 확인합니다.
편집 및 수정 – 사이트가 최종 검토를 위해 준비되면 각 페이지를 검토할 수 있으며 사이트가 완전히 수정될 때까지 세부적인 편집을 할 수 있습니다. 게시하기 전에 모든 페이지를 검토하여 모든 철자, 문법, 주소 및 정보가 올바른지 확인하시기 바랍니다.

이제 동료 웹 디자이너인 당신은 웹사이트를 디자인하고 개발하는 데 단순한 3단계 프로세스보다 더 많은 것이 있다는 것을 알고 있습니다. 내 작업은 실제로 20단계 프로세스 이상이지만 관련된 모든 작업으로 고객에게 과부하가 걸리면 콘텐츠 제공과 관련하여 고객이 지나치게 생각하는 경우가 많습니다. 내 Divi 웹 디자인/개발 프로세스가 실제로 어떻게 보이는지 좀 더 자세히 설명하면 다음과 같습니다.

승인을 위한 페이지 및 탐색 레이아웃 만들기
머리글과 바닥글 디자인
홈페이지 디자인
디자인된 하위 페이지
승인을 위해 클라이언트에게 보내기
머리글, 바닥글, 홈 및 하위 페이지 수정
승인되면 나머지 페이지 작성
웹사이트의 표준화된 섹션과 갤러리, 프로젝트, 제품 등과 같은 반복 페이지에 대한 템플릿 생성
메일 목록 등록, 소셜 미디어, 위젯 등을 위한 모든 통합 구현
모든 문의 양식 작성 및 테스트
모바일 및 반응형 사용을 위한 디자인 조정 및 최적화
필요한 SEO 설정 입력
사이트 문법 및 내용 다시 확인
브라우저 간 확인 및 버그 수정
최종 검토를 위해 보내기
모든 최종 클라이언트 수정
클라이언트 맞춤형 대시보드 및 교육 비디오 생성(필요한 경우)
불필요한 플러그인, 이미지 및 도구 삭제
사이트 백업 및 로컬에 저장
출시 사이트

이 프로세스는 종종 훨씬 더 세부적으로 분류되지만 이것은 5페이지 브로셔 스타일 사이트이든 이벤트, 전자 상거래 등이 포함된 50페이지 사이트이든 내 모든 빌드와 관련된 모든 기본 구조입니다. 이 모든 것을 체크리스트로 사용하고 사이트를 시작하기 전에 간과한 것이 없는지 확인하는 것이 좋습니다. 이와 같은 체크리스트를 만들고 타임라인을 추가하면 디자인/개발 프로세스가 프로젝트 마감일과 일치하는지 확인하는 매우 효율적인 방법이 될 수 있습니다.

자, 이제 내부 디자인/개발 프로세스를 구성한 방법에 대한 아이디어를 얻었으므로 Divi 웹 디자인 프로세스를 최적화할 수 있는 방법에 대해 좀 더 자세히 알아보겠습니다.

1) 표준 설계 프로세스 생성

Divi Facebook 그룹에서 가장 자주 반복되는 질문과 토론 중 하나는 "Divi 사이트를 어떻게 디자인합니까?"에 대한 것입니다. Photoshop이나 Illustrator에서 조롱합니까? 클라이언트가 승인할 기본 와이어프레임을 생성합니까? Divi에 뛰어들어 라이브로 하시나요?

물론 이것을 하는 데 옳고 그른 방법은 없습니다. 나는 당신이 디자인 프로세스를 어떻게 선택하든 3가지를 수행해야 한다는 것을 발견했습니다.

귀하 또는 귀하의 팀을 위해 작동해야 합니다.
클라이언트를 위해 작동해야 합니다.
시간을 절약해야 합니다.

새 프로젝트를 시작할 때 저는 종이에 매우 대략적인 스케치를 만들고 머리글, 바닥글, 홈 페이지 및 초기 승인에 필요한 모든 하위 페이지를 디자인하기 위해 Divi로 바로 뛰어드는 경향이 있습니다.

이유는 다음과 같습니다.

그것은 저에게 효과적입니다. 전통적으로 웹 디자인은 종이나 Adobe Illustrator와 같은 프로그램을 통한 광범위한 와이어프레임 프로세스로 시작하여 온라인에 연결되기 전에 승인을 위해 클라이언트를 디자인하고 보여줍니다. 이 방법은 일부에게 효과가 있으며 특히 팀에 있고 설계를 개발자에게 코드로 넘길 경우 매우 효율적인 경로가 될 수 있습니다. 하지만 일단 Divi가 등장하자 내 프로세스가 완전히 바뀌었습니다. 저는 이제 기본 구조와 시각적 개념을 머릿속에 그리고 종이에 담은 후 Divi에 뛰어들었습니다.
그것은 제 클라이언트를 위해 작동합니다. 저는 클라이언트가 평평한 모형보다 브라우저에서 볼 수 있는 실제 라이브 미리 보기를 보는 것을 더 좋아한다는 것을 발견했습니다. 때로는 사이트의 흐름과 느낌이 한 페이지 모형에서 길을 잃을 수 있지만 클라이언트가 브라우저에서 사이트를 라이브로 볼 때 종종 훨씬 더 큰 "와우 요소"로 이어집니다. 그들은 마우스 오버, 스크롤 효과 및 좋은 첫인상을 주는 사이트 디자인의 흐름을 볼 수 있으며 종종 편집 및 수정이 덜합니다.
시간을 절약해 줍니다. CSS와 Divi에 저장된 레이아웃 및 설정을 사용하여 매우 빠르게 변경할 수 있으므로 Photoshop이나 일러스트레이터에서 수정한 다음 스타일시트와 Divi 설정에서 동일하게 복제해야 하는 것은 의미가 없습니다. 내 Divi 개발 사이트에서 직접 검사 요소를 사용하여 작업을 라이브로 수행함으로써 수정 및 초기 설계에 엄청난 시간을 절약할 수 있습니다. 또한 클라이언트와 통화하는 동안 사이트를 자주 변경하고 수정할 수 있습니다. 클라이언트가 몇 가지 사항을 변경해 달라고 요청할 때 실제 웹 디자이너 록 스타처럼 보일 수 있습니다.

다시 말하지만, 이 디자인 프로세스는 ME와 같은 1인 상점에서 작동하는 것입니다. 팀과 함께 프로세스는 관련된 모든 사람을 위해 작동해야 합니다. 그러나 대부분의 프리랜스 웹 디자이너는 디자이너/개발자가 혼합되어 있으므로 귀하에게 적합한 프로세스를 수행하고 클라이언트를 위해 작업하고 시간을 절약하십시오!

2) Divi 라이브러리 및 이전 작업 활용

내가 Divi에서 가장 좋아하는 기능 중 하나는 레이아웃과 페이지 디자인을 저장하는 기능입니다. 이 기능은 게임 체인저이며 Divi로 디자인하고 개발할 때 상당한 시간을 절약할 수 있습니다. 최근 DiviChat 에피소드에서 패널은 페이지 디자인의 여러 템플릿을 저장한 다음 새 사이트에서 사용하지 않는 템플릿을 삭제하는 방법에 대해 설명합니다. 시간을 절약하는 방법에 대해 이야기하십시오! 일련의 페이지 레이아웃과 페이지 템플릿을 만들 수 있고 콘텐츠, 색상 및 이미지를 가져오고 변경하기만 하면 되므로 잠재적인 디자인 및 개발 시간을 절약할 수 있습니다.

다음은 Divi 라이브러리 항목 및 이전 작업을 저장할 때 제공할 3가지 빠른 팁입니다.

CSS 저장 – 다른 사이트에서 모방하려는 특정 모듈, 페이지 섹션 및 클래스에 대해 작성한 대부분의 CSS 코드가 포함된 "마스터 스타일시트"가 있습니다. 그렇게 하면 현재 프로젝트에서 사용하고 싶은 코드를 열어서 가져올 수 있습니다. CSS 라인을 계속해서 다시 작성해야 하는 대신 시간을 절약할 수 있다는 놀라운 일이 일어났습니다.
Divi 라이브러리 항목 만들기 – 레이아웃을 라이브러리 항목으로 저장하면 작업을 페이지에 저장하거나 이미지와 색상으로 쉽게 변경할 수 있고 복제할 수 있는 전체 사이트로 저장할 수 있습니다. 이 작업을 수행하는 방법을 잘 모르는 경우 이 자습서를 따르십시오.
json 파일 내보내기 – 종종 이전 사이트의 페이지를 참조하는 클라이언트가 있으므로 처음부터 다시 만들 필요 없이 이전 사이트에서 해당 페이지를 내보내고 새 사이트로 가져온 다음 그에 따라 스타일과 이미지를 조정하십시오! 다시 말하지만, Divi는 설계 및 개발 프로세스에서 시간을 절약할 수 있는 또 다른 좋은 방법입니다. 익숙하지 않은 경우 여기에 대한 자세한 내용을 참조하세요.

3) 고객에게 귀하의 웹사이트 공개

이것은 내 생각에 웹 디자인의 가장 중요하지만 간과되고 과소평가된 측면 중 하나입니다. 첫인상과 고객이 새 디자인을 처음 봤을 때 생각하는 것에 많은 것이 달려 있습니다. 목업이나 와이어프레임을 만들면 클라이언트가 온라인에서 완전히 이해할 수 있는 라이브 버전을 볼 때까지 자연스럽게 첫인상이 약간 압도되고 다시 디자인에서 개발에 이르는 프로세스의 복잡성에 따라 작동할 수 있습니다. 위의 프로세스에서 보셨듯이 저는 머리글과 바닥글을 준비하고 프로젝트의 필요에 따라 일반적으로 하나 이상의 하위 페이지와 함께 홈 페이지를 디자인한 다음 검토를 위해 보냅니다. 그러나 최근에 초기 디자인을 클라이언트에게 보내는 방법이 변경되어 큰 효과를 얻었습니다.

나는 클라이언트가 자신의 여가 시간에 사이트를 직접 볼 수 있도록 라이브 개발 링크를 보내곤 했습니다. 이것은 꽤 잘 작동했지만 개인적으로 또는 Skype를 통해 미리보기를 할 수 있는 드문 기회, 그 첫인상이 훨씬 더 좋았습니다. 그리고 그 이유는 무엇입니까? 클라이언트가 사이트를 보고 내 비전을 들을 수 있었기 때문이라고 생각합니다. 클라이언트가 먼저 자신의 판단을 내리지 않고도 디자인, 색상 및 미학에 대한 내 아이디어를 안내할 수 있기 때문입니다.

이제 사이트를 안내하는 빠른(보통 5분 미만) 미리 보기 비디오를 만듭니다! 이것은 지금까지 압도적으로 긍정적인 피드백을 받았습니다. 시간이 조금 걸리지만 고객에게 놀라운 첫인상을 주는 것은 그만한 가치가 있다고 생각합니다.

다음은 Basecamp에서 고객에게 새 사이트를 보여주는 방법에 대한 스크린샷입니다.

Mac용 Screenflow를 사용하여 워크스루 비디오를 녹화합니다. 그런 다음 내 Vimeo 채널에 동영상을 업로드하고 비공개 동영상으로 만듭니다. 거기에서 위의 스냅샷에서 볼 수 있듯이 짧은 설명, 다음에 예상할 항목에 대한 글머리 기호 목록 및 클라이언트가 브라우저에서 볼 수 있는 개발 사이트의 실제 URL과 함께 해당 비디오 링크를 클라이언트에 보냅니다. 동영상을 본 후

새로운 사이트를 고객에게 제공하는 방법을 알고 싶다면 다음 몇 가지 최근 미리보기 동영상을 참조하세요.

웹사이트 미리보기 동영상 1

웹사이트 미리보기 동영상 2

4) 수정 및 편집 처리

마지막으로 디자인 및 개발 프로세스의 주요 부분은 클라이언트 수정 및 편집을 처리하는 방법입니다. 오랜 시간 동안 웹 사이트를 디자인해 왔다면 이 프로세스에 시간이 많이 걸릴 수 있다는 것을 알고 있습니다. 대면 회의, 연장 통화 및 약간의 변경이 있는 임의의 이메일은 편집 및 수정 프로세스에서 엄청난 시간 낭비가 될 수 있습니다.

이를 방지하는 몇 가지 방법이 있습니다. 나는 모든 고객이 수정에 대한 토론을 만드는 Basecamp에 모든 수정본(필요한 경우 페이지당)을 게시하도록 하려고 합니다. 필요한 경우 전화 통화 또는 대면 회의에 동의하지만 초기 변경 사항을 내가 받고 싶은 방식으로 전송한 후에만 동의합니다. 나는 또한 이메일을 통해 여러 날에 걸쳐 한 번에 하나씩 개정판을 받고 싶지 않다는 점을 분명히 합니다. 나는 가능하면 내 고객들에게 며칠에 걸쳐 그것들을 모아서 한꺼번에 게시하거나 내 고객들이 하고 싶어하는 만큼 게시하여 .doc 또는 .pdf로 정리하라고 말합니다.

이 시리즈의 이전 게시물과 Artillery Media의 직원들과 나눈 대화로 돌아가서, 그들은 고객이 Google 드라이브의 문서에서 편집 내용을 보내도록 요구하는 매우 간소화된 개정 프로세스를 가지고 있습니다. 그러면 편집할 수 있습니다. 한번에. 이것은 또한 큰 시간 절약입니다. 여기서의 비결은 가능한 한 가장 시간을 절약할 수 있는 방식으로 편집 및 수정 프로세스를 작동시키는 것입니다. 그리고 한 마디만 하자면, 각 고객은 자신만의 방식으로 작업을 수행하므로 수정 및 편집 방법을 안내하는 것이 귀하의 몫입니다.

마감 중

글쎄, 나는 이 아이디어와 나의 디자인/개발 과정이 당신이 이미 표준화된 과정을 가지고 있지 않다면 당신 자신의 것을 만들도록 격려했기를 바랍니다! 귀하에게 잘 맞는 프로세스가 있으면 아래 의견에 자유롭게 알려주십시오!

다음 단계: 여러 Divi 웹 디자인 프로젝트를 효과적으로 관리하는 방법

여러 프로젝트가 진행 중일 때 창의성을 유지하고 기한을 잘 맞추며 고객의 기대치를 충족시키면서 모든 프로젝트를 관리하기는 어렵습니다. 이 시리즈의 마지막 게시물에서는 모든 Divi Web Design 프로젝트를 효과적으로 관리하여 신규 클라이언트 온보딩, 디자인, 개발 및 설정한 마감일 준수의 균형을 맞출 수 있는 몇 가지 방법에 대해 설명합니다. 치기 위해 밖으로. 창의적이고 신선함을 유지하면서. 다음까지!

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!