오즈코딩스쿨 베이스캠프(디자이너 ) #14 좋아하는 웹 화면 만들어보기

분석 및 계획 수립

1) 웹 화면 분석

- 대상 선정: 자신이 좋아하는 웹 사이트(포털, 쇼핑몰, 블로그 등)를 선택

 

- 구성 요서 분석: 화면의 레이아웃, 헤더, 네비게이션, 콘텐츠 영역, 푸터, 버튼 이미지, 아이콘 등 요소들을 세밀하게 분석

 

- 의도 파악: 각 디자인 요소가 사용된 이유 (가독성, 시각적 강조, 사용자 흐름 등)를 메모

 

2) 디자인 시스템 정리

- 기본 요서 정리: 폰트, 색상. spacing, 버튼 스타일 등 반복 사용될 요소에 대한 규칙을 문서화.

 

- 스타일 가이드 제작: 디자인 전반에 일관성을 유지할 수 있는 가이드라인 작성.

 

디자인 모방의 원칙

1) 단순 모방이 아닌 분석

- 구조이해:  단순히 따라 그리는 것이 아니라. 왜 그런 레이아웃과 디자인 요소가 사용되었는지 고민.

 

- 개선 아이디어 도출: 기존 디자인의 장단점을 파악하고, 자신만의 디자인 원칙을 추가하여 재해석.

 

프로토타입 완성 및 사용자 흐름 점검

1) 인터랙션 및 전환 효과: 최종 디자인에 대해 각 페이지 간의 전환 및 인터렉션 효과를 설정하여, 실제 사용자 경험과 유사한 흐름 구성

 

2)  사용성 테스트: 프로토타입을 실제로 사용해보고, 사용자 패드백을 반영해 수정 및 보완.

 

 

<실습>

참고 웹사이트:  필라이즈 필라이즈 | AI 다이어트, 식단 기록, 칼로리 계산, 영양제, 혈당

 

필라이트 사이트를 참고해서 따라 만들어 봤고 프로토타입 할려고 했는데 왜  아이콘에서 클릭이 안된다 ㅠㅠ 어째서지?