시작하기 전에이 한 가지 질문이 있습니다. 매력적인 외관입니까? 아니면 멋진 효과?
나에 관해서는 사이트 기능과 사용자 경험의 우선 순위를 정하는 것을 좋아합니다. 인터페이스는 중요하지만 웹 사이트의 기능은 더 많은 무게를 지녀야합니다. 깨끗하고 논리적 인 방법으로 사용자에게 아이디어 나 제품을 제공해야합니다. 특히 브랜드를 구축 할 때 사이트를 신뢰할 수있게 보이게해야합니다.,
그러나 어떻게 신뢰할 수있는 웹 사이트를 구축합니까? 키 포인트가 디자인에 떨어집니다. 비록 당신이 작은,부트 스트랩 시작,거기에 더 나은 귀하의 웹사이트 디자인에 당신을 도울 수 있는 웹 디자이너. 물론 그것이 최선이 될 경우에는 웹 디자이너가 협력할 수 있으로 개발자가 아주 처음부터 좋은 온라인 디자인을 공동 작업 도구입니다.
아름답고 기능적인 좋은 웹 사이트를 디자인하는 것은 쉽지 않습니다., 경 UX 컨설턴트가 당신을 도울 수 있을 분석 대상 사용자의 행동을 만들고 구현하는 효과적인 UI–과 함께 궁극적인 목표는 귀하의 제품의 사용자 경험을니다. 이것이 견고한 비즈니스 결과를 얻는 것입니다.
고,그것은 또한 중요한 일반적인 실수를 알 웹 디자인에서 어떻게 당신이 그들을 피할 수 있다. 당신은 혼란 느낌,내가 무엇을 보여줍니다 좋은 웹사이트처럼 보이를 제시하여 최고 10 의 나쁜 웹 디자인 예입니다.,
사이의 차이 좋고 나쁜 Web Design
웹 디자인 트렌드는 모든 시간을 변경하도록 설계 원리에 웹에서 정말 열심히 정의하는,그러나,여전히 황금 규칙의 테스트 스탠드 시간입니다. 수백 개의 사이트를 확인하고 몇 가지 디자인 원칙을 발견했습니다., 이들은 다음을 포함한다:
- 을 이해하기 쉽게 탐색
- 의 적절한 사용 애니메이션
- 좋은 색상
- 깨끗한 레이아웃
- 시각적으로 매력적인 인터페이스
- 디자인을 선택하고 적당한 주제 또는 테마
- 유지 디자인 요소와 콘텐츠의 구성
위의 원칙은 그냥 몇 가지 규칙의 웹 디자인,하지만 그들은 모두 명확히 나타내는 것은 좋은 웹 디자인을 구현할 수 있어야 합니다,심미적으로 만족을 이해하기 쉽고 사용하기 쉽습니다. 즉,좋은 웹 사이트는 우수한 사용자 경험을 제공해야합니다.,
Top10 나쁜 웹 디자인 예
Arngren 디자인에는 혼돈과 혼란해 누락의 그리드
나는 원하지 않는 것을 의미하지만 정말 제 눈을 때마다 나는 그것을 참조하십시오. 이 사이트는 말 그대로 그래픽,콘텐츠 및 링크를 어디서나 배치합니다. 모든 요소가 함께 사이트를 이해할 수없는 엉망으로 만듭니다.
Arngren 이 왜 잘못 설계된 웹 사이트입니까? 가장 큰 문제는 사이트가 그리드를 사용하지 않는다는 것입니다.
2)믿을 수없는 탐색 구조.
3)타이포그래피가 좋지 않아 읽을 수 없게됩니다.
4)색상의 무작위 사용.,
격자를 만들 수 있는 모든 것을 깨끗하고 조직에 당신의 웹 사이트입니다. 모든 요소를 적절한 장소에 보관하고 크기,텍스트의 크기 및 공간 등을 결정하는 데 도움이됩니다. 그리드를 사용하면 일관되고 잘 설계된 인터페이스를 만들 수 있습니다.
웹 디자인에서 그리드를 사용하는 좋은 웹 디자인 예-모든 것이 정리되어 있습니다.
Typesetdesign-디자인된 경우 대비
명확하고 강력한 대조 요소 간에 사용자를 도울 수 있습니다 무엇을 알고 핵심 정보의 페이지입니다., 사용자가 정보를 더 잘 읽고 이해하는 데 도움이됩니다. 이 사이트에서는 배경색과 텍스트 색상이 거의 비슷하여 매우 약한 대비를 남깁니다. 대비가 좋지 않아 텍스트가 눈에 흐릿 해집니다. 게다가 글꼴 크기가 작기 때문에 텍스트의 가독성이 매우 떨어집니다.
좋은 웹 디자인 확인해야 한다는 글과 사진들은 높은 읽을 수 있습니다. 실제로 가독성을 향상시키기는 어렵지 않고 색상,공간 및 크기 등 모든 것을 활용하여 대비가 높습니다., 예를 들면,좋은를 사용의 타이포그래피하게 강조한 중요한 정보를 다른 글꼴 크기와 명암 사이의 색상을 강화한 시각 효과를 제공합니다.
좋은 웹 디자인과 적절한 대조은 다음과 같이 나타나야 합니다.
Theweddinglens-지 않은 응답자
당신은 항상 사용하여 응답 디자인 프레임워크를 채택하는 다른 더 나은 솔루션입니다. 웹 페이지는 웹 사이트에서와 마찬가지로 원활하게 모바일에서 실행해야합니다., 이 사이트에서는 휴대 전화에로드 할 때 여전히 plaintexts 와 같은 빈약 한 인터페이스가있는 전체 페이지를 보여줍니다. 볼 수있는 모바일 버전이 없으므로 휴대 전화에서 사용할 수 없습니다. 나는 단지 이와 같은 웹 사이트를 포기할 것이다.좋은 웹 디자인-반응 형 디자인.
태평양 북서부 X-Ray Inc-불쾌한 색상
이 웹 디자인은 다음과 같은 혼합 색상 팔레트를 포함하는,많이 충돌하는 색상과 텍스트 색상과도 혼합니다., 그 모든 것은 사용자가 전혀 읽기가 어려워집니다. 또한 탐색은 상당히 복잡합니다.
좋은 웹 디자인을 사용해야 제대로 색상을 만드는 아름답고 간결한 인터페이스가 있습니다. 그것은 쉽게 사용자의 눈에게 사용자가 운영하는 없는 노력,다음과 같이 한다.
더 많은 정보에 대한 색상:색상을 사용 하는 방법은 UI 디자인에 현명하게 만드는 완벽한 UI 인터페이스?,
Gatesnfences-탐색 및 운영 불량
웹 사이트 탐색의 가장 큰 특징은 자명합니다. 사용자가 로그인할 때 귀하의 웹사이트에,그/그녀가 이해한 다음에 무엇을 할 수 있고 어떤 작업을 도달하기 위해 목적지에 도달 할 수 있습니다. 네비게이션은 눈길을 사로 잡아야하며 종종 페이지 상단에 있어야합니다. 이 사이트와 같은 탐색을 디자인하려고하지 마십시오. 그것은 단지 사용자를 더 혼란스럽게 만듭니다.,
외에,네비게이션 내용과 상호 작용해야 할 명확하고,사용하지 않도록 가로 스크롤 막대가 표시됩니다 또 다른 특별한 애니메이션 디자인이다. 당신이 할 경우,당신은 적어도 그들에게 당신의 사이트가 어떻게 작동하는지 알려 사용자에게 몇 가지 힌트를 제공해야합니다.
좋은 탐색의 웹 디자인은 다음과 같아야 합니다：
Uat-나쁜 링크에 잘못된 CTA 설정
엉망의 링크와 죽은 링크가 모두 중요한 오류의 웹 사이트입니다. 링크를 수동으로 확인하거나 웹 사이트 링크 검사기와 같은 도구를 자주 사용해야합니다.,또한 링크의 기능을 확인해야합니다. 특히 텍스트의 링크,당신은 그들이 충분히 분명하고 쉽게 클릭해야합니다. 예를 들어 텍스트 내에 많은 텍스트 링크를 추가하지 마십시오. 작은 모바일 화면에서 텍스트를 탐색 할 때 사용자가 올바른 링크를 탭하기가 어려울 것입니다.
이 사이트에서 각각의 움직이는 작은 그림은 실제로 링크입니다. 그것은 모든 시간을 이동 혼자두고,텍스트 자체는 매우 모호하다,그래서 사용자가 표시되는 정보를 알 수 없습니다.
CTA 설정도 분명해야합니다., 하지 않는 사용자에게 너무 많은 CTA 선택에 동일한 수준을 것이기 때문에 비용을 사용자에 더 많은 시간 그는 하나 그들이 선호하는 선택합니다. 보 예:
너무 많은 CTAs 동일한 수준의 사용자를 만들 것입니다 더 혼란이다. 또한 키 포인트를 강조하기 위해 하나의 CTA 만 유지해야합니다. 다음은 잘 설계된 CTA 입니다.
Nmg-그룹-불분명한 인터페이스는 배경 이미지
사진에서 사용하는 웹 페이지할 수 있 문의 당신의 웹 사이트입니다., 잘 생긴 그림은 귀하의 사이트를 더 아름답고 편안하게 만듭니다. 일부 디자이너는 전체 그림을 배경 이미지로 사용하기도합니다.
이 사이트에서는 디자인이 실제로 매우 좋지만 자세히 볼 때 텍스트와 배경 이미지가 너무 압도되어 있음을 알 수 있습니다. 웹 사이트의 배경 이미지는 다른 요소로 덮여 있으므로 전체 인터페이스가 실제로 깨졌습니다.투명 버튼을 사용하는 것이 더 나은 선택입니다. 즉,웹 페이지의 버튼을 디자인 할 때 복잡한 색상,스타일 및 질감을 버려야합니다., 대신 와이어 프레임의 윤곽을 그리고 기능을 나타내는 텍스트 만 사용하십시오. 여기에 더 좋은 것이 있습니다.
Wateronwheels-일치하지 않는 스타일
경우에 당신을 유지하려면 페이지를 원활하고 간결하고,다음 사용하지 않는 너무 많은 요소들의 다양한 스타일입니다. 이 사이트에서,텍스트 영역을 사용하여 대조 색상과 다른 글꼴 크기를 강조하는 정보. 그러나 텍스트에서 두 번째 수준을 사용하기도 하이라이트 블루 컬러는 사실을 나누기 화합하고 균형 잡힌 계층적 인터페이스입니다.,
단결은 중요한 전반적인 아름다움과 유창의 웹 인터페이스,아래 그것을 볼
Greatdreams-하지 않는 모든 흰색 공간
전체적인 웹사이트를 보이는 다채로운 콘트라스트와 눈에 띄 그리고 또한 해당하는 항목의 아이들의 주스를 마신다. 그러나 너무 밝은 색상이 너무 많이 혼합되어 전혀 공간이 없습니다. 온라인 비즈니스 웹 사이트보다 화려한 그림처럼 보입니다. 게다가 과장된 색상의 조합은 텍스트의 가독성이 매우 좋지 않게되었습니다., 또한,사이트는 관련 정보를 찾기 위해 하단으로 스크롤 떠나,어떤 탐색을하지 않았다.
좋은 웹 디자인으로 백색의 공간은 간단하고 깨끗:
위에서 몇 가지 목록은 나쁜 웹사이트입니다. 그러나 다른 웹 디자인 실수도 존재합니다.
1. 자동으로 음악 재생(사용자에게 알리지 않고).피>2. 긴 페이지로드 시간. 로드하는 데 더 많은 시간이 걸릴수록 사용자가 사이트를 떠날 확률이 높아집니다.피>3. 웹 페이지가 너무 길다., 얼마나 많은 사용자가 페이지 하단까지 모든 길을 가고 관심이 있다고 생각하십니까? 사용자의 인내심을 테스트하려고하지 마십시오.피>3. 만료 된 정보. 업데이트되지 않은 정보는 사용자를 오도하고 귀하의 사이트를 전문가가 아닌 것처럼 보이게합니다.피>5. 격리 된 페이지. 사용자는 홈페이지로 돌아가는 방법을 모릅니다. 이것은 나쁜 경험을 제공합니다.피>6. 대화 형 콘텐츠가 누락되었습니다. 사용자가 감정과 아이디어를 표현할 수있는 방법을 제공 할 수없는 경우 웹 사이트가 천천히 죽을 수 있습니다.,
품 디자인-처음 단계를 시작하는 웹 디자인
좋다면 당신의 죄의 실수로 위에서 언급된다. 연습이 완벽하게,당신은 단지 더 많은 연습이 필요합니다. 제 제안은 프로토 타입 디자인부터 시작하는 것입니다.
더 빠르고 쉬운 웹 프로토 타입 도구 인 Mockplus 를 사용하여 웹 디자인을 시작할 수 있습니다. Mockplus 는 웹 프로젝트를 지원합니다. 이제 Mockplus 에서 웹 페이지를 디자인하는 방법을 보여 드리겠습니다.
1 단계:열 Mockplus 및 웹을 만들 프로젝트
시작 페이지에서,당신이 선택할 수 있는 개별 프로젝트 또는 팀 프로젝트입니다., 선택한 후 팝업 창에서 웹 프로젝트를 선택하십시오. 여기에서,당신은 또한 웹 사이트 페이지 크기를 설정하는 무료입니다.
2 단계:자유롭게 디자인에서 Mockplus
Mockplus 는 200 개 이상의 높은 설계 및 구성 요소 3,000 개 이상의 벡터 아이콘에 당신을 도울 수 있는 디자인이다. 1)텍스트 계층 구조:탐색 모음,기본 제목,자막 및 본문의 텍스트가 달라야합니다. 텍스트 영역 구성 요소를 사용하고 Mockplus 에서 텍스트 크기를 설정하여 텍스트 계층 구조를 강조 표시 할 수 있습니다.,
2)빠른 디자인:할 수 있는 형식을 사용하는 화가 및 자동 데이터 입력을 빠르게 마무리합니다. 서식 복사할 수 있습을 전체 텍스트는 동일한 형식으로 표시되고 자동 자료를 채울 수 있는 자동으로 입력한 텍스트 데이터와 이미지 데이터입니다.
3)속성 설정:구성 요소의 색상,투명도를 설정할 수 있습니다.
4)이미지를 가져 오기 전용 이미지 구성 요소를 가져올 수 있습을 사진으로 원하는 웹 페이지에는 배경 이미지,그리고 당신은 또한 자유롭게 디자인다.
직접 해보십시오.,
온라인 공동 디자인하는 웹 디자인&오류가에서 시작
을 피하는 나쁜 웹 디자인과 일반적인 오류가 위에서 언급된,그것은 필요한 디자이너도록 개발자,관리자, 다른 제품 팀 구성원에 참여하고 웹사이트 디자인이 아주 처음부터 그 제안을 수집하고 그들로부터 피드백입니다.
,이것에 대해 편리한 온라인 디자인을 공동 작업 도구,등 Mockplus 클라우드,수있는 좋은 시작이 될 수 있습니다.,
으로 웹사이트 디자이너,당신은 단순히 가져오 웹사이트와 디자인 자산 세부사항 및에서 포토샵/Adobe XD/Sketch(를 사용하여 Mockplus 클라우드 플러그인)한 번의 클릭으로 수집하의 의견과 제안을 다른 팀 구성원이 적시하고,인터렉티브한 시제품을 다른 사람과 공유 할 수 있습니다.
웹사이트 프론트 엔드 개발자,당신은 단순히 보기 모든 웹사이트 디자인과 코멘트를 떠나 자유롭게 수색 중복 요소와 색깔을 쉽게 확인 및 다운로드 디자인 자산다.,
제품 관리자,당신은 단순히 체크인 디자인 프로세스를 보다 쉽게 업로드하고 미리 문서를 자유롭게 관리하는 웹사이트 디자인 프로젝트해 더 부드럽게 동작합니다.
전반적으로,Mockplus 우 효과적으로 연결하고 전체 제품 디자인 워크플로우에서 시작하는 것을 막을 수는 많은 웹사이트 디자인은 오류가 있습니다.
요약하자면
사이트의 디자인은 웹 사이트 자체의 기능을 제공 할 필요가 있습니다. 또한 미용 및 기타 요구 사항을 고려해야합니다., 난 위의 9 나쁜 웹 디자인 사례가 당신에게 도움이 될 것입 및을 이해하는 데 도움이 될 수 있는 것은 나쁜 웹 디자인,그리고 어떻게 그들을 피하기 위해서는 미래입니다.피>