웹 디자인 비평 # 95 : WPMU DEV

/2018-12-31 23:22:52/
Laren
/비평/

매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 일부 작업을 수행 할 수있는 영역 외에 잘 수행 된 영역을 모두 지적 할 것입니다. 마지막으로 피드백을 제공하여 마무리합니다.

오늘의 사이트는 워드 프레스 테마 및 플러그인 마켓 플레이스 인 WPMU DEV입니다. 우리가 어떻게 생각하는지 봅시다!

디자인 리소스 살펴보기

귀하의 사이트를 제출하십시오!

향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 49 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.

WPMU DEV 소개

“WPMU는 웹에서 최고의 WordPress, Multisite 및 BuddyPress 플러그인과 테마를 제공합니다. 2004 년부터 145, 436 명의 회원들로부터 사랑을 받아 상을 받았습니다. 훌륭한 멀티 사이트 테마, 유명한 133 개 테마 팩, 놀라운 네트워크 홈 페이지 및 100 % BuddyPress 호환성을 찾을 수있는 유일한 곳입니다.”

다음은 홈페이지 섹션의 스크린 샷입니다.

첫 인상

"WPMU DEV는 반응 형 레이아웃과이 디자이너의 미소를 짓기에 충분한 작은 작은 터치로 구성된 아름다운 사이트입니다."

작년에 동일한 네트워크 / 패밀리의 다른 사이트 인 WPMU.org를 살펴 보았습니다. 그 사이트는 약간 평범했다. 괜찮은 것처럼 보였지만 일반적인 템플릿에서 나온 것과 매우 흡사합니다. 또한, 레이아웃은 작업이 필요했고 로고와 같은 미학의 특정 측면은 약간 벗어났습니다.

비판 후, WPMU의 열심히 일하는 사람들은 그 비판에서 제안한 많은 제안들을 통합하여 그 사이트를 완전히 재 설계했습니다. 결과적으로 이전 블로그와 관련된 모든 문제를 해결하는 멋진 새 블로그가 만들어졌습니다. 레이아웃은 환상적이며 (부팅에 완벽하게 반응합니다) 미학은 아름답고 관습 적이며 로고조차 더 현대적인 느낌을 갖도록 재 설계되었습니다. 그들은 정말로 그들의 게임을 올렸고 공원에서 버전 2를 떨어 뜨 렸습니다.

그들이 WPMU DEV를 살펴 보라고 요청했을 때, 나는이 사람들이 지금 최고의 디자인을 최우선 순위로 삼고 있다는 것을 알았을 때 알았습니다. 새로운 WPMU.org와 마찬가지로 WPMU DEV는 반응 형 레이아웃과이 디자이너의 미소를 짓기에 충분한 작은 터치만으로도 아름다운 사이트입니다. 무엇이 그렇게 멋진 지 알아 보겠습니다.

헤더

상단에서 시작하여 페이지를 아래로 이동합니다. 페이지에로드 할 때 화면을 채우는 그래픽입니다.

내가 보는 첫 번째 것은 매력적이고 친절한 사람의 큰 사진이라는 것을 좋아합니다. 지나치게 자세를 취하고 공식적인 재고 사진 느낌이 없지만 대신 더 정통하고 믿을 수 없을 정도로 캐주얼 한 것처럼 보입니다. 여성의 이미지 바로 옆에는 긍정적 인 고객 인용문이 있는데 이는 여성의 사진에 대한 맥락을 제시합니다.

방망이에서 그들은 내가 좋아하는 전술 중 일부를 공격했습니다. 웃는 얼굴과 고객의 칭찬. 이 사이트와 결과적으로 WPMU DEV는 친절하고 접근하기 쉽고 방문자로서 신뢰할 수있는 것처럼 보이며 몇 초 동안 만 여기에있었습니다!

이 모든 것은 확실한 행동 유도 문안으로 백업됩니다. 자세히 알아보십시오. 이 시점에서 이것은 내가 원하는 것입니다. 이 링크는 당신을 다른 똑같이 멋진 페이지로 안내합니다. 지금은이 페이지를 고수하고 약간 스크롤합니다.

항해

다음 섹션으로 넘어 가기 전에 페이지 구조에 대해 조금 이야기 해 봅시다. 대부분의 경우이 사이트는 단일 페이지 사이트입니다. 탐색 모음의 링크를 사용하면 페이지를 분리하지 않고 동일한 페이지의 다른 섹션으로 이동합니다. 탐색 막대에 대해 말하면 실제로 개발 및 디자인 작업이 매우 매끄 럽습니다.

처음에는 탐색이 마지막 섹션의 여성 사진 바로 아래에 나타납니다. 그러나 페이지를 아래로 스크롤하면 실제로 뷰포트 상단에 달라 붙습니다. 그렇게하면, 로고가 튀어 나오고 텍스트는 유동적 인 전환으로 크기를 줄입니다. 이것은 내가 정말 괴짜 인 것들이므로 내비게이션은 나로부터 두 엄지 손가락을 얻습니다.

탐색 막대가하는 일은 사용중인 위치에 적응하는 것입니다. 페이지 상단에는 이미 많은 브랜딩이 있으므로 로고가 필요하지 않습니다. 아래로 스크롤하면 로고가 팝업되어 현재 위치를 알려주며 페이지 상단으로 이동하는 빠른 링크 역할을합니다. 매우 기능적입니다. 매우 매력적입니다. 승리, 승리

플러그인 섹션

여기에서 페이지를 아래로 스크롤 할 때 한 섹션에서 다음 섹션으로 이동하면됩니다. 각 섹션은 독특하고 멋지게 보이며 전체 페이지를 지배하는 더 큰 디자인 미학에 묶여 있습니다. 첫 번째 섹션은 다음과 같습니다.

보시다시피, 이러한 다른 섹션은 헤더에서 본 색 구성표 (어두운 배경, 밝은 부분)를 반전시켜 대비와 반복을 모두 훌륭하게 사용합니다. 이 영역의 아이콘 중 하나에 마우스를 올리면 헤드 라인과 그래픽의 일부가 밝은 노랑이되어 명암을 잘 활용합니다.

이 아이콘이 보이는 방식이 마음에 듭니다. 웹 사이트의 절반에 걸쳐 수천 개의 다른 반복에서 볼 수있는 것과 동일한 최소 아이콘 집합은 아닙니다. 그들은 훨씬 더 관습을 느끼고 그들에게 약간의 개성을 가지고 있습니다.

멤버쉽 슬라이더

다음으로 몇 가지 섹션으로 넘어 가서 멤버십 계획을 결정하는 데 도움이되는 정말 깔끔한 UI를 살펴 보겠습니다.

여기 화면 전체에 걸쳐 넓고 멋진 슬라이더가 있습니다. 슬라이더를 1 개월에서 3 개월로 이동 한 다음 12 시간으로 이동하면 하단의 가격이 절약과 함께 업데이트됩니다. 참여를 높일 수있는 훌륭한 상호 작용 지점입니다. 또한 실제로 원활하게 작동하여 슬라이더를 드래그하거나 아무 곳이나 클릭하여 가격을 업데이트 할 수 있습니다. 슬라이더를 어디에서 놓아도 가장 가까운 정지 점으로 이동합니다.

개발자

이 페이지의 마지막 섹션에서는 WPMU의 직원 및 지원 개발자 / 디자이너의 샷을 보여줍니다. 한눈에, 그것은 현저하게 보입니다. 썸네일 그리드일까요?

이 사람들도이 섹션을 멋지게 만들었습니다. 사진 위로 마우스를 가져 가면 사람의 이름과 위치를 보여주는 작은 오버레이가 나타납니다. 커서를 멀리 움직이면 오버레이가 미끄러집니다. 멋진 부분은 커서가 향하는 방향으로 밀어 넣거나 뺄 수 있다는 것입니다. 즉, 커서를 한 사진에서 다른 사진으로 왼쪽으로 밀면 오버레이가 따라 오는 것처럼 보입니다. 계속하기 전에 30 초 동안 견뎌야했던 것은 환상입니다.

반응 형 레이아웃

완료하기 전에 사이트가 완전히 반응하고 있음을 주목할 가치가 있습니다. 아래에서 데스크탑, 태블릿 및 모바일 버전을 살펴볼 수 있습니다.

디자인이 장치를 보는 장치에 얼마나 잘 적응하는지 주목하십시오. 아래로 내려 가면서 핵심 메시지는 유지되지만 레이아웃 효율성을 위해 비 필수 항목은 삭제됩니다.

훌륭한 일!

"항상 사용자와 전환 사이의 장벽을 염두에 두십시오."

내가 염려하는 한, 이 사이트는 최고입니다. 디자인은 완벽하고 레이아웃에 반응하며 메시지를 전달합니다. WMPU DEV가 무엇인지 신속하게 알 수 있으며 질문에 대한 준비된 정보 소스가 있습니다.

나는 불평할만한 것을 찾기 위해 오랫동안 주위를 둘러 보았고 솔직히 거의 아무것도 없습니다. 저와 관련된 한 가지는 실제로 가입하는 데 필요한 노력입니다. 홈페이지 어디에도“지금 가입”버튼이 없습니다. '자세히 알아보기'버튼을 클릭하면 요금제 및 가격 페이지로 이동합니다. 이 페이지는 매력적이지만 마지막으로 계획을 선택하고 진행할 수있는 맨 아래로 이동하기 전에 마일을 스크롤해야합니다.

사용자와 전환 사이의 장벽을 항상 염두에 두십시오. 가입하려는 의도로이 사이트를 방문하면 가장 좋은 방문자이며 귀하는 본인에게 돈을 줄 수있는 쉽고 명확한 경로가 있는지 확인하고 싶습니다.