콘텐츠

• 단계로
• 2 가지 방법 중 1 : 3 가지 기본 규칙
• 2 가지 방법 중 2 : 지침
• 팁
• 경고

훌륭한 웹 사이트를 디자인하는 것은 어려운 작업처럼 보일 수 있지만 기본을 염두에두면 프로세스가 흥미롭고 재미 있다는 것을 알게 될 것입니다. 외모 이상에 관한 것입니다! 사람들이 계속해서 방문 할 웹 사이트를 디자인하는 데 도움이되는 기본 사항과 몇 가지 일반 지침을 보여 드리겠습니다.

단계로

2 가지 방법 중 1 : 3 가지 기본 규칙

1. 규칙 1 :고객의 말을 들어보세요. "지금 나를 탐험하세요!"라고 외치는 사이트를 위해 풍부한 검정, 세련된 글꼴 및 밝고 예술적인 색상으로 "우주 역사상 세계 최고의 웹 사이트"를 디자인하고있을 수 있습니다. 불행히도 고객은 밝은 분홍색과 주황색 글자가있는 주황색 메뉴 모음을 원했습니다. 당신은 해고 당했고, 당신의 최고의 웹 사이트 (클라이언트가 권한을 가지고 있음)는 백업 디스크 어딘가에 있으며, 아무도 다시는 보지 못했습니다.
   • 고객의 기업 정체성을 연구하십시오. 고객이 좋아하는 웹 사이트 몇 개를 보여 주도록합니다. 이것은 그들이 좋아하는 것에 대한 아이디어를 줄뿐만 아니라 당신이 생각하지 못했던 몇 가지 디자인 아이디어를 줄 것입니다.
   • 주황색과 분홍색 웹 사이트에 대해 농담한다고 생각하신다면이 멋지고 정교한 사이트를 고려해보세요.
2. 규칙 # 2 :청중과 그들이 찾고있는 것을 알고 그에 따라 디자인을 조정하십시오.. 사람들이 웹 사이트를 가지고있는 이유는 다른 사람들이 웹 사이트를보기를 원하기 때문입니다. 정보를 제공하거나 상업적 일 수 있으며 특정 대상 고객을 즐겁게 할 수 있습니다. 디자이너로서 당신의 임무는 당신이 누구를 위해 디자인하고 있는지 알고 그들이 거기에 도착했을 때 페이지에 계속 유지하는 것입니다.
   • "좋아 보이면 그대로있을거야"라고 생각할 수도 있습니다. 그러나 반드시 그럴 필요는 없습니다. 예를 들어 부동산을 생각해보십시오. 깔끔하고 재미있는 디자인의 사이트입니다. 눈에 띄는 위치에 링크가있는 열린 모양, 밝은 색상 및 현대적인 와이드 스크린 형식을 제공하는 많은 공백이 있습니다.
   • 이제 같은 영역에서 부동산을 판매하는이 접근 방식을 살펴보십시오. 어수선하고 매우 바쁘고 흐릿한 색상과 광고로 덮여 있습니다.
   • 집을 찾는 사람들에게 어느 것이 더 효과적일까요? 맞아요 주택! 사람들이 '산타 모니카의 판매용 주택'을 검색 할 때 사이트가 어떤 모습인지는 신경 쓰지 않습니다. 그들은 부동산 중개인에 대해 읽거나 도시의 예쁜 사진을보고 싶지 않습니다. 그들은 집을보고 싶어합니다.
3. 규칙 # 3 :자신의 말을 들어라. 고객이 원하는 것을 이해하고 시장이 무엇을 찾고 있는지 알고 있습니다. 이제 드디어 디자이너 인 당신에게 주목할 시간입니다!
   • 선택한 그래픽 소프트웨어에서 템플릿을 만듭니다. 페이지의 요소를 다른 레이어에 만듭니다 (그러면 전체 템플릿을 파괴하지 않고 나중에 조정할 수 있음). 이러한 요소는 다음과 같습니다.
     • 머리글. 이것은 사이트의 모든 페이지에서 동일한 요소입니다. 헤더는 사이트의 제목과 로고, 웹 사이트의 다른 부분에 대한 링크 (예 : 정보, 연락처 등)로 구성됩니다. 시각적으로 그리고 실질적으로 이것은 모든 것을 하나로 묶을 것입니다. 메뉴 표시 줄의 첫 번째 버튼을 홈페이지로 다시 연결하는 것이 좋습니다.
     • 예를 들어 Apple을 살펴 보겠습니다.
     • 대부분의 Apple 제품과 마찬가지로 그들의 홈페이지는 매우 깨끗하고 직관적 인 디자인을 가지고 있습니다. 각 버튼에 대한 논리적 주제와 검색 필드가있는 상단의 메뉴 표시 줄에 유의하십시오. 사이트에서 지원하는 경우 항상 좋은 생각입니다. 이제 몇 가지 요소를보기 위해 버튼 중 하나 인 iPad의 랜딩 페이지를 살펴 보겠습니다.
     • 메뉴 표시 줄은 iPad 버튼을 어둡게해야만 변경됩니다.
     • 랜딩 페이지의 제목은 큰 검정색 글자로 표시됩니다.
     • 제품에 대해 자세히 알아볼 수 있도록 새 하위 메뉴가 나타납니다. 이 버튼 중 하나를 클릭하면 각 페이지가 주제에 따라 새로운 콘텐츠를 제공하지만 레이아웃과 디자인이 동일하다는 것을 알 수 있습니다.
     • 종종 메뉴 표시 줄의 각 주요 주제에는 사용자가 입력해야하는 다른 부제목이 있습니다. 두 번째 메뉴 모음을 만드는 대신 Musicians Friend의 다음 예제와 같은 팝업 메뉴를 사용할 수 있습니다.
     • 사이드 바. 이는 사이트의 여러 페이지에 표시되지만 반드시 전부는 아닙니다. 컨텍스트에 따라 결정됩니다. 그러나 이는 매우 중요한 요소이며 너무 복잡하지 않고 직관적으로 설계되어야합니다. 메뉴 표시 줄과 달리 사이드 바의 내용은 매우 동적 일 수 있습니다. 부동산 마케팅 담당자 Trulia의 두 가지 사이드 바를 확인하십시오. 첫 번째는 구매자를위한 것입니다.
       
       

2 가지 방법 중 2 : 지침

1. 좋은 사용자 인터페이스를 디자인하십시오. 제목, 사이드 바, 로고, 이미지 및 텍스트와 같은 웹 사이트의 다양한 요소를 모든 페이지의 동일한 위치에 배치하여 사이트를 탐색하고 직관적으로 만듭니다.
   • 모든 페이지 상단에 동일한 헤더 유지. 사이트의 콘텐츠가 많은 반복 요소를 허용하는지 여부에 관계없이 모든 페이지의 상단이 동일해야합니다.
   • 디자인에 논리 사용. 단일 페이지의 요소는 중요도 또는 주제별로 논리적으로 정렬되어야합니다. 사이트의 다른 페이지도 마찬가지입니다.
2. 일관된 스타일을 만드십시오. 레이아웃이 사이트 구조적 일관성을 제공해야하는 경우 스타일은 주제별 조화를 제공해야합니다.
   • 두세 가지 주요 색상을 고수하고 잘 어울리는 지 확인하십시오.
   • 너무 많은 글꼴 스타일이나 크기를 사용하지 마십시오. 몇 개를 번갈아 사용하려면 각 페이지에서 동일한 방식으로 사용하십시오.
   • CSS (Cascading Style Sheets)를 사용하여 균일 한 스타일을 유지하고 각 페이지로 개별적으로 이동할 필요없이 전체 웹 사이트에서 요소를 쉽게 변경할 수 있습니다.
3. 가독성을 극대화합니다. 텍스트를 더 쉽게 읽을 수 있도록 더 작은 부분으로 분할 할 수 있습니다.
   • 자막과 적절한 간격을 사용하여 각 부분을 구분하십시오.
   • 굵은 글자 나 다른 크기를 사용하여 주제의 계층과 중요도를 표시합니다.
   • 텍스트를 어떻게 취급하는지주의하십시오. 글꼴을 너무 작게 만들지 말고 줄 간격을 늘려 큰 텍스트 청크를 더 쉽게 읽을 수 있도록합니다. 큰 텍스트 패치는 읽기가 더 어렵습니다. 더 작은 단락으로 나누십시오.
4. 웹 사이트를 누구나 쉽게 읽을 수 있도록 만드세요. 표준 HTML을 사용하고 하나의 브랜드 또는 브라우저 버전에서만 사용할 수있는 태그, 기능 및 플러그인을 피하십시오.
   • 대부분의 최신 브라우저와 컴퓨터는 복잡한 이미지를 처리 ​​할 수 ​​있지만 웹용으로 이미지를 축소하고 최적화하면 모든 것이 더 매끄럽게 보입니다. 속도의 중요성과 품질의 중요성을 비교하십시오.
5. 웹 사이트를 테스트하세요. 확인하십시오 모든 링크가 작동합니다 예상대로 이미지가 올바르게 표시됩니다.
   • 대상 청중의 구성원이 디자인의 명확성과 사용 용이성을 테스트하고 웹 사이트에 대한 피드백을 제공하여 일부 사용자 테스트를 구성 할 수 있습니다.
6. 웹 사이트를 게시하세요. 아직 구매하지 않았다면 도메인 이름을 구매하세요. 링크가 계속 작동하는지 주기적으로 확인하고 방문자가 이메일로 보내는 제안을 들어보십시오.

팁

• 자신의 개인적인 비전이나 다른 사이트에서 본 것들을 기반으로 레이아웃을 자유롭게 디자인 할 수 있지만 기성품 디자인을 구입하는 것이 더 쉬울 수 있습니다.
• 귀엽고 특별한 그림으로 방문객을 폭격하지 마십시오. 플래시 애니메이션, 밝은 색상, 패턴이있는 배경 및 페이지로드시 자동으로 재생되는 음악은 90 년대에 재미있는 실험 이었지만 이제는 사용자를 놀라게 할 것입니다. 가독성을 극대화하기 위해 텍스트 색상과 대조되는 단순한 배경을 사용합니다.
• 항상 CSS를 사용하여 단락 간격을 최적화 할 수 있습니다.
• 청각 또는 시각 장애가있는 방문자를 위해 비디오 자막, 오디오 스크립트 작성 및 접근성 메시지를 추가 할 수 있습니다. 테이블은 정보를 정리하는 효율적인 방법이 될 수 있지만 화면 판독기 소프트웨어를 사용하는 시각 장애인 방문자는 올바른 순서로 자료를 듣지 못할 수 있습니다.
• 방문자가 잉크를 절약 할 수 있도록하십시오 : 인쇄 페이지에 별도의 스타일 시트를 사용하십시오.
  • 인쇄 매개 변수를 설정할 때 배경 이미지를 끕니다.
  • 흰색 배경에 검정색 텍스트를 사용하십시오.
  • 메뉴 표시 줄과 불필요한 이미지를 제거하십시오.

경고

• 표절을 피하고 모든 저작권법을 준수하십시오. 온라인에서 찾은 임의의 이미지 또는 승인없이 구조적 요소를 포함하지 마십시오. 사이트에서 사용하는 모든 것은 합법적이고 윤리적이어야합니다.