사람들이 왜 내 사이트가 끔찍해 보인다고 계속 말합니까?

웹 사이트를 개발했고 최근에 일자리를 찾고있었습니다. 실제로 모든 면접관은 잠깐 살펴본 후 내 사이트가 끔찍하게 디자인되었다고 말했지만 개념은 마음에 들었습니다. 필자는 소프트웨어 엔지니어라고 언급해야하지만 실제로 디자인 부분도 제대로 구하려고합니다. 나는 그것을 재 설계하려고 노력했지만, 무엇이 바뀌어야하는지 전혀 모른다.

지금 모습은 다음과 같습니다.

내 사이트에 특정한 팁이나 일반적인 사이트 디자인을 개선하는 방법에 대해 정말 감사드립니다 (사이트 디자인 방법을 설명하는 사이트를 방문했지만 도움이되지 않는 것으로 보입니다).

편집 1 : 내가 말했듯이 사람들은 기능을 소개하기 전에 그것을 보아서 만 나쁜 인상을받는 경향이 있습니다. 내가 선택한 색상이나 레이아웃에 문제가 있다고 생각합니다. 또한 특정 이야기가 문학 학생에게 교육적이고 특정 알고리즘이 소프트웨어 학생에게 도움이되는 것처럼 특정 사이트 디자인이 디자이너에게 도움이 될 수 있다고 생각했습니다. 감사.

참고 : 기능 : 문제가되는 경우 다음 사이트에서 목표를 달성하십시오 (매우 간단히). 사용자가 주제를 추가 할 수 있으며 각 주제에 대해 답변 과 함께 질문을 추가 할 수 있습니다 . 이 사이트는 사용자가 결과를 가져 와서 비교할 수 있도록 "테스트"및 "퀴즈"를 만듭니다.

편집 2 : 여기 또 다른 인쇄 화면이 있습니다.

편집 3 : 명확히하기 위해이 스크린 샷이 아닌 것은 내 방문 페이지입니다. 주제별 컨텐츠 페이지입니다.

우선이 답변의 모든 것이 보편적 인 진실이 아니라 MHO임을 강조하고 싶습니다.).

소프트웨어 엔지니어는 모든 프로젝트에서 명확하고 명확하게 정의 된 구조 (순서)를 갖는 것이 중요하다는 것을 알고 있습니다. "시각적"예술과 디자인도 마찬가지입니다. 디자인을 "시각적 캡슐화"로 보는 경향이 있습니다. 디자이너는 대상 고객에게 전달하려는 정보의 구조를 알고 있습니다. 예를 들면 : 그는 책을 디자인합니다. 그는이 책이 각 장과 각 장으로 나누어 져 있다는 것을 알고 있습니다. 그는 주요 문제에 일부 메모 (여백 메모, 각주, 보조 노트)로 주석이 달렸다는 것을 알고 있습니다. 이제 그는이 구조를 "보이게"하기 위해 자신의 "무기"를 사용해야합니다. 그는 하나의 글꼴 크기와 모양을 사용할 수 있으며 모든 연속 된 페이지를 글리프 모양으로 채울 수 있지만 독자는 포함 된 정보 구조를 이해하기 위해 모든 것을 읽고 해석하고 이해해야합니다. 설계자는 또한 다양한 정보의 중요성 / 수준을 독자에게 "제안"할 수 있습니다. 트릭 중 하나는 글꼴 크기를 사용하여 제시된 "데이터"의 그라데이션을 표시하는 것입니다. 이 작업을 수행하면 독자는 주요 내용과 각주를 구분하기 위해 텍스트를 읽을 필요가 없습니다. 정보의 중요성과 상호 "위치"는 시각적으로 "설명"됩니다. 독자는 정보를 쉽게“폐쇄”할 수 있습니다. 시각적 영역에서 발생하는 일종의 직렬화 / 직렬화 해제 프로세스로 볼 수도 있습니다 (추상 정보는 "시각적"공간으로 캐스트 됨). 그것은 greeeeat 단순화이지만 초보자에게는 충분하다고 생각합니다. 이 작업을 수행하면 독자는 주요 내용과 각주를 구분하기 위해 텍스트를 읽을 필요가 없습니다. 정보의 중요성과 상호 "위치"는 시각적으로 "설명"됩니다. 독자는 정보를 쉽게“폐쇄”할 수 있습니다. 또한 시각적 영역에서 발생하는 일종의 직렬화 / 직렬화 해제 프로세스로 볼 수도 있습니다 (추상 정보는 "시각적"공간으로 캐스트 됨). 그것은 greeeeat 단순화이지만 초보자에게는 충분하다고 생각합니다. 이 작업을 수행하면 독자는 주요 내용과 각주를 구분하기 위해 텍스트를 읽을 필요가 없습니다. 정보의 중요성과 상호 "위치"는 시각적으로 "설명"됩니다. 독자는 정보를 쉽게“폐쇄”할 수 있습니다. 시각적 영역에서 발생하는 일종의 직렬화 / 직렬화 해제 프로세스로 볼 수도 있습니다 (추상 정보는 "시각적"공간으로 캐스트 됨). 그것은 greeeeat 단순화이지만 초보자에게는 충분하다고 생각합니다. 시각적 영역에서 발생하는 일종의 직렬화 / 직렬화 해제 프로세스로 볼 수도 있습니다 (추상 정보는 "시각적"공간으로 캐스트 됨). 그것은 greeeeat 단순화이지만 초보자에게는 충분하다고 생각합니다. 시각적 영역에서 발생하는 일종의 직렬화 / 직렬화 해제 프로세스로 볼 수도 있습니다 (추상 정보는 "시각적"공간으로 캐스트 됨). 그것은 greeeeat 단순화이지만 초보자에게는 충분하다고 생각합니다.

이제 디자인도 마찬가지입니다. 나는 개인적으로 그것을 어디에서보아야할지 모른다. 나는 모든 것을 읽고, 모든 것을 이해하고, 모든 것을 생각한 다음, 내가 생각하는 순서대로 물건을 다시 넣어야합니다. 그것은 독자로서 저에게 많은 일입니다. 여기에서 가장 중요한 것과 가장 중요하지 않은 것을 한 번에 정의하는 것은 어렵습니다. 내용을 이해하는 데 시간이 걸리더라도 특정 데이터에 대한 길을 찾는 데 도움이되는 시각적 인“랜드 마크”는 아직 없습니다. 생각하십시오 : 차를 많이두고 가면 기억 에 도움이되는“랜드 마크”를 찾고 있습니다차가있는 곳. 웹 사이트 사용 방법, 가장 자주 사용하는 옵션 / 링크 위치를 기억하는 방법에 대해 잠시 생각해보십시오. "사이트 상단에있는이 빨간색 로고에서 오른쪽으로 두 번째 사각형"으로 링크를 찾고 있지 않습니까? 읽지 않음 – 이미지 / 위치 만 기억합니다.

여기서 가장 큰 문제는 "추악함"이 아니라고 생각합니다. 중요도 그라데이션이 부족하다고 생각합니다. 귀하의 데이터를 통해 귀하의 웹 사이트 방문자를 "지도"하십시오. 그가 무엇을 먼저보고 싶어? 거기에서 어디로 가야합니까? 이렇게하면 "읽기 흐름"/ "워크 플로"를 만들 수 있습니다. 당신은 독자들이 따를 구체적인 길을 (어쩌면?;)) 유도합니다. 두 개의 경로가있는 경우 가능한 한 분리 된 경로를 만드십시오 (예 : 메뉴를 통한“경로”– 목차 / 주요 개요 / 구조 설명, 로그인 경로를 통한“경로”등). ). 이 문제를 해결하면 디자인이 확실히 향상 될 것이라고 생각합니다. 어쩌면 그것은“아름답게”되지 않을 것입니다. 그러나 적어도 그것은 더 접근하기 쉽고 이해하기 쉽고 부작용으로 미학적으로 더 즐거울 것입니다.

나는 그것이 당신에게 의미가 있기를 바랍니다 :).

내가 특히 마음에 들지 않는 몇 가지 사항은 다음과 같습니다.

• 이는 웹 사이트의 "백엔드"또는 "관리자"부분, 특히 "프론트 엔드"나 사람들이 보는 것보다는 일부 형태의 콘텐츠 관리 시스템과 비슷합니다. 특히 PhpMyAdmin이 떠 오릅니다.
• 사용중인 색상이 일치하지 않습니다. 로고 (내가 너무 비좁은 로고)에는 이미 약간의 색상이 있으므로 해당 색상을 사용하여 사이트의 색상 구성표를 개발할 수 있습니다. 이 색 구성표는 표의 밴딩, 링크의 색 등과 같은 것들에 적용되어야합니다.
• 대조되는 영상이 너무 많습니다. 나는 보통 디자인의 단순성과 표준화를 옹호한다. 그러나이 스크린 샷에서 다음을 볼 수 있습니다.
  • "Everything"상자는 딱딱한 직각 상자입니다.
  • 사이드 바 탐색은 둥근 모서리를 사용합니다.
  • 하위 주제는 방사형 그래디언트를 사용합니다.
  • 상자에 충분한 "패딩"이없는 경우 : "하위 주제"링크의 단어가 어떻게 비좁은 지 나타냅니다. 주변에 공간이 있으면 훨씬 좋아 보일 것입니다.

그런 다음 @thebodzio의 답변을 주의 깊게 읽어보십시오 . 매우 정확하기 때문입니다. 사이트를 처음 방문하는 사용자는 먼저 어디를 먼저보아야하는지 알기 어려울 수 있으며 이는 일반적으로 "나쁜"디자인의 표시입니다.

여기에 몇 가지 좋은 대답이 있으므로 몇 가지 구체적인 예를 지적하겠습니다. 나에게 페이지의 기본 구조는 괜찮아 보인다. 다른 사람들이 말했듯이 3 열 레이아웃은 수년간 웹 디자인의 필수 요소였습니다. 대부분의 문제는 그래픽 디자인에 있습니다.

"하위 주제"라는 상대적 중요성은 이상하게 보입니다.

• 제목이 "하위 주제"와 같은 것이어야합니까?

• 오른쪽에 있고 주제 헤더보다 더 중요합니다. 아마도 주제를 주제에 포함시켜 더 종속적 인 느낌을 줄 수 있을까요?

• "하위 주제"제목의 무게는 주제 빵 부스러기보다 무겁게 (더 중요하게) 보입니다.

그래픽 디자인의 경우 페이지의 모든 요소에 대한 기본 원칙에 대해 스스로에게 문의 할 수 있습니다.

• 대비 : 동일하지 않은 요소는 사용자가 즉시 구분할 수있을 정도로 다르게 표시되어야합니다.

• 반복은 : 만 보면 좋은 일 경우 디자인 이다 좋아 동일한 모양을. 즉, 일관성을 목표로합니다. 그것은 같은 채도와 밝기를 가지지 만 색조가 다양하거나 모든 표제에 그라디언트를 사용하거나 모든 그라디언트를 사용하지 않는 모든 배경의 형태를 취할 수 있습니다. 예를 들면 다음과 같습니다.

  • "하위 주제"배경은 그라디언트가있는 유일한 배경입니다 (버튼이 다른 것이므로 그라디언트가 다르게 보일 경우 대비가 나타납니다)

  • 왼쪽의 탐색 강조 표시에는 모서리가 둥글고 대부분의 다른 요소에는 모서리가 뾰족합니다.

  • "퀴즈 환경 설정"(잘못 잘못)의 색상이 로고에 표시되지 않아 다른 방법으로 색상을 시도한 것입니다. 책의 색상과 같은 페이지 요소의 색조를 얻으십시오.

(실제로 색상이 서로 어울리는 쉬운 방법이 있습니다. 단일 색상으로 시작한 다음 색조, 채도 또는 명도 중 하나만 변경하십시오.이 방법으로 생성 한 모든 색상은 함께 표시되어야합니다.)

• 정렬 : 정렬을 사용하면 요소가 흩어져 있고 일관성이없는 것처럼 보이지 않고 전체로 연결됩니다. 예를 들면 다음과 같습니다.

  • "기억하기"상자는 옆에있는 다른 텍스트보다 낮습니다.

  • "퀴즈 환경 설정"은 위의 주제 빵 부스러기보다 오른쪽에 있습니다.

  • 기본 설정은 가운데에 있고 다른 대부분의 본문은 왼쪽 정렬됩니다

• 근접성 : 개체를 더 가깝게 가져 오면 사용자의 마음에 개체가 그룹화되지만 개체 주위에 공간을 너무 적게두면 개체가 비좁고 개별 항목으로보기가 어렵습니다. 예를 들면 다음과 같습니다.

  • 주제 빵 부스러기 또는 하위 주제 주위에 공간이 없습니다 (제 생각에 이것은 그래픽 디자인이 완전히 개발되지 않았다는 것을 알려주는 가장 일반적인 기능 중 하나입니다)

  • 본문 제목 아래 단락 간격이 일치하지 않습니다

웹에는 디자인 원칙에 대해 더 많은 것이 있지만 가장 중요한 것 중 네 가지입니다.

사이트 디자인의 주요 문제는 사용자 인터페이스 디자인 과 마찬가지로 그래픽 디자인과 크게 다르지 않다고 생각합니다 . 특히 위의 스크린 샷을 볼 때 "내가 묻는 질문은" 멋지다, 무엇을 먼저 시도해야합니까? "가 아니라" 도대체이게 무엇이며 어떻게해야합니까? "

이는 엔지니어 (또는 다른 도메인 전문가)가 디자인 한 웹 사이트 및 기타 사용자 인터페이스의 일반적인 문제입니다. 시스템 사용 방법을 이미 알고 있으므로 필요한 모든 기능에 편리하게 액세스 할 수 있으면 모든 것이 정상입니다 . 아아, 이것은 종종 모든 기능이 똑같이 눈에 띄고 접근 가능하기 때문에 새로운 사용자에게 어디서 시작할지에 대한 단서가 거의 없습니다.

그래픽 디자인이 잘못되면 사용자 인터페이스가 혼란 스러울 수있는 반면 그래픽 디자인은 다른 인터페이스 요소의 의미와 관계를 명확하게하고 사용자의 눈을 가장 중요한 요소로 그려 사용자 인터페이스를 향상시킬 수 있습니다. 그러나 근본적으로 문제는 사용자에게 보여줄 것과 구조를 만드는 방법에 대한 것보다보기 좋게 만드는 것입니다.

자, 좀 더 구체적으로합시다. 내 첫 번째 조언은 간단합니다! 기본적으로 로고, 검색 창 및 2 개의 버튼 (두 번째 버튼이 불필요하다고 주장 할 수 있음)의 세 가지 요소가있는 Google의 원본 프론트 페이지 디자인 에서 영감을 얻을 수 있습니다 . 아, 그리고 몇 가지 더 많은 물건과 다른 페이지에 링크 - 분명히 작은 글꼴로 낮은 다운 됨으로써 보조 중요한 것으로 표시된 및 / 또는 회색 - 및 저작권 표시는 분명히 에 미묘한 힌트로 추가 페이지가 실제로 종료 된 사용자

또는 이름이 올 바르고 간단하지만 효과적인 프론트 페이지 디자인을 가진 다른 회사 인 Doodle을 살펴보십시오 . 편의상 프론트 페이지의 스크린 샷을 찍고 위에 빨간 낙서를 추가했습니다.

Doodle은 귀하와 같은 사이트가 기본적으로 사용자가 자신의 콘텐츠 (퀴즈, 이벤트 일정)를 디자인하고 다른 사용자가 해당 사이트와 상호 작용하도록 초대 할 수있는 프레임 워크이므로 귀하와 귀하를 비교하기에 매우 좋은 사이트입니다. 가장 큰 차이점은 디자인과 달리 Doodle 사용자는 사용자를 풀의 깊은 끝으로 던져서 싱크대 또는 수영을 기다리는 대신 사용자를 인터페이스로 부드럽게 안내하는 데 많은 노력을 기울입니다.

특히 내 낙서없이 그들의 첫 페이지를 보면, 그것에 관한 분명한 것은 작은 물건, 특히 관련이없는 물건이 얼마나 많이 있는지입니다. 물론, 페이지 하단에는 작은 메모와 링크가 많이 있지만, "접은 곳"아래에 있으며 새로운 사용자는 무시할 것입니다. 두 번째로 가장 눈에 띄는 것은 사용자가 가장 먼저 볼 수있는 큰 친근한 글자로 사이트의 내용을 설명하는 8 개의 단어입니다. 가장 눈에 보이는 것은 모두보기 쉽고 초대를 만드는 간단한 사진, 워크 플로우의 주요 단계에서, 큰 그래픽 보이고있다. 그 사이에는 사용자가 클릭하여 시작하도록 초대하는 큰 버튼이 있습니다.

실제로 페이지 상단에는 클릭 가능한 항목이 4 개뿐입니다 (로고 제외, 사용자가 원하는대로 클릭 가능하지만 첫 페이지로 다시 이동). 이벤트 예약 마법사에서 사용자가 바로 들어갈 수있을 정도로 확신 할 수없는 한 통조림 예제와 오른쪽 상단 모서리에 눈에 잘 띄지 않는 링크를 설정하여 기존 사용자를위한 팝업 로그인 대화 상자를 엽니 다. 그게 다야.

그렇다면 귀하의 사이트는 어떻습니까? 뭔가 나를 위해 밖으로 이동 스크린 샷의 첫 번째 일 수있는 적어도 큰 유형과 "내용 영역"의 모습의 중간에, 짧은 녹색 제목이 있습니다에서 가능 가치가보고합니다. 아아, 거기에 관심이 많지 않습니다. "주제 정보"섹션에는 작은 글씨로 표시되어야하는 사소한 메타 데이터가 있고, "하위 주제"섹션에는 (다른 유사한 페이지로 연결되는) 링크가 있습니다. 오른쪽 상단에있는 항목을 복제하려면 '자원'섹션이 비어 있습니다. 게다가, 모든 것을 읽은 후에도 나는 사이트가 무엇인지 또는 내가 할 수있는 일을 여전히 모릅니다.

사이트 에서 무엇을 할 수 있습니까? 글쎄, 당신은 내가 퀴즈를 만들고 응시할 수 있다고 말한다. 그래서 " 퀴즈를 가져 가라 "와 " 퀴즈를 만들어라 " 라고 말하는 크고 매력적인 링크 / 버튼을 프론트 페이지에 두는 것은 어떻습니까? (새 사용자는 퀴즈를 만들 때보 다 퀴즈를 낼 가능성이 높지만 첫 페이지에 두 번째 사용자를 포함 시키면 사용자는 적어도 그렇게 할 수 있음을 사용자에게 알릴 수 있기 때문에 전자가 더 두드러 져야합니다.) 몇 마디에서 짧은 단락에 이르기까지 사이트에 대한 간단한 설명도 좋습니다. (또한 "더 읽기"링크를 사용하는 것이 좋습니다.)

아니면 다른 쪽에서 보면 현재 페이지에서 무엇을 잃을 수 있습니까? 글쎄, 나는 정말로 "대부분의"이라고 말하지만, 메타 데이터 덤프 이외에도 명백한 것은 상단의 로그인 폼입니다. 물론, 기존 사용자에게 쉽게 로그인 할 수있는 방법을 제공하는 것이 좋지만 실제로 각 페이지에 로그인 양식을 표시해야하는 것은 아닙니다. 대신 Doodle과 같은 방식으로 링크를 통해 액세스 할 수있는 팝업 로그인 양식을 만드십시오. (JavaScript를 끈 사용자의 경우 링크에 대한 대체 대상으로 별도의 로그인 페이지를 갖는 것이 좋습니다.)

예를 들어, 등록되지 않은 신규 사용자로서 "삭제"링크처럼 보이는 이유는 무엇입니까? 실제로 페이지를 삭제할 수 있습니까? 그렇다면 왜 그렇 습니까? 그렇지 않다면 왜 링크가 있습니까?

마찬가지로 "(703 사용 가능한 질문)"메모는 인터페이스 요소처럼 보이기 때문에 무의미한 방해 요소입니다. 깊이있는 사이트 방문자에게 깊은 인상을 주려면 콘텐츠 영역에 적합한 인상적인 흐림으로 사이트를 배치하십시오. ( " 이미 703 개의 질문이 있으며 더 많은 질문이옵니다! ")

마지막으로 모든 것이 상대적이라는 것을 알아야합니다. 예를 들어, TV Tropes 는 끔찍한 사용자 인터페이스를 가지고 있지만 실제로는 중요하지 않습니다. 다양하고 훌륭하고 밀접하게 연결된 콘텐츠로 구성되어 있기 때문에 중요하지 않습니다. 탐색 인터페이스를 전혀 만지지 않아도됩니다. 사실, 그것은 위키 사이트에서 일반적입니다. Wikipedia 는 그다지 좋지 않습니다. 그러나 그 효과는 효과가 작동하기 전에 이미 많은 양의 콘텐츠 (또는 콘텐츠를 만들기 위해 최선을 다한 사용자 기반)가 있어야한다는 것입니다.

당신의 "디자인"은 1995 년에 좋을 것입니다. 사실 그것은 구식입니다. 엔지니어가 항상 생각해내는 디자인입니다 .-) 가장 쉬운 방법은 CSS 프레임 워크 (예 : Twitter Bootstrap , Zurb )를 사용 하는 것 입니다. 프레임 워크를 사용하면 "창의력"으로부터 자신을 보호 할 수 있습니다. ;-)

레이아웃 관점에서 볼 때 웹 사이트에는 그다지 잘못된 것이 없습니다. 왼쪽 상단에 로고가있는 표준 3 열 레이아웃입니다. 이 전체 프레임 워크는 오랜 세월 동안 사용되어 왔기 때문에 작동하기 때문입니다. 대부분의 최신 웹 사이트는 여전히 소수의 공통 레이아웃을 기반으로 유사한 원리를 사용하지만 훨씬 더 간결한 그래픽에 묻혀 있습니다. (몇 년이 지났다고해서 인간이 정보를 얻는 방법이 갑자기 완전히 다르다는 것을 의미하지는 않습니다.)

일부는 기본 탐색 링크가 왼쪽 또는 상단에 있어야하는지에 대한 문제 일 수 있지만 이러한 차이로 인해 사이트가 만들어 지거나 손상되지는 않습니다.

아닙니다. 문제는 당신이 선택한 위치에 있지 않습니다. 그래픽, 색상 선택, 사물 크기 등이 있습니다. 나는 배치 라는 용어 , 배치와 디자인 에 관한 모든 것, 느낌과 외모에 관한 모든 것을 구별합니다 . 그래도 모든 사람들이 나와 같은 방식으로 용어를 사용할지 잘 모르겠습니다.

당신의 말로 미루어 보아, 레이아웃은 기본적으로 괜찮지 만, 당신의 디자인 입니다, 불행하게도, 열심히 상황을 해결하기 위해, 문제가있다. 레이아웃이 문제인 경우 "검색 필드를 여기로 이동"또는 "로고 배치"와 같이보다 구체적인 조언을 제공 할 수 있습니다. 레이아웃 은 실제로 사용성 의 구현입니다 .

그러나 디자인은 느낌과 스타일에 관한 것이므로 언급하기가 훨씬 어렵습니다. 나는 당신이 단순히 많은 색상 선택을 기본으로 남겨 두었다고 말할 수 있지만 (배경은 흰색이고, 링크는 파란색이며 인터페이스 이미지는 거의 없습니다) 대신 어떤 색상과 그래픽이 있어야하는지 말하기가 훨씬 어렵습니다. . 어떤 느낌을 원하는지에 따라 다릅니다. 회사 느낌을위한 지루하고 안전한 파란색과 회색, 순진하고 아이 같은 느낌을위한 분홍색과 노란색, 흥미 진진한 나이트 클럽 느낌을위한 뜨거운 빨간색과 검은 색 ... 그리고 그 예제 색상 만 사용해도 내가 그들에게 붙어있는 느낌. 악마는 세부 사항에 있습니다.

중요도를 강조하고 사이트 방문자를 안내하기 위해 보다 구체적인 레이아웃 문제와 더 미묘한 디자인 문제 (예 : thebodzio 가 제목 및 각주에 대한 다양한 글꼴 크기 등에 대한 답변 에서 언급 한 내용) 사이에 겹치는 부분 이 있습니다. 그들이 원하는 정보를 통해. 충고에주의를 기울여야합니다.

그러나 목표가 디자이너와 파트너 관계를 맺지 않고 매력적인 사이트 디자인을 적용하는 방법을 배우는 것이라면 답을 얻는 것이 아니라 여행을 떠나는 것이 두렵습니다. 훌륭한 디자이너가되는 길은 디자이너가 많고 수많은 리소스가 있으므로 배울 기회가 없습니다.

이 특정 사이트에 대한 디자인 감각을 얻는 가장 짧은 경로를 위해, 나는 당신이 좋아하는 다른 사이트와 당신이 만들고있는 것과 비슷한 서비스를 제공하는 다른 사이트를보고, 당신이 좋아하는 것과 비교하고 대조하기 시작합니다 그 것들과 귀하의 사이트에서 누락 된 것.

불행히도, 그것은 가능한 한 객관적이며 빙산의 일각에서 가장 중요한 부분입니다. 그래도 내가 말한 내용 중 일부가 도움이되기를 바랍니다.

사람들이 귀하의 사이트에 부정적인 반응을 보이는 이유는 다음과 같습니다. 너무 많은 질문이 제기됩니다!

당신이 말했듯이, 전에 당신은 기능을 소개합니다. 사람들이 그것이 무엇에 관한 것인지 이해하지 못한다고 말합니다. 웹 사이트에서 가장 먼저 답변해야 할 질문은 무엇입니까? 웹에 있다면 옆에 서서 설명 할 수 없기 때문입니다.

"세계의 모든 지식"은 사이트에서 찾을 수있는 것 (또는 그 문제에 대해 믿기지 않는 것) 또는 왜 로그인해야 하는지를 정확하게 전달하지 않습니다. 따라서 디자인은 이러한 질문에 대한 답변을 지원하지 않기 때문에 잘못 인식됩니다.

따라서 먼저 "이 사이트는 무엇입니까?"에 대답해야합니다. 예를 들어 사명 선언. 그것은 당신에게는 분명 할 수 있지만 웹상의 다른 사람들에게는 분명하지 않습니다. 주요 목적은 무엇입니까? 퀴즈를 풀거나 퀴즈를 만드시겠습니까? 사람들이 가장 먼저하는 일은 무엇입니까? 로그인? 퀴즈에 답 하시나요? 하나를 만드시겠습니까? 사람들이 귀하의 페이지에 남게하려면 답변해야합니다.

그런 다음 정보를 정리해야합니다. 콘텐츠 란 무엇이며 메타는 무엇입니까 (로고, 탐색, 로그인). stackexchange를 살펴보십시오. 콘텐츠 (빛)는 메타 (어두움)와 명확하게 구분됩니다.

함께가는 것을 그룹화하십시오. 탐색과 분리 된 이동 경로가 있습니다. 시각뿐만 아니라 표현. 기본 탐색에서 "Everything"을 찾지 못했습니다. 어떻게 갈 수 있습니까?

왜이 모든 것입니까? 사람들은 자신에게 제공되는 정보를 빨리 이해할수록 더 머무르고 상호 작용할 가능성이 높습니다. 그들이 혼란스럽고 대답 할 수없는 질문에 직면하면 부정적인 반응을 보일 것입니다.

그렇기 때문에. 즉, 그렇지 않았습니다 :) 그것은 단지 농담이었습니다. 저의 최선의 대답은 디자인 부분의 누군가와 함께 일하는 것입니다. 또한 처음부터 다시 시작하지만 더 간단하게 유지하고 내용을 호흡하도록하십시오.

몇 가지 첫 번째 팁 / 조언 / 권장 사항 : h 태그 (제목) 글꼴을 p 태그보다 크게, 제목 글꼴 크기 30-48 및 단락 (11- 최대 13) 범위에서 더 크게 만드십시오. 콘텐츠 블록 사이에 20px 여백 또는 패딩 (예 : maring-bottom : 20px) : 로그인 표시 줄을 사용하면 더 분리되고 읽기 쉽습니다.

다른 사람에게 적절한 로고를 디자인하도록하세요. 현재 가지고있는 로고는 좋지 않습니다. 다른 글꼴, 아마도 sans-serif 글꼴 (예 : Open Sans, Google 글꼴에서 무료 또는 Arial-Helvetica)을 사용해보십시오.

색상이 시원하거나 더 좋아 보이기 때문에 그라디언트를 사용하지 않는 경우 그라디언트를 사용하지 마십시오. 일반 색상을 고수하려고 시도하고 끝났을 때 CTA에서만 그라디언트를 사용해보십시오 ( 클릭 유도 문안) 영역 (예 : 버튼).

할 수있는 일이 많이 있지만 ... 이런 일들은 보통 시간이 지남에 따라 많은 훌륭한 디자인을보고 그 결과가 어떻게 만들어 졌는지 이해하려고 노력함으로써 눈을 얻습니다. 동일한 결과를 직접 시도하고 재현하십시오.이 과정에서 UI의 모양 / 상호 작용 및 경험을 위해 왜 / 어떻게 수행되고 수행되었는지에 대한 지식과 통찰력을 얻게됩니다.

책 추천 : Smashing Book [첫 번째와 두 번째 책] 및 웹 사이트 :

http://smashingmagazine.com

그리고 다른 하나 : http://www.bamagazine.com/

와! 당신은 정말 응답을 생성했습니다! 적어도 당신은 당신의 디자인이 눈에 띄지 않는다는 것을 알고 있습니다.)

귀하의 질문에 대한 짧은 답변 은 다음 과 같습니다 . 사이트 가 소프트웨어 엔지니어에 의해 설계된 것처럼 보입니다 . 그게 당신이하는 일이고 당신이 잘하고 있다고 확신합니다. 이제 아이디어에 접근하기 위해 UI 디자인을하는 사람이 필요합니다. 그 주위에 방법이 없습니다. 주말에는 디자인을 배우지 않고 문제를 해결할 것입니다.

포트폴리오를 작성하고 자유를주는 학생이나 젊은 디자이너를 찾으십시오. 이 프로젝트를 위해 일하는 사람이 깨끗하고 깔끔해야합니다. 미니멀리즘을 선호하는 디자이너를 찾을 수 있는지 확인하십시오.

저는 전문 디자이너가 아니므로 사용자 관점과 다양한 웹 사이트 탐색 경험에서 몇 가지를 지적 할 수 있습니까?

1. 배경색 페이지는 흰색이지만 섹션 헤더 / 하이라이트 조금 시도해 볼 수도, 노란색 또는 흰색의 그늘에 대조적 인 색상을 당신이 당신의 요소 계층 구조에 맞게 대비의 수준을 디자인 할 수있다, (더 높은 수준의 헤더는 더 = 대비) 또는 고정 된 헤더 내용 색 구성표 (예 : 헤더 로고로 표시된 책의 두 번째 페이지에서와 같이 진한 주황색, 헤더 텍스트로 흰색, 내용 텍스트로 어두운 회색).
2. 너무 많은 자유 공간 페이지에서, 무료 공간은 사용자에게 숨을 쉴 수있는 장소를 제공하는 좋은 그러나 너무 많은 여유 공간이 백 오피스 / 아래 유지 보수와 같은 페이지 모양을 만든다. 예를 들어 첫 번째 화면의 "하위 주제"섹션은 "모든 것"섹션 아래 전체 공간에 걸쳐있을 수 있습니다. 또한 왜 중복 하위 주제 섹션이 두 개 입니까?
3. 콘텐츠의 IMO 배포는 계층 구조 아래에 있어야 합니다 . Google 코드 페이지 (귀하의 사이트와 매우 유사 함), Wikipedia 또는이 사이트를 예로 들어 사이트 헤더에 상당한 공간을 소비 하면 콘텐츠가 제공됩니다. 또한 이제는 많은 페이지에서 고유 한 색상, 일반 메뉴 및 사이트 로고가 포함 된 헤더와 같은 도구 모음을 사용하지만 로고가 너무 커서 그렇게 할 수 없습니다. 예를 들어, 페이지의 가장 오른쪽 부분에
   있는 하위 주제 섹션을 살펴보십시오. 실제로는 현재 컨텐츠의 전문화 영역처럼 보입니까? 오히려 그들은 임의의 태그 또는 관련 주제 처럼 보입니다 . 당신은 그들의 계층을 반영하여 반영 할 수 있습니다다양한 문서 페이지에서 와 같이 나무와 같은 구조로 인해 빵 부스러기가 불필요합니다. 또한 IMO는 그 나무 (탐색)에 대한 올바른 장소가 왼쪽 사이드 바에 있고 나머지 행동은 빵 부스러기 대신에있을 것입니다.
4. 균일 성은 분포만큼 중요합니다. 버튼의 목적 / 중요도에 따라 색상이 다를 수 있습니다. 그러나 그들의 구조는 동일하게 유지되어야합니다. "지금 퀴즈 풀기"는 둥근 모서리이고 "로그인"버튼은 날카로운 모서리입니다. 이러한 접근 방식 중 하나를 제거 할 수 있습니다.
5. 링크와 동작은 동일하지 않으므로 적절하게 이름을 지정해야합니다. 왼쪽의 "삭제"메뉴는 삭제 된 항목이나 삭제 동작을 반영하는 것처럼 말할 수 없습니다. Gmail과 마찬가지로 사용자에게 삭제 버튼과 삭제 된 항목 메뉴 / 탭을 제공하십시오.
6. 글꼴 은 목적을 반영하는 데 매우 중요합니다. 아트 페이지를 만들거나 문학 세리프 패밀리를 사용하는 것이 좋지만 e- 러닝 사이트를 만들려면 다양한 크기로 따라 가기 쉽고 확장 률이 적은 글꼴을 선택해야합니다. Sans 는 그 점이 좋습니다. 예를 들어 Wikipedia에서 사용합니다. 크기와 무게의 선택도 중요합니다. 통계가 중요하고 변화가있는 경우 굵은 글씨로 숫자를 표시하십시오 (예 : 703 개의 질문 가능). 두 번째 화면에서 다수의 질문을 선택했듯이 헤더 IMO의 이탤릭체는 좋지 않습니다. 왜 굵은 체를 대신 사용하지 않습니까?
7. 이것은 내 개인적인 의견과 매우 흡사하지만 더 둥근 모서리는 사용자를 상자와 같은 느낌에서 구할 수 있다고 생각 합니다.

저는 전문 디자이너이자 개발자입니다. 디자인과 관련하여 가장 중요한 것은 Fireworks와 같은 그래픽 프로그램을 사용하여 디자인을 구현하기 전에 만드는 것입니다. 따라서 쉽게 변경하고 실험 할 수 있습니다. 개발 배경에서 나온 그 중요성을 알고 있습니다.

어떤 직책을 신청하는지 모르겠습니다. 그래픽 디자인 직책을 신청하는 경우 전문적인 그래픽 디자인을 배우는 데 시간이 걸릴 수 있습니다. 개발 직책을 맡고 있다면 전문 디자이너에게 약간의 비용을 지불하여 멋진 디자인을 만들거나 몇 달 동안 배우는 대신 빠른 수정을하는 것이 좋습니다.

빠른 수정을 원한다면 시작을 위해 몇 가지 구체적인 사항을 알려 드리겠습니다. 여기에 대한 답변은 훌륭하지만 구체적이지 않습니다. 노력하겠습니다.

가변 폭 설계는 고정 폭 설계보다 항상 조금 까다 롭습니다. 3 열 디자인을 선택하는 것이 옳다고 생각합니다. 내용은 정확하고 디자인은 훌륭하지 않습니다 (제 생각에는).

여기 내가 할 일이 있습니다 (아마도 하루도 걸리지 않을 것입니다).

1. 로고로 시작하십시오. 매우 바빠 보입니다-> 더 단순하게 만드십시오. 더 생생한 색상을 사용하십시오. 노란색이 더러워 보입니다. 더 간단한 글꼴을 사용해보십시오.
   • 로고를 만든 후 사이트 색상을 일치시킬 수 있습니다
2. 웹 사이트에 관한 모든 것은 "공기"이어야합니다. 따라서 물건을 비 좁게 만들지 마십시오.
   • 왼쪽 열은 훨씬 넓어야합니다. 현재 너비의 1.5 배
   • 상단은 로그인 필드 주위에 간격이 더 있어야합니다
   • 오른쪽에는 각각 새로운 줄에 하위 주제가 있어야합니다. 그들이 서로 찌그러지지 않도록 주변에 더 큰 간격을 두십시오.
   • 하위 테이블은 셀에 많은 양의 패딩을 사용할 수 있고 제목 div는 더 많이 채워질 수 있습니다.
3. 전체 내용이 고르지 않고 흐릅니다. 이것은 가능한 한 정렬하고, 균일 한 글꼴과 적절한 크기를 사용하는 것을 의미합니다.
   • 가운데 열 "세계의 모든 지식"은 나머지 내용과는 맞지 않습니다. 아마도 그것을 왼쪽으로 띄우고 밑줄을 제거하고 제목보다 작게 만드십시오.
   • 페이지 내용이 정렬되지 않았습니다. 하위 내용을 하위 제목과 정렬 한 상태로두면 더 나아질 것입니다.
4. 상단의 로그인 필드를 더 잘 수행 할 수 있습니다.
   • 텍스트 입력 상자 안에 레이블을 넣을 수 있습니다 (회색으로 표시). 그것은 더 깨끗해질 것입니다.
   • 당신은 나를 기억 확인란 / 글꼴을 훨씬 작게 만들 수 있습니다. 가장 중요한 기능은 아니므로 중요한 부분만큼 크면 안됩니다.

이것은 귀하의 사이트를 인터넷상에서 가장 멋진 사이트로 만들지는 않지만 검사를 통과 할만큼 충분히 세련되게 할 것입니다. :)

와우 .. 그건 꽤 나쁘다.

디자인 감각이 없다면 몇 가지 제안으로 무언가를 다시 디자인하는 법을 배울 수 있다고 생각하지 않으므로 실제로 다른 누군가가 레이아웃을 수행하도록해야한다고 생각합니다 .. 지역 예술 대학에 접근하여 실제 사례로 수업을 진행합니다.

그러나 실패하면 여기에 몇 가지 제안이 있습니다. 색인 / 방문 페이지는 이름에도 불구하고 광고판이나 잡지 광고처럼 작동해야합니다. 몇 초 안에 FAST 메시지를 빠르게 전달해야합니다. 나는 정보가 아니라 "메시지"라고 말했습니다. 시청자가 정보를 찾을 때 정보가 있어야하지만 모두 약간 뒤섞인 목차처럼 배치 될 필요는 없습니다.

그래서 메시지에 관해서는 ... 가장 먼저 생각해야 할 것은 무엇을보고 있는가하는 것입니다. 카테고리를 읽더라도 해당 페이지가 무엇인지 명확하지 않습니다.

'무엇'은 색 구성표, 전체 레이아웃 및 제목으로 전달됩니다.

질문이 무엇인지 해결 한 후에는 먼저 무엇을보고 싶은지 결정하십시오. 연습은 Perfect 로고를 만들어 내고 그 크기를 늘리고 헤더에서 튀어 나올 것입니다. 그러나 다른 것에 집중하거나 어떤 행동을 요구하는 이유가있을 수 있습니다.

나는 당신이 가장 중요한 것은 '세계의 모든 지식'이라고 추측하고 있습니다. 왜냐하면 당신이 그것을 중심으로 (나쁜 생각) 이탤릭체로 만들었고 (나쁜 생각!) 그 주위에 많은 공간을 주었기 때문입니다 (좋은 생각). 단어 자체는 ... 그것이 무엇인지 또는 무엇을하는지 명확하지 않으며, 더 묘사적이고 덜 구식적인 것을 시도하십시오.

전체 방문 페이지를 3 개의 디자인 요소와 3 단계의 정보 중요도로 나누십시오. 가장 먼저해야 할 일, 가장 먼저해야 할 일이 무엇인지 자문 해보십시오. 둘째, 셋째 무엇입니까? 적절하게 재 설계 해보십시오.

더 적은 수의 색상을 사용하고 이해하게하십시오. 왜 텍스트 주위에 3 개의 다른 cla 빛 파랑이 무작위로 뿌려 졌습니까 ??? 더 많은 글꼴 크기 (!)를 사용하여 다시 이것을 3 초로 나누는 것이 좋은 시작, 가장 중요한 큰 글꼴, 보조의 중간 등입니다.

마지막 제안은 코드를 작성하기 전에 디자인을 먼저하고 잘하는 것입니다. PAPER, 펜 또는 연필로 시작하여 페이지를 차단하는 것이 좋습니다. 빠른 스케치 만, 실제 단어를 쓰지 말고, 내용 영역의 크기를 머리글과 비교하여 결정할 때 영역을 차단하십시오. 사이드 바 등의 크기는 얼마나됩니까?

그런 다음 그래픽 프로그램에서보다 완성 된 디자인을 수행하십시오. 사물을 옮기고 배치를 실험하십시오. 잡지 페이지처럼 작동해야하는 페이지를 디자인하고 있음을 기억하십시오. 시청자를 잠시 멈추고,보고 싶은 것을 보여주고, 원하는 일을하도록 유도하십시오.

그리고 디자인을위한 LOOKING을 시작하십시오. 그냥 봐 내용을 평가하지 말고 웹 페이지에서 전달할 메시지를 찾으십시오. 간격, 색상, 글꼴 크기는 어떻게 사용합니까? 좋은 디자인을 모방하십시오. 행운을 빕니다

미술 학교 제안을 고려하십시오. 그래픽 디자인 프로그램은 종종 학생들을위한 실제 재 설계 프로젝트를 찾고 있습니다.

내가이 글에서 얻은 주요 문제는 당신이 매력적인 디자인을 배우는 것보다 "디자인"을 토론하고 방어하는데 더 관심이 있다는 것입니다. 소프트웨어 엔지니어의 전형. 페이지를 구성 요소로 나누고 이러한 요소를 테스트하고 조사한 다음 구성 요소를 통합 한 후에는 요소가 수학적으로 우수한 디자인을 열거해야한다고 생각합니다. 그런 다음이 질문을 다시 게시하여 페이지를 구성 요소별로 정리하고 각 구성 요소의 장점을 주장하고 응답 공급자가 말한 내용을 따르는 방법에 대해 논쟁 할 수 있다고 생각합니다.

UX에서 빨고 있다는 것을 기꺼이 받아 들일 때까지이 문제가 계속 발생합니다. 위에서 말했듯이 그래픽 디자인은 느낌에 관한 것입니다. 그래픽 디자인은 엔지니어링 디자인과 다릅니다. 수학적으로 무언가를 구성하거나 다른 "수학적으로 올바른"것들과 통합하고 좋은 결과를 기대할 수는 없습니다. 디자이너가 보는 방식으로 세상을 보지 않기 때문에 UX를 잘 사용하지 못할 것입니다. 그러나 페이지 측정을 중단하고 다른 것과 비교하지 않으면 그래픽 디자인에 대해 전혀 모른다는 사실을 깨닫고 완전히 익히십시오.