웹사이트 관련 팁들을 모아놓은 곳입니다. 좋은팁 공유 합시다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 186

13

조회 수 : 2634 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 25
1. 단순함이 최고
웹에서 가장 효과적인 디자인을 만들어주는 것은 바로 단순성이다. 다채롭기 그지 없는 서체나 수백만가지의 색상. 최첨단 자바 애플릿등에 현혹되지 말자. 디자인은 단순할수록 좋다. 사이트를 항상 깔끔하고 단정하게 유지하자.

2. 디자인의 영감은?
사이트 디자인 작업에서 아이디어가 막혔을 떄는 웹을 돌아보고 다른 사람들이 한 작업을 참조하자. 어떤 기법이 성공하고 실패하는지 눈으로 확인하고 이를 디자인에 응용한다.

3. 네비게이션
네비게이션방법은 사이트 전반에 걸쳐 똑같이 유지해야 한다. 그래야만 사람들이 네비게이션 체계에 익숙해지고 즐거운 서핑을 하게 된다. 또한 쉽게 이해하고 사용할수 있는 네비게이션이 되도록 신경쓴다.

4. 네비게이션 막대의 위치
여러분의 네비게이션 막대에 실린 링크의 숫자가 많을 경우, 가장 좋은 방법은 단추를 누르는 프레임을 왼쪽에 위치시키는 것이다. 반면, 링크의 숫자가 적을 경우에는 맨 위 프레임에 위치시킨다. 이는 네비게이션막대를 디스플레이하는 가장 효과적인 방법이다.

5. 내용 배치 순서
항상 가장 중요한 내용을 맨 앞페이지에 싣는다. 왜냐하면 사람들이 맨 앞페이지를 제일 먼저 보므로 쉽게 주의를 끌수 있기 떄문이다. 일단 사용자의 흥미를 끌고 덜 중요한 내용들은 그 순서대로 뒤쪽에 실으면 된다.

6. 색상배치계획
편안하고 보기 좋은 색상을 쓰자. 그리고 사이트 전반에 걸쳐 일관적인 색상배치를 유지해야 한다. 분홍색과노랑색 혹은 초록색과 빨강색처럼 서로 충돌하는 색상은 피한다. 사이트의 스타일과 주제를 반영하는 색상을 선택하는 것은 주지의 사실!

7. GIF문자
문자를 디스플레이하는 목적만으로 GIF를 써서는 않된다. 이들 핵심어 검색에도 걸리지 않고 다운로드 시간도 더 오래 걸린다. 원하는 스타일을 제작할때는 표시어를 조합해서 쓴다. 만약 이 방법에 실패하면 캐스캐이딩스타일쉬트를 이용한다. 하지만 최신브라우져만이 지원한다는 단점이 있다.

8. 문자의 흐름
페이지상에 문자 흐름이 매끄럽도록 신경을 써야한다. 사람들은 한 줄에 너무 많은 낱말이 들어간것을 좋아하지 않는다. 따라서 문자들에 단을 적용시켜 읽기쉽게 나누어 배치한다. 그리고 이미지 주변에 위치한 문자흐름도 깔끔히 정리한다.

9. 타겟사용자계층
사이트를 디자인할 떄는 항상 사용자 계층을 염두에 두어야 한다. 만약 타겟 사용자들이 어린이들이라면 밝고 대담한 디자인을 쓴다. 혹은 대형 기업체들은 타겟으로 한다면 번쩍이는 조명이난 웃기는 음향등은 배제한 전문가적인 사이트를 만들어야 한다.

10.안전한 웹용 색상 팔레트
사이트의 그래픽을 디자인할 떄는 모든 사용자들의 컴퓨터가 32비트의 색상을 갖추고 잇지 않다는 점을 명심하자. 256색상 모니터를 가진 사람들을 대상으로 사이트를 만들면 모든 기종에서 똑같은 디자인을 볼 수 있을 것이다. 그래픽프로그램으로 이 작업을 손쉽게 할수 있는데 않될경우에는 파이어웍스나 이미지레디같은 프로그램을 이용해 보자.

11. 문자스크롤
꼭 필요한 경우를 제외하면. 상태막대에 자바티커나 스크롤되는 사각형. 스크롤 되는 문자같은 귀찮은 장치들은 넣지않도록 않다. 이를 지원하지 않는 브라우저들이 있으며 또 이들을 꼭 써야할 필요도 없다. 만약 내용을 한페이지에 넣지 못한다면 아예 뺴버리는것이 좋다.

12. 미래의 업데이트
레이아웃을 디자인할 떄에는 장차 이를 업데이트 해야 할것이라는 사실을 항상 염두에 두고 하자. 확장이나 추가버튼. 제목등을 위한 공간적 여유를 남겨두면서 디자인을 해야한다. 그리고 네비게이션 체계도 변경 가능하도록 만들어야만 나중에 궁지에 몰리지 않는다.

13. 회전이미지
자바스크립트를 사용하여 네비게이션 중에 사용도리 복잡한 회전이미지를 만들어보자. 먼저 디폴트버튼위에 고정이미지를 만들고, 마우스오버 상태를 위한 애니메이션 gif를 써서 멋진 회전움직임을 제작한다. 드림위버나 고라이브같은 소프트 웨어들이 바로 이 작업의 명수들이다. 혹은 여러분이 직접 코드를 입력해서 만들어도 좋다.

14. 조회수카운터
사이트에 조회수 카운터를 만들고자한다면 사용자에게는 보이지 않도록 하거나, 아니면 아예 만들지 않는것이 좋다. 예를 들어 여러분의 사이트 방문자수가 249명밖에 않된다는 사실을 만방에 알려서 좋을일이 전혀없는것이다.

15. 배경이미지
사이트에 배경이미지를 심고자 할떄는 아주 단순한 것으로 해야 한다. 복잡한 배경을 쓰면 사용자들이 내용을 읽을 떄 방해 주기쉽다. 그러므로 배경은 엷고 눈에띄지 않도록 하며 사이트전반의 색상배치와도 배치되지 않도록 한다.

16. 도입페이지
많은 디자이너들이 도입페이지나 스플래쉬페이지를 사용한다. 이것은 사용자들이 사이트를 방문할 때 가장 먼저보는 곳이므로 성심을기울여 멋지게 만들 필요가 잇다. 그리고 사이트의 사양도 기입하여. 예를 들면 어떤 브라우져로 볼떄 더 잘보이는지..혹은 어떤 플러그인이 필요한지..등도 알려주는 것이 좋다.

17. 적절한 비례구조
사이트에 들어가는 모든 요소에 적절한 크기를 선택하는 작업은 매우중요하다. 문자나 이미지들을 너무 크게 잡으면 해상도가 낮은 화면에서는 망가져 보이게 마련이다. 그리고 요소들을 너무 작게하면 고해상도화면에서는 잘 보이지 않는다. 사이트를 디자인할 떄는 여러분의 판단력을 십분 발휘하고 개발작업전반에 걸쳐 다양한 해상도의 화면에서 잘 보이는지 확인하자. 해상도에 따라 놀랄만한 차이가 난다.

18. 이미지맵
각링크마다 별도의 이미지를 부여하는것보다는 모든 네비게이션에 하나의 이미지를 사용하는 것이 좋다. 표시어를 이용하여 이미지상에 링크로서 '목표'구역을 정의한다. 하이퍼링크로써 이미지상에 사각형이나 원형 그리고 다각형 구역을 정의할 수도 있다.

19. 투명이미지
사이트의 그래픽을 디자인할떄는 이미지의 배경을 항상 투명하게 유지시켜야한다. 이를 위해서는 GIF를 사용하거나 사이트상의 색상과 똑같은 색상을 이미지의 배경색상으로 사용하는 두가지 방법이 잇다. 이렇게 하면 다운로드 시간도 단축되는 효과도 있다.

20. 애니메이션 디자인
사이트에 사용할 애니메이션 GIF를 디자인할 경우, 이의 프레임수를 최소한도로 줄이는것이 좋다. 그리고 사이트에정말 없어서는 안될 경우를 제외하면 사용하지말자. 고정GIF로도 같은 효과를 낼수있을지 생각해보고 결정한다.



자료출처:  http://www.computerarts.co.kr/


profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/webtip/13980/70b/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

profile
title: [ani]깜빡이는 표정빽짱구 (13981)

2004.07.13 19:01:13

작성자
근데 솔직히 요즘에 256컬러로 모니터 쓰는 사람이 몇프로나 될까요?
100%중에 1%로도 안될듯 싶은데
List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
86 이전, 다음 버튼이 있는 달력 title: [ani]깜빡이는 표정빽짱구 2004-04-22 16 3001
85 금주가 이번해에 몇번째 주인지 알려주기 title: [ani]깜빡이는 표정빽짱구 2004-04-22 14 3214
84 년도,월,일,시간 표시하기 title: [ani]깜빡이는 표정빽짱구 2004-04-22 12 3115
83 best of best 클릭해서 윈도우창 최소화 하기 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-22 24 3652
82 입력한 주민번호로 나이와 성별 알아내기 title: [ani]깜빡이는 표정빽짱구 2004-04-22 10 6312
81 메뉴를 윈도우버튼처럼하기 title: [ani]깜빡이는 표정빽짱구 2004-04-22 13 2547
80 웹디자이너가 되기위한 기본이론 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-20 13 2634
79 로딩속도 빠르게 하기 title: [ani]깜빡이는 표정빽짱구 2004-04-20 14 2920
78 세계 시간보기 title: [ani]깜빡이는 표정빽짱구 2004-04-18 16 3607
77 버튼만들기 (다른이름으로 저장) title: [ani]깜빡이는 표정빽짱구 2004-04-18 11 2672
76 링크된곳 점선없애기 2 title: [ani]깜빡이는 표정빽짱구 2004-04-18 19 2445
75 best of best 링크점선 없애기 [2] title: [ani]깜빡이는 표정빽짱구 2004-04-18 24 3662
74 스크립트 프롬프트로 배너 달기 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-18 13 3370
73 [나야나] 계정에 알ftp로 파일 올리는 방법 title: [ani]깜빡이는 표정빽짱구 2004-04-12 16 3750
72 best of best html 색상표 title: [ani]깜빡이는 표정빽짱구 2004-04-11 25 3724
71 자기홈에 머문시간 상태표시줄에 표시하기 title: [ani]깜빡이는 표정빽짱구 2004-04-07 19 2527
70 한영전환 변환키 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-05 15 3170
69 연애인뉴스 달기 [1] title: [ani]깜빡이는 표정빽짱구 2004-04-01 13 3505
68 포인트에 따른 자동레벨변경 title: [ani]깜빡이는 표정빽짱구 2004-03-29 16 2261
67 계산기 title: [ani]깜빡이는 표정빽짱구 2004-03-25 9 2241