본문 바로가기

진짜 전문가가 되기 위해!/디자인 연습

[디자인 - 연습] 웹디자인 연습(4) - 유플러스 알뜰모바일

  • 주제 > 유플러스  요금제 및 유심 판매
  • 컨셉 > 귀여운, 심플한, 재미있는  
  • 표현방법 >아이콘, 일러스트, 타이포그래피
  • 폰트 > 'Pretendard'
  • 타겟층 > 다양한 연령층
  • 주요색 > #F2F4F5  #a480dv
  • 색 분배 비율 > 

희색과 검은색을 제외하고 퍼블이 주요색이다.

  • 와이어 프레임

와이어 프레임

1. 부모 컨텐츠 간의 간격도 첫번째를 제외하고 모든 섹션간의 간격이 일정하며 메뉴,텝메뉴(40px) 또는 자식 컨텐츠(20px) 간의 간격이 각각 일정하게 떨어진다.
2. 컬러도 정확히 5~6개만 쓰이고 폰트 굵기도 4가지로만 이루어져있다.
3. 사이트 별로 컨텐츠가 많을 수록 부모 컨텐츠 간격이 100px이하 또는 조금 넘는 정도인 것 같다.
4. 다른 종류거나 더욱 중요한 내용은 전체 크기로 색까지 줘서 차별화 시킨 것 같다.
5. 자잘한 혜택과 같은 컨텐츠들의 색들이 전부 보라색(메인 컬러)과 어울리는 것 같다.

*리뷰

  • 작업시간 > 4시간 
  • 선정이유 >
1. 레이아웃 정리가 엄청 잘되어있다. 
2. 색도 메인과 서브가 적절히 잘 쓰였다.
3. 메인색이 명도가 낮고 채도가 높은 편이라 컨텐츠 별로 색깔이 다른 데도 불구하고 어울리게 배치 되어 이질감이 없다.
4. 레이아웃은 계속되는 카드 형식으로 자칫하면 지루해 보일 수 있으나 가격이 일정하고 컨텐츠마다 다른 색을 사용하고 조금씩 다른 레이아웃 스타일로 디자인 하여 그룹핑이 잘되어있다.
5. 이미지가 필요없이 타이포와 아이콘 일러스트만으로 표현했지만 어수선 하지 않고 무엇을 홍보하고자 하는 지 확실하게 보여진다.

-느낌점 > 

초보자인 내가 봐도 스타일 가이드가 탄탄하게 되어있는 것 같다. 2번이나 반복해서 연습해지만 하면 할수록 배울 점이 많은 디자인이다. 그리고 내가 추구하는 심플하고 사진이 들어가지 않은 그렇지만 컨셉을 잘보여주는 그런 사이트로 보인다.

그리고 자잘한 혜택과 같은 컨텐츠들의 색을 정한 기준이 뭔지 궁금하다. 


*셀프 점검

1. 이 시안 연습을 얻어가고 싶은 게 무엇인지 파악하고 연습할 것

--> 레이아웃을 짜는 방법 또는 그 간격간의 차이를 알고 싶어서 이 사이트를 선택했다.

2. 시작 전 분석하는 시간을 가질 것 (색분량, 레이아웃을 왜 그렇게 짰는지, 순서와 폰트 굵기의 상관관계)

--> 분석은 안함

3. 잘 모르겠으면 한번더 하기

-->2번 더함

4. 안보고 해보기 

--> 안보고 하긴 했는데 개발자 도구를 통해 수치를 외우고 시작했다.

 

*결과

왼쪽 연습작 오른쪽이 원본