잔인한 웹 디자인, 미니멀리스트 웹 디자인, 그리고 웹 UX의 미래

웹 사이트가 점점 더 혼란스럽고 어수선하고 세련되지 않습니까? 좋은 디자인의 규칙이 깨지고 있습니까? 웹이 더러워지고 있습니까? 이것이 새로운 트렌드인가?

당신이 대부분의 디자이너와 같으며 무슨 일이 일어나고 있는지 세심한 주의를 기울이면 브루탈리즘 이라는 단어를 잠시 동안 들어본 적이 있을 것입니다. 잔인한 웹사이트는 오랫동안 업계의 모범 사례였던 사용자 친화적인 인터페이스에서 벗어나 불완전하고 손으로 코딩한 HTML 사이트에 집중하고 있습니다. 디자이너들이 우리가 알고 있는 UX의 규칙을 없애고 모든 것이 약간 혼란스러운 느낌을 주는 것 같습니다.

세련되고 현대적인 디자인의 신조는 너무 일상적이어서 우리는 그것들을 스타일적인 선택이라고 거의 생각하지 않습니다. "좋은" 웹 디자인은 일반적으로 미니멀리즘의 규칙을 따르는 디자인을 의미합니다. 깨끗하고 단순하며 깔끔한 인터페이스 - 하지만 항상 그런 것은 아닙니다. 시계를 수십 년 전으로 돌려보자.

웹의 탄생

웹 디자인은 최초의 웹사이트가 게시된 1991년 이래로 먼 길을 왔습니다. 인터넷 혁명은 첫 번째 웹사이트가 1세대 HTML을 사용하여 독점적으로 텍스트 기반이 되는 것으로 시작되었습니다.

그런 다음 모두가 확실히 기억하는 모든 미친 애니메이션 사이트와 함께 Flash가 나왔습니다. CSS(Cascading Style Sheets)의 개발과 함께 웹 디자이너가 배경색, 텍스트 크기 및 코드의 텍스트 스타일과 같은 개선 사항을 훨씬 더 잘 제어할 수 있게 되었습니다. JavaScript는 드롭다운 메뉴, 고급 탐색 및 오류 검사 기능이 있는 웹 양식을 제공했습니다.

처음에는 '웹 디자인'이 무엇을 의미하는지 아무도 몰랐고 웹의 선구자들은 시행착오를 거쳐 디자인 패턴을 확립했습니다. 웹 디자인의 초기 시대는 형식적 의미와 접근성에 거의 관심을 두지 않은 레이아웃을 사용하여 대신 구조보다 미학을 선택했습니다.

설계를 구축하고 구조화하기 위해 설계자는 테이블, 중첩 테이블 및 보이지 않는 1픽셀 스페이서 파일과 같은 HTML 요소에 크게 의존하여 더 복잡한 다중 열 레이아웃을 생성할 수 있는 기능을 제공했습니다. 그것은 꽤 둔한 인터페이스를 만들었습니다.

2000년대 중반에 웹사이트는 구조 뒤에 더 신중하게 생각하여 탄생했습니다. 탐색은 브라우저 상단에 있었고 카테고리는 왼쪽 막대에 배치되었습니다. 웹 페이지는 사용자가 스크롤을 강요하지 않도록 콘텐츠가 여러 페이지에 걸쳐 짧고 좁게 유지되었습니다. 디자이너들은 무엇이 효과가 있는지 배웠고 더 나은 사이트를 구축하기 시작했고 그 과정에서 표준과 모범 사례를 확립했습니다.

점점 더 많은 레이아웃 옵션과 함께 이미지와 텍스트로 가득 찬 시끄러운 UI가 도처에 혼합되었습니다. 그러나 일부 훈련된 디자이너는 여전히 미니멀리즘을 선택했습니다.

미니멀리즘 미학

디자인 트렌드는 왔다가 사라집니다. 그러나 미니멀리즘은 시대를 초월한 디자인 언어입니다. 디자인에서 가장 단순하고 가장 필수적인 요소를 사용하여 구현되는 형태의 단순화에 중점을 둔 디자인 철학입니다.

미니멀리즘은 웹 디자인에만 국한되지 않습니다. 이상적인 디자인을 포함하는 주변의 모든 요소를 ​​생각해 보십시오. 미니멀리스트 디자인을 Nest, Apple, Herman Miller 및 많은 미니멀리스트 디자이너에게 영감을 준 많은 다른 업체와 쉽게 연결할 수 있습니다.

Herman Miller의 디자인이 오늘날에도 여전히 훌륭한 이유는 무엇입니까? 그들은 단순히 시대를 초월한 모양으로 잘 디자인된 개체입니다. 그의 디자인은 현대 가정과 인테리어에 잘 어울립니다. 오늘날에도 여전히 신선하고 현대적인 느낌을 줍니다. 그의 작품 중 많은 부분이 미니멀리스트 모양으로 디자인되었으며 특정 유행에 얽매이지 않습니다. 그들은 여전히 ​​​​시간의 시험을 견뎌냅니다.

그의 시대 의 가장 유명한 그래픽 디자이너 중 한 명인 Josef Muller-Brockmann의 미니멀리즘 디자인은 Herman Miller의 디자인과 매우 유사합니다. Muller-Brockmann은 1940년대와 1950년대에 스위스 스타일의 디자인 형태로 미니멀리즘을 수용하고 마스터했습니다.

불필요한 장식이나 불필요한 장식은 그의 그래픽 디자인에서 제거되었습니다. 그의 레이아웃의 모든 요소에는 목적이 있습니다. 이 접근 방식의 이면에 있는 디자인 사고는 오늘날 미니멀리스트 디지털 디자인이 매우 잘 작동하도록 만드는 것입니다.

디지털 시대에 미니멀리즘이 어떻게 자리 잡았나

역사는 항상 우리를 따라잡을 방법을 찾습니다. 인쇄 디자인에서와 마찬가지로 미니멀리즘과 그 이면의 철학은 웹 디자인 및 기타 디지털 인공물을 따라 잡았습니다. 불과 몇 년 전만 해도 웹사이트가 광택 있는 단추, 줄, 텍스트 단락, 모든 것이 주의를 끌기 위해 비명을 지르는 모습으로 어떻게 보였는지 생각해 보십시오.

그런 다음 디자이너가 디지털 공간의 실제 개체를 모방한 요소를 디자인하는 스큐어모픽 트렌드가 나타났습니다. Apple iCal의 가죽 패딩을 기억하십니까?

최소한의 디자인은 실제로 의도적입니다. 불필요한 것은 모두 제거하고 최대한의 관심을 끌어야 하는 요소에 집중하여 콘텐츠에 중점을 두는 디자인 접근 방식입니다.

미니멀리즘 디자인의 이점

미니멀리스트 디자인 접근 방식은 단순히 모양보다 더 많은 이유를 포착했습니다. 사용자 행동, 디자인 사고 프로세스 및 콘텐츠 우선 디자인 프로세스의 부상에 대한 이해도가 높아짐에 따라 이러한 사고 방식을 발전시키는 데 도움이 되었습니다. 최근 모바일 사용자의 엄청난 성장은 UX와 사용성에 더 중점을 둔 미니멀리즘을 향한 강력한 가속 포인트였습니다.

이제 사용자가 이동 중에도 인터넷에 액세스할 수 있기 때문에 제품 디자이너는 순간의 맥락에서 절대적으로 필수적인 것을 제공하는 데 집중해야 합니다. 가장 기본적인 기능입니다.

모바일 사용은 이제 모든 웹 방문의 절반 이상을 차지하며 이 비율은 계속 증가할 것입니다. 반응형 디자인은 게임 체인저였으며 디자이너가 "다르게 생각해야" 했습니다. 오늘날 그 어느 때보다 반응형 또는 적응형 디자인은 미니멀리스트 디자인 접근 방식이 매우 중요한 모바일 세계에서 필수 요소입니다.

일반 사용자에게 미니멀리즘은 디자인하기 가장 쉬운 것으로 보입니다. 최소한의 시각적 콘텐츠를 사용하여 완벽한 균형을 달성하고 최대한의 우아함과 함께 기본 요소에만 집중하는 것은 실제로 매우 어렵습니다.

미니멀리즘의 미래

우리는 미니멀리즘을 실제 트렌드나 단순한 스쳐가는 단계가 아니라 시대를 초월한 우아함과 세련미를 발산하는 개념으로 생각해야 합니다. 시대를 초월하고 고전적이지만 20세기 초에 구현된 이후로 이미 보았듯이 진화하고 개선할 것입니다.

예를 들어, Google의 Material Design은 미니멀리즘에서 영감을 받은 "평면" 디자인 접근 방식의 첫 번째 주요 발전 중 하나였습니다. Google의 디자이너는 단순하고 미니멀하게 유지했지만 그림자 효과와 움직임 및 깊이 개념을 사용하여 디자인 언어를 향상시켰습니다. 머티리얼은 실제 소재를 모방한 특정 변형이 있는 평면 디자인을 수용합니다.

미니멀리즘의 단점

삶의 다른 요소와 마찬가지로 우리는 항상 장점과 단점을 모두 살펴보아야 합니다. 많은 사람들은 오늘날의 웹사이트는 맛이 없고 대부분 비슷하다고 주장합니다. 알다시피, 큰 영웅 이미지 또는 오버레이 텍스트가 있는 비디오, 텍스트가 있는 아이콘 행 등이 있습니다. 누구나 몇 분의 시간을 할애하여 서로 매우 유사한 10개의 사이트를 만들 수 있습니다. 이것은 끊임없이 변화하는 온라인 행동과 선호도의 반영입니까?

디자인 일관성과 일반적인 사용자 행동을 위한 디자인은 모든 디자인에서 매우 중요하지만 고유함의 가치를 잊지 못합니다. 우리가 게으르게 되었습니까? 아니면 독특함에서 벗어나 보다 효과적인 사용자 경험 전략으로 생각을 옮겼습니까?

웹 디자인의 잔인함

그 견고함과 편안하거나 쉽게 보이려는 관심 부족으로 인해, 브루탈리즘은 오늘날 편재하는 미니멀리스트 웹 디자인의 가벼움, 낙관주의, 경박함에 대한 젊은 세대의 반응으로 볼 수 있습니다.

일부는 그것을 좋아하고 일부는 싫어하며 많은 다른 이들은 단순히 이해하지 못하는 잔인한 웹사이트입니다.

Craigslist를 예로 들어 보겠습니다. Craigslist는 잔인한 웹사이트의 "할아버지"로 간주되어야 합니다. 미학적으로 좋지 않으며 www.awwwards.com에 게재되지 않습니다. 검은색 텍스트, 파란색 링크, 흰색 배경. 예쁘지 않아 작동하기 때문에 꼭 그래야 하는 것은 아닙니다. 정말 잘 작동합니다. 당신은 소란이나 소란없이, 그리고 외부의 움직이는 부품없이 사고 팔 필요가 있는 것을 찾을 수 있습니다.

Craigslist는 1996년에 설립된 이래로 매우 실용적인 디자인에도 불구하고(또는 아마도 그 때문에) 인기를 유지해 왔습니다. 디자인은 지난 20년 이상 동안 큰 변화가 없었습니다.

아마도 Craigslist의 예에서 영감을 받은 잔인한 스타일이 다시 돌아오고 있습니다. 다음은 잔인한 스타일을 사용하여 잘 실행된 디자인의 좋은 예입니다.

이 잔인한 웹사이트가 큰 인기를 끌고 있습니다. 이 웹 사이트가 갑자기 인기가 있는 이유는 무엇입니까? 일부 디자이너가 웹의 균질화에 지쳤기 때문입니까?

UX 디자인이 가장 중요하고 사용자 행동과 콘텐츠 우선 접근이 왕인 시대에 이러한 사이트의 UX는 (의도적으로) 좋지 않습니다. 미니멀리즘의 원칙과는 달리, 이 디자인은 레이아웃이 모든 곳에(다시, 의도적으로) 텍스트와 이미지의 콜라주로 대면합니다.

잔인함의 간략한 역사

잔인한 디자인 스타일은 새로운 것이 아닙니다. Wikipedia에서 빠르게 검색하면 스타일이 실제로 1950년대에서 1970년대 중반까지의 잔혹한 건축 양식에서 비롯되었음을 알 수 있습니다. 미니멀리즘 이 핵심이었던 모더니즘 건축 운동이 잔혹성 을 뒤따랐다는 것이 재미있습니다.

르 코르뷔지에는 이 운동의 가장 큰 선구자 중 한 사람입니다. 그의 경력은 유럽, 일본, 인도, 북미 및 남미에서 디자인된 건물에서 50년 동안 이어졌습니다.

이 용어는 르 코르뷔지에가 자신이 선택한 원료 콘크리트인 " beton brut "에 대해 설명했듯이 "생지 않은"을 뜻하는 프랑스어 " brut "에서 유래했습니다. 초기능주의적 디자인은 모더니즘에 손가락을 댄 것처럼 단지 효용을 제공하기 위해 디자인된 것처럼 보였습니다.

브루탈리즘은 대량 생산 사회를 직시하고 혼란스럽고 강력한 힘이 작용하고 있는 거친 시를 끌어내려고 한다. 지금까지 Brutalism은 문체로 논의되었지만 그 본질은 윤리적입니다. –Alison & Peter Smithson, The New Brutalism, Architectural Design(1957년 4월)

잔인한 디자인은 형태보다 기능을 선택하고 외형을 완전히 거부합니다. Brutalist 디자이너는 최소한의 노력과 가장 저렴한 재료로 디자인을 실행하여보다 정직하고 반 부르주아 결과를 얻는 것에 자부심을 느낍니다.

디지털 시대의 잔인함

Bloomberg는 뉴스 사이트에 고유한 방식으로 스타일을 채택했습니다. 디자인은 거의 화려하고 원시 기능에 명확하게 중점을 둡니다.

브루탈리즘(Brutalism)이 탄탄한 컴백을 하고 있다. 추하고, 날것이며, 기존의 디자인에서 벗어나고, 미친 호버 효과와 피상적인 장식품이 도처에 있습니다. 많은 순수주의자들은 이러한 경향을 거칠고, 거칠고, 거칠고, 불편하고, 대립적이며, 냉소적이라고 생각합니다. 그것은. 고의로.

Brutalism은 디자인에 대한 보다 원시적인 접근 방식을 사용하며 웹 디자인의 핵심인 코드에 다시 초점을 맞춥니다. 잔인함은 종종 "추한" 디자인 트렌드로 묘사되지만, 우리는 그것을 지나쳐야 합니다. 잔인한 운동의 이면에 있는 철학은 사물을 "추한" 것으로 만드는 것이 아니라 날것으로 꾸미지 않은 것으로 만드는 것입니다.

오늘날의 잔인한 사이트는 90년대 DIY 웹을 기반으로 하며 아름다운 외관 뒤에 기능을 숨기는 대신 내부 접근 방식에 중점을 두고 있다고 말할 수 있습니다.

인기 있는 소셜 공유 사이트인 Reddit의 UI 디자인은 90년대 후반의 웹 타이포그래피, 정제되지 않은 무거운 컨트롤 및 수직 호흡 공간이 거의 없는 원시적이고 상자 모양입니다.

디자이너 Pierre Buttin은 일련의 재설계된 모바일 앱으로 잔인함을 극단으로 끌어 올렸습니다. Brutalist redesigns라는 제목의 최신 프로젝트에서 Buttin은 Facebook, Instagram, Twitter 및 기타 인기 앱을 텍스트가 많은 레이아웃과 평평한 디자인을 사용하여 잔인한 스타일로 렌더링합니다.

잔인함 대 미니멀리즘

브루탈리즘과 미니멀리즘은 상대적으로 볼 것이 아니라 사물을 보는 새로운 방식이자 디자인에 대한 또 다른 접근 방식으로 봐야 합니다. Brutalism은 오늘날의 사이트와 앱의 균질화에 반대하는 운동이지만 디자이너가 잔인한 접근 방식을 사용하여 웹사이트 디자인을 시작하기 전에 먼저 어떤 규칙을 어길 것인지 알아야 합니다.

기존의 미니멀리즘 디자인은 잔인함으로 대체되지 않습니다. 우리는 브루탈리즘을 현상 유지에 도전하는 디자인 문화, 즉 "최고"라는 말을 듣는 데 지친 문화로 보아야 합니다.

다음 프로젝트를 위해 이러한 스타일 중에서 선택할 때 옳고 그름은 없습니다. 그럼에도 불구하고 다음 웹사이트나 앱을 잔인한 디자인 스타일로 디자인하기 전에 청중을 알고 있는지 확인하십시오. 회사와 청중이 감사할 것이라고 생각한다면 위험을 감수하십시오.

잔인한 웹 디자인은 관심을 끌고 브랜드 인지도는 엄청나게 빠르게 성장하고 있습니다. 규칙은 깨지도록 만들어집니다. 감히 웹이 웹이 되도록 하십시오. 조금 이상하더라도 눈에 띄고 대담하게 대하십시오.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 디자인 원칙과 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 디자인의 게슈탈트 원리 탐구
• Adobe XD vs. Sketch – 어떤 UX 도구가 당신에게 적합합니까?
• 최고의 디자이너가 사용하는 10가지 UX 결과물