플랫 스타일 뭐. 평면 디자인: 과거, 현재, 미래. 플랫 스타일의 특징
저자로부터:안녕하세요, 친구들! 오늘은 플랫 디자인, 즉 플랫 웹사이트 디자인이 무엇인지에 대해 이야기해보겠습니다. 이 용어는 오랫동안 웹 디자이너의 마음을 사로잡았으며 오늘날에도 여전히 자신있게 유행하고 있습니다. 가장 큰 회사(Google, YouTube, Microsoft, Apple Inc. 등)에서는 이를 사용하여 웹사이트와 애플리케이션을 디자인합니다. 당신은 아직도 플랫 웹사이트 디자인 지지자들이 아니신가요? 그럼 우리는 당신에게 간다!
플랫 디자인이 이렇게 인기를 얻는 이유는 무엇이라고 생각하시나요? 간단하게 답변해 드리겠습니다. 정말 효과가 있습니다! 이 글에서는 이 스타일이 무엇인지 설명하고, 장점과 단점에 대해 설명하고, 여러분이 훌륭한 일을 하도록 확실히 영감을 줄 플랫 웹사이트 디자인의 몇 가지 훌륭한 예를 보여 드리겠습니다. 자, 가자!
모든 것은 스큐어모피즘에서 시작되었습니다
모르는 사람들에게 스큐어모피즘은 더러운 단어가 아니라 또 다른 웹 디자인 스타일입니다. 플랫 디자인은 종종 스큐어모피즘(skeuomorphism)과 반대되는 것으로 제시되는데, 제 생각에는 이는 전적으로 옳지 않습니다. 이것은 적대감이라기보다는 오히려 단순화에 가깝습니다.
2010년까지 스큐어모피즘은 인터페이스 디자인의 지배적인 스타일이었습니다. 그는 입체 이미지의 질감, 그림자, 반사 등의 속성을 적극적으로 활용하여 현실에 나타나는 요소를 그대로 표현했습니다. Apple은 이와 관련하여 특별한 노력을 기울여 실제 개체에서 대부분의 소프트웨어 개체를 신중하게 복사했습니다.
곧 의사 볼록 아이콘은 대부분의 사용자와 웹 개발자의 관심을 끌지 못하게 되었고, 이는 플랫 웹 사이트 디자인 시대의 시작을 알렸습니다. 세상은 모든 장식 요소를 제거하고 최종 사용자가 상호 작용하기 편리한 요소만 남겨야 한다는 결론에 도달했습니다.
“최고의 디자인은 최소한의 디자인이다”
침입적인 디자인, 애니메이션 효과 등에 반대하는 유명 산업 디자이너 디터 람스가 물을 들여다 본 방법. 2013년 6월, Apple Inc. 플랫 웹 디자인 스타일의 모든 속성을 수용한 혁신적인 iOS 7을 선보였습니다. 그러나 비행기가 현실감과 볼륨을 즉시 "파괴"하지는 않았습니다.
오랫동안 사용자들은 스티브 잡스의 마법과 '핥고 싶은 아이콘'을 잊을 수 없었다. 많은 사람들은 "불쌍한 세븐"과 작별 인사를 하고 "빛나는 안드로이드"로 전환하기도 했습니다. iOS 7에 존재하는 수많은 버그와 애플리케이션을 열 때 시차 및 "코딱지" 애니메이션이 포함된 희고 반투명한 디자인이 불에 연료를 추가했습니다.
피할 수 없는 현실에 체념하고 Apple 운영 체제에 머물렀던 사람들은 결국 플랫 웹 디자인이 흥미로워 보일 뿐만 아니라 모든 애플리케이션에 질서와 통일된 시각적 스타일을 제공한다는 것을 깨달았습니다.
플랫 디자인의 장점과 단점
이 스타일을 사용하면 다음과 같은 이점이 있습니다.
구성의 명확성과 시각 자료의 간결성. 사용자가 자신에게 전달하려는 내용을 신속하게 인식할 수 있는 "불필요한 것 없음" 스타일의 반응형 인터페이스
좋은 타이포그래피를 강조합니다. 콘텐츠가 최우선입니다. 이는 오늘날의 풍부한 정보 속에서 매우 중요합니다.
최소한의 시각 효과로 인해 웹 페이지 크기가 작아지고 사이트 성능이 빨라집니다. 이는 적응형 버전을 만들 때 특히 유용합니다. 양식이 단순할수록 모바일 장치의 작은 화면에 표시하기가 더 쉽기 때문입니다.
플랫 웹 디자인에는 단점도 있습니다.
웹 디자이너의 상상력을 단순화된 색상, 타이포그래피, 아이콘으로 제한합니다. 따라서 지루하고 표현력이 부족한 웹사이트를 만들 위험이 더 높습니다.
3차원성과 그림자가 부족하여 요소를 클릭할 수 있는지 여부를 이해하기 어려운 경우가 있습니다.
구체적인 고정 규칙이 부족합니다.
귀하의 사이트에서 이 스타일을 사용하기로 결정하셨다면 축하드립니다. 이는 귀하가 사용자 경험에 관심을 갖고 시대에 뒤처지지 않는다는 것을 보여줍니다. 이제 막 웹 디자이너로 시작했고 플랫 디자인을 적절하게 사용하여 사이트를 단순하지 않으면서 관련성 있게 보이게 만드는 방법을 모른다면 다음 팁을 시도해 보세요.
"벽돌 벽"과 밝은 배경은 잊어버리세요. 플랫 웹 디자인은 배경에 단순하고 부드럽고 부드러운 이미지를 사용하는 경향이 있습니다.
그라데이션, 3D 아이콘, 애니메이션 전환 또는 기타 특수 효과가 없습니다. 이 모든 것이 귀하의 사이트를 더 무겁게 만들고 소란을 더할 것입니다. 필요합니까?
윤곽이 명확한 평면 아이콘을 사용하여 편의성과 기능성을 추가하세요.
밝고 풍부한 색상 팔레트를 사용하십시오. 이제 추세는 밝은 노란색, 분홍색 및 녹색과 같은 태양 스펙트럼의 톤입니다. 가장 중요한 것은 과용하지 않는 것입니다. 페이지에 3가지 색상을 넘지 않아야 합니다.
타이포그래피에 중점을 둡니다. 플랫 디자인에서는 행동 촉구를 생성하고 사이트 주변을 쉽게 탐색할 수 있는 밝고 독창적인 비문이 선호됩니다. 여기서도 과용하지 않는 것이 중요합니다. "손으로 쓴" 글꼴이나 기타 화려한 글꼴은 잊어버리세요. 제목을 강조하기 위해 대문자를 사용할 수 있습니다.
다양한 기하학적 모양을 자유롭게 사용해 보세요. 사각형, 원, 선 및 기타 모양은 웹사이트의 구조를 개선할 뿐만 아니라 명확한 계층 구조를 만들고 콘텐츠를 나누는 데에도 도움이 됩니다. 사용자들은 이 점을 높이 평가할 것입니다. 제 말을 믿으세요.
탐색 메뉴와 기타 사이트 요소를 최대한 단순화하세요. 버튼의 경우 그림자나 강조 표시가 없는 일반 직사각형을 사용하세요.
따라서 수년에 걸쳐 플랫 디자인 웹사이트는 모든 사람이 받아들이는 표준이 되었습니다. 대부분의 최신 웹사이트를 살펴보세요. 핵심이 밋밋합니다.
마지막으로, 여러분이 자신만의 걸작을 만드는 데 영감을 줄 수 있는 성공적인 플랫 디자인의 약속된 예를 제시하겠습니다.
1. 홈페이지 http://dunked.com.
다양한 창의적인 직업의 대표자를 대상으로 하는 포트폴리오 출판을 위한 인기 있는 플랫폼입니다. 미니멀한 플랫 웹 디자인은 불필요한 특수 효과로 인해 방해가 되지 않는 신뢰할 수 있고 이해하기 쉬운 서비스의 느낌을 불러일으킵니다.
2. 마이크로소프트 인터페이스.
Microsoft는 플랫 스타일을 인기 있게 만든 회사 중 하나입니다. 마이크로소프트가 2000년대 중반에 출시한 아이팟의 경쟁자인 Zune 플레이어를 기억하시나요? 따라서 이 제품의 디자인은 큰 타이포그래피, 평면 아이콘, 크고 밝은 모양으로 인해 당시 대부분의 응용 프로그램과 크게 달랐습니다.
Metro라고 불리는 이 인터페이스는 나중에 개인용 컴퓨터(Windows 8 OS), Xbox 360 인터페이스 및 기타 Mircosoft 소프트웨어 제품으로 마이그레이션되었습니다.
3. 홈페이지 http://www.vox.com.
영감을 받았나요? 의사현실적인 3D 미학은 이제 그만!
그게 다야. 기사를 구독하고 소셜 네트워크에서 친구들과 공유하세요. 당신에 대한 높은 전환율!
여러분이 눈치채셨는지 안 느끼셨는지 모르겠지만, 최근(특히 지난해) 전 세계 웹 디자인에서는 단순화, 견고한 미니멀리즘, 사용자로서 우리가 모든 것과 상호 작용하는 시각적 단순화를 향한 분명한 추세가 있었습니다. 낮. 간단히 말해서, 디자인이 "플랫"해졌습니다. 소셜 네트워크와 웹 2.0의 급속한 성장 시대의 볼록한 아이콘과 달리 이제는 새로운 서비스의 단순한 아이콘으로 점점 더 환영 받고 있습니다. 이 모든 것의 이름은 평면 디자인입니다. 아파트는 아니고 아파트입니다.
어제 새로운 모바일 OS인 iOS 7을 발표하면서 Apple은 마침내 이러한 추세의 인기가 급격하게 증가했음을 확인했습니다. 이는 전통적으로 일부 팬들을 기쁘게 했지만 숙련된 사용자와 디자이너들 사이에서는 상당한 불만에 직면하기도 했습니다. 무슨 일이야? 이 평면 디자인의 용도는 무엇이며 세상에 정말 필요한가요? 우리는 우크라이나 및 해외 전문가에게 문의하기로 결정했습니다.
우리는 그들에게 세 가지 주요 질문에 답하도록 요청했습니다.
- 세상이 왜 웹과 모바일에서 플랫 디자인으로 움직이기 시작했는지, 그리고 그것이 무엇인지;
- 이것이 Apple과 iOS 7에 어떤 영향을 미칠까요?
- 이것이 한편으로는 디자이너에게, 다른 한편으로는 사용자에게 어떤 영향을 미칠지.
데니스 수딜코프스키, 키예프
인터랙션 디자인 전문가, 프로듀서 Prodesign.in.ua
미래를 예측하는 데 있어서 "진자 효과"는 어떤 문제에 대해 두 가지 극단이 있을 경우 인류가 한 쪽에서 다른 쪽으로 흔들릴 것이라는 사실에서 나타납니다. 이는 대화형 시스템 설계에 있어 의심의 여지가 없습니다. 평평하고 흥미롭지 않을 정도로 원시적인 웹은 한때 방대한 웹 기반 버튼으로 바뀌었습니다. 인터페이스 시각화는 현실감의 정점에 도달했으며 진자는 반대 방향, 즉 단순하고 단순하게 날아가고 있습니다.
애플은 이것으로부터 무엇을 얻을 것인가? iOS가 Android와 매우 유사해지고 있다는 수십만 개의 댓글과 트렌드에서 그 자리를 유지할 것입니다.
디자이너는 진화해야 할 것입니다. (플랫 디자인이 언제 기계 공학에 등장하여 우리에게 플랫 카를 제공할지 농담하지 마세요.) 장식이 없을 때 모든 작업은 사용자와 함께 특정 시나리오에 맞는 콘텐츠로 분위기를 조성하는 것으로 구성됩니다. 이 직업은 예술가보다 감독과 점점 더 많은 공통점을 갖게 될 것입니다. 반대로 사용자는 새로운 경험과 새로운 인상을 받습니다. 개인적으로 저는 4년 동안 iPhone을 고수했지만 이번 봄에 Android로 휴대폰을 바꾼 유일한 이유는 Apple 인터페이스의 단조로운 이상성에 지쳤기 때문입니다.
다니엘 브루스, 스톡홀름
수석 디지털 크리에이티브, danielbruce.se
우선, 저는 "플랫 디자인"이라는 용어를 좋아하지 않는다는 점을 지적하고 싶습니다. 수세기 동안 대부분의 그래픽 디자인은 "플랫"이었습니다. 또한 플랫과 다른 것 사이에서 선택해야 할 때 디자인을 돋보이게 하는 능력이 제한된다고 생각합니다. 디자인은 이보다 훨씬 더 다양할 수 있습니다. 밝고, 밝고, 어둡고, 긍정적이고, 미니멀합니다. 원하는 대로 부를 수 있습니다. 그러나 오늘날 디자인을 평면적이거나 경화형(scleromorphic) 이상으로 생각하는 사람은 거의 없습니다. 조금 슬프다.
웹과 모바일이 플랫 디자인으로 전환하는 데 느린 이유는 무엇입니까? 내가 볼 때 그것은 단지 추세일 뿐이라는 것이다. 나는 사용자 인터페이스에서 플랫 디자인의 이점에 대한 기사를 본 적이 없으며 여전히 그것에 대해 확신하지 못합니다. 단순하고 명확한 디자인 - 그렇습니다. 그러나 이것은 "플랫"과는 다릅니다. 예를 들어 구글을 보세요. 그들은 완전히 평면적인 디자인을 하지 않습니다. 그들은 - 그리고 제가 이 점을 공유하고 있지만 - 여전히 어느 정도 깊이와 변형이 필요하다고 생각합니다.
몇 년 전 마이크로소프트가 유명한 메트로 스타일을 선보이며 스스로 이 방향을 선택했을 때 저는 매우 놀랐습니다. 실제로 그들은 사람들이 일정한 거리에서 바라보고 많은 수의 요소가 있는 작은 화면과 상호 작용하지 않는 대형 간판에 그래픽 디자인을 사용했습니다. 보기에는 좋지만 사용성이 좋은가요?
어젯밤에 내가 Apple에서 본 것은 작년에 Dribbble 및 Behance와 같은 사이트에 등장한 몇 가지 흥미로운 디자인의 형편없는 복사본이었습니다. 나는 이것이 스티브 잡스의 "오래된 애플"과는 거리가 멀다는 점을 제외하고는 새로운 것을 보지 못했습니다. 회사는 모바일 인터페이스 디자인의 최전선에 있지 않다는 것을 보여주었습니다. 물론 앞으로 몇 달에 걸쳐 팬들이 흰색 디자인과 창의적인 그라데이션을 모두 채택하는 모습을 보게 되겠지만, 그러한 측면이 최근 Google의 폐쇄만큼 영향을 미칠 것이라고는 생각하지 않습니다. 하지만 반면에, Apple은 항상 저를 포함한 많은 사람들에게 트렌드를 선도하고 영감을 주는 존재였습니다.
일반 사용자는 밝은 색상을 좋아합니다.
이반 클리멘코, 키예프
모바일 인터페이스 디자이너, 5tak.com
나는 이런 플랫한 스타일링의 매력에 대해 어느 정도 철학적이다. 디자이너들이 미니멀리즘과 인공 재료에 관심을 갖게 된 것은 이번이 처음이 아닙니다. 모든 것이 통과됩니다.
20~30년대 바우하우스 시대는 디자인에 큰 공헌을 했지만, 여전히 그 톤의 타이트함과 인위성은 보다 자연스러운 것들에 둘러싸여 존재하고자 하는 사람들의 욕망과 내면의 충동을 견디지 못했습니다.
그러다가 60년대에는 모두가 플라스틱에 감탄하기 시작했습니다.
가구, 접시, 심지어 옷까지 모두 플라스틱으로 만들어졌습니다. 이것이 인류를 위한 새로운 희망인 것처럼 보였지만 다시는 아니었습니다. 사람들은 매우 빨리 자연 형태나 천연 재료의 복사본으로 돌아갔습니다.
형태의 거친 대비와 미니멀한 그래픽은 항상 사회 내부 갈등의 축적을 표현해 왔습니다. 디자인은 우리 내면의 세계를 보여주는 거울일 뿐입니다. 너무 많은 일이 일어나고 있습니다. 인생의 속도는 매우 빨라지고 아무것도 생각하고 고려할 시간이 없습니다. 우리는 종종 살아갈 시간이 없습니다.
미니멀리즘과 이러한 모든 전자 하드웨어는 보다 자연스럽고 인간적인 것으로 나아가는 첫 걸음일 뿐입니다. 단순한 컴퓨터 그 이상입니다. 깊이 볼 줄 아는 애플이 더 이상 존재하지 않는다는 사실조차 안타깝다.
올레시아 그리치나, 키예프
Componentix의 UI 디자이너, 트위터: elendiel
저는 디자이너들이 화면 크기와 해상도가 서로 다른 수많은 장치의 영향을 크게 받았다고 생각합니다. 이러한 다양성으로 인해 조명 등을 올바르게 고려한 텍스처, 복잡한 그림자 없이 디자인을 만드는 것이 더 쉽습니다. '어떻게 하면 아름답게 그릴 것인가'보다는 '어떻게 하면 사용자에게 좀 더 편리하게 만들 수 있을까'라는 방향으로 고민하기 시작했습니다. 콘텐츠가 가장 중요하며, 우리 작업에서는 이를 최선의 방식으로 표현하는 것이 중요합니다.
제가 보기엔 외부 변경(플랫 UI, 아이콘) 뒤에는 특히 사용 편의성과 이 주제에 대해 어떻게 맹세하는지에 대한 심각한 변화를 눈치채지 못한 것 같습니다. 작동하는지 확인하면 "오오, 얼마나 편리한지, 이전에는 왜 이렇게 하지 않았지?"라고 말하기 시작할 것입니다. 나는 이것이 디자이너들이 텍스처와 그림자보다는 인터페이스의 유용성에 더 많은 관심을 기울이는 방식으로 영향을 미치기를 바랍니다. 결국에는 이것이 트렌드라는 것을 고객들에게 설명하는 것이 가능할 것 같아요 :)
플랫 디자인은 사용자에게 특별히 영향을 미치지 않을 것이라고 생각합니다. 콘텐츠를 만들고 소비하는 것이 편리하다면 만족하는 사람들이 많을 것입니다. 하지만 홈 화면의 아이콘은 여전히 산성입니다 :)
파벨 그로얀, 키예프
MacPaw의 제품 디자이너, Grozyan
"사과! 아하하하, 그만둬! - 디자이너들이 소리치고 있어요. - 만세, 쉬워졌습니다. - 사용자들이 구호를 외치고 있습니다." 저는 두 가지 관점을 모두 이해합니다. 오늘 WWDC2013 프레젠테이션이 끝난 후 많은 동료들이 일어나 "이 직업을 망쳐버려라! 이제 그런 멍청한 짓은 누구나 그릴 수 있다. 그리고 이 아이콘이 30달러에?!"라고 말했습니다. 언뜻보기에 그들은 옳습니다. 그러나 더 깊이 파고 들면 오랫동안 사용 시나리오, 모양, 색상, 그리고 그 다음에만 서로 다른 수천 개의 개체가 있음을 알게됩니다. 요즘 LinkedIn 프로필에 있는 사람들이 UX, UI 디자이너가 글자의 흰색 그림자 효과를 복사한 다음 Apple과 같은 가볍고 사실적인 인터페이스를 사용했던 때를 기억합니다. 모든 사람을 위한 독창적이고 통합적이며 편리한 개발 개념이 없었기 때문에 그들의 모든 작업은 플랫 디자인이 해결한 작업이었습니다. 발명한 것이 아니라 디지털 시대보다 10년 앞서 출판 분야에서 결성됐다.
플랫 - 클릭용이 아니라 클릭, 탭, 탭용입니다. 플랫하다고 할 수는 없습니다. 버튼에 "두꺼운" 텍스처와 그림자가 없으면 시각적 공격 없이 오히려 단순화됩니다. 그리고 버튼의 그라디언트 없이는 할 수 없습니다. 나는 이러한 추세를 지지한다. 사용자 경험의 품질을 방해하지 않는다면 모든 사람이 더 쉽게 생활할 수 있을 것입니다. 우선 사용자에게. 둘째, 제작자의 경우 기술 구현이 더 간단하고 클릭(링크 밑줄 - 안녕하세요)이 더 편리하며 웹, 모바일 및 데스크톱을 하나의 단일 경험으로 결합하는 다중 플랫폼이 될 것입니다. 의심할 여지 없이 이는 애플로서는 대담한 움직임이다. 그리고 오직 그들만이 그것에 대해 결정할 수 있습니다. 그들의 이야기에는 수십 개의 확인이 있으므로 그 반대의 경우보다 성공할 가능성이 더 높습니다.
"플랫 디자인" 혁명은 2010년 Windows Phone 플랫폼에 도입된 이후 계속해서 추진력을 얻고 있습니다. 이유를 이해하는 것은 어렵지 않습니다. 이 디자인의 인터페이스는 더 직관적으로 보이고 적응형 요소, 최신 프레임워크에 적합하며 올바르게 실행될 때 매력적으로 보입니다.
플랫 디자인은 유비쿼터스 스큐어모픽 스타일에 대한 균형추로 시작되었지만 이후 단순한 "옵션 B" 이상의 것이 되었습니다.
처음에 플랫은 미니멀리즘에 전적으로 초점을 맞춘 2차원적인 디자인이었습니다. Modern flat 2.o는 그림자, 그라데이션 및 기타 요소를 사용하여 "거의 평면"처럼 보입니다.
현대적인 평면 디자인의 5가지 특징적인 구성 요소:
1. 긴 그림자
긴 그림자는 인터페이스를 매력적으로 만드는 최소한의 아이콘 세부 정보를 희생하지 않고도 이미지에 깊이와 차원을 추가합니다. 
2. 역동적인 색상
생동감 넘치는 색상, 특히 밝은 색조를 사용하면 희박한 시각적 요소를 쉽게 보완할 수 있습니다.
요소의 기본 색상과 대비되는 다양한 배경색은 타일 메뉴가 있는 페이지를 더욱 생동감 있게 만듭니다.
Flat UI Colors 웹사이트에는 플랫에 가장 효과적인 색상 패턴이 포함되어 있습니다. 
3. 심플한 타이포그래피
flat의 글꼴 선택은 가독성이라는 한 가지 기준에 따라 결정됩니다. 일반적으로 획 너비가 일정한 산세리프 글꼴이 사용됩니다. 
4. 투명 버튼
현대 웹 디자인의 트렌드 요소 중 하나입니다. 그 이유는 그다지 주목을 끌지는 않지만, 버튼으로 명확하게 인식되기 때문입니다. 
5. 미니멀리즘
단순성과 콘텐츠 집중이라는 동일한 원칙을 사용하여 플랫과 미니멀리즘이 함께 사용됩니다.
플랫 디자인을 사용하는 것이 보편적인 솔루션처럼 보일 수 있지만 미니멀리즘은 구현하기 어렵습니다. 작업 요소가 적을수록 더 많은 주의가 필요합니다.
플랫 디자인이 아무리 훌륭해 보일지라도 그것이 귀하의 사이트에 적합하다는 보장은 없습니다. 글로벌 재설계를 계획할 가치가 있는지 알아보려면 주요 장점을 확인하세요.
장점:
반응형 인터페이스에 사용됩니다.
사용자의 탐색을 단순화합니다.
명확한 구조와 개략적인 시각적 요소는 페이지의 내부 논리를 강조합니다.
그래픽의 단순성으로 인해 페이지 로딩 속도가 빨라집니다.
친숙한 타이포그래피는 가독성을 향상시킵니다.
플랫 디자인은 단순성과 미니멀리즘에 관한 것이지만, 반면에 시각적으로 복잡한 메시지를 전달하기는 어렵습니다. 따라서 인터페이스 단순화에 급급하기 전에 사이트와 사용자 간의 상호 작용을 신중하게 고려해야 합니다.
웹 디자인 트렌드북을 기반으로 합니다.
최근에는 웹사이트 및 사용자 인터페이스 디자인의 특정 스타일이 엄청난 인기를 얻었으며, 요소의 스타일화로 인해 플랫(Flat)이라고 합니다.
Flat 규칙에 따라 만들어진 웹 사이트를 보면 그라데이션 전환이나 그림자가 보이지 않으며 볼륨이나 질감에 대한 약간의 힌트도 볼 수 없습니다. 플랫 스타일의 기본 원칙은 단순성, 간결함, 미니멀리즘입니다. 주요 특징은 밝고 특이한 색상, 비표준 타이포그래피, 그래픽 프리미티브 등 집중할 수 있는 것입니다.
오늘날 점점 더 많은 디자이너들이 이러한 트렌드를 작업에 사용하고 있지만 플랫 스타일은 최신 모바일 운영 체제인 Windows Phone 및 iOS 7이 확산되면서 특히 인기를 얻었습니다. 완전히요.
저희 회사는 이미 플랫 스타일의 웹사이트를 제작한 경험이 있으며, 귀하의 플랫 웹사이트 제작을 기꺼이 도와드리겠습니다!
이번 글에서는 플랫을 프로젝트의 메인 스타일로 사용하려는 경우 따라야 할 플랫 디자인의 기본 원칙을 강조하겠습니다.
아래에서는 플랫 스타일을 사용하는 일부 사이트를 분석하고 예를 제시합니다.
1. 모든 효과 제거
플랫 디자인의 기본 원리는 그 자체로 이미 평면적인 평면 이미지를 만들어 내는 것입니다. 동시에 이미지에 최소한의 깊이를 추가할 수 있는 모든 요소(그라디언트, 부드러운 전환, 그림자, 경사, 볼륨, 텍스처 등)를 제거해야 합니다. 이미지의 모든 요소는 가장자리가 뚜렷하지 않으며 이미지의 다른 요소에 비해 눈에 띄지 않거나 깊이가 없습니다.
플랫 디자인에서는 사실적으로 보이려고 하는 요소(스큐어모피즘), 3D 애니메이션, 사실적인 아이콘 등을 찾을 수 없습니다. 그러나 디자인 자체는 기존 디자인과 유사하게 유지하려고 노력하지만 이제는 라벨, 버튼 및 탐색 기능이 가장 중요합니다.
언뜻 보면 플랫 디자인을 사용하는 사이트는 너무 단순해 보일 수 있지만 실제로 이 스타일은 요소의 명확한 계층 구조, 모든 사용자 상호 작용 도구의 편리한 배치가 특징이므로 사용성 점수가 높습니다.
2. 단순한 요소를 사용하라
플랫 디자인의 목표를 달성하기 위해 디자이너는 버튼과 아이콘을 사용합니다. 최대한 직관적이고 클릭이 가능해야 합니다. 다른 모든 인터페이스 요소와 마찬가지로 추가 효과 없이 단순하고 단순해야 합니다. 또한 디자이너는 직사각형, 원, 정사각형과 같은 단순한 기하학적 모양을 사용하여 각 모양을 별도의 개체로 만드는 경우도 많습니다.
3. 타이포그래피에 집중해보자
이전 원칙에 따르면 플랫 디자인의 그래픽은 단순하기 때문에 매우 중요한 요소는 타이포그래피, 즉 비문 디자인입니다. 플랫 디자인에서는 버튼과 함께 타이포그래피가 가장 중요합니다.
글꼴은 읽기 쉬워야 하며 디자인과 일관성이 있어야 합니다. 단순한 디자인에서는 지나치게 화려한 글꼴이 어울리지 않게 보일 수 있기 때문입니다. 그러나 일반 글꼴을 사용해서는 안 되며 사용자의 관심을 끌 수 있는 글꼴을 실험하고 선택하는 것이 좋습니다.
간단한 산세리프 글꼴과 예술 요소로 인식될 새로운 글꼴을 결합하는 것을 고려해 볼 수 있습니다. 글꼴은 디자인을 더욱 단순하고 명확하게 만드는 데 도움이 되어야 하며, 버튼과 기타 요소는 상호작용성을 향상시키는 역할만 해야 합니다.
4. 컬러로 시선을 끌자
색상은 플랫 디자인에서 거의 중요한 역할을 합니다. 이 컨셉을 바탕으로 만들어진 사이트들을 주의 깊게 살펴보면 가장 먼저 눈에 띄는 것은 밝은 색상 팔레트입니다. 일반적으로 대조되는 순수(음영 없음) 색상 2~3개로 구성되지만 이 수는 최대 8개까지 가능합니다. 또한 이러한 모든 색상은 일반적으로 동일하게 사용됩니다.
가장 인기 있는 색상은 기본 색상과 보조 색상입니다. 즉, 기본 색상(청록색, 자홍색, 노란색, 검정색)과 이를 혼합하여 얻은 색상입니다. 또한 연어색, 보라색 등과 같이 평면 디자인을 만들 때 복고풍 색상이 색상 구성에 사용되는 경우가 많습니다.
5. 미니멀리즘
플랫 디자인은 본질적으로 단순하며 미니멀리스트 접근 방식과 잘 어울립니다.
사이트의 전반적인 디자인에서는 너무 많은 부가 기능을 피해야 합니다. 물론 단순한 색상과 텍스트만으로는 충분하지 않을 수 있습니다. 따라서 시각 효과를 추가하려면 간단한 사진을 선택해야 합니다. 일부 소매 제품 사이트에서는 플랫 디자인을 사용하여 단순하고 산만하지 않은 배경에 제품을 배치합니다.
일부 사진에는 자연스러운 깊이가 있지만 일반적으로 전체적인 디자인 평면에 들어맞는다는 점에 유의해야 합니다.
영어로 번역된 "플랫"이라는 단어는 "플랫"을 의미합니다. 소위 플랫 디자인은 출시 이후 수년 동안 그 자리를 계속 유지하며 시장에서 선도적인 위치를 차지하고 있습니다.
모든 것이 시작된 곳
웹 디자인은 처음부터 여러 번 바뀌었습니다. 단순하고 지루한 요소에서 입체적이고 볼록하며 거의 물질적인 요소로 많은 발전을 이루었습니다. 이는 Windows 운영 체제의 모양을 변경하는 예에서 쉽게 볼 수 있습니다. 시각적 구성 요소는 기술 개발과 병행하여 발전하고 있습니다. 그러나 새로운 트렌드는 오히려 미니멀리즘과 단순함으로의 회귀를 가리킵니다.
스큐어모피즘에서 플랫 디자인으로
flat 이전 스타일은 스큐어모피즘(skeuomorphism)이었습니다. 오랫동안 주요 디자인 트렌드였습니다. 스큐어모피즘(Skeuomorphism)은 모든 요소가 그림자, 자연스러운 질감 및 기타 사물을 사용하여 실제 물체(노트북, 알람 시계)의 모양을 모방하는 유사 볼륨 스타일입니다. 그 놀라운 예는 초기 스마트폰 인터페이스에서 발견되었습니다. 대기업 디자이너들이 단순화를 추구하기 시작하고 사용자 인터페이스를 개발할 때 스큐어모피즘의 주요 기능인 3차원성을 제거하기 시작한 2010년 이후 위치를 잃기 시작했습니다.
스타일의 차이를 보여주는 훌륭한 시각적 예는 아래 사진입니다. 왼쪽 이미지는 플랫 디자인이고, 오른쪽 이미지는 스큐어모피즘입니다.
플랫 스타일의 특징
플랫은 2차원 스타일입니다. 부드러운 색상 전환, 그림자 또는 3차원 질감과 같은 시각적 효과가 전혀 없습니다. 한마디로 이미지를 입체적으로 만드는 모든 것.
주요 정보 내용은 아이콘(플랫 디자인 아이콘)에 담겨 있습니다. 스마트폰 애플리케이션에 관해서는 사용자에게 최대한 명확해야 합니다. 웹사이트의 경우 아이콘은 웹사이트의 특이성과 정보 메시지를 반영하는 주요 요소입니다. 일반적으로 단순한 기하학적 모양, 원형 또는 사각형의 형태로 특징적인 기존 이미지를 사용하여 표시됩니다.
플랫 디자인을 개발할 때 색상 구성에 주의를 기울입니다. 단조롭고 방해가 되지 않으며 사용자를 산만하게 하지 않아야 합니다. 대부분의 경우 하나의 순수한 색상과 여러 가지 대조 색상이 사용됩니다. 그런데, 원하는 색상의 16진수 코드를 복사하여 사용할 수 있는 플랫 디자인 색상 세트를 제공하는 인터넷 서비스가 많이 있습니다.
그다지 중요한 것은 타이포그래피(텍스트)와 같은 것입니다. 전반적인 단순성으로 인해 특히 텍스트 구성 요소가 돋보입니다. 이는 읽기 쉬워야 하며 일반적인 스타일과 모순되지 않아야 함을 의미합니다. 이는 글꼴과 색상의 성공적인 선택에 따라 달라집니다.
평면 디자인 예
잘 알려진 많은 인터넷 리소스와 소셜 네트워크의 아이콘이 더 단순하게 변경되었다는 사실부터 시작하겠습니다. 얼마 전 거대 기업인 구글과 유튜브도 디자인을 플랫으로 바꿨습니다. 8부터 시작하는 Windows 운영 체제는 아이콘의 모든 볼륨 표시를 완전히 포기하여 이전 버전의 일부 사용자의 눈을 즐겁게 하고 플랫 디자인을 고수하기 시작했습니다. iOS 및 Android용 모바일 애플리케이션 개발자도 그 뒤를 따랐습니다.
원페이지 웹사이트(랜딩페이지)는 화려한 디자인이 아닌 기능성과 가독성이 결정적인 역할을 하는 플랫 디자인의 장점을 널리 활용하고 있습니다.
플랫 디자인의 진화
처음에 플랫 디자인은 실제로 완전히 평면적이어서 볼록한 버튼에 익숙한 사용자에게 특정 어려움을 안겨주었습니다. 스큐어모피즘에서 버튼의 클릭 가능성이 즉시 눈에 띄는 경우 플랫 디자인의 첫 번째 변형에서는 처음에 요소의 상호 작용성을 결정하는 것이 항상 가능하지는 않았습니다.
Microsoft가 플랫 스타일로 디자인된 Windows 8을 출시한 후 모든 사용자가 새 인터페이스와 클릭할 수 있는 아이콘을 즉시 파악할 수 있는 것은 아닙니다. 요소의 모양은 어떤 식으로든 요소와의 상호 작용 가능성을 나타내지 않았습니다. 이 디자인은 이 아이디어를 채택한 모바일 애플리케이션에 더 편리했습니다. 그리고 Apple은 iOS 7에서 이 작업을 최초로 수행했습니다.
그러나 플랫 디자인은 가만히 있지 않고 점점 더 복잡해지는 방향으로 진화하고 있습니다. 오늘날에는 점점 세미 플랫 디자인, 또는 플랫 2.0이라고도 불리는 것처럼 보입니다. 깊이 효과, 그림자 및 그라데이션이 나타나기 시작했습니다. 플랫 디자인의 깊이는 요소를 다양한 레벨이나 각도로 배열하여 달성됩니다.
그렇더라도 스타일은 인기가 최고조에 달하고 수요가 많습니다. 따라서 웹사이트를 디자인할 계획이라면 안전하게 플랫 디자인을 선택할 수 있습니다. 웹 사이트에 누락된 요소가 필요한 경우 인터넷에서 아이콘, 글꼴, 템플릿 및 기타 사용자 인터페이스에 필요한 구성 요소와 같은 수많은 무료 평면 디자인 UI 요소(무료 다운로드)를 찾을 수 있습니다.
스타일의 장점과 단점
의심할 여지없이 오늘날의 빠르게 변화하는 삶에서 이러한 신중하고 유익한 스타일은 이전 스타일보다 더 편리합니다. 플랫 디자인에는 부인할 수 없는 장점이 많이 있습니다.
아마도 가장 중요한 것은 웹 페이지의 빠른 로딩일 것입니다. 플랫 디자인을 사용하는 웹사이트는 애니메이션이나 기타 무거운 개체로 가득 찬 웹사이트보다 훨씬 빠르게 열립니다. 로딩 시간은 SEO 최적화 및 웹 사이트 홍보에 특히 중요합니다.
단순화된 모양으로 인해 텍스트를 더 쉽게 읽을 수 있고 주요 내용에 집중할 수 있습니다.
디자인이 조화롭고 전체적인 느낌을 주어 전체적으로 기분 좋은 인상을 줍니다.
어떤 것도 완벽할 수 없으며 플랫 디자인도 예외는 아닙니다. 겉보기에는 단순함에도 불구하고 진정으로 성공적인 플랫 웹 디자인을 개발하는 것은 그리 쉬운 일이 아닙니다. 지루하고 매력적이지 않게 만들 가능성이 있습니다. 아니면 오히려 디자인에 너무 치중하고 기능성을 잊어버리기도 합니다. 플랫 디자인을 개발할 때 가장 중요한 작업은 아름다움과 사용 편의성 사이의 완벽한 균형을 유지하는 것입니다.
