Figma로 디자인하고 Webflow로 사이트 제작하여 라이브 하고
Zapier로 데이터 수집 자동화까지 진행해봄
하단 이미지는 피그마 최종본이고 웹플로우에서 짜잘한 수정을 꽤 거쳐서
라이브 사이트와 일치하지는 않지만 기억을 위해서 남겨둠
어려웠던점
- 웹플로우로 제작 시 한글은 직접 입력하지 못하고 다른데 입력해서 복붙 해야함
- 하다가 중간에 저장이 안되고 날아간 일이 있었는데 (3시간분량) 웹플로우 연락하니 이틀동안 답이 없었음.. 사실 그만큼 기다린것도 아니고 자고 일어나서 바로 다시 제작하였음 => 고객센터랑 연결이 어려우니 기대를 말자...
- 컨텍트 폼으로 수집한 데이터가 나는 볼수 있는데 고객한테 보게 하려면 자동화를 해야했음 메이크랑 재피어 둘다 사용했는데 메이크는 15분마다 갱신이라 실시간 자동화인 재피어를 사용함 => 100건 이상시에는 비용 부과라 계정을 중간에 한번 바꿈
다음에 참고할 내용
- 헤더를 만들어서 항목별로 섹션으로 이동하도록 하였으면 더 전문적으로 보였을듯
- 사용자의 대부분이 모바일로 들어왔다고한다... 다음에는 20-30 대상일땐 모바일 화면부터 만들고 확장하는 방식으로 진행하는것이 좋을것 같다
<< Landing page created with no-code development in 3 days >>
Design with Figma, create a site with Webflow, and published
Automating data collection with Zapier
The image is the final version of Figma.
Webflow has undergone quite a few minor modifications, so it does not match Figma.
(just for memory)
What was difficult
- When creating with Webflow, you cannot enter Korean directly and must enter it somewhere else and copy and paste it.
- There was an incident where it wasn't saved and was lost (3 hours worth), but when I contacted Webflow, there was no response for 2 days... In fact, I didn't wait that long, I woke up and created it again right away => It was difficult to connect to the customer service center, so I was looking forward to it. Let's not...
- I can see the data collected through the contact form, but I had to automate it to let the customer see it. I used both Make and Zapier, but Make updates every 15 minutes, so I used Zapier, which is real-time automation => Fees apply for more than 100 cases. Change your account once in a while
What to note next
- It would have looked more professional if I had created a header and allowed each item to go into sections.
- It is said that most of the users have come to mobile... Next time, when targeting the 20-30 age group, it would be better to create and expand the mobile screen first.
.png%253FspaceId%253D396e658a-308f-437a-937d-15dfd3aa0019%3Ftable%3Dblock%26id%3D17c5a3c5-5d0e-45c9-b470-94ae9cbaf8e9%26cache%3Dv2&w=1920&q=75)
Share article