남북교류협력지원협회 웹진 이음 제작

송송·2020년 7월 17일
0

Project Review

목록 보기
3/6
post-thumbnail

Project Overview

- Project Name

남북협회 웹진 '이음'

- Client

남북교류협력지원협회

- Date

2019.03 ~ 2020.07 (진행중)

- Contribution

제호 디자인 100% / 레이아웃 디자인 100% / 콘텐츠 디자인 80% / 퍼블리싱(반응형) 100%

- Summary

사단법인 남북교류협력지원협회의 월간 웹진 '이음'의 로고 및 콘텐츠 디자인과 퍼블리싱. 웹진 각 호의 메인 커버 이미지에서 느껴지는 계절감이 하단에서도 쭉 이어지도록 애니메이션을 이용하여 디자인

- Updates

01. 웹진 '이음' 메인 레이아웃 리뉴얼(2020.03)


페이지 바로가기
제호와 함께 메인 레이아웃도 함께 리뉴얼했다. 기존 서브 페이지 레이아웃과 통일감이 느껴지도록 메인의 그리드를 변경하고 구독 섹션을 늘려 강조한 것이 특징이다.
이전 홈페이지에서 쓰였던 것처럼 계절감이 느껴지는 일러스트 애니메이션을 삽입했다. 이번에는 라이브러리를 이용하여 솔루션 상에서 이미지 파일을 올리면 해당 이미지를 랜덤으로 하늘하늘 떨어지도록 구현하였다.

02. 웹진 '이음' 로고 디자인(2020.03)


웹진이 명칭이 바뀌면서 새롭게 제호 디자인을 진행했다. 클라이언트에게 다양한 형태의 시안을 선보였다. 픽스된 시안을 다듬어 로고를 완성하고 svg 이미지로 제작해 어떤 화면에서도 선명하게 잘 보이도록 제작하였다.

03. 탭 기능 구현

페이지 바로가기
JQuery를 이용한 탭 기능을 제작
초기에는 간단하게 a태그와 id를 이용해 버튼을 누르면 해당 링크로 이동하는 형태로 제작했으나, 더 강조되어 보이면 좋겠다는 독자 의견을 반영하여 눈의 띄는 형태로 리디자인 하고 보다 부드럽게 스크롤 하는 형태로 제작하였다.

04. 남북협회 메인 디자인(2019.03)


페이지 바로가기
카테고리 이름을 세로로 배치하고 hover애니메이션 효과를 주기도 했다.

profile
디자인을 이해하는 퍼블리셔

0개의 댓글