워드 프레스 웹 사이트 : 14 가지 멋진 예

이 놀라운 WordPress 웹 사이트는이 인기있는 CMS의 최고를 보여줍니다. 2003 년 처음 출시되었을 때 WordPress는 아마추어를위한 기본 블로깅 도구로 간주되었습니다. 매우 빠르게 시작되어 이제는 전 세계 수백만 사이트를 지원하는 완전한 CMS가되었습니다. 그리고 창의적인 전문가들은 그 이후로 복잡하고 아름다운 WordPress 웹 사이트를 만들기 위해 CMS의 경계를 넓혀 왔습니다.

이 놀라운 CMS가 무엇을 할 수 있는지 정확히 보여주기 위해 최고의 WordPress 웹 사이트 중 일부를 선택했습니다. 이 기사가 자신의 WordPress 웹 사이트를 구축하도록 영감을 준다면 Wordpress 튜토리얼 시작하는 데 도움이 될 것입니다. 멋진 포트폴리오를 만들고 싶다면 최고의 가이드를 확인하세요. WordPress 포트폴리오 테마 .

01. 라팔 보자르

WordPress 웹 사이트 : Rafal Bojar



이 사진 포트폴리오는 Vue.js와 함께 WordPress를 사용합니다.(이미지 출처 : Rafal Bojar)

디자이너 젠야 린 주크 세미 헤드리스 CMS로 WordPress를 사용했습니다. Vue.js 이 매력적인 사진 포트폴리오 사이트를 만들기 위해 라팔 보자르 . 선택한 이야기의 미리보기를 표시하는 홈페이지, Bojar의 모든 작업을 보여주는 매끄러운 그리드, 사진 작가의 철학과 접근 방식을 설명하는 '본질'페이지가 있습니다.

Rynzhuk은 '목표는 방문객에게 독특한 경험을 제공하고 Rafal의 놀라운 작품을 선보이는 것이 었습니다. 쌍은 몇 가지 다른 백엔드 옵션에 대해 논의했지만 사이트를 쉽게 관리하고 새 프로젝트로 정기적으로 업데이트 할 수 있도록 WordPress를 결정했습니다.

이 사이트는 WordPress 및 Vue.js와 함께 S3 버킷을 사용하여 데이터를 저장하며, 이는 빠른로드 시간을 보장하기 위해 Cloudfront를 통해 제공됩니다. Rynzhuk는 또한 근본적인 및 Hendrik-Jan de Harder 's 스켈레톤 뷰 , 애니메이션에 대한 GSAP.

02. 아델 바 쿨라

WordPress 웹 사이트 : Adel Vakula

이 모델의 사이트는 매력적이고 야영 인 유머로 가득합니다.(이미지 출처 : Adel Vakula)

Adel Vakula는 우크라이나에서 온 국제적으로 유명한 모델이며, 그녀를위한이 홍보 사이트는 동료 동포들에게서 온 것입니다. Yabloko 아이디어 스튜디오 그는 그것을 디자인하고 코딩했을뿐만 아니라 모든 일러스트레이션 작업을 만들었습니다. 그 결과 우리의 매력적인여 주인공이 등장하는 여러 회화적인 비 네트에 걸쳐 화려하고 독특한 시각적 축제가 탄생했습니다.

미묘한 애니메이션으로 말 그대로 거품이 나는 오프닝 솜사탕 구름 풍경에서 바 쿨라 카리스마 넘치는 개성을 보여주기 위해 디자인 된 몽환적 인 초상화 속의 스타들. 그녀는 버스 킹 고양이로 완성 된 플랫폼에서 뉴욕 지하철 열차를 타면서 YouTube 재생 버튼으로 배가되는 가고일 꼭대기에서 파리의 밤을 기발하게 바라 봅니다. 베니스와 이비자를 방문하면 인스 타 그램과 이메일 링크에 똑같이 별난 배경을 제공하며, 칵테일을 마시는 물개조차도 팔로우를 권장합니다. 뺨에 혀가 있지만 참을 수 없을 정도의 매력과 테크닉으로 사랑에 빠지는 것입니다. 마우스 포인터조차도 모든 심장 모양이됩니다.

WordPress CMS에 구축 된 뛰어난 UI 요소는 의상을 가상 Vakula에 끌어다 놓아 실제 모델링 스냅을 볼 수있는 재미있는 섹션입니다. 가능한 캐스팅에 대한 전화 카드가 진행됨에 따라 이것은 대부분의 것보다 더 기억에 남는 포즈를 취합니다.

좋은 오리지널 캐릭터 만드는 법

저자: 마크 빌렌

03. 미 들아

WordPress 웹 사이트 : Middle Child 샌드위치 가게

Middle Child는 완전히 맞춤화 된 WordPress 테마로 제작되었습니다. 사이트를 탐색하려면 이미지를 클릭하세요.

수상 경력에 빛나는 필라델피아 소재 샌드위치 가게 미들 아이 기발하고 소박한 분위기와 어울리는 웹 사이트가 필요했습니다. 풀 서비스 디자인 및 기술 스튜디오 자기 인식 완전히 맞춤화 된 사이트를 만들었습니다. WordPress 테마 사용 재목ACF – 스튜디오 파트너 인 Mike Wagz가 '진지한 WordPress 테마 개발자를위한 게임 체인저'라고 부르는 조합입니다.

Self Aware는 또한 최적의 경험을 제공하기 위해 최신 웹 기술을 사용했습니다. 레이아웃은 CSS 그리드 , 및 서비스 워커 초기로드 시간을 단축하기 위해 CSS 및 JavaScript 파일을 포함한 정적 자산을 캐시합니다.

Wagz는 'Middle Child는 구석 구석 구석 구석에서 분위기를 풍깁니다. '적절한 재미, 키치, 기발함으로 모든 계층의 고객을 따뜻하게 맞이합니다. 이 정신을 포착하여 웹으로 번역 할 수 있었기 때문에이 디자인이 성공적이라고 생각합니다. '

완벽한 도구를 찾으려면 다음 상단을 확인하세요. 웹 사이트 빌더 . 또한 최저 가격은 아래를 참조하십시오.

오늘의 최고의 웹 사이트 빌더 거래 Wix Wix Connect 도메인 3 파운드 / 월 전망 HostGator HostGator 전용 호스팅 119 달러 / 월 전망 Squarespace 개인적인 10 파운드 / 월 전망 매일 1 억 3 천만 개 이상의 제품을 최상의 가격으로 확인합니다.

04. 바다 수확

WordPress 웹 사이트 : iPad의 Sea Harvest 웹 사이트

ED는 Sea Harvest를 위해 WordPress 기반 웹 사이트에서 신문 스타일 레이아웃을 사용했습니다.

캔버라 기반 해산물 시장 바다 수확 새로운 브랜드 아이덴티티와 스마트 한 디지털 존재가 필요했기 때문에 호주 웹 및 브랜딩 대행사로 전환했습니다. ED . 워드 프레스 웹 사이트는 흥미 진진한 신문 스타일의 레이아웃을 자랑합니다.

'해산물에 대해 생각할 때, 우리 중 많은 사람들이 친구 및 가족과 함께 해변에서 피쉬 앤 칩스를 먹은 기억으로 되돌아갑니다.'라고 디자이너 Cam Tidy는 말합니다. '종종 이러한 테이크 아웃 조인트는 음식을 신문에 싸서 시각적 아이디어로 탐색하는 것이 자연스러 웠습니다.'

그러나 웹에서 정적 인 인쇄 레이아웃을 복제하는 데 어려움이 없었습니다. 팀은 CSS Flexbox를 사용하여 화면 크기에 관계없이 일관된 간격을 유지하면서 콘텐츠 위치를 변경했습니다. 거의 모든 측정은 REM 단위를 사용하는 반응 형 척도를 기반으로하므로 브라우저가 확장 될 때 유형 및 이미지 비율을보다 쉽게 ​​제어 할 수 있습니다.

비디오 편집을 시작하는 방법

개발자 Bryn Shanahan이 가장 좋아하는 기능은 사용자가 사이트를 통해 '그리기'할 수 있다는 것입니다. 대화 형 단어 검색 . '우리는 사이트를 HTML5 Canvas 요소로 덮음으로써이를 달성했으며, 이는 사용자의 그림을 그리는 데 사용되었습니다.'라고 그는 설명합니다.

ED는 많은 웹 사이트 프로젝트에 WordPress를 사용하여 클라이언트에게 사용자 친화적이고 직관적입니다. 개발자 Adam Forcucci는 '[WordPress에는] 쉬운 백엔드 개발 기능이있어 프런트 엔드에 더 많은 시간을 집중하여 디자인에 활기를 불어 넣을 수 있습니다. '할 수있는 능력 WP Rest API를 사용하여 헤드리스로 만드십시오. , 플랫폼에서 향후 개발의 핵심이되는 React와 같은 프레임 워크를 사용할 수 있습니다. '

05. 맥심 슈크 렛

WordPress 웹 사이트 : Maxim Shkret

'녹는 판다'는 좌우 회전 가능(이미지 출처 : Maxim Shkret)

러시아 상트 페테르부르크를 기반으로 맥심 슈크 렛 프리랜서 디지털 아티스트입니다. 그의 인상적인 WordPress 웹 사이트는 포트폴리오를 전자 상거래 시장과 결합하여 새로운 기금 모금 이니셔티브를 시작합니다.

이 사이트는 일련의 4 개의 3D 모델 또는 360도 회전 및 드래그 할 수있는 디지털 조각상에서 열립니다. 돼지, 사막 여우, 쌍성 유니콘, 녹는 판다를 좌우로 돌려 원하는 각도로 만들 수 있습니다. 'Buy this shot'버튼을 클릭하면 다양한 크기의 디지털 이미지를 다양한 가격으로 구매할 수 있습니다. 수익금은 3D 프린팅 5 축 CNC 가공 프로세스를 사용하여 각 디지털 모델을 실제 물리적 조각으로 변환하는 데 다시 합쳐집니다. 참여자를 초대하기위한 깔끔한 아이디어이며 일반적으로 수동적 인 경험에 크라우드 펀딩 접근 방식을 어떻게 연결할 수 있는지 보여줍니다.

사이트 제작 크레딧에는 뉴욕의 Sochnik Design Studio가 포함되지만 매끄러운 UI 노력이 Shkret의 재능을 가리지 않습니다. 여기에는 물 필터를 통해 물결과 물결을 일으키는 스틸 조각 사진의 간단한 갤러리 섹션이 포함됩니다. 미묘한 효과이지만 Shkret이 각 조각에 부여하고자하는 질감의 느낌을 높입니다.

06. KOBU

WordPress 웹 사이트 : KOBU 크리에이티브 에이전시

기복이 나는 용암 램프 스타일의 홈페이지로 KOBU 웹 사이트가 열립니다.

당연히 포트폴리오 사이트는 창의적인 표현과 영감을 얻을 수있는 웹에서 가장 비옥 한 기반을 계속 제공하고 있습니다. 포르투갈 대행사를위한이 온라인 전화 카드 KOBU 세련되고 절제된 워드 프레스 웹 사이트를 통해 그 정신을 따르고 있습니다. 실험을 두려워하지 않는 '브랜드 실험실'이라고 불리는 이곳의 기술 작업은 복잡성에 대한 상상력을 보여줍니다.

일련의 요소를 통해 CSS와 SVG를 결합하여 최대 프런트 엔드 문자를 얻을 수있는 방법을 상기시킵니다. 절대 위치 지정은 매력적인 와이어 프레임 모티프를 오버레이하여 대담한 배경 색상 블록 사이의 선을 나누고 섹션을 함께 연결하는 데 사용됩니다. 루프 형 HTML5 비디오 패널은 위에 배치 된 마스크로 SVG 모양을 사용하여 고유 한 흔들리는 가장자리를 얻습니다. 사례 연구 이미지의 테두리 반경이 절반으로 줄어들어 원형이됩니다. 이 사이트는 slick.js 캐 러셀 라이브러리를 깔끔하게 활용하여 메인 페이지 중간을 통해 사무용 말과 함께 KOBU 팀을 '트로트'합니다.

하지만 천정은 아마도 SVG 경로를 조작하여 생성 된 물결 모양의 용암 램프 스타일 헤더에서 열리는 첫 번째 부분 일 것입니다. 다가 자바 스크립트 애니메이션 엔진 인 anime.js 플러그인을 사용하면 색상 팔레트를 설정하는 눈길을 끄는 트릭입니다.

저자: 마크 빌렌

07. 형태

WordPress 웹 사이트 : noformat 홈페이지

noformat의 홈페이지는 즉각적인 영향을 많이받습니다.

형태 뉴욕에 본사를 둔 전략적 디자인 스튜디오입니다. 홈페이지는 방문자의 커서를 따라 화면을 따라 움직이는 안구 디자인을 특징으로하며 오버레이 텍스트는 noformat이 만들 수있는 모든 것을 순환합니다. 눈알을 만들기 위해 팀은 먼저 After Effects CC 는 three.js를 사용하여 대화 형 버전을 구축하기 전에 noformat의 창립자이자 크리에이티브 디렉터 인 Ian Brewer를 설명합니다.

'우리는 GPU 렌더링을 최적화하기 위해 버텍스 및 프래그먼트 셰이더를 사용했고 내부에 noformat 로고를 깜빡이게 만들고 플래시했습니다. 그런 다음 후 처리 효과를 적용하여 가장자리를 흐리게하고 하이라이트에 블룸을 추가하여보다 유기적이고 덜 3D 느낌을줍니다. '

사이트의 나머지 부분은 매끄러운 스크롤 전환과 사용성에 영향을주지 않으면 서 기술 능력을 보여주는 미묘한 시차 효과로 첫 페이지의 영향에 부응합니다.

Brewer는 '빠른 실행과 유연성을 위해 사이트로 WordPress를 선택했습니다. '수년에 걸쳐 우리는 다른 어떤 CMS 솔루션보다 빠르게 사이트를 만들거나 편집 할 수있는 자체 라이브러리와 모듈 기반 편집 시스템을 구축했습니다.'

디지털 아트를 인쇄하는 방법

08. Femme and Fierce

네덜란드 경험 디자인 스튜디오 이상한 나라 sass로 전자 상거래를 제공했습니다. Femme and Fierce . 워드 프레스 웹 사이트의 눈에 띄는 충돌-풍부한 색 구성표는 오프라인에서 온라인 패션 소매 업체의 브랜드 메시지를 전달합니다. 롤리팝 돌리기, 화살 찌르기, 입술 핥기 등 애니메이션 '스티커'는 건방진 느낌을주고이 범위를 목표로하는 Snapchat / Instagram 세대와 공감해야합니다.

09. 퓨레 메종

Mash House WordPress 웹 사이트

애니메이션 낙서가이 WordPress 웹 사이트에 생명을 불어 넣습니다.

으깬 감자 파리에 본사를 둔 창의적이고 전략적인 스튜디오입니다. WordPress 웹 사이트는 주로 호버에 나타나는 밝은 노란색 애니메이션 낙서로 인해 눈에 띄고 지루한 브랜드 진술에 개성을 주입하고 전환을 활성화합니다. 또한 방문자가 길을 찾도록 돕고 사이트를 탐색하고 상호 작용하도록 권장합니다.

10. 우리는 사실상

WordPress 웹 사이트 : 우리는 사실상

We Virtually Are의 사이트는 서비스를 판매하기 위해 360도 비디오를 잘 활용합니다.

가상 현실을 사용하여 감성적 인 이야기를 전하는 사람들을 매료시키는 것이 비즈니스라면 사람들을 일로 끌어들이는 사이트가 필요합니다. 그리고 부티크 VR 스튜디오 우리는 사실상 그 다음 일부를 관리했습니다. 사이트는 Herdl WordPress에서 WebGL 및 360도 비디오를 포함한 많은 최첨단 기술을 사용하여 몰입 형 서비스의 거부 할 수없는 맛을 제공합니다. 예상치 못한 유명 인사로 완성 된 Audi 용 VR 테스트 드라이브를 확인하십시오.

11. 아사로

WordPress 웹 사이트 : Asaro

Asaro의 사이트는 모든 화면 크기에서 아름답게 보일만큼 반응이 좋습니다.

Asaro는 전 세계 슈퍼 요트 고객을위한 독특한 모험 경험과 즐거운 여행을 제공합니다. 더 광범위한 기업 리 브랜딩의 일환으로이 멋진 웹 사이트는 브리스톨에 기반을 둔 에이전시에서 디자인하고 개발했습니다. 그린 카멜레온 .

고객이 지속적으로 콘텐츠를 쉽게 편집 할 수 있도록 맞춤형 WordPress 프레임 워크를 기반으로 구축 된 방문자는 매력으로 가득 찬 발견의 여정을 떠납니다. 미묘한 스크롤 효과는 대화 형 점선에 깔끔하게 연결되어 요트 선장이 차트를 표시하는 방식으로 탐색 진행 상황을 표시합니다. 사용자 정의 CGI 렌더링은 표현을위한 그래픽 장치로 활용되었습니다. 아사로 이벤트의 개인 특성으로 인해 사진 자산이 부족하다는 점을 고려하여의 독점 서비스 제공.

크리에이티브 디렉터 인 Tom Anderson은“아트 디렉션은 물방울 사진과 연극 포스터 디자인의 혼합에서 영감을 받았습니다. '우리는 사진 스타일의 미학을 좋아했고 그것이 프로젝트의 기본 항해 테마와 잘 어울린다고 느꼈습니다.'

작은 화면에서도 아름답게 일관되게 보일뿐만 아니라 액세스 속도도 성능을 능률화하는 동기가되었습니다. 해양 웹 연결의 자비에 보트 거주자에게있어로드 시간은 데스크톱, 태블릿 및 모바일에서 고르지 않은 것보다 더 짧습니다.

저자: 마크 빌렌

12. 덴마크 디자인 박물관

WordPress 웹 사이트 : 덴마크 디자인 박물관

시차 스크롤링과 반응 형 이미지의 현명한 사용으로 덴마크 디자인 박물관 사이트는 꼭 봐야 할 곳입니다.

코펜하겐에 기반을 둔 디자인 및 브랜딩 대행사에서 제작 Stupid Studios , 덴마크의 디자인 박물관 박물관의 아카이브, 컬렉션 및 연구를 전시 할뿐만 아니라 최신 스타일로도 제공합니다. 박물관 로고의 개막 SVG 애니메이션부터 눈길을 끄는 것까지 시차 스크롤 콘텐츠를 스크롤 할 때 기분이 좋아지는 팔레트가 바뀌므로 필수 디자인 대상을위한 완벽한 온라인 존재입니다.

13. 케이티 페리

WordPress 웹 사이트 : Katy Perry

주요 유명인도 Wordpress에서 제공하는 도구를 활용하고 있습니다.

팝 공주 Katy Perry는 WordPress를 사용하여 공식 웹 사이트를 호스팅합니다. 당연히 비주얼과 소셜 미디어 단서에 초점을 맞춘이 사이트는 아티스트의 고사양 포트폴리오 샷을 활용하여 대담한 진술을합니다. 아래로 스크롤하여 투어 날짜, 상품 등을 보거나 아이콘을 사용하여 더 많은 것을 찾아보세요.

아티스트의 독특한 풍선 껌 팝 개인 이미지를 사용자 친화적이고 광택있는 매그 스타일 기능과 혼합 할 수있는 깔끔한 컷이지만 날카로운 사이트입니다. 너무 많은 애니메이션과 음악으로 가득 찬 바쁜 밴드 사이트의 시대는 지났습니다. 페리 웹 사이트 단순한 흰색 배경과 쉽게 탐색 할 수있는 링크를 사용하여 다양한 개성을 담을 수 있음을 입증하여 팬들에게 쉽고 편리하게 듣고보고 배울 수있는 옵션을 제공합니다.

14. 잉크 탱크

WordPress 웹 사이트 : Ink Tank

Kao Collins의 사이트는 잉크에 대해 생각할 수 있도록 설계되었습니다.

1989 년 Kodak의 연속 식 잉크젯 프린터에 잉크를 공급하는 1 인 작업 인 Collins Inkjet으로 시작하여 오늘날 Kao Collins는 세계 최고의 공급 업체 중 하나입니다. 잉크에 대해 생각해 본 적이 없다면 (프린터가 떨어질 때 저주하는 것 이상으로) Kao Collins의 사이트 인 The Ink Tank에서이를 바꿀 것입니다.

에 의해 만들어진 DBS 인터랙티브 , 잉크 탱크 은 잉크 업계의 최신 뉴스를 제공하고 기업과 아티스트가 현재 잉크를 사용하는 몇 가지 창의적인 방법을 보여주기 위해 모든 중지를 끌어내는 눈길을 끄는 WordPress 사이트입니다. 우리가 아는 한 하이라이트는 인쇄 역사 섹션입니다. 애니메이션과 효과로 가득 찬 멋진 시차 단일 페이지로 점토 정제에서 오늘날의 고속 단일 패스 인쇄에 이르기까지 모든 과정을 안내하고 앞을 내다 봅니다. 인쇄의 미래 가능성에 대해

CSS 생성 – 웹 디자이너를위한 컨퍼런스 : 9 월 26 일, Rich Mix, Shoreditch, London

디지털 아트의 음영 유형
(이미지 출처 : Future)

더 읽어보기 :