Gawker 는 밝은 로고, 흰색 배경, 무한 스크롤과 같은 그 순간의 웹 디자인 트렌드의 모든 시각적 특징이 있는 오츠 시대의 블로그로 기억할 것 입니다. 오늘 Gawker 를 방문했다면 전혀 인식하지 못할 수도 있습니다. 2013년 여성 관심 웹사이트 Bustle 로 시작 하여 현재 13개의 온라인 자산으로 구성된 디지털 대기업인 BDG 가 2021년에 다시 시작한 Gawker 는 타블로이드 같은 열망에 맞는 새로운 모습을 채택했습니다. 로고부터 시작해 보겠습니다. 새로운 Gawker 에서 볼드한 검은색 로고의 위쪽 절반이 머리글에서 잘린 것처럼 보입니다. 마치 프린터가 작업 중간에 잉크를 다 쓴 것처럼 보입니다. 로고는 우아한 세리프 글꼴 및 Arial Black과 나란히 배치되어 페이지에 질감이 있고 거의 인쇄와 같은 모양을 제공합니다. 새로운 Gawker 와 실제로 BDG의 모든 웹사이트 에 대해 촉각적인 무언가가 있습니다 . 레이아웃은 음악 포스터, 콜라주, 그래픽 낙서와 밑줄의 재창조에서 영감을 받은 것처럼 보입니다. 마치 누군가가 연필을 사용하여 화면에 직접 낙서하거나 잉크를 칠하는 것처럼 보입니다. Microsoft 그림판의 도구. 이러한 디자인 기능만 놓고 보면 혁신적이지 않을 수 있지만 깨끗한 사용자 인터페이스, 햄버거 메뉴, 둔탁한 뉴스레터 형식이 여전히 지배적인 편집 미디어 환경에서 BDG의 스프레짜투라는 더 복잡하고 더 많은 웹상의 오아시스와 같습니다. 평소보다 조금 더 흥미진진한 낙서를 하고 있습니다. 02 Gawker의 새 웹사이트에는 중간에 잘린 로고 헤더가 있습니다. BDG 웹사이트에서 볼 수 있는 디지털 디자인을 형성하는 데 주도적인 역할을 한 기관인 Code and Theory 없이는 BDG 그룹의 미학에 대해 이야기할 수 없습니다 . BDG 이전에 Code and Theory 는 Joshua Topolsky가 창간한 "권력, 문화, 미래"에 중점을 둔 장르를 정의하는 온라인 잡지인 Outline 의 시각적 언어를 개발했습니다. 균질화된 미디어 환경의 디지털 혼란을 없애기 위한 스토리텔링 방법을 모색한 Code and Theory는 자체 사례 연구 에 따르면 " 프로필 사진을 프리미엄 헤드라인으로 대체하면 Tinder가 어떻게 보일지 "인 카드 형식을 개척했습니다. 카드." UI는 Snapchat Discover 버전처럼 구축되었으며, 각 게시물은 맞춤형 시각적 메시지로 화면을 채웠습니다. 그런 다음 카드 시스템은 2019년에 설립된 기술 및 문화 사이트인 Input 과 2020년에 인수한 과학 및 미래 기반 출판물인 Inverse 를 위해 더욱 개발되었습니다. 둘 다 전통적인 홈페이지로 설계되지 않았습니다 . 대신 독자에게 무한한 스크롤의 스토리가 제공되며, 각 부분에는 일부 정보와 함께 헤드라인, 인용문 또는 주요 통계와 같은 스니펫이 함께 제공됩니다. 이 비전은 정도는 다르지만 점차 BDG의 속성 대부분을 차지했습니다. 03 Inverse를 위한 디자인. BDG의 sprezzatura는 웹상의 작은 오아시스와 같은 곳으로 상황이 더 지저분하고, 더 복잡하고, 평소보다 조금 더 흥미롭습니다. Gawker 가 초기 인터넷으로의 상쾌한 후퇴처럼 느껴지는 반면, Input 은 다채롭고 페인트 같은 느낌의 구식 Risograph 프린트에서 영감을 받았습니다. Inverse 는 더 높은 대비와 더 많은 그라디언트가 있는 어둡고 영화 같은 쌍을 의미합니다. Bustle 은 대담하고 깨끗한 타이포그래피와 명확한 계층 구조와 따뜻한 색상 팔레트로 원본 사진을 과시하는 큰 순간을 가지고 있습니다. 나일론 은 지저분한 질감, 음악 축제 포스터와 같은 그래픽 참조, 손으로 쓴 그래픽, 대담하고 활기찬 타이포그래피에 의존합니다. 이와 대조적으로 Elite Daily 는 DayGlo에서 영감을 받은 스타일과 대담한 타이포그래피로 표시되며, 디자인 시스템은 그 광택을 포착합니다. 뛰어 돌아 다니는 사람, 따뜻한 팔레트와 함께 밀도 있는 콘텐츠와 공간 이미지에 대한 피드를 결합합니다. 이러한 웹 사이트의 대부분은 깨끗하고 반응이 빠른 디자인의 Bootstrap UI 의 우세에 대한 반항 이며, 초중반에 수익을 내기 위해 디지털 미디어가 따라야 했던 점점 더 무의미한 원칙에 반항합니다. 2010. BDG의 미학은 좌절과 웹 2.0 디자인의 한계 및 초기 인터넷 향수를 결합합니다. 04 아웃라인을 위한 Code and Theory의 디자인은 웹사이트를 앱 디자인 트렌드로 시작했습니다. The Outline 에 대한 Topolsky와 Code and Theory의 무드보드 에는 뉴스 사이트도, 온라인 잡지도, 인쇄 잡지의 온라인 버전도 없었습니다. "[아이디어는] Instagram과 Twitter를 사용하는 사람들을 위해 앱을 구축하거나 경험을 구축한다는 관점 에서 생각해 봅시다 . 주요 의도는 웹사이트를 제품처럼 느끼게 만드는 것이었습니다." 설명했다. 그러나 Topolsky와 Code and Theory의 비전은 즉시 이해되지 않았습니다. 디자인은 미학적 관점에서 흥미로웠지만 당시 사람들이 기대하는 독서 경험과 일치하지 않아 청중을 당황하게 만들었습니다.Topolsky는 " 항상 일어나는 일과 내 경험에서 항상 일어난 일은 사람들의 초기 물결이 있다는 것입니다. 나는 이것을 싫어합니다. 이것은 끔찍 합니다."라고 말했습니다. “ 그들은 왜 이렇게 만들까요? 이 색상 또는 무엇입니까? 그리고 약 6개월에서 1년 사이에 사람들이 그것을 뜯어내기 시작합니다.” 새로운 BDG 속성은 Outline 디자인 의 핵심 원칙을 유지하면서 더 안전하고 읽기 쉽게 느껴질 수 있는 색상 조합으로 더 경쾌하고 덜 자극적입니다. BDG의 미학은 좌절과 웹 2.0 디자인의 한계 및 초기 인터넷 향수를 결합합니다. 한편, 클래식 음악 공연을 위한 콘서트 티켓 을 예약하든 , 식료품 쇼핑 앱을 검색하든 , 가죽 재킷 을 사려고 하든 , 유명 인사가 자신의 삶의 사운드트랙에 대해 이야기 하는 팟캐스트의 방문 페이지를 정독 하든 상관없이 확신할 수 있습니다. 당신은 이 미학의 희석된 버전을 접하게 될 것입니다. Code and Theory 담당자는 잠재 고객이 외부 미디어에서도 종종 그 모습을 재현해 달라고 요청한다고 말했습니다. BDG의 디자인에 유리하게 작용하는 것은 응집력입니다. 각 속성은 색상 팔레트, 글꼴 및 레이아웃의 관점에서 시각적 정체성을 유지하지만 위에서 설명한 대로 모든 속성 간에 실행되는 공통 스레드가 있습니다. 이는 모두 동일한 CMS에 있기 때문이 아닙니다. Code and Theory의 디자인 디렉터인 Ricky Blake는 "카드 시스템은 실제로 우리가 빈 캔버스로 보고 싶은 구조입니다. "예, 빈 캔버스에 대한 규칙이 있지만 각각의 다른 속성으로 이동할 때 각 속성에 대해 시각적으로 정말 맞춤식으로 느껴지도록 이러한 규칙을 어떻게 구부릴 수 있는지 살펴봅니다." 아트 디렉션의 관점에서 이것은 문제를 야기합니다. 관련 속성은 형제가 아니라 사촌처럼 느껴져야 합니다. 각각은 개성을 유지해야 하지만 디자인을 통해 서로 이야기해야 합니다. 05 Scary Mommy의 웹사이트에 있는 아코디언 기능. 이에 대한 좋은 예는 대부분의 사이트에 있는 소위 아코디언 기능입니다. Blake는 이를 " 관련성 있고 시기적절한 선별된 콘텐츠로 사용자를 안내하는 데 사용되는 시각적 및 대화형 장치"로 정의합니다. Bustle은 헤더 옆에 있는 영웅 이미지 근처에서 중심 위치를 차지하는 스토리와 관련된 콘텐츠를 제안하기 위해 이를 사용한 최초의 사이트였습니다. Blake는 "사이트에서 매우 성공적인 장치가 되었기 때문에 항상 다른 모든 브랜드에서 이를 재구성하거나 다시 구상하려고 했습니다."라고 말합니다. 예를 들어 Elite Daily 의 경우 움직이는 티커 테이프 애니메이션을 만들었습니다. 나일론 의 경우, 아코디언은 로어 맨해튼의 일부 건설 현장에서 볼 수 있는 90년대에서 영감을 받은 포스터의 벽을 연상시킵니다. 그런 다음 최근에 인수한 육아 웹사이트 Scary Mommy 의 디자인은 건방진 1950년대 전체 모양과 느낌을 요구했습니다. 비대칭 레이아웃과 사이트 버전인 아코디언의 "느낌의 바퀴" 덕분에 기적적으로 트위지가 아닙니다. 운명의 수레바퀴를 닮았다. Topolsky와 Blake는 모두 Outline 과 나중에 BDG 웹사이트가 아티스트나 그래픽 디자이너가 아닌 청중에게 웹 브루탈리즘을 가져다준다고 믿습니다. 웹에 적합한 색상, 그라디언트, 그림자, 낙서 같은 그래픽, 그리고 우리가 Microsoft Word Art와 연관시키는 경향이 있는 현대적 재구성을 생각해 보십시오. “[Brutalism]은 인쇄나 빈티지 디자인에서 여전히 볼 수 있는 인터넷에서 볼 수 없는 모든 것을 취하는 것입니다. 웹"이라고 Blake가 말했습니다. “우리는 Outline 에서 그 본질을 포착하고 싶었습니다.기본적으로 현재 웹 디자인을 완전히 뒤집습니다." 최종 결과는 약간 지저분하고 의도적으로 그렇습니다. "우리가 잔인한 사람이라고 말할 때 우리는 그것이 약간 못생겼을 수도 있지만 정말 아름답고 결단력있는 방식으로 추하다는 것을 의미합니다."라고 Blake는 말했습니다. 웹 BDG의 사이트가 내부에 존재하려면 brutalistwebsites.com 에서 찾을 수 있는 맞춤형 일회성 사이트와는 다른 접근 방식이 필요합니다 . 수백만 명의 방문자가 사용할 수 있도록 체계화되고 읽기 가능하며 신뢰할 수 있어야 합니다. "우리는 예술의 개념과 이야기를 혼합하고 뉴스의 속도로 움직이는 디자인을 갖고 싶습니다."라고 Topolsky가 말했습니다. "그렇게 하려면 시스템을 구축해야 합니다. 맞춤형 경험을 구축할 수는 없습니다." 이 실험은 인터넷을 예술을 만들기 위한(단순히 전시하는 것이 아닌) 매체로 보는 것에서 비롯됩니다. BDG Group의 수석 UX/UI/비주얼 디자이너인 Jack Koloskus는 "이 사이트에 관련된 많은 사람들이 인터넷, 인터넷이 무엇인지, 인터넷이 무엇인지에 대해 깊은 사랑을 갖고 있다고 생각합니다."라고 말했습니다. 인터넷 역사에 대한 이러한 애정은 실제로 Gawker 자체의 경우 기사 본문에 본질적으로 웹 1.0 글꼴 Georgia를 선택하고 헤드라인에 미니멀리즘 친화적인 Arial 또는 Arial Black과 결합하는 행위를 통해 나타 납니다. 사이드바에서. 하지만 너무 향수를 불러일으키는 느낌을 피하기 위해 2020년 글꼴인 Etna 를 포함했습니다. 페이지 상단에 가까운 헤드라인의 경우 Koloskus는 계속해서 "우리가 완전히 향수에 젖어 있기를 원하지는 않습니다."라고 말했습니다. “이미 일어난 일을 재현하려고만 한다면 정말 좋은 기회를 많이 놓치고 있는 것입니다.