피그마 수업은 작년에 끝났지만! 그렇다고 중간을 띄고 할 순 없으니꽈!
죽지 않고 돌아온 피그마 수업 후반 파트!
시간이 좀 흘렀기에...(오늘 DAY34임...
기억을 로딩해보자면...
DAY18 수업 요약
- 반응형 디자인 기초
- 디바이스별 최적화
- 랜딩페이지 설계 원칙
반응형 디자인을 어떻게 하는지에 대해 기초부터 배웠다.
디자이너로 직무 변경하려고 학원다녔을때 들어보고 현업에서 고정형만 써서..좀 까먹고 있던 부분인데
이번에 다시 들으니 리마인드되고 좋았다!
그리고 요즘 디바이스도 화면가 다양해지고 있기에 모바일은 특히 어딜 기준으로 맞춰야하나? 고민하던 부분인데
어차피 작은 비율에서 넓어지기 때문에 제일 작은 사이즈 기준으로 제작해야한다고 한다.
그리고 랜딩페이지에 대해 어떻게 설계하는지 배웠는데 약간 프로모션 페이지와 비슷한 맥락이면서도? 다른 맥락이어서
뭐가 다르지? 하고 생각하게 되는 부분이었다.
이번 과제는 그래서 반응형 그리드를 그리고 화면 사이즈 별로 랜딩페이지를 만들어보는 것이었다.
그리드는 PC 1920 에서 콘텐츠 사이즈 1200/1440, 그리고 1440에서 1200콘텐츠, 태블릿, 모바일 이렇게 잡았다.
랜딩 페이지는 원하는 주제로 제작하는 거였는데,
어제 친구랑 비누 어디가 좋지 하고 토론하다가 동구밭 브랜드를 얘기했었는데 갑자기 떠올라서 동구밭 앱 유도 랜딩페이지를 만들어보기로 했다. 이미지는...동구밭 감사합니다^^*! 좋은 프로모션 배너 이미지 굳^^!
일단 모바일,태블릿, PC 순으로 화면 사이즈가 커져야한다고 하셨다.
모바일에서는 PC에서 가능한 기능들이 안되는 경우가 있어서 불필요한 요소들을 버리고 작업이 가능하기 때문이다.
그래서 이렇게 랜딩페이지를 와이어프레임을 설계해보았다. 유명한 이커머스 구성은 여러개 참고해서 레이아웃을 짰다.
배너가 나오고 앱 전용 할인혜택으로 앱 다운로드 유도 - 앱전용 쿠폰 - 세일 단독 특가 - 2025 인기 제품 특가 - 푸터 이런식으로 구성을 하였다. 난 그래서 앱 다운로드 받기가 CTA버튼으로 초점을 잡았다.
따란! 그래서 이렇게 만들어진 동구밭 앱 가입 유도 랜딩페이지~
물론 좀 어색한 부분이 있겠지만(현업에서 이렇게 풀 페이지를 만들어 본 경험이 거의 없어서...)
오랜만에 풀 페이지 만드니까 재밌기도 하고ㅎㅎㅎ 기획전 만들었던 기억도 나서 신나게 만들었던 것 같다ㅋㅋㅋㅋ
이제 거의 마무리가 되는 피그마 UI 수업인데..UX는 뭔가 흥미진진 할 것 같고..!! 도돈도돈
일단 피그마 마무리부터~ 해보자구~~
'OZ코딩스쿨_프로덕트 디자이너 부트캠프' 카테고리의 다른 글
| DAY20-29_웰컴 투 헬?헤븐? UX! (2) | 2026.01.15 |
|---|---|
| DAY19_UI 수업 즐거웠다...촤ㅑ하..!! (0) | 2026.01.15 |
| 중간보고_ 왜 자꾸 블로그가 밀리는가 (2) | 2025.12.30 |
| DAY17_디자인과 언어가 같이 늘 순 없나...? (0) | 2025.12.21 |
| DAY16_피그마MAKE는 어떤걸까나~근데 왜이리 뭐뭐가 많지...@.@ (0) | 2025.12.21 |