에피소드 10: Kadence를 사용하여 WordPress에서 디자인 프로토타입 만들기

모든 새로운 디자인은 어딘가에서 시작되며 Figma, Invision, Axure 또는 Adobe XD와 같은 도구는 디자이너에게 웹 디자인의 시각적 표현을 만드는 혁신적인 방법을 제공합니다. 그러나 WordPress 세계에서는 블록 편집기의 혁신을 통해 구현에 가장 가까운 공간에서 기본적으로 디자인을 훨씬 더 쉽게 생성할 수 있습니다. 이 에피소드에서 우리는 WordPress의 웹 디자인에 대해 실제로 알게 됩니다. 이러한 도구는 도움이 될 수 있지만 WordPress에서 효과적인 디자인을 만드는 데 가장 중요한 구성 요소에 계속 집중하는 것이 중요합니다. 고유한 콘텐츠, 고객에 대한 이해, 사이트 디자인을 통한 효과적인 커뮤니케이션은 최고의 성공 비법입니다.

아래 컨트롤을 통해 듣거나 좋아하는 팟캐스트 앱에 추가하세요.

새 창에서 들어보세요.

타임스탬프 및 링크

• 0:00 소개: Hannah는 해변에 있어요!
• 1:33 최고의 WordCamp 경험: citymuseum.org
• 8:47 WordPress에서 새로운 디자인 프로토타이핑, 어디서부터 시작해야 할까요?
• 9:51 빈 페이지 문제 우회하기
• 10:50 LMS 과정 시작 페이지 시작하기
• 15:37 경쟁 연구: 존재합니다. 무엇이 효과가 있을까요?
• 18:41 고객의 입장
• 19:31 무엇이든 디자인하기 전에 콘텐츠를 파악하세요
• 20:43 귀하의 고유한 비즈니스에는 고유한 판매 포인트가 있습니다. 사용하십시오.
• 22:40 최고의 콘텐츠를 최우선으로 하세요
• 25:00 Kadence는 디자인 도구입니다
• 30:22 Shop Kit 2.0 출시 준비 중, iThemes 교육 미리보기

에피소드 10의 대본

Kathy: Kadence Beat의 에피소드 10에 오신 것을 환영합니다. 우리는 에피소드 10까지 만들었습니다. 그리고 에피소드 10에서는 약간의 파티를 하고 싶었습니다. 그래서 우리는 해변과 가까운 비공개 장소로 Hannah를 해외로 날아갔습니다. 한나, 어디 갔니?

Hannah: 저는 멕시코에 있습니다.

캐시: 당신은! 10화 파티가 아니라 10화 피에스타죠?

Hannah: 축제야. 응. 메모를 놓쳤나 봅니다. 내 말은, 나는 우리가 에피소드 10을 위해 멕시코에서 파티를 하고 있다고 생각했지만, 그것은 나뿐인 것으로 밝혀졌습니다.

캐시: 글쎄, 벤, 너와 내가 놓치고 있는 것 같아.

Ben: 예, 여기 오늘은 꽤 춥고 눈보라가 내리는 것과 같습니다. 그래서 멕시코 해변은 꽤 좋게 들립니다.

Hannah: 알다시피, 그게 바로 내가 여기 있는 이유입니다. 지난 주 보이시에는 기록적인 강설량이 있었고 저는 이렇게 할 수 없었습니다. 그래서 나는 약간의 마일을 사용하고 멕시코로 가는 표를 예약했고 훨씬 더 행복했고 또한 훨씬 더 햇볕에 탔습니다. 내 몸은 꽤 바삭합니다.

캐시: 정말이야. 글쎄요, 당신은 훨씬 더 행복해 보이고 에피소드 10을 위해 파티를 할 준비가 된 것 같습니다. 그래서 저는 흥분됩니다. 나는 당신의 모든 여행과 함께 거의 일년 내내 당신을 통해 대리인으로 살 것입니다. 그래서.

Hannah: 네, 지금 여기 모든 사람을 초대하겠습니다. 그것은 태양이 빛나는 멕시코의 해변에 있습니다. 이것은 우리가 에피소드 10을 위한 곳이며 파티에 오신 것을 환영합니다.

캐시: 훌륭합니다. 그리고 Hannah, 에피소드 10에 대해 질문을 하셨습니다. 질문이 무엇인가요?

Hannah: 네, 그래서 저는 좋은 파티를 좋아합니다. 나는 파티를 주최하는 것을 좋아하고 사람들을 파티에 참여시키는 가장 좋은 방법은 좋은 질문을 하는 것이라고 생각합니다. 그래서, 음, 제가 생각한 누군가는 WordCamp에 가본 적이 있다면 가장 좋아하는 WordCamp 경험은 무엇입니까? 글쎄요, 다시 한 번 알아요. Kathy와 Ben에게는 여기 있는 사람들이 있습니다. 우리는 모두 그랬습니다. 가장 좋아하는 WordCamp 경험을 말해주세요.

캐시: 갈 수 있을 것 같아요. 제가 갔던 WordCamp는 제 아들이 저와 함께 여행을 가는데 며칠 안 된 것처럼 18살이 되었습니다. 그리고 우리는 WordCamp Miami에 있었고 우리와 함께 있던 사람 중 한 명이 사우스 비치에 가야 한다고 결정했습니다. 그리고 봄 방학이었고 우리는 우리 주위에 사람들과 함께 차에 갇혔습니다. 우리는 움직일 수 없었습니다. 그리고 이제 막 18살이 된 제 아들이 사우스 비치를 경험하게 되었고, 그의 엄마와 함께 있었기 때문에 나는 웃음을 멈출 수 없었습니다. 그리고 그것은 당신이 경험하고 싶은 방식이 아니었습니다, 첫 번째 봄 방학 경험은 당신의 엄마와 어울리는 것입니다 .

그리고 그는 일종의 창피함을 느꼈지만 여전히 오늘날까지도 저를 웃게 만들고 우리에게 그 컨버터블 뒤에 있는 저 소녀들은 어떻습니까? 그리고 그는 마치 이 차 뒤에 그의 얼굴을 숨기고 주위에 너무 많은 사람들이 있기 때문에 탈출구가 없습니다.

한나: 좋아해요.

캐시: 꽤 재미있었어요.

벤: 굉장해.

한나: 그게 최고야. 벤, 너는 어때?

Ben: 음, 제 생각에는 가장 기억에 남는 경험을 공유한 것 같아요. 정말 웃기네요. 그리고 그것은 WordCamp 2020 또는 2019에서였습니다. 그들은 박물관에서 애프터 파티를 가졌습니다. 저는 솔직히, 제가 거기에 있는 내내, 저는 '이곳이 어떻게 문을 닫지 않는지'라고 생각했습니다. 이것은 너무 안전하지 않습니다.

그래서 우리가 방금 정죄를 받은 건물에 들어갔을 때 누군가가 그 건물에 들어가서 정죄를 받은 건물에 엄청나게 많은 스케치를 지은 것 같은 느낌이 들었습니다. 그리고 나서 모든 사람이 모두에게 무료로 제공되고 원하는 모든 것을 하는 것과 같았습니다.

Hannah: 그리고 아마 마약을 하고 있었던 사람인 것 같아요. 당신은 말할 것인가?

Ben: 뭐, 뭐, 좋아. 이런 건 말이 안 됩니다. 내 말은, 이 박물관을 설명하기가 어렵다는 것입니다. 그리고 그것이 여전히 존재하기를 바랍니다. 이 세상에는 꼭 필요한 곳이 있다고 생각하지만, 우리가 좋아하는 것이 너무 많기 때문에 어떻게 폐쇄되지 않는지 매우 궁금합니다. 이것은 정말 위험합니다. 우리는 이곳저곳을 돌아다녔고 우리가 무엇을 하고 있는지 전혀 몰랐기 때문에 아주 아주 좋은 시간을 보냈습니다.

그래서 그것은 말 그대로 누군가의 무언가를 헤매고 같은 꿈을 꾸었고 이것이 그들이 만든 것입니다. 어느 시점에서 우리는 2층으로 올라가고 있었습니다. 내 말은, 하프 돔과 같은 천장에 매달린 철망과 같은 본질적으로 좋아하는 것은 무엇입니까?

Hannah: 돔처럼.

벤: 네. 그리고 나서 당신이 그 천장에서 튀어나온 것처럼 당신은 지붕 위에 있었고 지붕의 다른 부분처럼 내려가는 거대한 미끄럼틀이 있었습니다.

Hannah: 거대한 메뚜기와 함께. 거대한 메뚜기를 잊지 마세요. 뭐!

Ben: 그럼, 슬라이드가 콘크리트에 부딪히는 것 같은 건 없었고, 그런 건 없었어요. 그런 다음 멋진 슬라이드를 아래로 내리면 멋진 엔딩이 나옵니다. 그건 마치, 당신이 콘크리트 속으로 미끄러져 들어갔을 때 모두가 일어나서 주위를 둘러보며 '정말 나에게 일어난 일인가? 내 말은, 그들은, 예. Hannah가 이 장소를 설명하는 데 도움이 됩니다.

Hannah: 네, 설명하기 어렵지만 굉장했습니다. 가장 좋은 점은 Ben이 말한 것처럼 우리는 전혀 몰랐습니다. 칵테일 아워처럼 1층에서 처음 45분을 보낸 것처럼, 오, 이것은 흥미로운 박물관입니다. 그러면 우리는 아마도 방황해야 할 것 같습니다. 그리고 나서 무릎을 꿇고 기어가야 하는 아주 작은 문처럼 통과해야 합니다. 그런 다음이 다른 미친 장소가 열립니다. 그리고 당신은 마치, 무엇입니까? 그리고 그것은 모든 구석과 같습니다. 넌 그냥, 뭐? 그리고 다음으로 알다시피, 지붕 위에 있는 이 메뚜기 미끄럼틀을 타고 내려가면 이런 미친 회전목마 같은 것이 있습니다.

그리고 꼭대기 층에서 올라가는 미끄럼틀이 있습니다. 얼마나 많은 이야기를 하시겠습니까? 다섯? 맨 아래까지. 야생입니다. 제가 경험한 최고의 WordCamp 경험 중 가장 재미있었습니다.

벤: 네. 제 말은, WordCamps는 여러분이 가보지 않았다면 재미있습니다. 청중에게는 많은 재미가 있습니다. 당신, 당신은 많은 사람들을 만나요. 당신은 많은 것을 배우는 이러한 세션에 참여하게 되지만, 애프터 파티도 일반적으로 임의의 장소에 있기 때문에 정말 굉장합니다. 그보다 1년 전에도 애프터 파티의 일부인 플라네타륨이 있었는데 그것은 매우 재미있고 매우 어지러운 경험이었습니다. 좋은 시간이야 분명히. WordCamp에 참가할 수 있다면 시간을 들일 가치가 있습니다.

캐시: 그리고 그 박물관은 세인트루이스에 있었습니다. 시립박물관이라고 합니다. citymuseum.org에 가면 Hannah와 Ben이 그곳에서 경험한 고문실을 느낄 수 있습니다. 음, 그 미끄럼틀도 안 올랐어요. 올라가는 길에 무릎을 부딪치고 그냥 돌아서기만 했어요. 이것으로 좋은 것은 없다고 생각했지만 실제로 옥상에 관람차가 있습니다.

그것은 미친 장소입니다. 워드캠프 US의 조직인 애프터 파티를 하는 사람들이 정말 대단합니다. WordCamp Europe도 몇 주 안에 진행됩니다. 그리고 그것은 아마도 또 다른 서사시 파티가 될 것입니다. 몇 년 전 베를린에 있는 공연장에 갔는데 마돈나 흉내를 내는 것과 같은 놀라운 공연자들이 있었습니다. 마치 마돈나가 그곳에 있었던 것처럼. 그것은 미쳤다. 어쨌든 WordCamp는 훌륭합니다. 애프터 파티는 확실히 가치가 있으며 Ben과 Hannah와 같은 사람들을 만날 수 있습니다. 그리고 가끔은 나.

Hannah: 우리는 모두 거기에 있었고 우리가 만난 것 같지는 않지만 그것에 대해 슬퍼합니다.

Kathy: 저는 대부분의 시간을 대화에서 대화로, 후원 구역의 터널과 커튼을 따라 내려가는 데 보냈습니다. 바쁘고, 바쁘고, 바쁜 시간이었지만, 음, 예, Kadence가 실제로 대화를 시작하기 시작한 곳입니다. WordCamp US 2019에서 명성을 얻었습니다. 그 때 사람들은 당신이 조합한 이러한 도구 중 일부가 얼마나 혁신적인지 이야기하기 시작했습니다.

한나: 네, 네. 그 당시에는 벤과 나뿐이었고 아무도 우리가 누군지 몰랐습니다.

Kathy: 글쎄요, 지켜보던 사람들은 그것을 아주 빨리 집어 들었고, 오늘날 우리가 어디에 있는지 봐요. 꽤 흥미 진진한.

Hannah: 네, 에피소드 10입니다. 우리는 먼 길을 왔습니다. 팟캐스트가 있습니다!

Kathy: 팟캐스트가 있습니다! 그리고 이제 10화까지만 버티면 된다고 했으니 더 쉽겠죠. 어울리고 멋진 얘기에 대해 이야기하는 것과 같습니다. 그리고 나는 모든 멍청한 것들을 편집합니다.

그래서 저는 비밀 프로젝트를 진행하고 있었고 Ben이 몇 달 전에 내부적으로 한 프레젠테이션에서 Ben이 말한 것이 실제로 들리기 시작했습니다. 그리고 나는 말하기 시작했습니다. 오 예, Ben이 의미하는 바를 정확히 이해합니다.

당신은 Ben에게 당신이 출판할 장소와 최대한 가까운 곳에서 프로토타입을 만드는 것이 가장 합리적인 방법에 대해 이야기했습니다. 그리고 저는 다른 곳에서 제작된 프로토타입을 가져오고 사용자 정의 필드와 모든 것을 사용하여 WordPress, Kadence Elements에서 제작하고 있기 때문에 지금 진행 중입니다. 그리고 프로토타입의 많은 것들이 그렇지 않습니다. 나는 건물을 짓는 동안 결정을 내려야 합니다. 이것은 WordPress가 작동하는 방식이고 Kadence가 작동하는 방식이기 때문에 이 방식으로 작동할 것입니다.

그리고 저는 WordPress 프로젝트 및 디자인, 음, 사람들이 사용하는 다양한 도구를 프로토타이핑하는 모범 사례에 대해 이 대화를 나누고 싶었습니다. 그들은 언제 의미가 있습니까? 이해가 되지 않는 경우는 언제입니까? 그리고 그 "빈 페이지" 문제를 어떻게 극복할 수 있습니까? 그것이 우리가 오늘 이야기할 수 있는 것 같습니까?

벤: 네, 물론입니다. 나는 빈 페이지 문제가 이것을 표현하는 좋은 방법이라고 생각합니다. 왜냐하면 저는 모두가 그것에 관련될 수 있다고 생각하기 때문입니다. 당신이 나타나서 당신은, 내가 그것이 무엇이든, 방문 페이지, 판매 페이지를 만들어야 합니다. 알다시피 당신은 빈 페이지를 응시하고 있고 당신은 가는 것 같습니다. 좋아, 다음에는 무엇을 해야 할까요? 그리고 그것은 까다로운 이유입니다. 바로 이것이 바로 사람들이 다음에 가는 요점은 매우 힘든 시간, 좌절하는 시간을 겪으며 10가지를 수행하고 10가지를 취소하고 10가지를 더 하고 모든 것을 취소하는 시간입니다. 이들 중. 그리고 결국, 그들은 그들이 끝내는 것에 거의 만족하지 못합니다.

그래서 저는 당신이 말하는 것보다 더 생각해 보는 것이 좋다고 생각합니다. 백지장에 나타나서 가는 것보다 더 좋은 전략이 있으니 디자인을 만들어야 한다. 따라서 이러한 도구 중 일부를 사용하기 시작하기 전에 백업을 조금이라도 하는 것처럼 괜찮습니다.

그래서 빈 페이지에서 끝까지 어떻게 얻는지 이야기해 봅시다. 따라서 온라인 과정을 위한 랜딩 페이지를 구축해야 하는 경우에 대해 방금 이야기한 것을 제안합니다. 그렇게 하면 실제로 들어가야 할 내용이 무엇인지, 그 콘텐츠를 어떻게 하나로 묶을 수 있는지와 같이 이야기하고 생각할 수 있는 내용이 있습니다.

캐시: 완벽합니다. 많은 사람들이 LearnDash 또는 기타 LMS 시스템을 사용하고 있고… 아직 그들이 사용할 LMS 도구를 결정하지 못했을 수도 있는 특정 영역에 집중할 수 있는 좋은 방법이라고 생각합니다. 그러나 그들은 마치 내가 알고 있는 것처럼, 다른 사람에게 양도하고 어떻게든 수익을 창출할 수 있다는 지식을 가진 누군가가 이 이야기를 듣고 있어야 합니다.

어디에서 시작합니까?

Ben: 제 생각에 새 페이지를 시작할 때마다 이것이 모든 곳으로 확장될 수 있을 때마다 가야 한다고 생각합니다. 이 페이지의 주요 목표는 무엇입니까? 예전에 Hannah의 조산사 홈페이지 구축에 대해 이야기할 때 이야기했던 것 같습니다. 그리고 거기에서 시작해야 한다고 생각합니다. 당신은 말할 필요가 있습니다, 알았어, 목표가 무엇입니까?

모든 것이 그 목표를 향해 나아가야 하기 때문입니다. 그리고 고객이 여기로 가야 하는 건지, 경쟁하는 물건을 가지고 가야 하는 건지, 아니면 그들의 언어로 되어 있지 않고 그렇지 않은 물건을 가지고 가야 하는 건지 고객이 혼동하지 않도록 최대한 명확하게 전달해야 합니다. 그들에게 직접적인 경로를 제공합니다.

당신은 나의 목표가 무엇인지부터 시작하고 싶어합니다. 그리고 우리가 코스 페이지를 만들고 있다면 목표는 코스에 등록하는 것입니다. 그리고 아마도 그것에 대한 옵션이 있을 것입니다. 기본 코스 패키지와 30분 무료 상담이 포함된 VIP 패키지가 있을 수 있습니다. 그리고 일반적으로 코스에서 볼 수 있는 추가 기능은 개인 Facebook 그룹에 대한 액세스 권한을 얻는 것과 같은 것입니다.

그래서 당신은 아마도 몇 가지 패키지를 가질 것이고 아마도 가격표에 대해 생각할 것입니다. 그리고 거기에서 당신은 말할 필요가 있습니다. 알겠습니다. 글쎄요. 제 목표가 고객의 구매를 유도하는 것이라면 우선 구매 이유를 제시해야 합니다. 그렇게 하려면 얻으려는 사람과 의사 소통하는 방법을 알아야 합니다.

따라서 누구와 소통하고 있는지 알아야 합니다. 그리고 이런 종류는 우리가 전에 이야기했던 것으로 되돌아갑니다. 그 대상 고객은 무엇입니까? 당신은 당신이 말하는 모든 것을 그들의 언어로 말하고 있는지 확인해야 하지만, 바로 그 페이지의 상단에 우리에게 필요한 것은 기본적으로 다음과 같은 것이 필요하다는 것입니다. 이것이 당신이 이 과정을 수강하고 싶어하는 이유입니다. 이것이 당신의 삶에서 변화할 것입니다. 당신은 바로 이 페이지에 나타나는 고객을 위해 그들의 문제를 암시하고 있거나 고객을 위해 철자법을 설명하고 있다고 정의하고 있습니다. 그리고 당신은 이 문제가 있다고 말하고 있는데, 이 과정이 그것을 해결할 것입니다.

특히 코스에 대해 이야기할 때 한 가지 문제만 해결하는 것이 아닙니다. 당신은 실제로 결과가 개인으로서 그들에게 무엇인지, 그들을 위해 무엇을 바꿀 것이며 그것이 앞으로 그들에게 어떤 영향을 미칠 것인지 정의하려고 합니다.

하지만 그런 면에서 당신은 여전히 ​​이 사람에게 문제가 있다는 생각을 해야 합니다. 그들은 책을 쓰고 싶어하며 책 쓰기를 통해 그들을 지도할 책 쓰기 경험이 있는 누군가가 필요합니다. 따라서 첫 번째 소설을 쓰는 방법에 대한 과정이 있습니다. 그 고객 기반, 당신은 그것에 대해 이야기하고 소설을 쓰는 것과 같아야합니다. 소설에 대한 좋은 아이디어를 갖는 것 이상입니다. 그것은 계획에 관한 것입니다. 그것은 지속성에 관한 것입니다. 당신은 그것을 설명하고 말하기 시작합니다. 그리고 이 과정은 당신에게 그것을 하기 위한 모든 도구를 제공할 뿐만 아니라 당신 주변에 당신을 돕고 피드백을 얻을 수 있는 커뮤니티가 있습니다. 이거 필요해

그리고 그것이 당신이 그것에 들어가기 시작할 수 있는 방법입니다. 우리가 어떤 종류의 디자인 작업에 뛰어들기 전에 먼저 그 내용을 파악할 수 있어야 합니다. 이 사람과 연결되는 것은 무엇입니까? 나에게 필요한 콘텐츠를 모아보자. 내 생각에는 판매 페이지를 시작할 때부터 시작합니다. 페이지의 맨 위에서 시작해야 하는 크고 아주 짧은 텍스트여야 하며 가능한 한 명확하고 간결해야 하며 본질적으로 문제를 설명하고 솔루션이 해당 문제에 대한 답변인 방법을 설명해야 합니다. 거기에서 초기 제안을 더 좋게 만들 다른 부분을 통해 작업하기를 원합니다.

그래서 내가 아래로 스크롤함에 따라 그들은 가고 있습니다. 그들은 점점 더 좋아지고 있습니다. 예, 나는 이것을 해야 합니다. 네, 이렇게 해야 합니다. 그리고 페이지 전체에 "지금 구매" 버튼을 가질 수 있습니다. 고객이 다음과 같이 하는 것을 원하지 않습니다. 어디에서 가입해야 합니까? 또한 가격표를 좋아하기 위해 아래로 스크롤할 때 해당 여정을 만들 수 있습니다. 후기가 핵심입니다. 당신이 그 모든 것을 생각하면서, 이제 당신이 얻었습니다. 나는 맨 위에 간결한 언어가 있어야 하고, 나는 어떤 종류의 그림이 필요합니다. 가급적이면 웃고 있는 사람이나 그림으로 결과를 시각화하는 결과가 필요합니다.

당신이 생각하는 동안 이것을 어떻게 구축합니까? 해당 콘텐츠, 필요한 텍스트, 사용 후기를 함께 수집하기 시작해야 하며 가격표와 해당 가격표의 기능이 무엇인지 생각해야 합니다. 따라서 콘텐츠 수집을 수행하고 처음에는 고객을 깊이 생각하는 것이 매우 중요합니다.

Kathy: 콘텐츠가 있으면 페이지에 텍스트만 표시되는 것을 원하지 않을 것입니다. 당신은 당신의 버튼과 사진 같은 것을 원하지 않습니다. 누군가가 이러한 디자인 요소 중 일부를 실제로 어떻게 조합하기 시작합니까? 어디서 아이디어를 얻습니까? 경쟁자를 살펴보고 그들이 무엇을 하는지 볼 수 있기 때문입니다. 아마도 책을 쓰는 방법이나 소설을 쓰는 방법에 대한 과정을 진행하고 있는 다른 사람들을 검색하여 경쟁이 있는지, 어떻게 하고 있는지 확인할 수 있습니다. 그러나 그들이 잘하고 있다고 누가 말할 수 있습니까? 디자인과 관련하여 어떤 결정을 내려야 하는지 어떻게 알 수 있습니까?

벤: 네. 내 말은, 내 생각에 당신의 경쟁자를 살펴보는 것은 훌륭한 전략이라고 생각합니다. 왜냐하면 일반적으로 경쟁자가 있다면 그들은 최소한 존재할 만큼 충분히 잘하고 있기 때문입니다. 즉, 그것이 존재하는 것처럼 최소한 좋은 것입니다. 그들은 최소한 존재하기에 충분히 잘하고 있습니다. 따라서 확실히 경쟁에서 얻고자 합니다.

나는 좋은 디자인을 찾는 일을 좋아합니다. 사람들이 디자인에만 집중할 때 많이 찾는 문제는 실제로 전환율이 좋은 페이지를 구축하지 않는다는 것입니다. 그래서 당신은 웹사이트에 대한 디자인 어워드에 갈 수 있고 실제로는 그다지 전환율이 높은 웹사이트가 아닐 수도 있고 표준을 너무 벗어날 수 있는 이 모든 정말 펑키한 종류의 웹사이트를 볼 수 있습니다. 그래서 일반 사용자의 경우, 이것은 참신하지만 실제로 이 웹사이트를 탐색하는 방법을 모르겠습니다. 그래서 나는 최고의 웹 디자인과 같은 것들을 검색하는데 주의할 것입니다. 나는 당신이 당신이 가진 문제에 집중하고 싶다고 생각합니다.

검색에서 전환과 같은 단어를 사용하지만 알겠습니다. 영웅 섹션이 필요하다는 것을 압니다. 평가 섹션이 필요하다는 것을 알고 있습니다. 가격표 섹션이 필요하다는 것을 알고 있습니다. 때로는 해당 섹션을 검색하기 시작할 때 더 나은 디자인 아이디어를 얻을 수 있고 좋은 코스 랜딩 페이지를 구축하는 방법은 무엇입니까?

또는 일반적으로 좋은 디자인이란 무엇입니까? 그래서 저는 영감과 탐색 단계를 하고 있습니다. 내가 좋아하는 것들의 스크린샷을 찍고 있어요. 메모를 하려고 합니다. 따라서 지금은 Miro 보드나 Figma와 같이 스크린샷을 찍고 메모를 하고 모든 조각이 하나로 합쳐지는 것을 볼 수 있는 장소를 제공하기에 좋은 시간입니다. 항상 자신의 색 구성표와 실제 사진을 염두에 두고 콘텐츠를 구성하는 방법에 대한 페이지 또는 디자인 아이디어에서 원하는 요소의 용어. 내가 가장 많이 찾은 것은 음, 사람들이 가서 이 디자인을 보고 '아, 이걸 다시 만들고 싶다'고 할 것입니다. 그리고 나서 그들은 그것에 자신의 사진을 넣었고 그들은 마치, 야, 이거 끔찍하다고 생각한다. 그리고 그것은 당신의 이미지가 충분하지 않기 때문입니다.

그리고 저는 그것이 또 다른 큰 일이라고 생각합니다. 이미지는 페이지의 전체 디자인에 많은 영향을 미칩니다. 내 말은, 그것은 디자인에서 엄청나게 압도적인 부분입니다. 올바른 그라디언트나 올바른 글꼴을 얻기 위해 모든 시간을 할애할 수 있지만 잘못된 이미지를 선택하면 디자인이 창 밖으로 나가게 됩니다.

스톡 이미지를 찾든 아니면 사진을 찍으러 가든 정말 중요한 부분입니다. 정말 정말 좋은 이미지를 얻는 데 큰 도움이 됩니다. 좋은 디자인을 하고 싶다면 시작하기에 적합한 부품이 있어야 합니다.

Kathy: Hannah, 고객의 관점에서, 페이지에서 무언가 구매를 고려하고 있을 때 어떤 요소가... 페이지의 흐름인가요? 페이지 내에 팝업되는 것이 있습니까? 그 경험이 어떻게 당신에게 반향을 일으키나요?

Hannah: 네, 그게 전부입니다. 내 말은, 당신은 정말로 사람들을 위한 경험을 만들고자 하는 것 같죠? 그래서 Ben이 말했듯이 이미지는 거대하다고 생각합니다. 이미지가 일치합니까? 분명히 스톡 사진인 스톡 사진이 있는데 그렇지 않은 경우, 일치하지 않고 흐름이 없는 경우, 이는 매우 중요한 문제입니다.

하지만 당신이 분명히 경험을 만들었을 때 나는 그렇게 느낍니다. 그곳에 있거나 멕시코 해변에 있는 것처럼 느껴집니다. 누군가에게 귀하의 웹사이트를 보거나 귀하가 제공하는 제품을 보고 좋아하는 사람에게 줄 수 있다면, 엄청나네요.

Ben: 여기에서 언급하는 것이 중요하다고 생각합니다. 자신보다 앞서서 실제로 디자인하는 것처럼 뛰어들어야 합니다. Figma에서 또는 실제로 콘텐츠를 파악하지 않고 WordPress에서 디자인하는 것은 절대적인 좌절감을 주는 방법입니다. 당신이 좋아하면 나중에 내 이미지를 알아낼 것이기 때문입니다.

하지 마십시오. 실제로 해야 할 내용 없이 디자인을 멋지게 보이도록 하는 데 너무 많은 시간을 허비하게 될 것이기 때문입니다. 그리고 그것은 단지 좌절감을 주고, 당신은 그것을 반복해서 다시 하게 될 것입니다. 당신이 실제로 마침내 그 콘텐츠의 일부를 집어넣고 나가면서, 와우, 내 이미지가 내가 그랬던 것과 다르기 때문에 이 중 아무 것도 작동하지 않습니다. 기대. 그러니 자신보다 앞서지 마십시오. 콘텐츠를 모아서 깊이 생각하는 시간을 가져보세요. 그리고 그것이 영감 단계를 수행하는 이유 중 하나입니다. 알겠습니다. 이 세 가지 기능 또는 고객이 알아야 하는 중요한 세 가지를 설명하는 섹션을 원하기 때문에 이제 이와 같은 세 개의 이미지가 필요하다는 것을 압니다.

그 초기 단계에서, 당신이 당신의 물건을 모으는 것과 같이, 좋아, 내가 뛰어들어 실제로 디자인을 시작하기 전에 내 콘텐츠가 무엇인지를 확실히 정해야 합니다. 그리고 다른 사람의 콘텐츠를 사용하여 디자인하지 마십시오. 당신은 확실히 당신의 자신의 콘텐츠를 먼저 얻고 싶어합니다.

캐시: 물론이죠. 글쎄요, 고유한 판매 포인트는 귀하의 사이트에 있는 고유한 콘텐츠입니다. 청중과 독특한 방식으로 연결되는 것은 당신만이 만들 수 있는 것입니다. 다른 곳에서 이미지를 가져오거나 다른 곳에서 복사할 수 있는 것이 아닙니다.

그냥, 그냥 하지 마세요. 그것은 작동하지 않습니다. 다른 사람이 만든 것을 복제하고 청중과 연결하려고 할 때 고유한 목소리를 내지 못할 것이기 때문에 반향을 일으키지 않을 것입니다. 당신이 가져오는 것, 당신의 비즈니스가 가져오는 것, 당신의 브랜드가 가져오는 것은 장기적으로 당신을 차별화하고 당신이 더 높은 곳으로 올라가는 데 도움이 될 것입니다.

내 Figma가 있고 모든 스케치와 페이지에 원하는 모든 것이 있다고 가정해 보겠습니다. 그리고 저는 기본이 있습니다. 알겠습니다. 나는 모든 사람들이 상단에서 영웅 이미지를 사용하는 것을 보았으므로 제대로 작동해야 합니다. 그런 다음 페이지 구성을 시작하려면 어떻게 해야 합니까? 내가 먼저 평가에 뛰어들까? 먼저 더 잘 설명해야 합니까? 고객과 실제로 연결하기 위해 페이지를 구성하는 방법을 어떻게 알 수 있습니까? 무엇이 먼저 옵니까?

Ben: 저는 그 히어로 탑의 열렬한 팬이며 항상 전체 너비 이미지일 필요는 없습니다. 때로는 그 옆에 텍스트와 이미지가 있습니다. 당신은 기본적으로 이것이 당신이 여기 있는 목적이라고 말하는 상단에 큰 헤더를 갖고 싶어합니다. 그리고 내가 본 모든 연구에서 실제로 페이지의 나머지 부분을 어떻게 주문했는지는 중요하지 않습니다.

흥미롭게도. 추천 기능을 하고 싶다면 결국 다음 평가가 더 중요하다고 말할 수 있는 사람은 아무도 없습니다. 최고의 콘텐츠를 우선으로 하고 싶다고 생각합니다. 따라서 가장 놀라운 평가가 있다면 사람들이 이것을 읽고 앞 중앙에 놓고 바로 아래에 놓을 필요가 있습니다.

그러나 당신이하지 않고 당신이 단지, 예, 나는 평가가 있고 그것들은 훌륭하지만 그들은 당신이 기대하는 것과 같으면 페이지에 그들이 필요하기 때문에 그것을 낮추십시오. 브랜드 신뢰 수준. 그리고 그것은 또 다른 부분입니다. 아마도 당신이 알려진 브랜드와 작업하는 상황에 있고 그런 다음 그러한 브랜드를 넣어야 할 수도 있습니다. 이 브랜드가 우리를 신뢰한다고 말할 수 있습니다.

또는 수많은 사용자가 있는데 내가 이렇게 많은 사용자를 보유하고 있다고 말합니다. 당신은 항상 그 고객이 내가 이 사람을 신뢰할 수 있다고 느끼게 하는 방법을 찾고 싶어합니다. 나는 그들의 첫 번째 고객과 다릅니다. 그것은 평가보다 더 많은 방법으로 행해질 수 있습니다. 그리고 그것이 먼저인지 아닌지에 상관없이 연구에 따르면, 그것은 일종의, 당신이 하고 있는 것과 당신이 판매하는 것 또는 당신이 무엇을 하고 있는지에 관한 것입니다 그때를 위한 건물, 예를 들면 이것이 정확한 경로입니다. 일반적으로 사람들은 페이지 맨 위에 간결한 설명과 클릭 유도문안이 있어야 한다고 말합니다. 일반적으로 당신은 거기에 사진을 찍고 싶고, 말이 되는 경우에는 때때로 그 가격표가 맨 위에 있습니다. 특히 사용자가 홈페이지로 이동한 다음 가격 페이지를 클릭하는 것처럼 사용자를 위한 두 번째 탐색인 경우에는 더욱 그렇습니다.

당신은 아마 아래 가격 페이지를 다이빙하고 싶지 않을 것입니다. 그들은 가격을 보려고 하므로 가격을 보여주십시오. 기존 방문 페이지와 마찬가지로 가격 책정 페이지는 아래로 내려갈 수 있습니다.

행동 촉구를 분명히 하고 준비가 되었다고 생각하는지 확인하십시오. 그래서 당신은 당신의 콘텐츠를 가지고 있습니다. 원하는 섹션을 알고 있으며 실제로 웹사이트 디자인을 시작할 준비가 되었습니다.

그리고 나에게는 이 단계에서 사람들이 워드프레스에서 하도록 강요할 것입니다.

알겠어. 저는 약간의 반발을 받았지만 지금은 협업하기가 훨씬 더 쉽습니다. 두 사람 모두 같은 작업과 Figma 같은 작업을 하고 있습니다. 그리고 나는 그것을 이해한다. 누군가와 협업할 수 있는 사치가 있다면 그게 일이 될 수도 있습니다. 일반적으로 나는하지 않습니다. 그리고 두세 명의 디자이너가 동시에 같은 작업을 하게 될 것 같은 사치를 누리는 사람이 많지 않습니다.

하지만 나에게 당신은 그것이 살게 될 곳, 그것이 실제로 있을 곳과 가장 가까운 곳을 원합니다. 그리고 당신은 그곳에서 하고 싶어합니다. Figma에서 만든 다음 방법을 알아내려고 세 번 작업하지 마십시오. Figma처럼 훌륭한 도구입니다.

그러나 최종 웹 사이트로 변환되지 않습니다. 수동으로 모든 작업을 수행해야 합니다. 그리고 사람들이 HTML과 그 모든 것을 내보낼 수 있다는 것을 알고 있습니다. 그리고 그것은 마치, 예, 내가 들어 왔지만 결국 그것이 당신이 실제로 원하는 것이 아닙니다. 원하는 것은 WordPress와 사용하려는 WordPress 도구에 있습니다.

내 말은 Kadence는 실제로 Kadence에서 디자인 작업을 수행할 수 있다는 점에서 디자인에 다른 디자인 도구가 필요하지 않은 도구로 충분해야 한다는 것입니다. 그리고 도구가 필요하지 않지만 Kadence를 사용하면 됩니다. 그리고 여기에 패딩이 조금 더 필요합니다.

그리고 여기에 테두리 반경이 있고 여기에 약간의 그림자가 필요하다는 것을 압니다. Kadence는 디자인 도구이기 때문에 Kadence 내부에서 바로 멋진 디자인을 얻을 수 있습니다. 그래서 여러분은 그것을 디자인 도구로 사용하게 되었고 조정을 하게 되었고 움직이게 되었고 일을 취소하고 다시 할 수 있게 되었습니다. 하지만 여러분은 그곳에서 모든 일을 하고 있습니다.

따라서 작업이 완료되면 실제로 작업이 완료된 것입니다. 우리가 마침내 디자인을 완성했고 Figma에 있는 것처럼 보이지 않습니다. 그리고 당신은 간다, 좋아, 좋아. 이제 WordPress에서 실제로 만들기 위해 이 모든 작업을 다시 수행해야 합니다. 저에게는 그것이 살 곳의 끝에 훨씬 더 가까이 다가가서 그곳에서 디자인하고, 또한 그 제약 아래에서 디자인하고 싶습니다.

WordPress에 제한이 있고 Kadence에도 제한이 있는 것처럼. 모든 단일 옵션을 제공하고 싶은 만큼 가능한 한 더 많은 옵션을 만들기 위해 계속 노력하고 있습니다. 여전히 설계 제한이 있습니다. 그리고 당신은 그것들에 대해 항상 구속이 아닌 것으로 생각할 필요가 있습니다. 그러나 그것은 마치 내가 편집해야 할 것과 편집하지 말아야 할 것의 특정 영역에 저를 가두는 것입니다.

캐시: 맞아. 하고 싶은 말이 너무 많아요. 우선, 결국 일어나는 일은 Figma나 Miro 같은 도구로 디자인할 때, 그리고 어떤 모습을 원하는지 아이디어를 낼 때 거의 완벽주의에 빠질 수 있다는 것입니다. 모델을 어디에, 음, 그리고 나서 우리는 이것을 조정할 수 있고 이것을 조정할 수 있고 이것을 조정할 수 있습니다.

그리고 갑자기, 당신은 멋지게 보일 수 있는 하늘 디자인의 이 파이를 갖게 되었습니다. 어쩌면 절대적으로 완벽합니다. 최고의 마음으로 모든 콘텐츠와 디자인 아이디어를 절대적으로 완벽한 무언가에 통합할 수 있습니다. 그리고 그것이 반드시 현실 세계에서 잘 번역되는 것은 아닙니다. 다른 하나는 디자인할 때입니다. 예를 들어 사용자 정의 필드를 사용하는 무언가를 디자인하고 데이터 디자인을 하고 있고 완벽한 제3정규 형식 데이터베이스에서 모든 것이 작동해야 하는 방식입니다. .

해당 테이블과 관련된 이 테이블이 있어야 하며 모든 것이 완벽하고 제3정규형이어야 합니다. 현실 세계에서는 실제로 누군가에게 데이터 입력을 제공하는 가장 좋은 방법이 아닐 수도 있습니다. 프론트 오피스의 Jane에게 여러분은 이것을 선택해야 하고 이렇게 될 것입니다.

그런 다음 실제로 WordPress에 있는 것으로 전환하면 실제로 그런 식으로 설계되지 않을 수 있습니다. 따라서 도구에 훨씬 더 가깝게 설계할 때 시간을 절약할 수 있을 뿐만 아니라 설계 도구인 벽으로 둘러싸인 정원에서 모든 것을 완벽하게 만드는 분석 마비를 절약할 수 있습니다. 그러나 당신은 그것을 고객에게 보여줄 도구로 그것을 하고 있습니다. 도구의 제약 조건 내에서 wp-admin을 사용하는 사람들뿐만 아니라 프런트 엔드에서 이를 보는 사람들에게 가장 좋은 방식으로 작업을 수행하고 있습니다. 그리고 이 동적 콘텐츠의 대부분, 동적 콘텐츠를 위한 도구는 아직 초기 단계는 아니지만 수행해야 할 작업이 훨씬 더 많습니다. 코드 없는 동적 콘텐츠 방식을 만들기 위해 할 수 있는 일이 훨씬 더 많습니다. 따라서 그 안에서 작업하고 도구가 성장함에 따라 도구와 함께 성장할 수 있는 것을 구축하고 WordPress에서 수행하는 것이 적어도 제 경험에 비추어 볼 때 훨씬 더 합리적입니다. 나는 지금 비누 상자에서 벗어났습니다.

벤: 네. 나는 Figma의 디자이너로부터 파일을 받았고 모바일은 어떻습니까? 그리고 그들은 마치, 오 그래, 나도 당신을 모바일 버전으로 만들어야 할 것 같습니다. 그리고 저는 WordPress에서 디자인할 때 이미 모바일에서 디자인하고 있는 것과 같습니다.

당신은 이미 당신이 그것을 알아 내려고 노력하고 있습니다. 처음부터 그렇게 생각해야만 했다. 그리고 이러한 디자인 도구 중 일부를 사용할 수 있으며 그렇게 생각하지 않아도 됩니다. 제 생각에 가장 흔한 것은 사실 대부분의 사람들이 조금 더 인식하고 있기 때문에 모바일조차 되지 않는다고 생각합니다.

대형 와이드 스크린입니다. 그들은 이 매우 좁은 페이지를 디자인했고 저는 글쎄요. 하지만 그것이 화면의 3분의 1만 채우면 어떻게 될까요? 그리고 그 너비를 잡아당기면 갑자기 완전히 다른 디자인이 됩니다. 나는 그 도구들이 정말 도움이 된다고 생각하지만, 나는 종종 누군가가 그것들을 디자인할 때 그것들이 보여주지 않는 것과 디자이너가 생각하지 않고 생각할 수 없는 것 때문에 더 좌절합니다. 글쎄요, 저는 필요하지 않습니다 to think about a 27-inch wide screen here because I set my pixel width at 1400 and that's this wide it's the screen is cause that's what it is in Figma and things like that.

So, I would encourage people to try to design in WordPress when they can, but don't do it without your content because you will be so frustrated to try to do it without. It just doesn't, it just never really works.

Kathy: Okay. Well, that's a definitely an interesting discussion. We'd love to hear from you about your experiences, designing new sites or redesigning sites. What tools are you using? What works for you? Are you finding tools like Figma, Miro, and I don't know, Adobe's got stuff too. There's a whole list of things that you can use in order to design.

Do they help your process? 그렇다면 어떻게? Or do they kind of just get in the way and you'd rather just, start with a starter template or Kadence wire frames and just roll from there. 여러분의 의견을 듣고 싶습니다. Ben, you did a great training the other day was that yesterday?

Ben: That was yesterday. 응.

Kathy: I am so excited about Shop Kit 2.0, I know everybody who was on that training is excited for it. We're getting pinged on Twitter and other social media places. When's it dropping? When can we play with it too? Give us a good overview of what Shop Kit 2.0 includes and when we can see this in people's dashboards.

벤: 네. I mean, I think you can see it in your downloads page by the time you're listening to this, you should be able to go into your account and see it in your downloads page. Um, that'll be the beta version. Things are really close. I'm still always kind of like doing little tweaks in here about like what settings, but it very much is like a good foundation for templating inside of WooCommerce.

So what 2.0 largely brings into the equation is the ability to create templates for your product pages, your archive pages and things like that. And you can apply them to an individual product or you can apply them across a category or a tag or whatever. , that key means that like every piece of WooCommerce then got kind of put into a block with its own block settings.

So you can kind of rearrange and organize and there's some cool things you can change the way that tabs work inside of a product page, which is kind of a standard WooCommerce implementation, but you're going to get a lot more control over it. Hide and show tabs, change the order, things like that. You also get, with Shop Kit 2.0, we kind of rewrote our gallery. So the gallery extension now is a lot more robust. It does like variation galleries and has a lot more control for different layouts based on screen size, so that's pretty exciting. So yeah, it's largely going to be a tool to help you build very unique and much more interesting product pages, so it's just going to be much easier for you to do really cool stuff.

Kathy: Very exciting. And so the beta is going to be available. If you are a bundle owner full bundle or the lifetime or if you bought Shop Kit in the past, that's available to you as well. And the full version going to be ready in a couple of weeks, looks like. 매우 흥미진진합니다. Well, if you are on our mailing list, you will get an announcement as soon as all of the stuff comes out.

And that's the big news with Kadence right now. I know you got a lot of other things going on. I don't want to put any pressure on you of when those types of things are coming. Cause I know this is a big one and big news for Kadence and WooCommerce users. Well, any final thoughts?

Ben: Well, go party up on the beach, Hannah, for us both because you're only one that's successfully is in the party zone.

Hannah: I'll do what I can.

캐시: 훌륭합니다. Yeah, we're all living vicariously through Hannah's adventures right now. So very cool. Well, we will be back in a couple of weeks. I think next time we should talk a little more about WooCommerce because there's some interesting things happening there. So thanks for tuning into the Kadence Beat and we will talk to you next time.