[수,목,금]▸ 선정한 웹 서비스 클론디자인

홈 화면 분석

1. 웹 서비스 선정
   

   

   프랑스존닷컴 (https://www.francezone.com/xe/home)

2. 작업물 소개
   작업은 아직 익숙하지 않아서 많은 시간을 할애하였다.
   우선 진행하면서 큼직하게 수정해야할 부분을 생각해보고, 다시 리터칭 작업에 들어가야 겠다.
   🙉❗ 홈화면 전체를 쪼개어 작업 → 메인 홈에 들어가 있는 컴포넌트 위주로 굵직하게 작업
   배너 부분 컴포넌트, 플러스광고(알바,도우미), 하단 글리드 작업(아티클로 리딩해야 할 부분) 마무리하기.
   

   

   11/29 작업물

   

   11/30 작업물

   🙉❗ 최대한 컴포넌트 위주의 작업물을 하도록 노력. 페이지 자체가 옛날 버전이라서 단순한 컴포넌트의 반복.
   웹페이지 관리 컴포넌트 관리를 어떤식으로 전문적으로 하는지 자세하게 찾아볼 것.
   11월29일(수) - 웹 페이지 전체 구성, 컴포넌트 작업
   11월30일(목) - 유저 플로우 작업, 컴포넌트 작업
   12월01일(금) - 디자인 개선 작업 예정 및 아티클 정리
   
   
   
   
3. 유저 플로우
   프랑스존 사이트의 '회원가입-프랑꼬레-알림광장-사람찾기' 맵을 유저 플로우로 제작.
   
   
   
   
4. 디자인 개선
   (https://www.figma.com/file/TOXCBrEtYuVioxsgnhjJEi/1129-%EC%86%A1%EB%AF%BC%EC%A7%84-%EC%9B%B9%ED%81%B4%EB%A1%A0%EB%94%94%EC%9E%90%EC%9D%B8?type=design&node-id=0%3A1&mode=design&t=eTecIYxaK6NuCzHy-1)
   드디어 디자인 개선 작업을 완료하였다.
   처음으로 컴포넌트 작업을 할때에는 그저 쉽게 따라하기만 하면 되었다.
   그런데 컴포넌트의 개념을 다시 잡고 프로토타입(prototype)을 적용시키며 따라하니, 구조적으로 잘 잡아놔야 했다.
   처음이라서 많은 시행 착오를 겪었고, 아직도 해결하지 못한 문제들도 있다. 차차 복습하며 보강해야겠다.
   3주차 처음 시작 할때 작성해 두었던 디자인 개선 아이디어를 참고하여 작업해 보았다.
   

   

   12/01 작업물

   [개선 아이디어]
   1. 홈 화면 해드 부분의 최상단바 개선 → 검색창을 크게 키우고, 최상단 메뉴에 아이콘을 씌워주었다.
      

      

      • 개선할 점 : 검색창과 글씨 크기와 가독성이 떨어진다.
      • 개선 아이디어 :
        1. 포털 사이트의 주요 기능인 검색창 크기를 키우고 가시적으로 잘 보이도록 배치
        2. 글씨 크기를 크게 키우고 버튼 효과를 주어 각 카테고리에 집중도를 올리도록 표시
   2. 최상단바 위에 광고 관련 버튼의 위치 변경 → 아이콘이 씌워진 광고신청 카테고리에 모두 몰아두었다. 
      

      

      • 개선할 점 : 최상단바 위에 광고 관련 버튼이 너무 많다.
      • 개선 아이디어 :
        
        1. 광고 안내 카테고리에 묶어서 해당 내용을 드롭 다운 형식으로 표현 할 수 있다.
        2. 직관적인 아이콘을 사용하여 보기 편하게 위치할 수 있다.
   3. 다양한 크기의 배너, 포스터 → 상단 배너를 크게 위치하고, 모든 배너의 크기를 맞추었다.(가능하면 슬라이딩)
      •  개선할 점 : 광고 배너와 포스터가 여기저기에 위치해 있고, 크기가 3가지 종류로 다양해서 통일감이 없다.
      • 개선 아이디어 :
        1. 광고의 형태를 한가지로 통일하고 크기를 맞춘다.
        2. 광고의 카테고리를 속성별로 묶고, 슬라이딩 형식으로 넘길 수 있게 한다.
   4. 직관적인 아이콘 → 아이콘을 많이 넣어서 직관적으로 볼 수 있게끔 하였다.
      • 개선할 점 : 홈페이지 전체가 다 글로 되어 있어서 가독성이 떨어진다.
      • 개선 아이디어 : 
        1. 직관적인 아이콘을 배치하여 빠르게 메뉴를 인지 할수 있도록 돕는다.
        2. 색감에 차별감을 주어 중요도를 구별하고, 상위와 하위메뉴를 구별한다.