미디어스퀘어 레이아웃 및 기본구성

미디어스퀘어 2012. 3. 14. 19:52

초기 영감을 받은 사이트 
http://www.motorvfx.com/en//home/ 



영화제별로 categorizing
 


 




상단의 메뉴와 color에 영감을 받은 사이트 
http://vani.com.mx/ 



전체적 분위기에 영감을 받은 사이트_grayscale --> mouse hover시 color로

http://www.facesofnyfw.com/  

: 여기
파비콘 예쁨 여기 파비콘 참고!!~




위의 사이트를 참고로 레이아웃 스케치
: 메인페이지에서 클릭시 펼쳐지는 동영상 페이지까지 원페이지 
: 메인에 깔리는 동영상 썸네일 이미지들은 다 grayscale
: 2dept 메뉴의 색은  vani.com.mx/  사이트 상단의 아이콘메뉴처럼 컬러풀하게 구성
: 하단에 sns 구성
 
mouse hover
 : gray --> color 로 변함
 : pattern.gif 오버레이 됨 (영상이 지직되는 효과)

click --> fullscreen
 : 왼쪽에 위치되었던 메뉴 사라짐
 : 오른쪽에 영화상세설명 메뉴 등장 --> 시간이 지나면 자동 사라지나, hover 하면 나타남
 : 동영상 화면에 back button logo 이미지 존재 (사용자들이 불안하지 않고, homeback으로 이동가능)




게시판 inspiration
http://www.cannondale.com/kor/news/  



: 어마어마한 사이트
: 게시판 외에 연혁 및 세부페이지 구성등 참고할것이 많은 사이트
: Fullscreen 동영상 화면과 맡게 페이지도 시원하게 구성하는데 참고할만 함
 

위의 사이트를 참고로 게시판 레이아웃 스케치

: 페이지를 좁게 쓰지 않고 크게 활용
: 제목글자 무조건 크게
: 이미지는 왼쪽 구성 !important
: 알고보면 게시판이지만 페이지같은 착각을 줌
 
suggestion
 : 만약 학과에서 게시판 카테고리가 많아질경우, 오른쪽 스케치와 같이 왼쪽에 colum을 하나 더 잡아 게시판 제목을 잡아주는것은 어떨지..(얼핏 3depts 메뉴처럼 보이나 좁지않고 시원한 느낌)
 : 혹 화면이 심심해질경우, 오른쪽 끝이 이미지를 살짝 언져주는건 어떨지..


will continue.....

posted by 알 수 없는 사용자