훌륭한 웹 디자인에서 해야 할 일과 하지 말아야 할 일

이 가이드를 따르면 특히 웹 디자인을 사용하려는 경우 매우 귀중한 웹 디자인 리소스가 될 것입니다. 웹사이트 개발 소프트웨어 미래에. 경험이 없는 사람부터 경험 있는 사람까지 이 가이드는 모든 사람을 위한 내용을 담고 있습니다.

훌륭한 웹 디자인의 과정 우리 모두가 같은 입장에 있는지 확인하기 위해 "웹 디자인"에 대한 기본 정의부터 시작하겠습니다. Wikipedia에 따르면 웹 디자인은 다음과 같습니다.

“웹 브라우저에서 해석하고 그래픽 사용자 인터페이스로 표시하기에 적합한 마크업 언어 형태로 인터넷을 통해 전자 미디어 전달을 개념화, 계획, 모델링 및 실행하는 프로세스” .

웹 디자인 과정은 연구 논문을 작성하는 과정에 비유될 수 있습니다. 개념화/계획 단계에서는 웹 사이트의 탐색 구조를 설명하는 흐름도(개요)가 생성됩니다. 모델링 단계에서는 웹 사이트의 각 섹션에 대한 골격 레이아웃을 보여주는 정적 와이어프레임(초안)이 생성됩니다. 와이어 프레임이 생성된 후 그래픽, 색상 및 텍스트를 사용하여 와이어 프레임의 레이아웃을 기반으로 웹 페이지 디자인을 만듭니다. 실행 단계에서는 디자인을 웹 브라우저에서 지원하는 형식으로 변환하고 텍스트와 콘텐츠를 추가하며 마지막으로 웹 사이트가 전 세계가 볼 수 있도록 인터넷에 라이브로 게시됩니다(최종 초안).

디자인 프로세스의 세 단계는 모두 똑같이 중요합니다. 많은 웹 디자이너는 시간을 절약하기 위해 또는 그것이 필요하지 않다고 생각하기 때문에 단계를 건너뜁니다. 그러나 목표가 성공적인 디자인과 존경받는 웹사이트를 만드는 것이라면 세 단계가 모두 필요합니다. 세 단계를 사용하더라도 웹 디자이너가 저지를 수 있는 실수가 많아 품질이 낮고 사용자 친화적이지 않은 웹 사이트가 만들어지게 됩니다. 이제 나쁜 웹 디자인 관행을 정리하고 좋은 관행으로 다시 채워야 할 때입니다.

1단계: 개념화 및 계획
이 단계는 다른 두 단계보다 더 자주 건너뜁니다. 대부분의 작가는 연구 논문의 개요를 작성하는 것을 좋아하지 않으며 대부분의 웹 디자이너도 순서도 작성을 좋아하지 않습니다. 게으르지 마십시오. 노력을 기울이고 웹사이트를 계획한다면 웹 디자인 과정이 순조롭게 진행될 것이며 도중에 발생하는 실수도 줄어들 것입니다.

웹사이트를 효과적으로 개념화하고 계획하려면 다음과 같은 몇 가지 사항이 필요합니다.

• 뇌
• 펜과 종이
• (선택 사항) 흐름도 소프트웨어
• 웹사이트의 다양한 섹션에 대한 일반적인 아이디어

시작하려면 펜과 종이를 쥐거나 즐겨 사용하는 순서도 소프트웨어를 실행하세요. 우리는 Mac OS X용 OmniGraffle Professiona를 사용합니다. 라이센스당 150달러지만 정기적으로 웹사이트를 만드는 경우 그만한 가치가 있습니다. PC를 사용한다면 SmartDraw는 사용할 수 있는 훌륭한 무료 순서도 소프트웨어입니다. 하지만 펜과 종이는 잘 작동합니다.

순서도를 만드는 방법에는 여러 가지가 있습니다. 이 기사의 시간과 길이를 위해 가장 기본적인 방법을 보여 드리겠습니다. 플로우차트에 대해 자세히 알아보려면 Google 또는 Yahoo에서 플로우차트를 검색하세요.

Chromatic Sites를 개념화할 때 작성한 흐름도를 확인하세요. (1) 순서도 상단에는 당사 웹사이트의 이름이 기재되어 있습니다. (2) 다음으로 웹사이트의 각 주요 섹션인 홈, 정보, 서비스를 포함합니다. 이 섹션은 웹사이트의 기본 탐색입니다. 각 섹션의 이름은 전적으로 웹사이트의 콘텐츠에 따라 달라집니다. 방문자가 웹사이트를 탐색할 때 부담을 느끼지 않도록 가능한 한 적은 수의 섹션을 사용하십시오.

(3) 다음으로, 각 기본 페이지에 나열될 보조 페이지(하위 섹션)를 모두 추가합니다. 홈에는 전문 웹 디자인, 웹 개발, 검색 엔진 최적화가 포함되어 있습니다. 보조 탐색은 기본 탐색보다 더 설명적이어야 합니다. 웹 사이트의 탐색 계층 구조가 깊어질수록 각 레이블은 더 자세히 설명되어야 합니다.

도스

• 적을수록 좋습니다. 기본 섹션 수를 최소한으로 유지하세요. 우리는 웹사이트에서 6개의 섹션을 사용하는데, 이는 충분합니다.
• 펜과 종이를 사용하든, 순서도 소프트웨어를 사용하든, 가능한 한 깨끗하고 정리된 상태를 유지하십시오. 귀하(및 귀하와 함께 일하는 모든 사람)만이 순서도를 사용할 수 있지만 여전히 의미가 있어야 합니다. - 기본 섹션에서는 더 넓은 용어를 사용해야 하고, 2차 및 3차 용어는 더 설명적이어야 합니다.

돈츠
순서도를 만드는 것은 매우 간단합니다. 그러나 쉽게 저지를 수 있는 몇 가지 실수가 있습니다.

• 전체 웹 사이트가 하나의 좁은 주제에 초점을 맞추지 않는 한 기본 탐색에 매우 설명적인 용어를 사용하지 마십시오. 동일한 페이지에 여러 주제를 묶으려고 하지 마십시오. 이러한 주제에 대한 일반 섹션을 만들고 해당 섹션에서 하위 섹션을 만듭니다. 이렇게 하면 하위 섹션(설명) 웹 페이지가 검색 엔진(Google, Yahoo, MSN, Ask)에서 더 나은 순위를 가질 가능성이 높아집니다. 간결하고 설명이 포함된 순서도를 만들었으면 두 번째 단계로 이동할 준비가 된 것입니다. 웹 디자인 프로세스 중:

2단계: 모델링
모델링 단계에서는 정적 "와이어프레임" 모형이 생성됩니다. 각 모형은 웹 사이트에 포함될 각 웹 페이지 레이아웃의 기본 뼈대를 보여줍니다. 이 단계는 디자인에서 다양한 요소가 어디에 배치될지에 대한 아이디어를 제공하기 때문에 중요합니다. 이러한 요소 중 일부는 다음과 같습니다.

• 심벌 마크
• 탐색 메뉴
• 함유량
• 이미지, 비디오

이러한 모형을 만들려면 펜과 종이 또는 선호하는 모형 소프트웨어를 사용할 수 있습니다. 이전에는 Photoshop을 사용했지만 최근에는 OmniGraffle Professional을 사용하고 있습니다. OmniGraffle은 Photoshop만큼 리소스를 많이 사용하지 않으며 이를 통해 와이어프레임 모형을 훨씬 빠르게 조립할 수 있습니다.

또한, 웹 사이트에 표시될 모든 페이지를 모형화하고 있는지 확인하기 위해 수시로 참조해야 하므로 생성한 순서도가 근처에 있는지 확인하십시오.

다음은 와이어프레임 모형이 어떻게 보여야 하는지에 대한 예입니다. 보시다시피 색상이나 그래픽이 포함되어 있지 않습니다. 이것이 바로 와이어프레임 모형이 되어야 하는 방식입니다. 즉, 디자인의 골격 레이아웃입니다. 목적은 웹페이지의 각 요소가 어디에 배치될지에 대한 일반적인 아이디어를 가질 수 있도록 하는 것입니다.

우리는 일반적으로 왼쪽 위에서 시작하여 맨 아래로 내려갑니다. 와이어프레임이 보이는 구체적인 방법은 없습니다. 너의 상상력을 사용해라. 그러나 와이어프레임을 생성할 때 웹사이트의 가장 중요한 요소(로고, 탐색 메뉴, 콘텐츠 배치, 이미지/비디오 배치)를 포함하는 것을 잊지 마십시오.

일부 페이지가 동일한 레이아웃을 사용하는 경우 해당 페이지 전체를 모형화할 필요는 없습니다(물론 가능하지만). 귀하의 웹사이트에 있을 고유한 레이아웃을 모형화하세요. 나중에 스스로에게 감사하게 될 것입니다.

할 일

• 모든 고유 페이지를 모형화하십시오.
• 중요한 요소(로고, 탐색, 콘텐츠 배치, 이미지/비디오 배치)를 포함합니다. - 위에서 시작하여 아래로 작업합니다. - 모든 페이지를 모형화하는 것을 잊지 않도록 1단계에서 만든 순서도를 참조합니다. - 저장, 저장, 저장 – 컴퓨터의 모든 항목과 마찬가지로 10분마다 모형을 저장합니다.
• 깔끔하고 사용자 친화적인 레이아웃에 중점을 둡니다. - 요소에 라벨을 지정하여 3단계에서 참조할 때 요소가 무엇인지 잊지 않도록 합니다. 실행 - 다른 웹 사이트를 영감으로 사용합니다. 다른 사이트의 요소를 가져와서 자신의 것으로 만드는 데 아무런 문제가 없습니다('하지 말아야 할 것' 참조).

돈의

• 그래픽이나 색상을 포함하지 마십시오(다음 단계를 위한 것입니다). 모형을 너무 "바빠지게" 만들지 마십시오. 깨끗하고 체계적이며 사용자 친화적인 레이아웃에 집중하세요. 이 단계를 건너뛰지 마세요. 이는 첫 번째와 마지막만큼 중요합니다. 다른 웹사이트에서 요소를 가져온 경우 표절하지 않도록 하세요. 다른 웹사이트에서 영감을 받아 디자인의 특정 요소를 만드는 것과 노골적으로 레이아웃과 색상을 뜯어내는 것에는 차이가 있습니다.

3단계: 실행
세 번째이자 마지막 단계인 실행에서는 1단계와 2단계의 계획이 결합되어 라이브 대화형 웹 사이트를 만드는 데 도움이 됩니다.
세 번째 단계는 1) 그래픽 만들기 2) 콘텐츠 만들기 그리고 마지막으로 3) 웹 디자인을 이미지에서 웹 브라우저가 웹 사이트를 세상에 표시하는 데 사용하는 코드로 변환하기 때문에 지금까지 가장 시간 집약적입니다.

세 번째 단계에 도달하면 다음 사항에 대한 명확한 아이디어를 갖게 됩니다.

• 방문자가 한 장소에서 다른 장소로 이동하는 방법(1단계, 순서도) - 웹 페이지 배치 방법(2단계, 와이어프레임 모형)

이 두 가지에 대해 명확한 개념이 없다면 1단계와 2단계로 돌아가 계속해서 개발해 보세요. 웹사이트 디자인을 위한 명확하고 간결한 전투 계획을 세웠을 때 세 번째 단계가 가장 쉽다는 것을 알게 될 것입니다.

펜과 종이를 버리세요
3단계에서는 색상과 그래픽을 사용하여 웹사이트 레이아웃을 생성하므로 Photoshop이나 다른 이미지 편집 프로그램을 사용해야 합니다.

일반적으로 “홈” 페이지(색인)를 먼저 만들기 시작합니다. 2단계에서 생성한 와이어프레임을 생성하는 각 페이지의 템플릿으로 사용하세요. 그러나 단색 상자를 사용하는 대신 그래픽, 색상 및 텍스트를 대신 사용하십시오. 각 페이지는 디자인 과정의 마지막 단계이므로 인터넷에서 원하는 모습으로 정확하게 보여야 합니다.

탐색을 위한 배경을 포함해야 합니다. 하지만 실제로 이미지에 텍스트를 추가하지는 마세요. CSS(Cascading Style Sheet)를 사용하여 변환할 때 탐색은 이미지가 아닌 텍스트 형식이어야 합니다. 이미지는 검색 엔진에서 크롤링할 수 없습니다. 탐색에 사용된 키워드는 검색 엔진 결과 페이지에 색인화되지 않으므로 웹사이트를 찾을 수 있는 사람이 줄어듭니다.

디자인이 만족스럽고 인터넷에 게시할 준비가 되었다고 생각되면 CSS 기반 레이아웃을 만들 수 있도록 디자인을 분리할 차례입니다. 레이아웃을 CSS로 변환하거나 CSS로 웹사이트를 마크업하는 방법에 대한 자세한 내용을 보려면 w3schools.com을 방문하세요. 인터넷을 둘러본 후에도 괜찮은 이미지-CSS 튜토리얼을 찾을 수 없었습니다. 앞으로 몇 주 안에 우리에게서 하나를 기대해 주세요. 테이블 레이아웃은 과거의 일이므로 디자인을 CSS로 변환하는 것은 매우 중요합니다.

다음은 2단계에서 모형화한 레이아웃의 거의 완성된 웹사이트의 예입니다. 이는 웹 브라우저에서 직접 가져온 것이며 보시다시피 이제 로고, 색상, 예쁜 탐색 시스템, 바닥글, 가장 중요한 것은 깨끗하고 체계적인 레이아웃입니다.
1단계와 2단계의 계획 덕분에 레이아웃이 잘 정리되어 있고 사용하기 쉽습니다.

도스

• 2단계에서 생성된 템플릿을 참조하세요. 원래 레이아웃에서 벗어나는 것은 괜찮지만 그렇게 할 필요는 없습니다.
• 실제 디자인을 만들기 전에 조사를 좀 해보세요. 다른 사이트에서 아이디어를 얻어 자신만의 것으로 만들 수 있습니다(표절하지 않음)
• 웹 페이지의 최종 모양을 만들기 위해 색상과 그래픽을 포함합니다. - CSS(Cascading Style Sheets)를 사용하여 디자인을 이미지에서 웹 브라우저가 이해할 수 있는 마크업으로 변환합니다. - 하이퍼링크로 페이지를 코딩할 때 1단계의 순서도를 참조합니다. 모든 페이지의 웹사이트 링크 전체(또는 대부분)를 포함하는 드롭다운 메뉴를 사용하는 것이 더 좋습니다. 이렇게 하면 탐색이 더 쉬워지고 검색 엔진 스파이더가 들를 때 페이지를 더 쉽게 크롤링할 수 있습니다. CSS 드롭다운 메뉴를 얻을 수 있는 가장 좋은 곳은 DynamicDrive.com입니다. Photoshop이나 사용하는 이미지 편집 소프트웨어에서 작업하는 동안 디자인을 마무리하세요. 마크업(코드)으로 변환된 후에는 디자인을 변경하는 것이 어려울 수 있습니다.

돈츠

• CSS로 변환할 때 탐색 메뉴에 텍스트를 포함하지 마세요. 이미지 텍스트 대신 검색 엔진 스파이더가 읽을 수 있는 일반 텍스트를 사용하세요.
• 변환할 때 테이블을 사용하지 마십시오. CSS에 관한 책을 구입해야 하더라도 그만한 가치가 있습니다. 테이블이 죽었어
• 단지 시간을 절약하기 위해 처음 두 단계를 건너뛰지 마십시오. 웹 디자인 프로세스의 시작부터 시작하면(끝이 아니라) 웹사이트가 더 좋아질 것입니다.
• CSS를 위해 이미지를 분할할 때 이미지를 압축하는 것을 잊지 마세요. 대용량 이미지 파일로 인해 웹사이트 로딩이 느린 것보다 더 나쁜 것은 없습니다. Photoshop에는 "웹에 최적화된 상태로 저장" 옵션이 있습니다(CS3 - "웹 및 장치용으로 저장").

프로세스가 완벽해집니다
이 기사에 설명된 것과 같은 웹 디자인 프로세스를 따르면 잘 구성되어 있고 쉽게 탐색할 수 있으며 매우 사용자 친화적인 웹 사이트를 만들 가능성이 높아집니다. 현실을 직시합시다. 방문자가 귀하의 웹사이트를 탐색하는 동안 길을 잃거나 혼란스러워지면 뒤로 버튼을 눌러 보다 사용자 친화적인 웹사이트를 찾을 수도 있습니다. 사람들은 웹사이트에서 길을 찾을 때 생각하는 것을 좋아하지 않습니다. 그들이 생각하게 만들지 마세요. 1단계부터 3단계까지 웹 사이트를 계획하여 생각하면 더 많은 사람들이 귀하의 웹 사이트를 방문하는 것을 좋아하게 될 것입니다.