Web's study Study블로그

스토리보드 작성 스토리보드 웹에서의 스토리보드는 웹 사이트 개발에 있어서 중요한 설계도이자 구체적인 작업 지침서로, 각 화면에 대한 정의와 구성, 내용, 기능, 서비스 흐름을 상세하게 설계하고 정의한 문서이다. 와이어 프레임이 화면의 구조와 흐름을 파악하거나 전체 구조를 조감하기 위해 비교적 단순화한 작업인 반면, 스토리보드는 각 화면의 흐름이 자세히 포함된 작업이다. 스토리보드의 완성은 기획 단계의 마무리를 의미하는데, 스토리보드에 명시된 내용을 토대로 디자이너는 시각 인터페이스를 디자인하고, 프로그래머는 프로그램을 설계하고 세부적인 코딩을 진행하게 된다. 스토리보드 작성 스토리보드는 대개 표지와 개정 이력, 공통 요소 정의, 정보 구성도, 서비스 흐름도, 화면 설계의 순으로 작성하며, 프로젝트 규모 ..

UI 구성 요소 제작 UI 제작의 원칙 인터페이스(Interface)란 두 개체가 만나는 접점에서 상호 간의 소통을 위하여 만들어진 매 개체, 즉 소통하는 통로를 의미한다. 특히 사용자와 디지털 기기·디지털 시스템이 상호작 용할 수 있도록 하는 물리적·가상적 매개체를 사용자 인터페이스(UI, User Interface)라고 하는데, 사용자가 디지털 기기·시스템을 조작할 수 있게 하는 ‘입력장치’와 사용자가 입력한 것의 결과를 표시하는 ‘출력장치’로 구성된다. 사용자 인터페이스를 제작하기 위해 고려해야 하는 원칙은 다음과 같다. 메타포(Metaphor) : 메타포는 ‘은유’, ‘비유’를 뜻하는 말로, UI에서의 메타포란 휴지통이 ‘문서 삭제’, 폴더가 ‘문서보관’을 의미하는 것처럼 시스템에서 표현하고자 하..

와이어 프레임 작성 1. 와이어 프레임의 개념 와이어 프레임(wire frame)이란 실제로 디자인을 진행하기 전에 화면에 표시될 구성, 정보체계, 기능, 콘텐츠에 대한 전체적 레이아웃을 간단한 선(wire)으로 단순하게 표현한 스케치를 의미하며, 색상, 타이포그래피, 이미지 등의 정보를 최소화하여 도식(schematic), 청사진, 프로토타입(prototype) 형식으로 보여 줄 수 있다. 와이어 프레임은 그래픽 요소나 시각적 요소의 표현보다는 계층 요소의 구현을 중심으로 표현해야 한다. 2. 와이어 프레임 작성 와이어 프레임을 작성할 때에는 웹 브라우저, 모바일 웹 등 다양한 매체의 화면 비율을 고려하여 작성하며, 콘텐츠의 세부 내용과 디자인적 요소는 최대한 배제하고 대략적인 페이지를 스케치한다. 이..

1. 아트웍을 위한 컬러계획의 개요 시각디자인 개발을 위한 아트웍 중 컬러 계획은 정보 커뮤니케이션을 위한 방안으로서, 콘 셉트 구체화를 위한 연출 방안으로서 중요한 단계이다. 컬러는 매체 전체의 콘셉트와 아이 덴티티를 조성하며 이미지와 텍스트 요소의 정보로서 체계와 위계를 구축하며 메시지와 분위기를 감성적으로 전달한다. 컬러 계획은 매체별 컬러 발색 특성에 대한 이해를 바탕으 로 컬러를 통한 정보 구성 계획과 이미지 연출을 주된 계획으로 한다. 1.1 컬러 아이덴티티 구축 계획 색채는 사용하는 국가와 단체의 문화적 특성을 기반으로 대표색상들이 고유의 의미를 함 유하고 있다. 붉은색은 열정, 푸른색은 신뢰를 상징하는 예와 같이 공통적으로 통용되는 일반적 의미와 특정 문화에서의 선호색 기피색 등의 의미 부..

타이포그래피 아트웍 준비된 자료를 바탕으로 디자인 콘셉트에 맞게 응용된 시안을 전개할 수 있다. 응용된 시안을 바탕으로 디자인 전개의 순서와 방법을 정할 수 있다. 디자인 소프트웨어를 활용하여 응용된 시안 이미지 구현을 할 수 있다. 응용된 시안을 기반으로 타이포그래피를 사용할 수 있다. 타이포그래피 아트웍의 개요 타이포그래피는 정보이자 이미지의 융합된 대상으로서 시각 커뮤니케이션 디자인을 위한 핵심적 역할을 담당한다. 타이포그래피(Typography)는‘활자를 주된 대상으로 콘셉트와 커 뮤니케이션 목적에 맞도록 시각적 형태로 표현하거나 레이아웃하기 위한 방법’이라고 해 석할 수 있다. 타이포그래피를 통해 텍스트 정보는 시각적 형태를 갖추게 되며, 이는 디자 인 콘셉트를 직접적으로 구현하는 요소로 작용한..

표현요소를 적용한 시안 아트웍 썸네일 스케치(thumbnail sketch)를 통해 아이디어를 전개할 수 있다. 디자인 소프트웨어를 활용하여 이미지 구현을 할 수 있다. 디자인 콘셉트와 비주얼을 기반으로 타이포그래피를 사용할 수 있다. 인쇄 제작을 고려하여 CMYK 4원색과 별색을 구분하여 사용할 수 있다. 색이 전달하는 이미지를 활용하여 콘셉트에 적합한 색을 배색 및 보정할 수 있다. 매체와 재료의 특성에 따라 적합한 색상을 구현할 수 있다. 입체물 제작 시 평면디자인 전개에서 결과물을 예상하여 제작할 수 있다. 시안 아트웍의 개요 아트웍 제작 아트웍(Artwork)은 설정된 디자인 콘셉트에 맞게 준비된 시각 자료를 활용하여 창의적으로 디자인 이미지를 만들어 내는 과정이다. 디자인 매체별 특성을 지닌 ..