[Design] 동국대학교 드림패스 웹사이트 리디자인 3차: Dropdown Nav Bar 제작, 가로/세로 Scroll behavior 및 Interactions 적용, Mypage 페이지 분석

중간 발표 단계로써 Home 페이지의 전반적인 외형이 완성되었다. 

 

먼저, 드림패스 Home 페이지의 원래의 모습이다.

 

원래 모습. 제가 만든 거 아닙니다.

 

 

 

다음은 현재까지 제작한 리디자인 작업물이다.

앞서 작성한 분석 내용을 거의 모두 반영하였다.

 

'내 정보'를 표시하는 저 블록...

이렇게 보니 옅은 회색이 마음에 들지 않는다.

하지만 무슨 컬러로 처리해야 할지 고민이다.

 

그래도 드림패스 웹사이트를 딱 접속했을 때 저렇게 내 정보를 간략하게 확인할 수 있는 점이 마음에 든다.

또한, 사이트 접속 시 내 정보 블록이 잘리지 않고 스크롤하지 않은 상태에서 깔끔하게 보일 수 있도록 패딩값을 처리했다.

 

 

 

 

---

 

그리고 중간 발표를 통해 피드백을 받았다.

 

- 원하는 정보가 꽁꽁 숨겨져 있다는 문제 제기에 대한 마땅한 해결책이 보이지 않는다.

정확하다. 그러고 보니 이 웹사이트, 검색 기능이 보이지 않는다. 헉..

Home 페이지에 검색 로고 버튼을 추가하는 방안을 생각해냈다.

 

- 패딩값이 제각각인 것 같아 보인다. 디자이너는 디자인하는 모든 요소에 대한 근거가 있어야 한다.

특히 중앙에 보이는 2x2의 작은 4개 블록 각 사이의 패딩값이 상하좌우 일치하지 않는 점이 아쉽다고 했다.

나는 피그마 디자인 작업 시(얼마나 해봤냐겠지만) 각 컴포넌트 간의 패딩값을 일일이 고려한다.

지적 받은 해당 부분도 정렬하는 데 노력이 들어갔긴 하지만,

그렇게 한 근거는 딱히 떠오르지 않는다. -> 근거 있게 하려면,

상하좌우 패딩값을 동일하게 적용하는 게 나은 것 같다.

 

- 마이페이지는 만들다 만 것인가? (네) 홈과 디자인이 별반 다를 게 없다. 마이페이지임을 나타내는 확연한 차별성이 있으면 좋겠다.

마이페이지는 아직 제작중인 것이 사실이지만, 기존 웹사이트에서도 Home 페이지와 Mypage 페이지의 네비게이션 메뉴 바와 기본적인 틀이 매우 유사하다. 'My' 페이지인데, 남의 페이지인 그런 느낌...

안 그래도 마이페이지에서 제공하는 다양한 콘텐츠를 꼭 네비게이션 메뉴 바로 표현해야 하는가에 대한 의문을 안고 있었다. 메뉴 바를 없애고 중요한 정보를 담는 요소들을 좀 더 시각적으로 표현하면 좋을 것 같았다.

Mypage 페이지의 내부를 아예 재구성해 보기로 결정한 순간이었다.

 

 

피드백은 까먹기 전에 반영하자

계획대로 되고 있다

검색 버튼 Mouse Enter 시 검색창이 활성화된다!

 

 

글 상단의 핑크색 내용을 모두 반영한 모습이다.

이제 Mypage로 넘어가자.

 

---

 

기존 Mypage 페이지의 모습

 

 

Mypage 페이지 분석

Mypage 페이지에서 보이는 요소 및 문제점을 짚고 넘어가자.

 

- 학교의 상징 컬러도 아니고, 심지어 그 보색도 아닌 '갑자기 파란색 헤더 바'

조금 과장해서 말하면 마이페이지에서 헤더 부분만 보인다.

메인 컬러 팔레트에서 컬러를 가져와 페이지의 일관성을 위한 컬러로 변경해줄 수 있다.

 

- 가장 중요한 프로필(내 정보)은 가장 중요하게 표시하자.

보편적으로 생각해보자. 마이페이지의 목적이 무엇인가? 나의 정보를 확인하기 위함이다.

하지만 현재의 디자인은 내 정보가 마치 메뉴 바와 함께 헤더에 머물러 있어 덜 중요한 정보라는 느낌을 준다.

심지어 저 설정 로고 버튼... 막판까지 존재 자체도 몰랐다. 뒤쪽 배경의 일부인 줄 알았다.

프로필 박스를 크게 표시하고, 설정 버튼이 더 잘 보이게끔 한다.

까꿍 설정 버튼

리디자인하라고 부추기는 UI

 

- 메뉴 바의 내용과 하단의 박스 컴포넌트들의 내용이 중복된다.

앞에서 다룬 내용과 같이, 메뉴 바를 없애고 중요한 정보를 담는 요소들을 좀 더 시각적으로 표현하면 좋을 것 같았다.

 

 

 

이제 Mypage 페이지 리디자인을 진행한 후, 다음 글에서 결과물을 업로드할 예정이다.

 

 

 

도움이 되셨다면운 좋아요만 눌러주세요!!!!!!!!!!!