portfolio

navy pattern

Canon Redesign

navy pattern
canon site design pc-mockup

See in Canon ᆞ

See in Canon ᆞ

See in Canon ᆞ

See in Canon ᆞ

See in Canon ᆞ

See in Canon ᆞ

See in Canon ᆞ

See in Canon ᆞ

challenge

progress

progress image

challenge

project goal

design

canon red logo

Jeep 브랜드가 가진 무거운 분위기를 더욱 살릴 수 있도록 리디자인 하였습니다.
또한 복잡한 이미지를 다루는 만큼 최대한 깔끔한 레이아웃으로 구성하여 시각적인 편안함을 주었습니다.

  • 시각적 재미요소
  • 무게감 있는 디자인
  • 깔끔한 레이아웃
  • 기존 사이트 ui/ux 개선

publishing

원활한 소통을 위해 Git 과 Figma를 활용하여 서로 협업하며 진행 할 수 있도록 하였으며,
퍼블리싱 가이드와 공통css파일을 이용하여 결과물의 통일감을 주고자 노력하였습니다.

  • Git과 Figma를 이용한 원활한 커뮤니케이션
  • 퍼블리싱 가이드를 통한 공동작업
  • 공통 css파일을 통한 효율성

challenge

my works

디자인 기획,
어떻게 진행했을까?

canon red logo

만의 고유한,

감각적인 디자인을 강조

canon design1 canon design2 canon design3

design

design element

design keyword

color

무거운 분위기가 매력적인 Canon 브랜드의 아이덴티티를 살려 블랙과 다크그레이를 메인으로 디자인한 뒤, 레드 컬러를 포인트 컬러로 사용합니다.

font

font-info

이미지 위주의 사이트이기 때문에 한글은 깔끔한 Noto Sans KR, 영문은 Neue Montrial 을 사용합니다.

팀 코딩(Team Coding),
어떻게 진행했을까?

  1. 1. 퍼블리싱 가이드와 css공통 스타일 설정 등으로 가이드라인을 지정
  2. 2. Git Hub를 통해 서로의 작업물을 확인하며, 피드백
  3. 3. 회의를 통한 최종 작업물 정리와 불필요한 파일 정리

challenge

publishing guide

html 서식 규칙

html 서식 규칙

css 서식 규칙

  • 유효성 검사를 마친 태그만 사용
  • 0 뒤의 단위는 생략 가능, 단위값이 필요한 경우가 아니라면 생략
  • 모든 선언은 끝나고 마지막에 세미콜론 ( ; ) 작성
  • 코드 이해를 돕기 위한 모든 컨텐츠 들여쓰기, 들여쓰기는 기본 탭 1회
  • 주석을 사용해 각 컨텐츠 영역 구분
  • 변수를 포함한 공통 스타일 값은 common 폴더 안의 css 문서에 저장
  • 공통적으로 들어가는 클래스명은 통일하여 작성. EX) view-more

css 주석 방식

css 주석처리 방식

javascript 서식 규칙

challenge

publishing

publishing

publishing1

모든 파일에 같은 스타일의 스와이퍼를 적용시켜 통일감 향상

기술서 보러가기

challenge

problem & solution

problem & solution

challenge

review

처음으로 진행한 코딩 팀프로젝트이기 때문에 많은 시행착오가 있었다.
기획과 디자인을 전부 담당한 입장으로서, 디자인을 다른 팀원들에게 자세히 설명하기 위하여
설명을 위한 pdf파일을 만들어 팀원들에게 공유하기도 하면서 랜선 작업 시 생기는 소통의 어려움을 해결하고자 하였다.

또한 디자인 의도와 다르게 나오는 부분들이 생각보다 자주 생겼지만
Git을 통해 빠르게 수정할 수 있어서 참 다행이었다. Git 사용시에도 어려움이 있었지만
다른 팀원들과의 소통을 통해 빠르게 해결 하면서 팀작의 장점을 느꼈다.

앞으로 다양한 팀프로젝트를 경험하게 될텐데, 이번 프로젝트를 통해
미리 많은 것들을 배울 수 있어 좋은 경험이었던 것 같다.