w3.css

트렌드

 

매년 새로운 웹 기술과 트렌드를 보게 될 것이다.

이 페이지에서는 가장 관련성이 높은 웹 디자인 트렌드를 소개한다.

평면 디자인

플랫 디자인 트렌드는 2010년 Windows Phone 7 및 Windows 8부터 시작되었다.

2013년에는 Apple의 iOS 7이 뒤따랐다.

플랫 디자인은 종종 마케팅, 도로 표지판, 스티커 메모에서 알려진 색상을 사용한다.

 

플랫 디자인의 가장 큰 문제 중 하나는 어떤 영역을 클릭할 수 있는지 이해하는 것이다.
이미지와 클릭 가능한 버튼의 차이점은 무엇일까?

거의 평면적인 디자인(Flat 2.0)

거의 평면은 원래의 평면 디자인에 대한 새로운 대안이다.

거의 평면적일수록 더 깊이 있고, 더 밝은 색상, 복잡한 그림자 및 입체감을 얻는다.

그림자

  <div class="w3-bar w3-section w3-black w3-card-4">
    <a class="w3-bar-item w3-button w3-green w3-hover-red w3-padding-16">Home</a>
    <a class="w3-bar-item w3-button w3-hover-red w3-padding-16">Link 1</a>
    <a class="w3-bar-item w3-button w3-hover-red w3-padding-16">Link 2</a>
  </div>

머티리얼 디자인

이제 플랫 디자인(거의 플랫)의 정점에 이르렀기 때문에 많은 디자이너들이 머티리얼 디자인(Designed by Google, 2014년)으로 갈 것으로 예상된다.

머티리얼 디자인은 종이와 잉크를 연상시키는 요소를 사용한다.
또한 요소에는 사실적인 그림자와 호버 효과가 있다.

예제

카드

가장 일반적인 카드는 이미지와 일부 텍스트가 포함된 직사각형이다.

카드는 헤드라인, 이미지, 텍스트를 동일한 평면에 구성하기 위한 일반적인 구조가 되었다.

카드는 작거나 클 수 있으며, 그림이 있거나 없고, 그림자가 있거나 없을 수 있다.

예제

  <div class="w3-card-4 w3-section">
    <div class="w3-container w3-teal">
      <h2>Mountains</h2>
    </div>
    <img src="https://www.w3schools.com/w3css/img_snowtops.jpg" alt="Alps" style="width:100%">
    <div class="w3-container w3-center">
      <p>French Alps</p>
    </div>
  </div>

클리너 로고

깔끔한 로고는 플랫 디자인의 인기에 따른 결과다.

미니멀리즘

읽기 쉽다.
이해하기 쉽다.
디자인하기 쉽다.

 

미니멀리즘은 거의 평면적인 디자인과 함께 사용할 수 있다.

읽을 수 있는 타이포그래피

플랫 디자인의 자연스러운 타이포그래피는 간단하고 읽기 쉽다.

문자 간격과 줄 간격은 일반적으로 더 크다.

또한 독자의 관심에 더 집중하기 위해 글꼴 크기가 커질 것으로 예상된다.

 

⭐ 가독성은 플랫 타이포그래피가 인기를 얻는 중요한 이유다.

전체 화면 입력

페이지의 일부만 사용하는 대신 가입 및 로그인과 같은 입력을 위해 전체 화면을 사용하는 사이트가 점점 더 많아지고 있다.

전체 화면에서는 새 페이지로 리디렉션하는 대신 화면 오버레이나 모달을 사용하는 경우가 많다.

예제

<form id="id01" action="/action_page.php" class="w3-modal w3-pale-yellow">

<button onclick="document.getElementById('id01').style.display='none'"
class="w3-btn w3-right w3-large w3-hover-red w3-clear">X</button>

<div class="w3-clear"></div>

<div class="w3-container"> 
<h2>Class Registration</h2>

<p>
<input class="w3-input" type="text" name="first" style="width:90%" required>
<label>First Name</label></p>

<p>
<input class="w3-input" type="text" name="last" style="width:90%" required>
<label>Last Name</label></p>

<p>
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label></p>

<p>
<input class="w3-radio" type="radio" name="gender" value="female">
<label>Female</label></p>

<p>
<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label>Don't know (Disabled)</label></p>

<p>
<button class="w3-btn w3-ripple w3-hover-green">Register</button></p>
</div>

</form>

모바일 우선

역사적으로 웹 디자이너는 먼저 컴퓨터용 웹 애플리케이션을 개발한 다음 반응형 웹 디자인을 추가하여 태블릿이나 휴대폰에서 웹이 보기 좋게 보이도록 했다.

이러한 추세는 먼저 모바일용으로 디자인한 다음 반응형 디자인을 추가하여 데스크톱과 노트북에서 사이트가 작동하도록 하는 방향으로 바뀌고 있다.

50/50은 반응형 웹을 위한 웹 디자인을 달성하는 쉬운 방법이다.
50/50 디자인으로 큰 화면에서는 2페이지, 좁은 화면에서는 1페이지를 표시할 수 있다.

예제

대형 히어로 이미지

‘히어로 이미지’는 특정 유형의 웹 배너에 사용되는 용어다.

히어로 이미지는 웹페이지 앞에 배치되는 큰 이미지다.
이는 이미지와 일부 텍스트로 구성되는 경우가 많으며 정적이거나 회전하는 이미지 목록일 수 있다.

히어로 이미지의 목적은 웹사이트의 가장 중요한 콘텐츠를 제시하는 것이다.

예제

단일 페이지

웹 디자인 트렌드는 일반 클릭에서 수직 스크롤로 바뀌고 있다.

스크롤을 통해 사용자는 한 페이지에서 모든 웹 콘텐츠를 볼 수 있다.

이 단일 페이지 기술은 누군가가 다른 페이지에도 적합하다는 것을 발견할 때까지 소셜 네트워크에서 오랫동안 사용되어 왔다.