명확한 오류가 있는 7가지 잘못된 웹사이트 디자인 예

인터넷을 검색하면 눈을 즐겁게 하는 디자인 이 있는 수많은 웹 사이트를 찾을 수 있습니다. 이러한 웹사이트에 접속하면 원하는 정보를 찾거나 올바른 영역으로 이동하는 데 어려움을 겪을 수 있습니다. 이것은 나쁜 웹사이트 디자인의 한 예입니다.

우리는 종종 멋진 웹사이트를 디자인하는 것에 대해 이야기하고 그렇게 하기 위한 유익한 팁을 공유합니다. 의심할 여지 없이, 이 팁은 꿈의 웹사이트 디자인을 시작하기 전에 유용합니다. 그러나 우리는 얼마나 자주 나쁜 웹사이트 디자인에 대해 이야기합니까?

나쁜 웹사이트 디자인에 대한 아이디어를 갖는 것이 좋은 웹사이트 디자인만큼 중요 하다고 생각하지 않습니까? 진부한 웹 사이트 디자인이 어떻게 보이는지 알면 이러한 디자인 작업을 웹 사이트에 적용하는 것을 쉽게 자제할 수 있습니다.

이 글에서 나는 형편없는 웹사이트 디자인에 대해 알려줄 7가지 나쁜 웹사이트 디자인 예 를 생각해 냈습니다. 이 예에서 웹사이트 디자인의 해야 할 일과 하지 말아야 할 일을 알게 될 것입니다. 이러한 웹사이트는 웹사이트 테마, 잘못된 UI 및 UX 디자인도 반영합니다 .

당신이 프로 웹 디자이너이든 아마추어이든 상관없이, 이 글은 당신을 위한 내용으로 가득 차 있을 것입니다. 디자인이 좋지 않은 7개의 웹사이트를 나열 하기 전에 나쁜 웹사이트 디자인에 대한 개요를 살펴보겠습니다.

나쁜 웹사이트 디자인은 어떻게 생겼습니까?

지금까지 나쁜 웹사이트 디자인에 대해 여러 번 언급했습니다. 그러나 나쁜 웹사이트 디자인의 특성을 아는 방법은 무엇입니까? 글쎄, 당신이 그것이 잘못 설계된 웹 사이트임을 짐작할 수있는 몇 가지 특성이 있습니다.

이러한 특성을 나열하기 전에 사용자가 귀하의 웹사이트에 방문하여 작업을 실행하는 데 어려움을 느낀다면 귀하의 사이트 디자인이 좋지 않다는 신호임을 ​​간략하게 설명하겠습니다. 사용자의 목적은 무엇이든 될 수 있습니다. 즉, 제품에 대해 알아보거나, 제품을 구매하거나, 계정을 만드는 것입니다.

나쁜 웹사이트 디자인의 특징:

• 어수선한 레이아웃
• 숨겨진 탐색 메뉴
• 간단한 탐색 링크 및 버튼 부재
• 색상 대비 부족
• 비반응형 디자인(모바일 친화적이지 않은 것과 유사)
• 가독성을 어렵게 만드는 일관성 없는 서체
• 모호하고 혼란스러운 메시지

이러한 특성을 통해 나쁜 웹 사이트 디자인에 대해 상당한 아이디어를 얻을 수 있다고 생각합니다. 이는 UI(사용자 인터페이스)와 UX(사용자 경험) 디자인을 모두 유지하는 인상적인 웹사이트를 디자인하는 데 도움이 됩니다.

7 나쁜 웹사이트 디자인 예:

형편없는 디자인을 가진 수천 개의 웹사이트 중에서 나는 최악의 웹사이트 디자인이 어떻게 생겼는지에 대한 아이디어를 제공할 형편없는 디자인의 웹사이트 7개를 골랐습니다. 그럼, 이 웹사이트의 기능과 기능을 살펴보겠습니다.

퍼시픽 노스웨스트 엑스레이 Inc:

이 사이트를 보면 무엇이 떠오르나요? 마치 90년대의 오래된 사이트 같죠? 범죄가 아닙니다! 이 사이트는 화려한 파란색으로 외관상 매우 저급합니다 . 사이트의 눈길을 끄는 것은 호환되지 않는 텍스트와 색상입니다.

글꼴, 색상, 텍스트 크기 및 텍스트 위치는 모두 서로 동기화되지 않습니다. 또한 웹 사이트의 홈페이지를 보면 검색 표시줄, 범주 및 링크가 표시됩니다. 그러나 그들은 어수선하고 구식으로 보입니다. 이 사이트 에는 탐색 모음, 사이드바, CTA 버튼 등과 같은 필수 요소도 부족합니다.

이 사이트가 일류 사이트의 지위를 얻으려면 완전한 화장이 필요합니다 . 콘텐츠에서 스타일링에 이르기까지 이 모든 부분을 수정하여 모더니즘을 가미해야 합니다. 그라디언트 색상 대신 사이트는 단색을 사용해야 합니다.

사이트에는 Home, About Us, Contact Us 등과 같은 탭을 표시하는 탐색 모음이 있어야 합니다. 사이트에서 제품이나 서비스를 판매하는 경우 탭에도 표시되어야 합니다. 웹사이트는 또한 타이포그래피와 색상을 수정하는 것 외에도 적절하고 복숭아 같은 시각 자료를 사용해야 합니다.

사이트의 문제점 한 눈에 보기:

• 조잡한 타이포그래피와 일치하지 않는 디자인 색상
• 콘텐츠 세부 정보 부족
• 탐색 모음, 메뉴 등과 같은 중요한 요소가 누락되었습니다.

수잔 콜린의 책:

이전 사이트와 달리 Suzanne Collin의 사이트에는 탭이 거의 없는 탐색 모음이 있습니다. 그러나 탐색 표시줄은 흥미로워 보이지 않습니다 . 사이트 디자인을 최적화할 수 있는 도구가 무수히 많은 오늘날 이 사이트는 완벽한 사이트에 가깝습니다.

Suzanne Collin의 사이트를 방문하는 경우 사이트에 귀하를 해당 사이트에 붙일 만한 것은 없습니다. 먼저 내용이 완전히 지저분해 보입니다 . 홈페이지의 최대 부분은 " 노래와 뱀의 발라드 "라는 베스트셀러 책 한 권에 의해 제거되었습니다.

단조로운 설명과 인용문이 있는 1권의 책에 대한 과도한 언급은 웹사이트의 다른 측면을 흐리게 했습니다. 그 외에도 사이트는 문자 그대로 어떤 기능도 제공하지 않고 오히려 시각적 장애를 일으키는 사이드바에 일부 링크를 표시합니다.

사이트의 또 다른 주요 결함은 메뉴에서 "작업" 탭을 클릭하면 사이드바에 표시되는 것과 동일한 책 목록이 표시된다는 것입니다. 끔찍하죠? 전반적으로 Suzanne Collin의 웹사이트는 더 관련성 높은 콘텐츠, 핵심 요소, 시각 자료 및 적절한 형식이 필요합니다.

사이트의 문제점 한 눈에 보기:

• 방문자를 설득하지 못하는 최소한의 텍스트
• 방문자를 끌어들이기에는 너무 단순한 사이트 디자인
• 비쥬얼은 무난하다

아르그렌:

분류된 광고 사이트인 Arngren은 사이트가 얼마나 무질서할 수 있는지를 보여주는 완벽한 예입니다. 타이포그래피부터 전체 스켈레톤에 이르기까지 웹사이트는 촌스럽고 혼란스러워 보입니다 . 사본의 글꼴이 너무 작아서 텍스트를 읽을 수 없고 통과하기가 어렵습니다.

웹사이트에서 가장 짜증나는 부분은 레이아웃 입니다. 이미지가 서로 너무 가깝게 배치되어 어수선해 보입니다. 그 외에도 탐색 메뉴는 범주가 무질서하게 나열된 상자에서 역겹게 보입니다.

이러한 범주를 더욱 악화시키는 것은 무분별한 색상 선택입니다. 색상에 대해 이야기하면 사이트 전체에서 웃음거리가 되었습니다. 사이트는 대부분 조화와 일관성이 결여된 빨강, 파랑, 검정 색상으로 디자인되었습니다.

웹사이트의 또 다른 부정적인 측면은 카테고리 목록 입니다. 웹 사이트의 모든 범주가 ​​메뉴에 표시되어 사이트 디자인이 복잡하고 어수선하며 눈길을 끕니다.

사이트를 보기 좋게 만들기 위해서는 레이아웃과 콘텐츠를 포함한 전체 사이트에 대한 과감한 수정이 필요합니다 . 최적의 모양을 얻으려면 색상과 서체를 포함한 모든 매개변수를 최적화해야 합니다.

사이트의 문제점 한 눈에 보기:

• 탐색의 어려움
• 무작위로 유행하는 색상 사용
• 타이포그래피의 어리석은 선택
• 사업에 대한 명확한 메시지 부재

세계 최악의 웹사이트:

웹사이트 이름만 보면 나쁜 사이트라는 인상이 확 와닿죠? 사이트 이름은 추가 트래픽을 가져오기 위한 의도로 그렇게 명명되었습니다. 이유가 무엇이든, 이 사이트는 확실히 최악의 웹사이트 중 하나로 평가받을 자격이 있습니다.

사이트는 화려하고 눈부신 색상 을 표시하며, 웹사이트 디자인에 대한 부정적인 평가를 받기 위해 의도적으로 실행한 것으로 보입니다. 색상뿐만 아니라 사이트에 선택한 글꼴조차도 쓰레기로 가득 차 있습니다.

사이트의 또 다른 스포일러는 중복된 애니메이션 으로, 주의를 산만하게 하고 방문자가 어리둥절하여 사이트를 떠나게 만듭니다. 전반적으로 World's Worst Ever 웹사이트는 근본적인 웹사이트 디자인 오류의 명백한 표시입니다.

사이트의 텍스트와 배경색을 전면적으로 변경해야 합니다. 또한 텍스트 콘텐츠는 명확한 메시지를 표시하기 위해 적절하게 구성되고 형식이 지정되어야 합니다.

사이트의 문제점 한 눈에 보기:

• 글꼴 및 텍스트 콘텐츠 문제
• 텍스트와 배경의 충돌 색상
• 크기가 무엇인지에 대한 명확한 메시지 없음
• 사이트가 완전히 포맷되지 않았습니다.

Big Ugly 웹사이트:

이전 웹 사이트와 마찬가지로 Big Ugly 웹 사이트도 이름으로 부정성을 나타냅니다. 말할 필요도 없이, 이 웹사이트의 목적은 또한 형편없는 사이트 디자인을 보여주는 것 입니다. 그래서 못생긴 등의 단어를 포함하여 사이트 이름을 선택한 것입니다.

테마, 레이아웃, 항목 배치 및 전체 사이트 디자인이 끔찍합니다. 사이트의 눈에 띄는 측면은 방문 페이지처럼 작동하는 한 페이지 웹사이트 라는 것입니다. 그러나 특정 제품이나 서비스를 홍보하는 대신 외부 링크가 많이 포함되어 있습니다.

그 외에도 웹 사이트에는 끔찍한 탐색 시스템, 불완전한 색 구성표 및 깨진 이미지 링크가 많이 있습니다. 사이트에 포함된 설계 오류의 양은 분명히 나쁜 설계 사례의 가장 강력한 경쟁자 중 하나입니다.

웹사이트 디자인 문제를 해결하려면 사이트에서 색상 조합, 탐색, 글꼴 크기 및 외부 링크를 업데이트하고 개선해야 합니다.

사이트의 문제점 한 눈에 보기:

• 사이트 전체의 형식 문제
• 이미지의 외부 링크가 깨졌습니다
• 헤더의 과도한 하이라이트
• 웹사이트 콘텐츠에 정보의 깊이가 부족함

링스카:

Lingscars는 Ling의 자동차를 의미하므로 Ling은 웹사이트 소유자입니다. 그녀의 웹사이트는 중고차 장기렌트를 기반으로 합니다. 즉, 사이트에서 모든 내용을 명확하게 설명합니다. 그러나 문제는 웹 사이트의 레이아웃과 관련하여 발생합니다.

사이트 가 어수선한 요소, 이미지 및 gif로 끔찍해 보입니다 . 사이트는 주의를 산만하게 만드는 것 외에는 아무 것도 하지 않는 요소의 쓸모없는 애니메이션을 표시합니다. 웹 사이트의 가장 역겨운 부분은 잘못된 배치로 사이트 레이아웃을 완전히 망가뜨리는 오프닝 비디오입니다.

그 외에도 사이트의 전반적인 색상은 눈을 괴롭히는 사이키델릭합니다 . 일부 텍스트는 작은 크기와 부적절한 색상으로 인해 완전히 읽을 수 없습니다.

다루어야 할 사이트의 첫 번째 문제는 형식화입니다. 시선을 사로잡는 레이아웃을 만들려면 이미지, 비디오 및 기타 요소를 잘 배치해야 합니다. 그 외에도 사이트는 기존 색상과 타이포그래피를 크게 조정해야 합니다.

사이트의 문제점 한 눈에 보기:

• 색상 및 타이포그래피 문제
• 이미지, GIF 및 기타 요소가 어수선하게 표시됨
• 내비게이션 시스템이 열악하고 혼란스럽습니다.
• 탐색 메뉴 링크가 작동하지 않음

벨라 드 소토의 웹사이트:

Bella De Soto의 웹사이트는 거의 모든 웹사이트에서 하지 않는 일을 합니다. 웹사이트 를 방문하면 컴퓨터에 파일이 자동으로 다운로드됩니다 . 짜증날 뿐만 아니라 무섭기도 합니다. 방문자는 알 수 없는 파일이 다운로드되는 것을 보고 당황할 수 있습니다.

이 웹사이트에는 또한 이전 웹사이트 디자인에서 눈치채지 못한 불쾌한 내용이 더 많이 포함되어 있습니다. 그리고 그것은 웹사이트 페이지의 치수(길이 x 너비)입니다. 페이지가 너무 길고 넓어서 세로 및 가로 스크롤이 지겹습니다.

사이트 페이지를 최대 20%까지 축소해도 맨 아래에 있는 이미지를 선명하게 볼 수 없습니다. 또한 웹 사이트의 텍스트와 이미지가 너무 밀접하게 배치되어 전체 사이트를 어지럽힙니다. 전반적으로 이 사이트는 눈길을 끌고 주의를 산만하게 하며 의심할 여지 없이 이 글을 나열할 강력한 경쟁자입니다.

사이트를 멋지게 만들기 위해 필요한 첫 번째 작업은 사이트의 콘텐츠를 구성 하는 것입니다. 텍스트와 이미지 모두 최적화되고 구성되어야 합니다. 둘째, 사이트 크기를 축소하여 모양과 레이아웃을 향상시켜야 합니다.

사이트의 문제점 한 눈에 보기:

• 구조적 문제 포함
• 사이트 길이와 너비가 너무 커서 콘텐츠를 명확하게 볼 수 없습니다.
• 탐색 메뉴가 없어 사이트 탐색이 복잡함
• 콘텐츠 색상이 일관성이 없습니다.

당신의 테이크는 무엇입니까:

고급스럽고 우아한 디자인의 웹사이트에 익숙해지는 것이 중요합니다. 이 사이트는 웹사이트를 놀랍고 눈에 띄게 디자인하는 데 도움이 될 것입니다. 하지만 내가 왜 나쁜 웹사이트 디자인에 대해 알아야 하는지 궁금할 것입니다. 이것은 나쁜 웹 사이트 디자인의 특성을 웹 사이트에 적용하지 않도록 하기 위한 것입니다.

이를 염두에 두고 7가지 나쁜 웹사이트 디자인 사례를 통합하여 이 글을 작성했습니다 . 문서를 작성하고 이러한 웹사이트를 방문한 후에는 웹사이트 디자인이 어떻게 나쁜지, 사이트 디자인에 어떤 테마를 사용해야 하는지에 대한 절대적인 아이디어를 얻을 수 있기를 바랍니다.

그것이 내가 이 블로그에서 당신을 위한 나쁜 웹사이트 디자인에 대해 가진 전부입니다. 다음 웹사이트 디자인을 위해 행운을 빕니다. 형편없는 웹사이트 디자인의 모든 특성에 대해 배운 후에 그것을 못 박기를 바랍니다. 그러나 Elementor로 사이트를 구축하기로 결정했다면 Elementor용 애드온인 ElementsKit을 사용할 수 있습니다 .