뒤로
Hunter Hwang
Hunter Hwang ·

프로덕트 링크를 첨부한다면, 유저가 보는 랜딩 페이지가 있어야겠죠? 앞서 작성한 로고 디자인을 바탕으로, Figma에서 랜딩 페이지를 디자인해 보았습니다. 오늘은 정말 디스콰이엇에 프로덕트를 걸기 위함이 목적이므로, 흘깃 보기에 그럴듯하면 충분하다는 생각으로 작업했어요.

웹디자인 및 프론트엔드 개발 강의를 들으며 느꼈던 게, 워낙 다양한 스크린이 많은 환경이다 보니 100% 완벽한 반응형 디자인을 처음부터 만들 수 없다는 것이었거든요. 그래서 아예 포스터 디자인처럼 1장만 그려 두었습니다!

가장 첫 버전의 Jipper 랜딩 페이지에는 여러분이 보고 계신 JPG 이미지가 띄워질 것입니다. 처음에는 HTML + CSS로 구현하지 않을 거에요. 왜냐하면 어차피 디자인은 바뀔 예정이거든요. 이 JPG 이미지는, 창 가로 사이즈에 100% 맞추어 리사이징되어 보여질 것입니다. 프로토타이핑은 속도가 생명이니까요!

1

댓글

로그인 후 댓글을 남길 수 있습니다.

Hunter Hwang
Hunter Hwang

물론 이미지 파일을 올리는 데에 아주 짧은 HTML 코드를 작성하기는 하겠죠?

Hunter Hwang
Hunter Hwang

Figma의 Macbook Air 프레임에 요소를 포스터 디자인하듯 배치했더니 1시간이 좀 안 되게 걸렸어요! 가장 시간이 오래 걸렸던 것은 문구 배치네요.