요즘 어떤 웹 디자인이 트렌드인가요? 그래픽 디자인의 기본에서 나오는 복잡한 마크업입니다. 패턴, 선 및 원, 기하학적 모양
- 번역
웹 디자인의 세계는 활기차고 다양합니다. 이곳에서는 매년 큰 변화가 일어나지 않습니다. 이는 기술의 급속한 성장으로 확인되며, 지난 몇 년 동안 가까운 미래에 웹 디자인의 중요한 추세가 기존 디자인 개선에 초점을 맞출 것임을 보여주었습니다.
플랫 디자인은 더욱 질감이 있고, "영화적 경험"이 더욱 보편화될 것이며, JavaScript 라이브러리를 사용하면 더 많은 실험이 가능해질 것입니다. 우리는 WebGL과 가상 현실의 인기가 높아지면서 우리가 알고 있는 웹사이트가 흥미로운 대화형 기능을 갖춘 새로운 웹사이트로 변모할 것이라고 믿습니다.
이 기사에서는 올해 예상되는 11가지 가장 큰 웹 디자인 트렌드를 살펴보겠습니다. 그러니 편안하게 읽기를 시작하세요!
1. WebGL(웹 그래픽 라이브러리)
최신 성과 중에는 주목할 만한 기술인 WebGL(웹 그래픽 라이브러리)이 있습니다. 최근에 등장한 많은 놀라운 사이트에서 이 기능을 사용하고 있습니다.간단히 말해서 WebGL은 플러그인 없이 하드웨어 가속 기능을 사용하여 브라우저에서 대화형 3D 및 2D 그래픽을 렌더링하는 방법입니다.
1.1 대화형 3D WebGL 애플리케이션
호기심을 경험하세요 (NASA)
WebGL은 SIGGRAPH 2015 컨퍼런스의 핵심 주제 중 하나였습니다. 3D 그래픽과 WebGL로 프레젠테이션을 볼 수 있습니다. 이 채널에서유튜브.
1시간 30분 분량의 이 비디오에서는 Curiosity 탐사선의 화성 착륙 3주년을 기념하기 위해 만들어진 NASA의 Experience Curiosity 웹 앱에 대해 알아봅니다. 이 앱을 통해 사용자는 화성 표면에서 NASA의 3D 로버를 '타고' 로봇 팔로 '제어'할 수 있습니다.
이 리소스를 생성하기 위해 우리는 Blend4Web(브라우저 기반 3D 애플리케이션 생성을 위한 프레임워크)과 Blender(3D 모델링 및 애니메이션용 패키지)를 사용했습니다.
Beloola 웹사이트는 three.js(JavaScript 라이브러리)를 사용합니다.
SBS TV(호주)의 프로젝트 “The Boat”
호주 TV 방송국 SSB TV는 작가 Nam Le의 베트남 탈출 이야기 'The Boat'를 WebGL을 사용하여 대화형 비디오 스토리로 재작업했습니다. 이 애플리케이션은 뛰어난 애니메이션과 손으로 채색한 일러스트레이션이 포함된 여러 부분으로 구성되어 있습니다. 이 역시 이전 예제와 마찬가지로 three.js를 사용합니다.
기억 때문에
기술적인 관점에서 보면 의사 3D 공간에서 진행되는 연속적인 2차원 애니메이션입니다. 매우 인상적이군요!
2. VR(가상현실)
가상현실(VR)은 2016년 가젯계를 뒤흔들 잠재력을 지닌 관련 기술이다. 아마도 곧 상황이 훨씬 더 흥미로워질 것입니다.
웹사이트 타임시프트165
태그:
- 웹글
- 웹 디자인
- 자바스크립트
트렌드가 자신의 작업에서 중요한 부분이 될 것이라는 것은 디자이너들 사이의 공통된 믿음입니다. 최신 업데이트로 자신을 업데이트하는 것은 필수로 간주됩니다. 많은 디자이너는 트렌드의 렌즈를 통해 다른 사람의 작업을 판단하며 일부 작업에 #old 태그를 지정하는 것은 마치 디자인이 최신 트렌드를 통합하지 않아 자동으로 가치가 떨어지는 것처럼 모욕으로 보일 수 있습니다.
그러나 추세를 따라야 하는 이유가 있습니다. Awwwards, FWA 또는 CSS Design Awards와 같은 사이트를 확인하면 영감을 얻을 수 있으며 결과적으로 디자인 습관을 넘어서는 데 도움이 됩니다. 새로운 시각적 세계에 대해 배울 수 있으며, 이를 (의식적이든 아니든) 그래픽 언어와 통합할 수 있습니다. 다른 사람의 작업을 지켜보는 것은 자신의 기술을 향상시킬 뿐만 아니라 최신 기술을 최신 상태로 유지하는 데 도움이 됩니다.
지난 1~2년 동안 많은 디자이너들이 단순한 구성에서 벗어나려고 노력하는 것이 눈에 띄게 나타났습니다. 점점 더 개방적이고 혼돈스러워 보이는 '깨진', '잘라낸' 디자인 작품이 등장하고 있습니다. 한때 그랬던 것처럼 그리드의 영광은 그 중요성을 잃고 있으며 규칙은 고의적이고 의식적으로 변경되고 있습니다. 내용이 움직이기 시작하고, 움직이는 것 같으며, 때로는 그 부분들이 서로 겹쳐지고 얽히기도 한다.
Canvas와 WebGL의 발전은 이 과정에서 큰 역할을 합니다. 현대적인 디자인은 미니멀한 디자인보다 약간 지저분하고 덜 직관적인 경우가 많지만 확실히 사용자에게 지속적인 인상을 남깁니다.
2017년에는 웹 디자인에서 또 어떤 일이 우리를 기다리고 있을까요? 내 예측은 다음과 같습니다.
작곡 열기
최근까지 디자인 세계는 "폐쇄적", 대칭적, 정적인 구성이 지배적이었습니다. 2016년부터 이 스타일에서 벗어난 사이트가 많이 등장했습니다. 자유롭게 배열된 요소가 화면 밖에서 실행되는 개방형 구성이 인기를 얻고 있습니다. 이러한 작업의 예는 romainpsd.com, durimel.io 또는 booneselections.com에서 볼 수 있습니다. 이러한 사이트의 요소 분포는 모니터 뒤에 계속 존재한다는 인상을 줍니다.
어울리지 않음
2016년에는 오랫동안 업계를 지배해왔던 대칭의 법칙도 깨졌습니다. 많은 디자이너들이 왼쪽과 오른쪽 측면에서 완벽하게 균형을 이루지 못하는 비대칭 레이아웃을 만들어 왔습니다. 예를 들어, 훌륭한culture.pl 사이트, 혼란스러운dada-data.net, 그리고 앞서 언급한 durimel.io를 보여드리고 싶습니다.
다양성
디자이너들은 교차하는 대각선이 더 많거나(poigneedemainvirile.com, vanderlanth.io) 더 복잡한 모양(residente.com/en, helloheco.com, Predictiveworld.watchdogs.com)을 특징으로 하는 더욱 역동적인 구성을 만들었습니다.
혼돈의 환상
2016년에는 많은 디자이너들이 의식적으로, 의도적으로 미니멀리스트 디자인에서 벗어나기 시작했습니다. 디자인에 대한 더 많은 자유와 덜 엄격한 접근 방식에 대한 욕구가 있었습니다. 물론 그 뒤에는 변화의 필요성이 있지만 일상적인 지루함도 있습니다. 어느 시점에서 모든 사람들은 단순한 요소로 단순한 레이아웃을 만드는 것에 지루해집니다.
그러나 2016년 프로젝트를 분석해 보면 혼돈은 혼돈일 뿐이라는 사실이 눈에 띈다. 레이아웃은 여전히 모양, 색상, 질감, 크기 등의 고전적인 대비를 기반으로 합니다. 달라진 것은 다양한 요소들의 배치와 이들 간의 의존성의 조화이다. 요즘에는 진부한 논리에도 불구하고 제목, 아이콘 또는 텍스트 블록이 더 자주 이동됩니다. 동일한 주제 블록의 일부임에도 불구하고 서로 분리되어 있으며 서로 적당한 거리에 있습니다. 동일한 가장자리에 정렬되지 않았으며 뒷면이 다릅니다.
"공중에 매달린" 일부 기하학적 도형은 장식적인 목적만을 갖고 있습니다(melanie-f). 이는 요소가 겹치는 경우에도 일반적입니다. e03.epicurrence.com 및 melville-design.com에서처럼 텍스트가 사진과 부분적으로 겹치거나 olivierbernstein.com에서 볼 수 있듯이 이미지가 서로 겹쳐져 있습니다.
평소 미니멀한 조화를 깨는 독특한 기법이기도 하다. 거대한 제목은 섬세하고 미묘한 구조와 색상과 뚜렷한 대조를 이룹니다.
풍부한 배경과 패턴
작은 대시, 줄무늬 또는 점이 있는 배경과 패턴이 점점 더 자주 나타납니다.
특히 일반적인 패턴은 다른 레이아웃 요소에 대한 "프레임"을 제공하는 격자 패턴입니다. 이러한 요소는 그리드를 따라 시차로 이동하며 종종 혼란스럽게 위치합니다.
그리드 패턴
이러한 그리드가 나타난 최초의 사이트 중 하나는 werkstatt.fr이었지만 특징적인 애니메이션을 사용하지 않았습니다.
그리드 패턴을 사용하는 약간 다른 방법은 klimov.agency,brand.uber.com 및 maisonullens.com에 나와 있습니다. 이러한 경우 그리드에는 요소의 이동을 논리적으로 만드는 매우 구체적인 기능이 있습니다. 이를 통해 비표준 솔루션을 합리화하고 "그림의 여백이 버튼의 여백과 일치하지 않는 이유"와 같은 질문에 대한 답변을 제공할 수 있습니다. 이것은 리듬을 생성하는 동시에 위반을 정당화합니다.
장식적인 세부 사항
최근 달라진 점은 디테일에 대한 접근 방식이다. 미니멀리즘에서 점차 멀어지고 있습니다. 장식적인 기능만 갖고 있는 요소는 이 밖에도 많다. "비행" 기하학적 모양과 해당 조각. 선형적이고 조잡한 아이콘은 설명하는 콘텐츠에서 약간 분리됩니다. 밑줄과 줄이 이동됩니다. bigyouth.fr 또는 kikk.be와 같이 거칠고 결함이 나타납니다.
버튼은 내부에 텍스트가 포함된 명확한 직사각형으로 생성되는 경우가 적습니다. dahllaw.dk 또는 yasuhiroyokota.com과 같이 부드러운 오프셋 선으로 나타나는 경우가 많습니다. 또 다른 버튼 옵션은 hpsoundincolor.com 및 cavalierchallenge.com과 같은 Canvas의 멋진 마우스 오버입니다.
사려 깊은 개념 - 섹션 간 부드러운 애니메이션
웹사이트의 애니메이션에는 새로운 것이 없습니다. 게다가 그것이 미니멀리스트의 접근방식과 모순된다고 말할 수도 없다. 그러나 Canvas와 마찬가지로 웹 디자인의 더 큰 가능성 중 중요한 부분입니다. 그리고 새로운 기회는 새롭고 신선하며 독창적인 일을 할 수 있게 해주기 때문에 항상 유혹적입니다.
풍부한 애니메이션으로 인해 페이지가 섹션으로 뚜렷하게 구분되지 않습니다. 스크롤하면 사이트가 원활하게 변경됩니다. 콘텐츠는 부드러운 애니메이션을 사용하여 페이드 인 및 페이드 아웃됩니다. 이러한 전환의 순서는 점점 더 정교해지고 있습니다. 이는 콘텐츠 블록 간의 무작위 효과가 아니라 각 요소가 적시에 나타나는 사려 깊은 개념입니다(Nationalgeographic.com, stylenovels.com). 애니메이션은 무작위로 추가된 세부 사항이 아니라 처음부터 웹 사이트의 일부입니다.
재미있는 애니메이션이 단순한 레이아웃을 장식합니다. 그들은 새로운 가치를 추가하고 페이지를 독특하게 만듭니다. Ifly50이나 tennentbrown.co.nz에서처럼 이는 전체 프로젝트의 핵심이 됩니다. 애니메이션은 웹사이트(Cuberto.com, lookbook.wedze.com, skarv-fashion.com 또는 corentinfardeau.fr)에서 아름답고 매끄러운 구조를 만드는 경우가 많습니다.
다양한 타이포그래피
변화하는 추세는 사용된 글꼴에서도 볼 수 있습니다. 최근까지 전체 인터넷은 Helvetica, Roboto, Lato 또는 Open Sans와 같은 단순하고 네오그로테스크한 글꼴이 지배했습니다. 약간 더 "장식적인" 네오그로테스크는 제목에 더 자주 사용되며 나머지 텍스트에는 더 간단한 버전이 선택됩니다. Serif 글꼴은 실제로 사용되지 않습니다.
지난 2년 동안 상황은 바뀌기 시작했습니다. 디자이너들은 다양한 종류의 글꼴을 과감하게 사용합니다. 이제 그들은 세리프체와 산세리프체를 결합하는 등 대비를 사용하여 작업하려는 의지가 더 강해졌습니다.
웹사이트에서 사용되는 타이포그래피에는 많은 일이 일어나고 있습니다. 텍스트는 애니메이션화되어 개별 문자로 구분되며 텍스트에는 다양한 효과, 이미지 및 비디오가 배치됩니다.
더 뛰어난 기술 역량과 더 대담한 결정은 웹 타이포그래피의 다양성을 성장시키고 있습니다.
기하학적 글꼴
클래식 Futura, ITC Avant Garde, Proxima Nova 또는 Google 라이브러리에서 사용할 수 있는 Poppins 또는 Montserrat와 같은 기하학적 산세리프 글꼴이 매우 인기를 얻었습니다. 이러한 글꼴은 "보이지 않는" 네오 산 세리프체보다 표현력이 훨씬 뛰어납니다. 꽤 오래된 사이트인 hugeinc.com에서와 같이 더 두꺼운 두께를 사용하면 웹사이트의 "공격적"이고 표현력이 풍부한 특성을 얻을 수 있습니다. 하지만 여기에 새로운 예가 있습니다: 시퀀스.co.uk, startlab.no 또는 www.protest.eu .
세리프 글꼴
세리프 글꼴은 본문 텍스트뿐만 아니라 큰 제목에도 사용되는 경우가 많습니다. duhaihang.com 또는 jennyjohannesson.com과 같이 장식적인 것들이 특히 자주 사용됩니다. 기타 인기 있는 글꼴로는 Bodoni 또는 Didot와 관련된 글꼴이 있습니다.
고정폭 글꼴(“타자기”)
일반적으로 타자기와 관련된 비례 글꼴을 사용하는 것은 혁신적입니다. 이제 admirhadzic.com,cuberto.com 또는 designembraced.com과 같은 사이트에서 볼 수 있습니다.
대조되는 글꼴 조합
2016년에는 보다 뚜렷한 대비를 위해 부드럽고 조화로운 글꼴 조합에서 벗어나는 것이 일반적이었습니다. 텍스트 크기의 고대비로 표현 조합이 향상되었습니다. 콘텐츠 텍스트에서 기하학적 제목이 세리프 글꼴과 짝을 이루는 것처럼 크고 장식적인 글꼴은 단순한 기하학적 글꼴과 짝을 이루었습니다.
메인 이미지의 일부인 거대한 타이포그래피
매우 멋지고 일반적인 점은 메인 이미지에 매우 큰 텍스트 크기를 사용한다는 것입니다. 이로 인해 헤드라인과 나머지 콘텐츠 사이에 매우 강한 대조가 만들어졌습니다. 예는 oursroux.com, femmefatale.paris 또는 monsieurcaillou.com에서 볼 수 있습니다.
때로는 coretinfardeau.fr 또는 nurturedigital.com과 같이 장식으로 처음에 글자가 사용됩니다.
위의 대표적인 예는 세리프 글꼴 Goku의 장식적 특성을 사용하는 jennyjohannesson.com입니다.
타이포그래피에 적용 가능한 추가 효과
타이포그래피와 이미지, 비디오, 애니메이션 사이의 강력한 통합을 관찰할 수 있습니다. 개별 섹션은 연결되어 있습니다. 타이포그래피는 배경 및 기타 요소와 상호 작용합니다. 어두운 이미지에 타이포그래피를 무작위로 배치하는 것은 더 이상 과거의 일입니다. 오늘날 디자이너들은 타이포그래피를 배경에 엮고 애니메이션을 적용하는 등 모든 요소 사이에 흥미로운 관계를 구축하고 있습니다.
텍스트의 큰 글자 크기
처음 웹 디자인 작업을 시작했을 때 인쇄 작업을 할 때 선택한 글꼴 크기 10을 사용하는 오랜 습관이 있었습니다. 그러나 웹에서 읽을 수 있는 최적의 크기는 14라는 것을 금방 깨달았습니다.
요즘에는 디자이너들이 특히 세리프 글꼴의 경우 훨씬 더 큰 글꼴을 사용하는 것이 눈에 띕니다.
어두운쪽으로 와라
2016년에는 디자이너들이 다양한 색상을 사용했습니다. 그러나 어두운 톤을 선택하는 경향이 있음을 알 수 있습니다.
전체가 흰색인 웹 사이트를 만드는 추세는 점점 인기가 줄어들고 회색 변형, 질감 및 패턴으로 바뀌고 있습니다. 이제는 검정색이나 그 그라데이션이 배경을 채우고 약간 어둡고 그로테스크한 분위기를 만드는 어두운 사이트를 만드는 것이 일반적입니다.
그럼에도 불구하고, 이러한 추세가 올해 동안 어떻게 증가할지 예측하기는 어렵습니다. 그러나 색상은 브랜드의 시각적 아이덴티티의 일부이므로 특정 트렌드의 인기에만 기초하여 커뮤니케이션을 근본적으로 변화시키기는 어렵습니다.
요약하다
2017년에는 많은 흥미로운 전망이 예상되지만 몇 가지 위험도 곧 다가옵니다.
개인적으로 저는 많은 웹 디자이너들이 Canvas로 작업할 때 약간 과신할 수 있다는 점을 걱정합니다. 이 새로운 트렌드에 더해 광범위한 청중을 위한 화려하고 모호한 웹사이트를 많이 얻게 됩니다.
나는 또한 오늘날의 많은 창작물이 모든 브라우저와 모바일 장치에서 제대로 작동하지 않을 것이라는 사실에 대해 약간 우려하고 있습니다. 다시 원점으로 돌아온 듯한 느낌이 들었습니다. 우리는 지금 플래시가 인터넷을 지배하고 있음에도 불구하고 응답성이 부족하고 인터넷 연결 요구 사항이 높다는 이유로 비난을 받았던 시대와 비슷한 상황에 있습니다.
제가 두려운 또 다른 점은 '해체'를 향한 새로운 트렌드가 상업 고객에게 적용이 불가능하거나 단순히 그들의 커뮤니케이션 프로필에 맞지 않을 것이라는 사실입니다. (정부 또는 은행 웹사이트가 복잡해져서는 안 됩니다).
새로운 트렌드가 상업 시장에 정착되기까지 얼마나 오랜 시간이 걸릴지 궁금합니다. 제가 예시로 사용한 웹사이트의 대부분은 에이전시, 디자이너, 창작 산업을 위해 만들어졌다는 점은 주목할 가치가 있습니다. 이러한 사이트는 자체 규칙을 설정하는 경우가 많으며 일반적으로 다른 산업에 비해 앞서 있습니다. 때로는 트렌드가 틈새 시장에서 인기를 얻고 상업 시장에 진입하는 데 오랜 시간이 걸립니다. 그런 다음 모든 사람에게 적합하도록 모양이 약간 부드러워집니다.
이 모든 것에도 불구하고 2017년은 웹 디자인에 있어서 매우 유망해 보인다고 생각합니다. 미니멀리즘 시대가 끝났다고 하기엔 무리가 있겠지만, 미니멀리즘 시대는 분명 변화와 발전을 겪고 있다.
미니멀리즘은 더욱 복잡해지고 디테일해질 것이다. 올해 웹사이트에서는 Canvas를 점점 더 많이 사용할 것입니다. 우리는 앞으로의 프로젝트에서 많은 혼란과 다양한 형태, 표현을 보게 될 것입니다. 이는 미니멀한 플랫, 머티리얼 또는 메트로 디자인 스타일에 지친 디자이너에게 좋은 소식입니다.
일반 웹사이트를 만드는 것은 현대적인 디자인으로 효과적인 온라인 마케팅 도구를 만드는 것만큼 간단한 작업이 아닙니다. 아름답고 잘 최적화된 웹사이트를 만들려면 많은 시간과 투자, 심지어 영감까지 필요합니다. 더 많은 고객을 유치하기 위해 웹사이트를 디자인하는 방법은 무엇입니까? 기사를 통해 알아보겠습니다.
Internet Live Stats에 따르면 전 세계에는 12억 개가 넘는 웹사이트가 있습니다. 매초마다 이 값은 약 10단위씩 높아집니다. 귀하가 종사하는 업계에 관계없이 귀하의 웹사이트는 기술과 디자인 모두에서 최신 상태여야 합니다. 이 기사에서는 사이트의 모양, 즉 2017년에 사이트가 어떻게 보일지에 초점을 맞출 것입니다. 너무 밝고 다채롭고 허식적인 글꼴은 오랫동안 시대에 뒤떨어진 것으로 간주되었습니다. 아이콘은 사용자가 메뉴 항목을 더 쉽게 탐색할 수 있도록 이미지를 대체합니다. 그러나 이러한 사실은 인터넷 마케팅에 관련된 대부분의 전문가에게 알려져 있습니다. 이 기사를 통해 현대적인 웹사이트 디자인이 어떤 모습이어야 하는지 배우게 됩니다.
1. 웹 디자인은 주로 모바일 장치에 중점을 둡니다.
웹사이트 개발에 대한 소위 모바일 우선 접근 방식은 5년 이상 존재해 왔습니다. 이것이 새로운 트렌드는 아니지만, 이 마케팅 채널을 사용하여 매출을 늘리려는 모든 사업주에게 필수품이 되었기 때문에 확실히 주목할 가치가 있습니다.
모바일 우선 접근 방식은 무엇을 의미하나요? 모바일 응답성에 중점을 둔 웹 개발입니다. 반응형 디자인의 사용은 특히 독립 웹 분석 대행사인 StatCounter가 게시한 공식 통계를 고려할 때 완벽하게 이해됩니다. 그에 따르면 모바일 기기를 통한 인터넷 이용 비중은 51.3%다. 이러한 이유로 Google은 순간 검색 서비스 지원을 중단했습니다. 이 기능은 데스크톱 사용자에게 제공되었으며 사용자가 쿼리를 입력하는 동안 검색 결과를 제공했습니다. 트래픽이 증가하면 사업주들은 더 많은 매출을 올릴 수 있습니다. 따라서 더 넓은 청중에게 초점을 맞추는 것이 완벽하게 합리적입니다.
2. 숨겨진 탐색
사용자가 목표 작업을 완료하는 비율을 높이려면 필요한 클릭 수를 최소화해야 한다는 말을 우리 중 많은 사람들이 들어왔습니다. 클릭수가 적을수록 전환율은 높아집니다. 이러한 사실에도 불구하고 현대 웹 디자인에는 소위 "햄버거"를 클릭하면 나타나는 숨겨진 팝업 메뉴가 포함되는 경우가 많습니다. 이 솔루션은 모바일 장치에서 올바르게 보이도록 메뉴를 배치해야 하는 경우 반응형 디자인 접근 방식을 기반으로 합니다.
페이지 상단에 요소가 포함된 기존 사이트 탐색은 너무 많은 공간을 차지하고 의미 있는 콘텐츠에 대한 사용자의 관심을 끄는 기능을 제한합니다. 숨겨진 탐색 기능을 만들면 더욱 매력적이고 효과적인 홈 페이지를 만들 수 있다는 또 다른 이점이 있습니다.
3. 넓은 첫 화면
팝업 메뉴는 홈 페이지 첫 화면에 추가 공간을 만듭니다. 이를 통해 더 큰 글꼴, 더 매력적이고 읽기 쉬운 아이콘을 사용하여 회사의 주요 장점을 강조하여 효과적으로 사용자의 관심을 끌 수 있습니다. 정보가 많을수록 좋다는 시대는 이미 지나갔습니다. 사용자가 성공적으로 완료된 타겟 액션이 목적지인 원활한 경로를 통과하는 것이 중요합니다. 더 많은 여백은 디자이너에게 최고의 홈페이지 아이디어를 생생하게 전달할 수 있는 기회를 제공하며, 이는 이 마케팅 채널을 독특하고 사용자에게 더욱 매력적으로 만들 것입니다. 최고의 웹사이트 디자인은 몇 가지 부드러운 색상이 포함된 전체 너비 배경 이미지가 포함된 첫 번째 화면을 특징으로 합니다. 탐색 영역은 사용자가 쉽게 인식하고 읽을 수 있어야 합니다.
4. 전용 내비게이션 영역
숨겨진 메뉴와 넓은 첫 번째 화면을 사용하면 사용자가 더 빠르고 쉽게 결정을 내리는 데 도움이 되는 몇 가지 주요 탐색 요소에 사용자의 주의를 집중할 수 있는 방식으로 사이트를 디자인할 수 있습니다. 이 접근 방식을 사용하면 사용자가 올바른 버튼을 찾는 데 시간을 낭비하지 않고도 메뉴를 탐색하여 필요한 단계를 완료할 수 있습니다. 넓은 첫 화면에서는 더 큰 글꼴을 사용하고 글꼴 사이에 더 많은 공간을 두어 핵심 요소를 강조할 수 있어 가장 유용한 콘텐츠를 강조할 수 있습니다.
5. Material Design Lite 스타일의 웹사이트 디자인 개발
머티리얼 디자인은 지난 몇 년 동안 널리 사용되는 트렌드인 소위 플랫 디자인의 중요한 확장이 되었습니다. Android 디자인은 모바일 장치용 인터페이스로 만들어졌지만 이제 데스크톱도 완전히 정복했습니다. 이러한 시각적 접근 방식은 유용성을 전체 디자인의 핵심 구성 요소로 만듭니다. MDL(Material Design Lite)은 차세대 머티리얼 디자인입니다. 여기에는 모든 디자이너가 편리한 팔레트 선택을 사용하여 MDL 사이트를 빠르고 쉽게 만들 수 있는 도구가 포함된 지침, 레이아웃 세트 및 전체 구조가 포함되어 있습니다.
6. 큰 아이콘
웹사이트 디자인에서 아이콘의 인기는 사람이 3일 후에 시각적 정보의 65%를 기억하고 서면 또는 음성 정보의 10-20%만 기억한다는 사실로 설명됩니다. 그러므로 인간의 뇌는 텍스트보다 이미지를 처리하는 것이 더 쉽다는 것을 알게 됩니다. 사용자가 혼동하지 않도록 아이콘은 관련 텍스트와 일치해야 한다는 점은 주목할 가치가 있습니다. 과장되고 인위적인 표정을 지닌 사람들의 심심한 이미지는 시대에 뒤떨어진다. 모든 장치에서 올바르게 표시하려면 아이콘도 벡터여야 합니다. 우리 웹사이트 디자인의 예를 보고 우리 작업에 대해 알아볼 수 있습니다.
웹 디자인에서 아이콘을 사용하기 위한 주요 요구 사항은 다음과 같습니다.
- 아이콘은 콘텐츠와 일치해야 합니다.
- 명확한 메시지를 포함해야 합니다.
- 벡터여야 합니다.
- 아이콘은 작든 크든 읽기 쉬워야 합니다.
사이트의 글꼴 및 색상 선택에 대한 최신 동향을 살펴보겠습니다.
7. 심플한 폰트와 부드러운 컬러 팔레트
웹 디자인에서 유해한 색상은 약 15년 전에 인기를 끌었습니다. 이제 디자이너들은 절제된 파스텔 색조, 부드럽고 화려하지 않은 색상으로 전환했습니다. 60-30-10 구성표는 여전히 관련성이 있습니다. 현대 웹 디자인에서는 흰색에서 옅은 회색까지의 중성 색상이 우세하고 공간의 30%는 더 밝은 톤으로 사용되며 10%만 풍부한 색상으로 칠해집니다. 행동을 요구하다.
웹 개발은 이제 몇 가지 부드러운 색조를 지닌 크고 단순한 글꼴이 선호되는 단순한 아름다움의 시대로 접어들었습니다. 이러한 추세를 어떻게 설명할 수 있습니까? 이 접근 방식은 가장 중요한 정보에만 사용자의 관심을 집중시키기 때문에 의미가 있습니다.
우리는 새로운 웹사이트 디자인 트렌드의 기본 목록을 제공했습니다. 사실, 우리 중 더 많은 사람이 있기 때문에 한 기사에 담기에는 자료가 너무 광범위합니다. 우리는 블로그에서 웹 개발의 최신 디자인 솔루션에 대해 계속해서 알려드릴 것입니다.
우리 팀은 주요 웹 디자인 트렌드와 효과적인 기술을 통합하여 최대 최적화를 달성하는 반응형 웹 사이트 디자인을 만드는 데 기꺼이 도움을 드릴 것입니다. 으로 이메일을 보내주시면 기꺼이 도와드리겠습니다!
2018년 웹 디자인 및 디지털 트렌드를 소개합니다. Olga는 Awwwards 심사위원으로 매일 전 세계의 에이전시와 디자이너가 개발한 수백 개의 새로운 사이트를 검토합니다. 이를 통해 그녀는 웹 개발 및 디자인의 최신 개발 및 동향을 따라갈 수 있습니다.
기사는 강의의 주요 메시지를 설명하고 있으며, 링크에서 전문을 읽어보실 수 있습니다.
대화형 스크롤
커서는 화살표로 표시됩니다. 클릭할 때 손가락으로 바뀌거나 호버가 나타날 수 있습니다. 이제 커서는 요소가 될 수 있습니다. 페이지로의 전환이 그 아래에 강조표시됩니다. 아래의 요소는 커서와 변경되거나 상호 작용할 수 있습니다.
Volcan 웹사이트가 가장 좋은 예입니다. 다이아몬드 커서는 클릭할 때 무엇을 기다리고 있는지에 대한 힌트가 됩니다. 대화형 요소가 있습니다. 결과적으로 호버는 필요하지 않으며 해당 역할은 커서에 의해 수행됩니다.
Volcano 웹사이트의 대화형 스크롤 예
UI/UX 디자이너 간의 전투를 위한 새로운 테마 - 얼마나 편리할까요? 하지만 모든 것을 올바르게 생각하면 잘 될 수 있습니다.
SVG 마스크
그들의 도움으로 공간 전환을 할 수 있습니다. 개발이 어렵지는 않지만 디자이너에게 자유를 줍니다. Rich Brown의 웹사이트는 전환으로 십자가를 사용합니다. 하지만 그것은 어떤 형태든 될 수 있다.
Photoshop을 사용하는 경우 마스크로 레이어에 구멍을 잘라내기만 하면 됩니다. 또는 6개의 사각형을 겹쳐서 사용할 수도 있습니다. 우리 클라이언트의 경우 이 것을 사용하여 화면에서 화면으로 전환했습니다. 양식에서 이미지를 여는 것도 SVG 마스크입니다. 하지만 레이아웃을 보면 정적인 그림처럼 보입니다.
캔버스
이것은 이미 어렵습니다. 프로세스의 수학적 측면을 이해하는 사람이 반드시 필요합니다. 어떤 것들은 도서관에서 빌릴 수 있습니다. 그러나 SVG는 커서와 동기화되지 않습니다. 그리고 여기 있습니다.
예를 들어 Adidas의 Climachill 웹사이트가 있습니다.
글자로 모핑하는 것이 캔버스입니다. 그라디언트의 오버플로는 캔버스입니다. 그리고 이것은 몇 년 동안 인기가 있었지만 곧 쓸모가 없어지지는 않을 것입니다. 무게가 가볍고, 복제하기 어려운 2D 그래픽이기 때문입니다. 자신의 웹사이트에서 "와우"를 많이 원하는 사람들에게 적합합니다.
3D+웹GL
방향이 발전하게 됩니다. 1분 분량의 작지만 높은 퀄리티의 영상을 만든다면, 최소 10명의 팀원이 필요하다는 뜻입니다. 3D에서는 디자이너가 1명입니다. 그리고 webgl은 +1 개발자입니다. 3D는 Globekit 웹사이트처럼 고전적일 수 있습니다. 환상적이고 독특해 보입니다. 총 6개의 슬라이드로 구성되어 있지만
하지만 다시 말씀드리지만, 적용 시 주의가 필요합니다. 그러한 효과 중 하나는 사이트를 밝게 만드는 데 충분하지만 화려하지는 않습니다.
VR
2017년 3월, 최초의 VR 웹사이트가 등장했습니다. 더 많은 것이 있습니다. 최근 우리는 축구 경기장에서 최초의 VR 트랙을 만들었습니다. 한 남자가 마스크를 쓰고 있는데 마치 경마장에 있는 것 같습니다.
Audi의 가상 레이싱용 장치.
우리는 최근 VR이 인기를 끌 것인지에 대해 논쟁을 벌였습니다. 그렇습니다. 만들기가 더 쉬워졌기 때문에 미래가 있습니다. 고개를 돌리면 휙휙 넘겨볼 수 있고, 시선을 고정하면 출근할 수 있도록 VR로 포트폴리오를 만들어드립니다.
아칸소
이제 앱 없이도 할 수 있다는 것이 좋습니다. 브라우저의 링크로 이동하면 몇 가지 내용을 읽을 수 있는 마커가 있어야 합니다. 이 마커를 보여주면 원하는 대로 그리기가 완료됩니다. 즉, 먼저 3D로 디자인을 만들어 보여주면 증강현실이 완성됩니다. 직접 맞춤설정할 수 있습니다.
PWA는 애플리케이션과 유사한 브라우저 기능입니다. 아이콘으로 추가되어 애플리케이션처럼 보입니다. 실제로 브라우저에서 열리며 사용자에게 알림을 보내고, 양식을 통해 기록하고, 오프라인으로 콘텐츠를 받을 수 있습니다.
프레임
AR과 VR에 대한 모든 것을 찾을 수 있는 기성 라이브러리입니다. 어떻게 작동하는지 볼 수 있고 실제로 작동하는 모습을 볼 수 있습니다.
그러므로 저는 모든 웹 디자이너에게 3D 공부를 완료하라고 조언합니다. 이렇게 하면 귀하의 사이트가 훨씬 더 활기차게 될 것입니다.
계속 지켜보세요. 그들은 가만히 서 있지 않습니다. Google 실험과 같은 것이 있습니다. 두 시간 정도 시간을 내어 모든 아름다움을 탐험해 보세요. Google은 개발자와 대행사가 참여하는 많은 실험을 수행합니다. 마지막은 빅데이터 활용이다.
그리고 최근 Awwwards는 Google과 협력하기 시작했습니다. 이는 이제 모바일 사이트에 중점을 둘 것임을 의미합니다. 기술은 더 가볍게 만들기 위해 최적화되기 시작할 것입니다. 구글은 모바일 웹에 점점 더 관심을 갖고 있다.
WebVj
아주 새로운 트릭입니다. 페이지는 데이터를 기반으로 구성됩니다. 특히 이 문제에 대해 진지한 일본인 나카무라 마사타쓰가 있다. 그래픽은 디자이너가 아닌 프로그래머가 전적으로 제작합니다. 그는 Google 실험을 위해 많은 일을 하고 있습니다.
WebVJ를 사용하여 만든 Masatatsu Nakamura 그래픽의 예
트렌드시키
가장 많이 받는 질문은 “내년에는 어떤 색상/글꼴/패턴이 유행할까요?”입니다. 나는 이것을 '트렌드'라고 부른다.
이제 하나의 인기 있는 글꼴이나 색상 세트를 결정하는 것이 불가능합니다. 파스텔톤 컬러가 점점 트렌드가 되어가고 있는 것 같아요. 그러나 이러한 밝고 폭발적인 사이트를 보면 그렇지 않다는 것을 깨닫게 됩니다.
어떤 경우에도 패턴을 사용하여 구성 요소의 프레젠테이션을 재생해 보는 것이 좋습니다. 이렇게 하면 콘텐츠가 더 비싸고 흥미롭게 보일 것입니다. 규칙적인 반투명 및 밝은 패턴은 이미 귀하의 사이트에 상태를 부여합니다. 비스듬한 선, 깨진 요소 - 이는 그리 어렵지 않으며 개발자의 개입이 필요하지 않습니다.