지금까지 2019 년 최고의 웹 사이트 디자인

Adobe Stock으로 만들기> 무료 템플릿 검색

인터넷의 많은 상업적 활동이 웹 사이트에서 소셜 미디어로 이동함에 따라 혁신적인 웹 디자인은 과시하는 것이 아니라 훌륭한 사용자 경험을 조용히 제공하는 것입니다. 그리고 이것은 매끄럽고 세련된 기업 작업보다 작은 프로젝트, 온라인 실험 및 재미를 위해 만들어진 사이트에서 더 자주 발견됩니다.

이 게시물에서 우리는 올해 시작된 6 개의 웹 사이트를 살펴 봅니다.이 웹 사이트는 여러분의 관심을 끌었을지 모르지만 웹 디자인에 대한 영감과 혁신적인 접근 방식을 보여줍니다. 또한 제작자로부터 어떻게 구성되어 있으며 그 결과로 무엇을 배웠는지에 대해 듣습니다.



더 많은 웹 영감을 얻으려면 우리가 가장 좋아하는 WordPress 웹 사이트 , 그리고 우리의 최고 선택 미니멀 한 사이트 디자인 .

01. 필 코프만

필기체 글꼴로 설정된 블로그

Coffman은 자신의 블로그를 전통적인 저널처럼 보이도록 재 설계했습니다.

웹 디자이너가“내 블로그를 다시 디자인해야 해요.”라는 말을들을 때마다 돈을 벌었다면 우리는 백만장자가 될 것입니다. 그래서 모자는 필 코프만 , 텍사스 주 오스틴에 사는 디자이너, 실제로 동을 위해. 하지만 보너스로 그는 그것도 놀랍도록 창의적이고 독창적 인 작업을 수행했습니다.

손글씨와 신문 컷 아웃 스타일을 결합하고 노후화 된 실제 종이와 유사한 소박한 배경을 결합한 이것은 우리가 수년 동안 본 최고의 블로그 디자인 중 하나입니다. 이것은 부분적으로 Coffman이 작업 한 것의 양에 대한 증거입니다.

안드로이드 로봇을 만드는 방법

'이 디자인은 이전의 많은 실패한 시도를 따릅니다.'라고 그는 인정합니다. “자신을위한 디자인은 제가 가장 싫어하는 일입니다. 나는 우유부단하고 비현실적인 기대에 크게 힘 쓰고있다. 결국이 개념이 성공한 이유는 질감, 손으로 그린 ​​요소, 세련된 간행물 이라기보다는 개인적인 저널에 가까운 전반적인 예술 방향으로 돌아가고 싶었 기 때문입니다. '

Neue Haas Grotesk 및 Miller 글꼴로 설정된 블로그 게시물

'Adobe에서 Neue Haas Grotesk를 사용할 수 있다는 사실을 알게되자 Miller는 두 글꼴이 정말 잘 어울리기 때문에 빨리 찾아 왔습니다.'라고 Coffman은 말합니다.

개념을 실행에 옮기는 데에도 몇 가지 기술적 과제가 수반되었다고 그는 덧붙였습니다. '게시물 제목과 검은 색 선에서 원하는 방식으로 질감 효과를 얻으려면 약간의 시행 착오가 필요했습니다.'Coffman이 설명합니다. 'CSS가 텍스트를 클리핑 마스크로 사용할 수 있다는 것을 알고 있었지만 올바르게 제거하는 방법을 찾는 데 많은 시간을 소비하지 않았습니다.'

CSS 선언의 올바른 조합을 적용하는 단계를 거치고 나면 적절한 텍스처 조합을 소싱하고 준비해야하는 문제에 직면했습니다. '이를 위해서는 텍스트 가독성에 문제를 일으키지 않고 적절한 마모와 개성을 가진 텍스처를 찾아야했습니다.'라고 그는 말합니다.

이미지 락 업은 Coffman에게도 '재미있는 도전'이었습니다. '나는 CSS Grid를 사용하여 마크 업의 골격을 설정하고 그리드 템플릿을 조작하여 모바일 레이아웃에서 데스크톱까지 동일한 종횡비를 유지하면서 도형 및 그림 캡션을 배치하는 데 충분한 유연성을 제공했습니다.”

Professor와 Miller 글꼴이 혼합 된 블로그 게시물

Coffman은 손글씨 체로 Professor를 선택했습니다. '읽을 수 있지만 합자도 훌륭하고 일지에 파란색 펜으로 쓸 수 있었던 것 같습니다.'라고 그는 설명합니다.

타이포그래피의 경우 제목과 더 작은 산세 리프 요소는 Neue Haas Grotesk, 본문은 Miller, 손으로 쓴 스크립트는 Professor로 결정했습니다.

'이 개념의 핵심은 손으로 쓴 글꼴과 sans 및 serif 글꼴 간의 상호 작용입니다.'라고 그는 설명합니다. '손으로 쓴 글꼴이 작동하려면 고유 한 개성을 가진 글꼴보다 더 간단하고 친숙한 산세 리프가 필요하다고 느꼈습니다.'

02. 부울 게임

부울 게임 홈페이지

이 재미있는 게임은 Adobe Illustrator 및 기타 벡터 도구에서 부울 연산을 사용하는 방법을 알려줍니다.

부울 게임 Adobe Illustrator, Sketch, Figma 및 기타 벡터 편집기에서 부울 연산을 사용하는 방법을 알려주는 재미있는 브라우저 게임입니다. 창조자 마크 맥케이 어떻게 생겼는지 설명합니다.

“저는 지금까지 몇 년 동안 디자인 게임을 만들어 왔으며 교육용 게임으로 전환하기 어려운 것들을 무의식적으로 수집합니다.”라고 그는 말합니다. “이 아이디어는 한동안 떠오르고 있었는데 paper.js에이를 수행 할 라이브러리가있는 것을 보았습니다. 수학적으로는 제 능력을 훨씬 뛰어 넘었습니다. 그래서 간단한 테스트를했고 재미있을 수 있다는 것을 알았습니다.”

paper.js가 사이트의 벡터 작업을 많이 수행하는 동안 MacKay는 애니메이션에 anime.js를, 사운드에 growler.js를, 색 구성표를 관리하기 위해 d3color를 사용했습니다.

부울 게임 홈페이지

MacKay는 paper.js, anime.js, growler.js 및 d3color를 사용하여 사이트를 구축했습니다.

주요 기술적 과제는 휴대폰에서 데스크톱에 이르기까지 모든 장치에서 작동하도록 만드는 것이 었습니다. “벡터의 크기를 조정하고 방향에 따라 레이아웃을 변경해야하기 때문에 이것은 매우 어려웠습니다. 고정 된 크기를 선택했다면 프로젝트를 꺼내는 데 3 개월이 아닌 한 달이 걸렸을 것입니다. '

흥미롭게도 그 3 개월 동안 그에게 개발 도구 사용에 대한 몇 가지 중요한 교훈을 배웠습니다.

부울 게임 홈페이지

가장 큰 도전은 게임이 모든 장치에서 작동하도록하는 것이 었습니다.

'개발 생태계는 독창적 인 디자이너-개발자가 필요로하는 것과는 매우 다른 것에 최적화되어 있습니다.'라고 그는 설명합니다. “다리를 짓는 작업을 마치고 크레인 작업자, 사전 제작 된 콘크리트 구조물, 강압기 등이 있다고 가정합니다. 그러나 단순히 사람들이 개울을 건널 필요가 있다면 간단한 손으로 나무 구조를 지을 것입니다.

“나는 React, NPM, 테스트, '모범 사례'등을 알지 못하는 것에 대해 부적절하다고 느꼈기 때문에 이것을 말합니다. 이제는 내 흐름과 즐거움을 위해 최적화해야한다는 것을 이해합니다. 개발 도구 및 관행은 매우 다른 제약 조건 인 안정성, 협업 및 모듈성을 지향하는 경향이 있습니다. '

03. 질렌할 실험

Britney 맞춤법 오류의 데이터 시각화

이 사이트는 Reddit 데이터를 사용하여 유명인 이름 철자가 얼마나 나쁜지 시각화합니다.

한동안 본 데이터 시각화의 가장 좋은 예 중 하나는 질렌할 실험 Russell Goldenberg와 Matt Daniels의 디지털 출판 아이디어 푸딩 .

“우리는 이 이야기 Colin Morris의 자체 식별 Reddit 맞춤법 오류 분석에 대해 설명합니다.”라고 Goldenberg는 설명합니다. '그리고 사람들의 철자법의 흐름을 시각화하는 아이디어로 할 수있는 일이 더 많다고 생각했습니다.'

“우리는 Jake Gyllenhaal과 같은 유명인 이름을 사용했습니다. 그 이름은 꽤 두드러졌고 일반적인 철자법에는 포함되지 않았기 때문입니다. 우리는 또한 철자 흐름에 대한 실시간 피드백을보기 위해 인터랙티브 한 무언가를 만들고 싶었 기 때문에 이러한 생각을 결합하여 철자법과 같은 인터랙티브 시각화를 만들었습니다. '

맞춤법을 권하는 텍스트 필드

제작자는 맞춤법 흐름에 대한 실시간 피드백을 보여주는 대화 형 무언가를 만들고 싶어합니다.

이 쌍은 대부분의 시각화를 위해 JavaScript와 주로 D3.js 라이브러리에 의존했으며 사용자 결과 저장을 위해 Firebase를 사용했습니다.

'지금까지 가장 큰 문제는 흐름도를 렌더링하는 것이 었습니다.'라고 Goldenberg는 말합니다. '기술적으로는 sankey 다이어그램이지만 경로가 겹치지 않고 올바르게 렌더링되도록하려면 많은 사용자 정의 작업을 수행해야했습니다.'

Matthew McConaughey 맞춤법 오류의 데이터 시각화

질문에 답하는 다양한 방법에서 다양한 상태를 처리하는 것까지 고려해야 할 사용자 흐름이 많았습니다.

사이트를 구축하는 과정에서 가장 놀라운 점은 사람들이 이름을 철자하는 방법이 얼마나 많은지 알게 된 것이 었습니다. “예를 들어 사람들이 Matthew Mcconaughey를 철자하는 방법은 800 개가 넘었습니다.

'개발 관점에서 볼 때 모든 종류의 변형에서 질문에 답변하는 방법, 다양한 상태를 처리하는 것 (예 : 이미 답변 한 사이트로 돌아 왔는가?)에 이르기까지 고려해야 할 많은 사용자 흐름이있었습니다. 가능한 모든 상태를 미리 아는 것이 개발 및 설계가 순조롭게 진행되는 데 중요했습니다. '

04. JSConf 2019

JSConf 2019 홈페이지

이 회의 사이트는 기본에 초점을 맞추고 훌륭하게 수행합니다.

웹 컨퍼런스 주최자에게는 정말 골칫거리입니다. 이벤트를 계획하고 최선을 다하는 데 에너지를 집중할 수있을 때 웹 사이트에서 작업하는 데 시간을 낭비하고 싶지는 않습니다. 그러나 간단한 쿠키 커터 사이트를 고수하면 사람들은 회의에서 논의하는 주제에 대해 얼마나 많이 알고 있는지 궁금해 할 것입니다.

어떻게 든 JSConf EU의 주최자들은 그 원을 제곱 한 것 같습니다. 그들의 컨퍼런스는 보편적으로 칭찬 받고 존경받을뿐만 아니라, 정적 사이트 생성기 wintersmith를 기반으로 구축 된 그들의 웹 사이트도 꽤 놀랍습니다. 영리한 트릭으로 가득 차서가 아니라 기본에 초점을 맞추고 사용 편의성에서 콘텐츠의 관련성에 이르기까지 모든 측면을 제공하기 때문입니다.

JSConf 2019 참석자 사진

Malte Ubi는이 ​​'세계에서 가장 빠른 컨퍼런스 웹 사이트'를 만들기 위해 모든 것을 투입했습니다.

게다가 빠르다 – 초고속. 같이 Malte ubl 설명하다 이 블로그 게시물 :‘세계에서 가장 빠른 컨퍼런스 웹 사이트를 만들기 위해 완전히 무리한 시간을 보냈습니다.’ (그는 그가 성공했는지 확실하지 않지만 지금까지 아무도 그의 주장을 무효화하지 않았습니다).

Ubi가 안정적이고 빠른 웹 사이트를 만들기위한 웹 구성 요소 라이브러리 인 AMP의 제작자라는 사실을 알 수 있습니다. 그는 새로운 기술을 시도하기 위해 jSConf 웹 사이트를 자신의 놀이터로 사용했습니다. 그리고 그들은 확실히 효과가있는 것 같습니다. 이 사이트는 우리가 사용해 본 모든 장치에서 아름답게 작동합니다.

글꼴 성능 최적화에서 데드 코드 제거에 이르기까지 Ubi가이를 달성 한 영리한 방법에 대해 자세히 알아볼 수 있습니다. 여기 .

05. 디자인 타이틀

디자인 타이틀 홈페이지

이 유쾌한 사이트는 말도 안되는 직책을 쉽게 정확하게 패러디했습니다.

웹 디자인이 재미있을 수 없다고 누가 말합니까? 아니 Xtian Miller보리스 크로우 터 이 재미있는 직책 생성기를 만든, 디자인 제목 , 이것은 일부 웹 디자이너가 요즘 속이는 것처럼 보이는 어리석은 모니 커의 일부를 패러디합니다.

디자인 측면에서는 복잡한 사이트가 아닙니다. 한 가지를 수행하고 매우 잘 수행하며 이에 대해 말할 것도 많습니다.

Miller는“정말 내부적 인 농담으로 시작되었습니다. “좋든 나쁘 든, 창의적 산업 내의 타이틀은 수은의 성질을 발전시켜 지속적으로 진화함에 따라 그 정의에 불일치를 야기했습니다.

디자인 타이틀 홈페이지

이 사이트는 정적 HTML, CSS, JS, Gulp 및 Sass를 기반으로 구축되었습니다.

그 결과, 많은 디자이너들이 더 관련성있게 들리거나 비둘기에 갇히지 않도록 제목을 창의적으로 사용했습니다. 공식 타이틀은 잘리지 않기 때문에 포트폴리오와 소셜 바이오스를위한 유사 타이틀을 제시 할 것입니다. 웹 사이트의 진정한 목표는이 오랜 농담을 시스템에서 제거 할 수있는 시각적이고 재미있는 방법을 만드는 것이 었습니다. '

이 사이트는 개발 워크 플로 자동화를위한 Gulp와 CSS 전처리를위한 Sass를 사용하여 정적 HTML, CSS 및 JS로 구축되었습니다. 생성기 함수와 알고리즘은 완전히 Vanilla JavaScript에서 처음부터 만들어졌습니다.

가장 큰 기술적 과제는 셔플 기능의 알고리즘을 올바르게 얻는 것이 었습니다. “우리는 너무 반복적이지 않은 지점까지 계속해서 조정해야했고, 어리석은 타이틀을했을 때만 큼 완벽하게 정상적인 타이틀을 얻을 수있는 좋은 기회가있었습니다. 더 많이 사용할수록 더 우스꽝 스럽거나 심각해집니다. 간단 해 보이지만 알고리즘을 미세 조정하기 위해 많은 테스트가 필요했습니다. '

디자인 타이틀 홈페이지

가장 큰 기술적 과제는 셔플 기능의 알고리즘을 올바르게 얻는 것이 었습니다.

겉으로보기에는 우리가 International Typographic Style에서 영감을 받았지만 더 구체적으로는 레이아웃과 타이포그래피를위한 Vignelli의 NYC 지하철 디자인 시스템에서 영감을 받았습니다.

밀러는“그 스타일에 모두 들어가면 그이면의 영향, 권위 및 객관성을 어느 정도 인식하게됩니다.이 전체 개념에 대해 아이러니하다고 느꼈습니다.”라고 Miller는 말합니다.

“우리는 제목의 중요성을 강조하기 위해 뷰포트에 맞는 제목을 가능한 한 눈에 띄지 않게 크게 만들고 싶었고 효과와 다양성을 위해 현대적인 색상 조합을 사용했습니다. 색상 랜덤 화는 셔플 링의 단조 로움을 없애기위한 간단한 솔루션이었으며 각 타이틀이 고유 한 인물을 전달하는 방식과 잘 어울립니다. '

06. 캡틴 마블

Captain Marvel 홈페이지

우리는 네온 컬러와 치즈 폰트를 얼마나 놓쳤는 지 결코 깨닫지 못했습니다.

최신 마블 영화, 캡틴 마블 , 1990 년대에 열렸 기 때문에이 유쾌한 홍보 사이트는 그 10 년 동안의 웹 모습과 느낌을 완벽하게 재현합니다.

젊은 사람들은 그것이 얼마나 기본적이고 투박해 보이는지에 충격을받을 수 있지만, 특정 연령의 사람들은 네온 글꼴, 치즈 같은 애니메이션, 나쁜 사진 자르기, 방명록 및 히트 카운터를보기 위해 향수를 불러 일으킬 것입니다. 초기 웹 사이트 디자인의.

누군가가 인간인지 아니면 비밀리에 변장 한 외계 외계인인지를 결정하는 진정한 'Spot the Skrull'게임도 있습니다. 네 얘들 아, 이것이 바로 20 세기 후반의 최첨단 영화 홍보에 관한 것이었다.

우리는 그곳을 좋아합니다

카운터와 방명록이 있다는 점이 마음에 듭니다!

물론, 내부적으로이 사이트는 완전히 진품이 아닙니다. Marvel의 소프트웨어 엔지니어링 책임자 인 Lori Lombert가 '우리는 FrontPage에서 빌드하고 Angelfire를 호스팅합니다'라고 농담을했지만 실제로는 최신 CSS 및 JavaScript를 사용하여 구성되었으므로 Netscape Navigator와 같은 1995 년 브라우저는이 브라우저로 무엇을해야할지 몰랐을 것입니다. 10MB 크기가 은밀한 AOL 모뎀을 통해 전화 접속으로 다운로드하는 데 영원히 걸렸을 것입니다.

즉, 1990 년대에 처음으로 웹 페이지를 다운로드하는 것을 본 스릴을 기억하는 사람에게는 이것이 진정한 대접입니다. 패러디는 쉽게 보일 수 있지만 실제로는 제대로하기가 엄청나게 어렵습니다. 따라서 Lombert와 그녀의 팀이 이런 방식으로 작은 세부 사항을 완벽하게 파악한 것은 대단한 성과이며, 오늘날에도 웹이 여전히 재미 있고 무정부 상태 일 수 있다는 영혼없는 디지털 유틸리티를 상기시켜줍니다.

더 읽어보기 :