태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

티스토리 첫화면 꾸미기 베타테스트의 2차 미션이 공개 되었습니다. 그건 바로~~!! 내 맘대로 첫 화면을 제시하라 인데요. 제가 티스토리에 도전할때 첫 페이지 화면을 제시한다고 했었습니다.(제가 내 뱉은 말에 책임을 질때가 온 것 같군요.)

우선적으로 다양한 페이지를 만드는 데는 현재의 기능면으로 제약이 많이 있네요. 우선 현재 제공되는 기능으로 레이아웃을 잡아 봤습니다.

 

● 첫화면을 제작하기전에...

먼저 첫 페이지를 제작하기 전에 디자인에서 유념해야 될 사항이 있어서 몇 가지 짚고 넘어 가겠습니다. 대부분 스킨의 배경과 본문을 흰색으로 하는 기본 스킨을 사용하고 있습니다.

첫 페이지를 제작할때 가장 고려 할 점은 바로 방문자의 시선처리 부분입니다.

배경과 본문이 흰색인 경우는 큰 차이가 없겠지만, 예를 들어 "예스비 디자인 닷컴"처럼 타이틀과 사이드바 그리고 메뉴에서 특정 색상이나 무늬로 시선을 잡는 스킨이라면, 첫페이지를 제작할때 색상부분을 고려해야 됩니다.

배경이 짙은 색상이거나, 진한 무늬가 있는 스킨에 알록달록 화려한 칼라가 들어간 칼라바를 덫 씌우면 방문자의 눈의 피로를 느끼게하고 그로 인해 불쾌감을 주게 되기 때문입니다. 이럴 경우는 회색계역의 색으로 통일하여 깔끔하게 처리해 주는 것이 좋습니다.

또는 스킨에 따라 주색(주로 쓰이는 색)이 있다면 통일감있게 같은 계열의 색상으로 처리를 해주 는 것이 통일감 있고 안정되어 보입니다.

"예스비 디자인닷컴"에서 사용된 첫 페이지의 경우도 메뉴바의 색상과 동일한 칼라바를 이용해 전체적으로 통일감을 유지하면서 화려한 느낌을 강조 했었습니다.

포스트 레이아웃에서는 글마다의 길이가 각각 다르므로 사이드바와의 길이 부분을 신경쓰지 못했었습니다. 첫페이지의 경우는 본문영역을 어떻게 채우느냐에 따라 사이드바와 길이가 맞도록 조절이 가능하다는 장점입니다.

첫 페이지를 디자인 할때는 사이드바의 아래 길이를 맞추어 제작해 주어야 합니다. 사이드바가 더 길거나, 첫페이지의 본문 부분이 더 길거나 할 경우 전체 흐름을 깨기때문에 굿 디자인이라 할 수 없습니다.

이 두가지 사항을 유념해서 제작한다면 멋진 첫 페이지 화면을 만드 실 수 있을 거예요^^&

1. 스킨의 색상과 맞추어 전체 흐름을 통일시킨다.

2. 사이드바와 길이를 맞추어 전체 레이아웃을 깨지 않는다.

 

지금부터 예스비™가 제안하는 첫 페이지 스타일을 보시고 참고 해 보세요^^&

 

● 제안1. 칼라바로 개성을...

현재 예스비 디자인닷컴의 첫페이지 화면은 각 카테고리별로 보여지는 목록형 스타일 화면을 제공하고 있습니다. 메뉴바와 동일한 색상으로 카테고리의 제목을 강조해서 방문자가 글마다의 카테고리 선별을 쉽게 함과 동시에, 전체적 칼라풀한 흐름을 깨지 않도록 하는 것이 디자인의 주 컨셉이었습니다.

자신의 블로그 스킨 스타일이 특정 색상으로 만들어진 스킨이라면 이와 비슷한 느낌으로 살려 보시면 산뜻하면서도 화려한 첫페이지를 꾸밀 수 있지 않을까 생각합니다.

첫페이지는 웹진형태를 취하기 때문에 깔끔한 것이 장점이지만, 조금 딱딱해 보일 수도 있는 단점이 있습니다.

자신의 로고색상이나, 타이틀의 색상등과 매치한 "카테고리 목록형 스타일"을 사용하면 어떨까요?

 

● 제안2. 심플한 웹진 스타일...

어떤 스킨에나 잘 어울리는 디자인이 아닐까 싶습니다. 시선이 가장 많이 머무르는 상단부분은 갤러리형태로 썸네일의 크기를 크게하여 시선을 집중 시켜주고, 아래 하단에는 원하는 카테고리나 글목록을 불러와 두번째 시선처리를 해줍니다.

아래는 목록형(제목)만 나열해서 각 카테고리별로 보여주게 하고, 하단에는 상단에 맞추어 썸네일 목록형으로 상하를 맞추어 제작했습니다. 사진블로그나 이미지가 많은 블로그에 아주 적절한 목록형 모듈입니다.

예스비 디자인 닷컴처럼 포트폴리오부분을 넣어도 좋고, 사진만 나열해도 깔끔하고 심플한 디자인이 되지 않을까 생각합니다.

 

● 제안3. 복합형 스타일...

1번과 2번의 복합형 구조로 상단에는 칼라바를 이용해 시선이 머물도록 강조를 해주고, 아래 부분은 심플한 웹진 스타일을 그대로 가져온 형태입니다. 자신의 블로그 색상을 매치시켜 칼라바의 색상을 통일해주는 것이 제일 중요합니다.

2번의 웹진 스타일은 전체적으로 깔끔한 디자인이지만 자칫 본문처럼 지루해 보일 수도 있는 디자인입니다.

이런 점을 고려해서 시선이 자주 머무르는 상단에 칼라바로 포인트를 주고, 흐름이 아래로 갈 수록 깨끗한 화면을 제공하는 것이 이 디자인의 포인트 입니다.

 

 

첫화면 꾸미기가 오픈이 되면 더 다양한 디자인이 나오지 않을까 생각됩니다. 아직은 html과 css를 사용할 수 없어서 조금 답답한 면이 없지 않았습니다.

첫화면이 빨리 완성이 되어서 티스토리유저들의 개성을 한껏 살려주는 좋은 서비스가 되었으면 하는 바램입니다.

참고로, 미션 기간을 잘못 체크해 마감이 지나 포스팅하게 되었습니다. 미리미리란 말이 절실하게 느껴집니다. 참여가 안되면 어쩔 수 없지만, 가능한한 참여 시켜 주세요~~

이 글은 알라딘창작블로그 "웹디자인과 블로그팁"에 연재됩니다. 강의료라 생각하시고, 추천과 믹시 많이 눌러 주세요^^&

 

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

 

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. Favicon of http://jongamk.tistory.com BlogIcon 핑구야 날자 2010.04.01 08:15 수 정 댓 글

      이부분이 약해서 기본화면으로 지금까지...허걱...

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.04.01 19:16 신고 수 정

        음~그랬군요~
        첫화면 꾸미기는 쉬워서...
        금방 적용하실거에요^^&
        샘플도 제공되고... 좋답니다~ㅋ

    2. Favicon of https://ideakeyword.tistory.com BlogIcon Mr.번뜩맨 2010.04.01 10:26 신고 수 정 댓 글

      역시 안목이 남다르시군요. ^ ^저도 칼라바를 각각 배치해 개성을 살리는 방법 완전 좋은 것 같습니다.

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.04.01 19:17 신고 수 정

        감사합니다^^&
        좀 색다른 디자인을 해드릴려고 했는데,
        베타라서 아직 기능들이 많이 불완전하네요.

    3. Favicon of https://2proo.net BlogIcon 2proo 2010.04.02 02:18 신고 수 정 댓 글

      전 두가지 다 맘에 드네요.
      색상 넣은 박스도 괜찮고 심플한 아래쪽 것도 맘에 들구요.
      두세가지 셋팅해놓고 마음따라 바꿔써도 되겠는데요?

    최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool