우리가 좋아하는 웹 사이트 : 기발한

기발한 : 눈부신 흐름도, 와이어 프레임 및 마인드 맵 생성 응용 프로그램. 최근에 나는 웹 사이트 디자인, 특히 제품 페이지가 우수하다는 것을 알았습니다. 예를 들어, 마인드 맵 기능을 소개하는 페이지는 마케팅 웹 사이트에서 직접 제품을 경험할 수 있습니다.

매우 영리하지 않습니까? 이 모든 것이 감사합니다<canvas></canvas> 요소의 힘. 물론 SVG를 사용하여 유사한 효과를 달성 할 수 있지만 SVG를 선택할 때<canvas></canvas> 그들 사이에는 항상 흐릿한 경계가 있습니다.

그러나 디자인 측면에서 나는 "광고는 제품입니다"라는 아이디어를 좋아합니다. 또한 일반 등록 절차를 포기하고 사용자에게 응용 프로그램의 가치를 직접 표시하고 싶습니다. 대부분의 제품은 사용자가 가치를 경험하기 위해 초보자 가이드를 등록하고 완료해야하지만 기발한 것은 아닙니다. 광고 자체는 제품입니다!

또한이 웹 사이트의 디자인을 정말 좋아합니다. 각 제품 기능에는 고유 한 테마가있어 브라우징 할 때 제품 데모가 더 눈길을 끄는 것입니다. 작은 세부 사항이지만 사이트의 나머지 부분을 탐색하고 어떤 정밀한 UI 요소가 있는지 확인하고 싶습니다.

또한 와이어 프레임으로 직접 점프 할 수있는 실제 예제가 마음에 듭니다. 애플리케이션이 어떻게 혁명을 일으키거나 그것이 마인드 맵을 바꿀 수 있는지에 대한 마케팅은 없습니다. 제품 자체를 먼저 보여주는 것이 전부입니다.

하지만! 내비게이션으로 돌아가 봅시다 : 아이콘을 태그하지 않으면 흥미로운 결정입니다. 아름답지만 각 아이콘은 무엇을 의미합니까? Chris는 이전 기사 에서이 질문에 대해 논의했습니다. 아이콘은 내용입니까? 즉, 소프트웨어 디자인 분야에서 수십 년 동안 아이콘을 표시할지 여부에 대한 논쟁이 있습니다. Jef Raskin (1980 년대 원래 Macintosh의 디자이너 중 한 명)은 그의 훌륭한 책 휴먼 컴퓨터 인터페이스에서 우리가 표시되지 않은 아이콘을 남기지 않아야한다고 기록합니다. 어쩌면 그것은 너무 많을 수도 있지만,이 경우 제품 별과 마인드 맵 아이콘이기 때문에이 아이콘을 표시하는 것이 좋지 않다고 생각합니다.

Whimsical의 타이포그래피도 매우 흥미 롭습니다! 그들은 다음 글꼴을 사용합니다. Din Next는 쉽게 간과되는 글꼴입니다. 리드를 취하고 컨텐츠를 중심으로 이끌도록 설계되었습니다.

그러나 글꼴의 성공은 대담한 시각적 디자인 (넓은 선, 떠 다니는 원 및 초승달 모양)이라고 생각합니다. 즉, UI 비주얼이 너무 강할 때 글꼴이 너무 두드러지기를 원하지 않으면 긍정적 인 의미에서 강한 것을 의미합니다.

그러나 이러한 인터페이스를 설계하려면 색상의 접근성을 고려해야합니다. Stacie Arellano는 색상 대비가 왜 중요한지에 대한 이전 기사를 썼습니다.

수학적 방법을 사용하여 두 색상 사이에 충분한 대비가 있는지 알 수 있습니다.

W3C에는 WCAG (Web Content Accessibility Guide) 2.1이라는 문서가 있으며, 여기에는 성공적인 대비 가이드가 포함되어 있습니다. 수학을 시작하기 전에 도달하거나 초과하려는 대비 비율 점수를 알아야합니다. 통과 점수 (AA)를 얻으려면 대부분의 텍스트의 대비 비율은 4.5 : 1이고 더 큰 텍스트는 3 : 1입니다.

나는 여기서 Whimsical의 숫자를 확인하지는 않지만주의를 기울일 가치가 있습니다 ... 특히 UI가 밝고 화려한 배경에 많은 흰색 텍스트가있을 때. 나는이 실수를 여러 번 만들었고 갈 수있는 매우 쉬운 곳입니다. 그러나 사용자가 UI에서 텍스트를 읽을 수 없다면 큰 문제입니다.

요컨대, Whimsical의 제품 웹 사이트는 상쾌합니다. 그것은 시각적 영향을 미치며 제품의 가치와 기능이 "설명"보다는 "데모"를 통해 전달 될 수 있음을 보여줍니다.

이것은 질문을 생각 나게합니다. 최근에 방문한 웹 사이트는 최근에 관심을 끌었습니까?

위 내용은 우리가 좋아하는 웹 사이트 : 기발한의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!