블로그 리브랜딩

티스토리 기본 스킨이 맘에 안들어서, 다시 디자인해보려고 합니다.

일단 완성작

사진엔 안들어갔는데.. 중간중간에 구분하는 타이틀이나 사진이 포함되어있습니다. 스크롤과 상관없게 설정해놨어요.

 

기존에는 임시방편으로 페이지 기능을 이용해서 여러 사진들에 링크를 걸었었는데, 문제가 좀 많았습니다.

1. 디자인 문제.. 너무 색깔이 짙어서 중후해보입니다.

2. 통계 문제.. 하이퍼링크라서 페이지뷰가 다 조회수로 집계됩니다.

3. 모바일 지원 문제.. 모바일로 보면 사진끼리 간격이 떨어져서 이상해보입니다.

물론 새 디자인은 구현하기에 있어 기존 디자인보다 훨씬 힘들겠죠? 새 스킨을 만들어야 하는 정도입니다.

HTML과 CSS, Javascript를 공부하고 있고, 블로그에 티스토리 스킨 만들기를 연재할 예정입니다.

그래서 WEB 시리즈는 웹개발 기초 파트, 이 시리즈는 디자인 파트, 스킨 만들기 시리즈는 실전 파트라 생각해주시면 되겠습니다. 그럼 시작해봅시다.

 

1. 구상하기

1.1. 레퍼런스 찾아보기

저는 주로 페이스북과 유튜브에서 보던 페이지들을 즐겨찾기로 저장한 다음 찾아보는 편입니다.

제가 그간 봐왔던 레퍼런스들은...

디자인 가이드라인/디자인 시스템의 종류

 

‘그래픽 UI 디자인’을 하는 주니어들을 위한 사소한 꿀팁

 

삼성과 애플의 타이포그래피

 

게슈탈트 이론에 기반한 UI 디자인

 

웹디자인의 교과서, 애플

 

미세상호작용 UX디자인 측면에서 분석한 하나투어 앱

 

감각의 어머니 래퍼런스

뭐 이런 글들 위주입니다. 디자인 분석글이 시야를 넓혀주는데 도움이 되었고, 특히 "게슈탈트 이론에 기반한 UI 디자인"과 "웹 디자인의 교과서, 애플"은 블로그 디자인에 결정적인 도움이 되었죠. 애플 사이트는 정말 최고의 레퍼런스입니다. 이런 글들을 보면서 자신이 방문하는 사이트들이 어떻게 구성되었는지 파악하다보면 자기 사이트를 어떻게 구성하면 좋을지도 생각이 들겁니다.

1.2. 스케치하기

펜과 노트를 꺼내봅시다.

웹은 16격자, 모바일은 9격자로 그렸습니다. 그릴 때 참고사항은 컬럼이라고, 내용물이 들어가는 범위를 따로 설정해줘야 한다는 것입니다.

Xd로 보면 이렇습니다.

2. 구현하기

어도비 XD는 익히고나면 웹디자인에서 파워포인트보다 더 편한 툴입니다. 개발할 때 CSS 서식도 제공하구요, 진짜 웹, 모바일처럼 프리뷰도 진행할 수 있습니다. 툴을 익히고 나면 웬만한 사이트를 어도비 XD로 개발할 수 있음을 알게 될겁니다. 하지만, 반응형 웹사이트 제작에는 완벽하지 못합니다. 동적인 웹을 구현하고 싶으면 invision studio(무료) 를 사용하는게 더 나을겁니다.

어도비 XD 자체가 되게 간단한 툴입니다, 저는 이 두 영상으로 익혔습니다.

툴 사용보다는 감각이 더 중요한거라 레퍼런스나 이 유튜버(madia designer) 영상 몇 개 더 찾아보시면 감각을 더 익히실 수 있어요.

🔥#01부. 대기업이 선택한 디자인툴 Adobe XD툴 실무특강 30분만에 끝장보기

 

🔥#02부. 대기업 디자이너들이 선택한 Adobe XD툴 실무특강 30분만에 끝장보기

아무쪼록 잘 익혀 활용하시기 바랍니다. 제 디자인 분석은 다음 강의에서 진행하도록 하겠습니다.