Web design에 대한 소개 / Wireframing , Wireframe 공부하기

UI(user interface)에 대한 이해와 그에 따른 CSS 용법을 배우게 된다. 

 

이 단원을 통해 배우게 되는 것은 다음과 같다.

 

1) 와이어프레이밍이 무엇인지

2) 와이어 프레임을 만들어 보는 것(다양한 플랫폼에서 구동가능한)

3) 색상이론이나 활자 디자인 등의 UI이론등을 학습하는 것 

 

Wireframe 이란?

 

 일종의 '설계도면'이라고 생각하면 편하다. 우리가 어떠한 서비스를 개발할 때(웹페이지, 앱 etc.,) 실제 개발에 착수 하기전 어떠한 요소를 어디에 배치할 것이고 , 어느 형태로 디스플레이 할 것인지를 계획하는 단계를 말한다. 특징적으로 wireframe의 경우에는, 보다 단순하고 간단한 시각적인 레이아웃으로 이루어져있다. 

 

 페이지의 구조와 , 각 페이지별 연결 방식에 대해 이해하기 쉽게 구성되어 있다.  그림판에서 대충 만든 아래 예시처럼 기본적인 구조를 최소한의 요소를 활용하여 표현하는 것이 대부분이다. 아래 Adobe 링크에 올라온 예시들 처럼 보다 복잡하거나 화려해질 수는 있지만 기본 목적자체를 달성하기 위해서 그런 화려함이 필요하지는 않다. 

 

 Wireframe은 최종 디자인의 기반을 만드는 단계이며, 핵심적인 요소들이 포함되어있는지 확인해야 한다. 디자이너와 개발자의 소통을 원활하게 해주는 장점도 있다. 

 

 

그림판으로 급조한 예시입니다

 

참고)

 

https://xd.adobe.com/ideas/process/wireframing/wireframe-design-definition/

Wireframe Design & Prototype Must-Knows | Adobe XD Ideas