잔인한 디자인

Brutalism은 1920년대 중반에 등장한 건축 양식이지만 1950년대와 1960년대에 조금 늦게 등장했습니다. 심플하고 진솔한 스타일이 특징이었습니다. 브루탈리즘에서 형태는 기능을 따른다 .

잔인한 건물은 일반적으로 특정 기능 구역을 나타내는 덩어리를 형성하는 반복적인 모듈식 요소로 구성되며, 명확하게 연결되고 통합된 전체로 함께 그룹화됩니다. 콘크리트는 원시적이고 소박한 정직함으로 사용되어 엘리트 보자르 스타일로 지어진 고도로 세련되고 장식된 건물과 극적으로 대조됩니다.

멋지죠? 그러나 이 블로그가 기술과 WordPress에 관한 것이라면 왜 우리가 아키텍처에 대해 이야기하는지 궁금할 것입니다. 글쎄요, 이유는 간단합니다: 브루탈리즘은 우리가 웹 세계에도 적용할 수 있는 디자인 트렌드입니다…

웹의 기원과 그래픽의 진화

젊은 독자들에게 웹은 항상 존재하는 것처럼 보이지만 현실과는 거리가 멀습니다. 역사상 최초의 웹페이지가 1991년에 "최근에" 출판되었습니까? 그리고 보시다시피 매우 간단했습니다.

최초의 웹 페이지는 단순히 하이퍼링크가 있는 텍스트였습니다. 그러나 기술이 발전함에 따라 추가할 수 있는 리소스의 수가 증가하고 혁신 가능성이 빠르게 확장되었습니다.

인터넷의 초창기에는 "좋은 디자인"이 무엇인지 정확히 알지 못했고(인쇄물의 세계에서 우리가 가진 모든 짐에도 불구하고) 최초의 웹마스터는 "할 수 있는 것"을 수행하여 효과적인 페이지 레이아웃을 만들었습니다. 콘텐츠. 테이블을 기반으로 한 90년대 초 디자인을 기억하십니까?

물론 이러한 디자인은 시각적 수준에서 다소 "작동"했지만 내부적으로는 절대적인 재앙이었습니다. HTML 구조는 페이지의 최종 모습에만 집중하고 내용 자체를 완전히 무시하여 결과에 전혀 액세스할 수 없었습니다. 그러나 우리는 모두 "웹 구축" 방법을 배우고 있었습니다.

색상 팔레트, 평면 또는 사실적인 아이콘, 애니메이션... 결합될 때 "디자인 트렌드"가 되는 모든 미세한 세부 사항은 왔다가 사라집니다. 그러나 오늘날에도 변함없는 것처럼 보이는 경향이 있습니다. 바로 Ruth가 며칠 전 Apple과 Apple의 디자인 원칙을 살펴볼 때 논의한 단순성입니다.

그러나 현실은 이 모든 것보다 더 복잡합니다. 모든 웹사이트가 동일한 트렌드를 따르는 것은 아닙니다. 글로벌 트렌드에서 벗어나 다른 길을 모색하는 사람들이 있습니다. 그들은 틀을 깨뜨립니다. 아마도 그들은 심지어 다음 트렌드를 만들 수도 있습니다 ...

웹상의 잔인함

잔인함이라 는 용어는 프랑스어 "Beton brut" 또는 "생 콘크리트"에서 유래했습니다. 따라서 웹상의 잔혹성에 대해 이야기하는 경우 "구체적"이 아니라 "날것"에 대해 이야기하고 있음이 분명합니다. Brutalist 아키텍처는 빌딩 블록으로 사용하는 재료에 충실하기를 원하며 웹 개발자로서 우리도 노력해야 하는 것입니다. 적어도 잔인한 웹 사이트를 만들고 싶다면.

이것은 질문을 던집니다: 우리가 웹을 구축하기 위해 사용하는 "재료"는 무엇입니까? 이것들이 HTML과 CSS라고 생각할 수도 있지만 HTML과 CSS는 웹에서 콘크리트 믹서나 크레인이 구성하는 것과 같다는 점에 유의하십시오. 이들은 우리가 프로젝트를 "빌드"하는 데 사용하는 도구입니다. 따라서 웹에서 작업하는 "원재료"는 콘텐츠 입니다. 우리가 콘텐츠가 왕이라고 언급할 때마다 이 웹사이트에서 긴 시간 동안 이야기했기 때문에 그것은 당신을 놀라게 하지 않을 것입니다.

Brutalism은 자료에 대해 진실하므로 웹 개발자와 디자이너는 우리 작업에 정직해야 하며 웹사이트가 무엇이고 웹사이트가 무엇인지 알아야 합니다. 웹은 잡지가 아닙니다. 그들은 앱이 아닙니다. 광고판이 아닙니다. 그렇다면 왜 이것들과 유사해야 합니까?

웹에서의 브루탈리스트 디자인 원칙

잔인한 웹사이트를 디자인할 때 염두에 두어야 할 몇 가지 기본 원칙이 있습니다.

1 – 콘텐츠는 어디에서나 작동해야 합니다.

CSS 스타일 없이 웹 페이지를 만들고 HTML 태그만 사용하여 올바르게 구성하려고 노력하면 이 웹 사이트가 전 세계의 모든 브라우저에서 완벽하게 작동한다는 것을 알 수 있습니다. 가장 아름다운 웹사이트는 아니지만 작동할 것입니다. 화면이 없는 브라우저에서도 작동합니다(예, 접근성에 대해 이야기하고 있습니다). 그리고 콘텐츠가 왕이라면 굉장 합니다!

콘텐츠는 CSS가 없는 세상에서 작동 하고 의미가 있어야 합니다. 웹 페이지의 스타일을 지정하면 자신만의 브랜딩을 갖는 데 확실히 도움이 될 수 있지만, 브랜딩을 깨고 잔인한 원칙에서 멀어질 수도 있습니다.

2 - 웹과의 사용자 상호 작용은 HTML에 의해 제한되고 잘 정의됩니다.

CSS와 JavaScript를 사용하면 이전에는 불가능해 보였던 상호 작용, 뛰어난 애니메이션 및 숨막히는 전환을 통해 기본 앱처럼 보이는 웹 사이트를 만들 수 있습니다. 그러나 이 모든 것은 콘텐츠와 전혀 관련이 없습니다... 그렇다면 잔인한 웹사이트에서 유용한 인터페이스를 어떻게 디자인할까요?

기본적으로 사용자는 버튼, 링크 및 양식을 통해서만 웹 사이트와 상호 작용할 수 있습니다. 그리고 링크와 버튼만 "클릭"할 수 있습니다. 그렇기 때문에 원시 상태로 표시하는 것이 중요합니다.

웹이 시작된 이후로 하이퍼링크 는 명확한 패턴을 따랐습니다. 일반 텍스트와 같지만 색상이 파란색이고 스타일에 밑줄이 그어져 있습니다. 하이퍼링크를 방문하면 방문자가 이미 방문했음을 알 수 있도록 색상이 보라색으로 변경됩니다. 우리는 정말로 이 순수함에서 멀어져야 합니까?

반면에 버튼 은 실생활에 존재하는 요소인 버튼을 나타냅니다. 버튼은 실생활과 웹 모두에서 누를 수 있는 것이므로 유사하게 작동할 것으로 기대합니다. 버튼이 버튼처럼 보이고 상호 작용할 때 모양이 변경되는지 확인하십시오. 또한 사용해야 할 때 사용하십시오. 예를 들어 양식 옆에 입력한 정보가 서버로 전송되고 응답이 있는 다른 페이지로 이동한다고 사용자에게 약속합니다.

3 – 웹사이트는 웹 브라우저에 존재하므로 사용자가 웹사이트를 "탐색"하도록 합니다.

브라우저에 뒤로 및 앞으로 이동하는 버튼이 있다는 것을 알고 계셨습니까? 우리 모두가 이 패턴에 익숙하기 때문에... 그러나 일부 웹사이트는 오늘날 이 패턴을 깨고 있습니다! SPA(단일 페이지 응용 프로그램)는 JS를 사용하여 콘텐츠를 동적으로 로드하며 일부는 브라우저에 이전 단계로 돌아갈 수 있는 옵션이 있음을 무시하고 그렇게 합니다. 잔혹한 디자인은 웹에 충실하며 사용자에게 익숙한 패턴과 규칙을 절대 어기지 않습니다.

4 – 사용자는 콘텐츠를 세로로 스크롤할 수 있습니다.

웹사이트는 잡지나 책이 아니므로 (원칙적으로) 페이지를 매길 필요가 없습니다. 많은 웹사이트가 그렇게 하는 유일한 이유는 기사를 읽기 위해 독자가 여러 페이지를 방문해야 하기 때문에 인위적으로 방문자를 늘리기 위함입니다. 이러지 마!

잔인한 웹사이트에서는 콘텐츠가 한 번에 표시되고 독자는 원하는 대로 스크롤하면서 원하는 속도로 콘텐츠를 소비할 수 있습니다. 실제로 중요한 콘텐츠인 콘텐츠를 보고 사용하기 위해 불필요한 상호 작용으로 사용자를 방해할 필요가 없습니다.

어떻게 생각해?

나는 잔인한 원칙을 좋아합니다. 디자이너가 아닌 경우 이러한 원칙을 적용하는 것은 매우 쉽습니다. 기본적으로 보이는 그대로 두거나 약간 조정하면 됩니다. 하지만 어떻게 생각하세요? 당신은 그것을 좋아합니까? 추하고 구식이라고 생각하십니까? 아래 댓글 섹션에서 알려주십시오!

Unsplash에서 berenice melis의 추천 이미지.