Do you sometimes feel that all websites look the same? In this post, we compiled web design showcases that prove differently. They highlight some of the finest web designs, well-crafted experiences, and delightful interactions from across the web. Inspiration is guaranteed.
당신은 때때로 모든 웹사이트가 똑같이 보인다고 느끼나요? 이 게시물에서, 우리는 다르게 증명하는 웹 디자인 쇼케이스를 편집했습니다. 그들은 최고의 웹 디자인, 잘 만들어진 경험, 그리고 웹 전체의 즐거운 상호 작용을 강조합니다. 영감이 보장됩니다.
요약 :)
디자인 영감! 흥미로운 웹사이트는 어디에서 찾을 수 있습니까? 다음은 영감을 얻기 위해 자주 방문하는 쇼케이스 목록입니다 .
효과적이고 가식 없는 디자인 , 약간의 재미가 내장된 웹 사이트, 좋은 전자 상거래 UX 의 예, 상호 작용 시나리오를 찾고 있거나 자신의 안락한 영역을 떠나 더 깊이 파고들고 싶은지 여부에 관계없이 라틴 문자 체계를 뛰어넘는 디자인을 통해 이 게시물에서 아이디어를 간지럽힐 무언가를 확실히 찾을 수 있을 것입니다. 즐거운 브라우징!
디자인 영감! 흥미로운 웹사이트는 어디에서 찾을 수 있습니까? 다음은 영감을 얻기 위해 자주 방문하는 쇼케이스 목록입니다 .
효과적이고 가식 없는 디자인 , 약간의 재미가 내장된 웹 사이트, 좋은 전자 상거래 UX 의 예, 상호 작용 시나리오를 찾고 있거나 자신의 안락한 영역을 떠나 더 깊이 파고들고 싶은지 여부에 관계없이 라틴 문자 체계를 뛰어넘는 디자인을 통해 이 게시물에서 아이디어를 간지럽힐 무언가를 확실히 찾을 수 있을 것입니다. 즐거운 브라우징!
목차 #
관심 있는 주제로 바로 이동하여 관련 쇼케이스를 찾거나 전체 목록을 찾아볼 수 있습니다 . 즐기다!
대체 설계
다크 모드 디자인
전자상거래 UX
훌륭한 웹 디자인
국제 디자인
방문 페이지
최소한의 디자인
모바일 디자인
한 페이지 디자인
페이지 흐름
개인 사이트
SaaS 인터페이스
오늘의 사이트
지속 가능한 디자인
타이포그래피
UI 패턴
사용자 여정
UX 영감
웹사이트 검거
주간 쇼케이스
기발한 디자인
일본 디자인 #
웹은 전 세계에 걸쳐 있지만 웹 디자인에 대해 이야기할 때 예는 일반적으로 라틴 알파벳의 26자 주위를 돌고 있습니다. 다른 쓰기 시스템은 종종 토론의 일부가 아닙니다. 많은 훌륭한 웹 사이트가 우리 대부분에게 눈에 띄지 않는 상태로 유지되는 효과가 있습니다. 그것을 바꿀 시간입니다. 일본 웹 디자인을 통한 여정을 준비 중이라면 Responsive Web Design JP가 적합합니다. 컬렉션의 예제는 특유의 경쾌함 과 본질에 대한 집중으로 빛나고 일본어를 마스터하지 않아도 기술적으로 쇼케이스를 탐색할 수 있습니다.
반응이 좋은 JP
Responsive JP는 최고의 일본 웹 디자인을 선보입니다. (이미지 제공: 반응형 JP )
디자인 Made In Germany #
Design Made In Germany는 독일 에이전시와 디자이너의 최고의 디자인 작업을 수집합니다. 웹사이트 디자인을 다루는 것 외에도 브랜드 디자인 , 인쇄 디자인, 포장, 로고, 포스터, 영화, 서체 및 일러스트레이션의 뛰어난 작품을 포함하는 컬렉션도 있습니다.
디자인 메이드 인 독일
Design Made In Germany는 독일 에이전시와 디자이너의 작품을 조명합니다. (이미지 출처: 디자인 메이드 인 독일 )
다크 모드 디자인 #
다크 모드 디자인은 독점적으로 다크 모드에 있거나 전환할 수 있는 아름답게 디자인된 웹 사이트를 보여줍니다. 다크 모드가 "일반적인" 조명 디자인의 추가 기능이 아니라 창의적인 가능성이 많은 스타일이라는 멋진 예입니다 .
다크 모드 디자인
다크 모드 디자인 에서 알 수 있듯이 다크 모드는 토글 뒤에 숨어 있는 것 이상입니다 . (이미지 제공: 다크 모드 디자인 )
최소한의 디자인 #
Httpster 의 큐레이터인 Dominic Whittle과 Tom Fitzgerald는 좋은 타이포그래피와 효과적이고 소박한 디자인을 좋아합니다 . 10여 년 전, 그들은 좋은 사이트의 링크를 서로에게 이메일로 보내기 시작했지만 영감을 얻은 것을 공유하고 태그를 지정하기 위한 더 나은 시스템이 필요하다는 것을 곧 깨달았습니다. 그때 Httpster가 탄생했습니다.
Httpster
좋은 타이포그래피와 효과적인 디자인은 Httpster 쇼케이스 의 핵심입니다 . (이미지 출처: Httpster )
저탄소 웹사이트 #
큰 JavaScript 라이브러리, 최적화되지 않은 큰 이미지 및 자동 재생 비디오를 사용하는 많은 놀라운 웹 사이트는 예상보다 무겁고 숨겨진 탄소 발자국을 크게 만듭니다. 그리고 좋은 디자인이 지구에 미치는 탄소 영향을 낮게 유지하면서 달성할 수 있음을 증명하는 웹사이트도 있습니다. Lowwcarbon은 지속 가능하게 구축되고 영향이 적은 웹사이트 의 예를 다룹니다 . 아직 영감이 충분하지 않다면 Lowww는 지속 가능한 웹 디자인에도 전념하고 있습니다.
저탄소
Lowwcarbon은 지속 가능한 웹 디자인이 어떤 모습일 수 있는지 탐구합니다. (이미지 제공: Lowwcarbon )
한 페이지 사랑 #
One Page Love는 단 하나의 페이지로 성공하는 웹사이트를 보여줍니다. "한 페이지"의 아름다움은 한 가지를 어지럽히지 않고 바로 요점으로 홍보하는 데 있습니다 . Rob Hope는 2008년에 One Page Love를 설립했으며 매일 한 페이지 웹사이트와 리소스를 계속 추가하고 있습니다. 랜딩 페이지 영감이 필요하거나 템플릿을 찾고 있다면 이 곳이 도움이 될 것입니다.
한 페이지 사랑
One Page Love는 한 페이지의 아름다움을 기념합니다. (이미지 제공: 한 페이지 사랑 )
고급 웹 및 인터랙션 디자인 #
재미있고 참신한 사이트에서 깨끗하고 단순한 사이트에 이르기까지 거의 8,000개의 사이트가 Siteinspire 에서 발견되기를 기다리고 있습니다 . Howells—Studio에서 큐레이팅하여 스타일, 유형 또는 주제별로 찾아보거나 가장 좋은 것을 볼 수 있습니다.
사이트인스파이어
Siteinspire는 최고의 웹 및 인터랙티브 디자인을 선보입니다. (이미지 출처: 사이트인스파이어 )
대체 디자인 #
새롭고 흥미로운 방식으로 상호 작용 및 콘텐츠를 실험하는 특별한 디자인을 찾고 있다면 Hoverstat.es가 끊임없이 영감을 줍니다. 이 사이트는 스스로를 "월드 와이드 웹의 대체 디자인, 코드 및 콘텐츠의 본거지"라고 설명하며 계층화된 3D 미리 보기가 포함된 포트폴리오부터 매끄럽게 반복되는 스크롤러 또는 상자 밖에서 생각하는 메뉴와 같은 유쾌한 작은 세부 사항에 이르기까지 모든 것을 갖추고 있습니다.
Hoverstat.es
Hoverstat.es 는 상자 밖에서 생각하는 디자인의 보물 상자입니다. (이미지 출처: Hoverstat.es )
기발한 디자인 #
The Whimsical Web 의 메시지는 "웹은 덜 심각하게 받아들여야 합니다."입니다 . 이 사이트는 요즘 우리가 웹에서 자주 놓치는 추가 재미가 있는 웹사이트를 보여줍니다 . 따라서 약간의 놀라움과 기이한 세부 사항에 관심이 있다면 기발한 디자인이 얼굴에 미소를 짓고 몇 가지 새로운 아이디어를 남길 것입니다.
기발한 웹
기발한 웹은 추가적인 재미가 내장된 웹사이트를 보여줍니다. (이미지 제공: 기발한 웹 )
개인 사이트 #
개인 사이트를 업데이트해야 합니까? Personalsit.es 에는 몇 가지 새로운 아이디어가 있습니다. 서로의 개인 사이트를 공유하고 즐기도록 제작된 이 컬렉션은 단순하고 미니멀한 것부터 대담한 것까지 영감으로 가득 차 있습니다.
Personalsit.es
개인 웹사이트를 재설계하기 위한 아이디어를 찾고 있다면 Personalsit.es가 도움이 될 것입니다. (이미지 출처: Personalsit.es )
단 몇 줄의 코드로 데이터 그리드, 차트, 스케줄러 및 달력과 같은 고급 JavaScript 구성 요소를 추가합니다.
30일 무료 평가판
오늘의 사이트 #
Awwwards는 매일 뛰어난 웹사이트에 "오늘의 사이트"라는 제목을 수여하고 디자인 , 유용성, 창의성 및 콘텐츠를 평가하고 타이포그래피와 색상 팔레트 중에서 뛰어난 세부 사항을 강조합니다.
상
Awwwards의 오늘의 사이트는 뛰어난 웹 디자인에 영예를 안겨줍니다. (이미지 제공: Awwwards )
웹사이트 검거 #
그녀의 영감을 주는 웹사이트 검거 에서 Manoela Ilic은 뛰어난 디자인과 상호 작용이 있는 웹사이트를 소개합니다 . 각 에디션은 가장 아름답게 디자인되고 세심하게 제작된 웹사이트의 깜짝 가방입니다.
영감을 주는 웹사이트 검거
검거 에서 Manoela Ilic은 뛰어난 웹사이트를 소개합니다. (이미지 제공: Manoela Ilic )
야생의 UX #
Waveguide는 다양한 플랫폼과 다양한 맥락에서 UX 사례를 문서화하여 놀라운 상호 작용 시나리오를 조명합니다 . 로드모어 페이지네이션부터 QR코드 로그인까지, JJ. Waveguide의 큐레이터인 Ramirez는 모든 예를 자세히 살펴봅니다.
도파관
Waveguide는 놀라운 상호 작용 시나리오를 조사합니다. (이미지 제공: 도파관 )
UI 패턴 #
시작 화면에서 오류 메시지, 설정에서 라디오 버튼에 이르기까지 어떤 종류의 UI 패턴을 찾고 있든 상관없이 UI Garage는 웹, 모바일 및 태블릿에 대한 6,700 개 이상의 패턴을 분류하고 엄선하여 제공합니다 . UI 영감을 얻을 수 있는 또 다른 좋은 장소는 Design Vault 입니다 . 계속 성장하는 컬렉션에는 Netflix, Pinterest, Medium, GitHub 등과 같은 제품의 디자인과 패턴이 있습니다.
UI Garage
UI Garage는 웹, 모바일 및 태블릿의 UI 패턴을 탐색합니다. (이미지 제공: UI 차고 )
전자상거래 UX #
Baymard Institute는 2012년부터 현재까지 전자 상거래 디자인을 문서화한 12,000개 이상의 전체 페이지 디자인 예제 데이터베이스를 유지 관리합니다. 예제는 홈페이지 및 범주에서 계정 및 셀프 서비스에 이르기까지 57개의 페이지 유형에 걸쳐 구성되며 데스크톱, 모바일 웹 및 모바일 앱을 포함합니다. 각 예는 UX 관점에서 페이지 디자인이 잘하는 것과 개선할 수 있는 것을 강조합니다.
Baymard Institute 전자 상거래 UX
Baymard Institute는 어떤 전자 상거래 페이지가 잘 작동하고 무엇이 개선되어야 하는지 조사합니다. (이미지 출처: Baymard Institute )
전자 상거래 영감 #
Ecomm.design은 디자인과 기술 영감을 한 곳에서 통합합니다. 이 사이트는 기술 스택 과 함께 3,800개 이상의 전자상거래 웹사이트를 보여줍니다 . 전자 상거래 플랫폼, 범주, 기술 및 트래픽별로 예제를 찾아볼 수 있습니다.
Ecomm.design
Ecomm.design은 전자상거래 웹사이트의 기술 스택을 보여줍니다. (이미지 출처: Ecomm.design )
방문 페이지 #
Landbook은 색상, 타이포그래피, 스타일 및 업종별로 탐색할 수 있는 다양한 유형의 웹사이트를 보여줍니다 . 랜딩 페이지, 포트폴리오, 블로그, 제품 페이지 등이 그 예입니다. 더 많은 랜딩 페이지 영감을 얻으려면 Landings 로 찾아보십시오 . 이 사이트는 주요 회사에서 만든 수백 개의 방문 페이지를 수집합니다. 색상, 밝기 및 어두운 모드로 탐색할 수 있습니다.
랜드북
Landbook은 매일 업데이트되어 꾸준한 영감의 흐름을 유지합니다. (이미지 제공: 랜드북 )
Smashing Magazine으로 광고하기
모바일 영감 #
Mobbin은 완전히 검색 가능한 100,000개 이상의 모바일 및 웹 스크린샷 라이브러리입니다. 스크린샷은 앱 범주, 화면 패턴 및 사용자 흐름별로 구성됩니다. 로그인이 필요합니다. 무료 요금제에는 금주의 최신 앱 디자인이 포함되어 있습니다.
모빈 모바일 인스퍼레이션
모바일 및 웹 스크린샷의 Mobbin 라이브러리 는 UI 및 UX 연구 시간을 절약해 줍니다. (이미지 제공: 모빈 )
페이지 흐름 #
Page Flows는 입증된 제품에서 학습하여 더 나은 사용자 흐름을 설계하는 데 도움이 되도록 만들어졌습니다 . 라이브러리에는 온보딩에서 업그레이드 및 친구 초대에 이르기까지 모든 것에 대한 영감을 제공하기 위해 시도되고 테스트된 제품의 3,300개 이상의 녹음 및 이메일이 있습니다. 모든 사용자 흐름에 액세스하려면 멤버십이 필요합니다.
페이지 흐름
Page Flows는 입증된 제품의 사용자 흐름을 탐색합니다. (이미지 제공: 페이지 흐름 )
사용자 여정 #
UI Sources는 일반적인 흐름을 설계할 때 지원합니다. 이 사이트는 통찰력을 얻고 추세를 식별하는 데 도움이 되는 종단 간 사용자 여정 기록을 제공합니다. 일부 기능에 액세스하려면 구독이 필요합니다.
UI 소스
UI 소스는 엔드투엔드 사용자 여정의 기록을 제공합니다. (이미지 출처: UI 소스 )
SaaS 인터페이스 #
SaaS 인터페이스에 대한 영감이 필요하십니까? SaaS App Design Inspiration은 일부 최고의 SaaS 제품 에서 UI 및 UX 디자인 예제를 수집합니다 . 전체 갤러리에 액세스하려면 구독이 필요합니다. 더 많은 것을 찾고 계십니까? SaaS 랜딩 페이지 예제는 SaaS 회사에서 만든 UI 예제를 제공합니다. 방문 페이지 및 가격에서 "회사 소개" 페이지, 기능, 사용 후기 등에 이르기까지 모든 것에 대한 많은 영감을 얻을 수 있습니다.
SaaS 앱 디자인 영감
SaaS 앱 디자인 영감은 SaaS 앱 페이지 및 구성 요소에 대한 영감을 제공합니다. (이미지 제공: SaaS 앱 디자인 영감 )
주간 쇼케이스 #
받은 편지함으로 직접 디자인 영감을 받고 싶습니까? UIJar 뉴스레터는 매주 디자인 업데이트, 기사 및 디자인 리소스를 제공합니다 . 함께 제공되는 온라인 쇼케이스에는 엄선된 웹사이트, 브랜딩 및 큐레이팅된 컬렉션이 포함되며, 그 중에는 잔인한 웹사이트, 큰 타이포그래피가 있는 웹사이트 또는 공백이 많은 웹사이트가 있습니다.
UI 항아리
주간 뉴스레터와 온라인 쇼케이스를 통해 UIJar는 끊임없이 영감을 줍니다. (이미지 제공: UIJar )
사용 중인 글꼴 #
환상적인 서체가 너무 많아 결정이 어려울 수 있습니다. Fonts In Use 가 도와드리겠습니다. 독립 아카이브는 서체, 형식, 산업 및 기간별로 타이포그래피를 색인화합니다 . 새로운 글꼴과 글꼴 조합을 찾는 데 적합합니다.
사용 중인 글꼴
Fonts In Use는 새로운 글꼴과 글꼴 조합을 찾는 데 도움이 됩니다. (이미지 제공: 사용 중인 글꼴 )
마무리 #
웹 디자인 영감을 얻기 위해 계속 방문하는 좋아하는 쇼케이스가 있습니까 ? 아니면 직접 큐레이팅을 하셨습니까? 아래 댓글로 알려주세요! 우리는 소문을 퍼뜨리는 것을 돕고 싶습니다.