Design
디자인(design, 문화어: 데자인)은 동사와 명사로 함께 쓰일 수 있으며, 명사로서의 디자인은 다양한 사물 혹은 시스템(건축에서의 청사진, 엔지니어링 도면, 사업의 표준 프로세스, 서킷보드의 다이어그램, 바느질 패턴 등)의 계획 혹은 제안의 형식 (도안, 모델 이나 다른 표현) 또는 물건을 만들어내기 위한 제안이나 계획을 실행에 옮긴 결과를 의미하며, 동사로서의 디자인은 이것들을 만드는 것을 의미한다. 일반적으로 받아들여지는 일원화 된 디자인의 정의는 존재하지 않으며, 디자인이라는 용어는 각자 다른 분야에서 다양한 의미로 해석되고 응용되고 있다. 실질적으로 만져지는 물건을 창조하는 행위나 그 행위의 결과(유리 그릇, 도자기, 나무 장식품 등) 역시 디자인이라 할 수 있다.
- 디자인이라는 용어는 지시하다·표현하다·성취하다의 뜻을 가지고 있는 라틴어의 데시그나레(designare)에서 유래한다.
일반적으로 디자인 결과물은 다양한 목적을 동시에 효과적으로 달성해야 하기 때문에 디자인 업무는 그 과정에서 다양한 측면(예를 들어 산업디자인의 경우 재료, 생산효율, 안전성, 경제성, 내구성, 매력 등)을 고려해야 하며, 이를 위해 창조 과정에 앞서 디자인 리서치, 사고, 실험 모델, 상호 교감적 실험 및 조정 과정, 재설계 과정 등을 거칠 수 있다. 따라서 과정으로서의 디자인은 디자인되는 물건이 디자인되는 방법과 이에 참여하는 개인과 참여자의 분야, 그리고 그 다양성에 따라 많은 다양한 방법과 형태가 존재한다. 철학 에서는 추상적 단어로서 디자인을 어떠한 패턴 혹은 존재 이유와 목적을 가진 의미로 지칭한다.
Categories
- Design:Resources - 다운로드 가능한 리소스 사이트 또는 목록 등
- Web Design
- Soil Mobile Flowcharts (Flowchart, UX)
- Corporate Identity Program (CIP)
- KickstartDS - 디자인 시스템을 위한 스타터킷 오픈소스
- Art Deco Patterns - 데코레이션 패턴
- carbon - 소스코드를 예쁜 이미지로 출력해줌.
Social networking service
- Pinterest - 이용자가 스크랩하고자 하는 이미지를 포스팅하고 다른 이용자와 공유하는 소셜 네트워크 서비스.
- Dribbble - 드리블은 디지털 디자이너와 크리에이티브를 위한 자체 개발 및 소셜 네트워킹 플랫폼이다.
Pixel art
- Github - Collection - Pixel Art Tools
- Github - ellisonleao/magictools - A list of Game Development resources to make magic happen
Tutorials
Resources
- Kenney • Home - Free game assets, no strings attached.
- Dungeon Starter by Sir Onion Knight
- 16x16 Dungeon Tileset by 0x72
- 2D Pixel Dungeon Asset Pack by Pixel_Poem
- [추천] Simple Dungeon Crawler 16x16 Pixel Art Asset Pack by o_lobster
- 2D Pixel-art game spell/magic FX by ppeldo
- pixeldudesmaker by 0x72
Tileset
Example
- Baba is you: 24x24 (?)
- Cadence of Hyrule: 24x24 (?)
안전하게 따라할 수 있는 비쥬얼 디자인 규칙들
꼭 따라야 할 필요는 없지만, 이 규칙들은 언제나 그대로 적용해도 괜찮음
- 순수한 검은색/흰색 대신 검정색과 흰색에 가까운 색을 사용하기
- 순수한 블랙은 스크린에서 부자연스러워 보이고, 순백은 너무 밝음
- #000000 과 #FFFFFF 대신 #222222 와 #F2F2F2 를 사용
- 이후엔 블랙/화이트를 지칭하면 이 색들을 이야기 하는 것
- 중성색은 보통 블랙/화이트/그레이
- 색을 사용한다면 중성색들에 약간만 색을 추가할 것 (grey 대신 light red, black 대신 dark blue)
- 이렇게 하면 색상 팔레트가 더 일관성 있게 느껴짐
- HSB를 사용한다면 약 5% 이하의 채도만 추가하면 됨
- 사용자가 주목해야 하는 모든 요소들 : 버튼, 콘텐츠 등
- 구분선, 드롭쉐도우 등은 대비를 최대한 적게 사용
- 여백, 정렬, 사이즈, 간격, 색상, 그림자 를 포함한 모든 것
- 누군가 디자인의 특정 부분을 물어봤을 때 왜 그렇게 했는지를 설명할 수 있어야 함
- 특정 형태들은 눈으로 봤을 때 정렬되게 표현하는게 더 나을 때가 있음
- 눈으로 정렬 하려면 연습이 필요하지만, 규칙적으로 해보면 빠르게 캐치 가능
- 모든 텍스트에 적용 됨
- 글자가 클수록, 각 글자와 라인간에 여백이 조금 필요함. 반대 역시 마찬가지
- 테두리는 컨테이너 내부와 배경색 사이가 아닌 배경보다 더 어두운 색상으로
- 정렬은 사물들이 서로 관련되어 있다는 것을 알려줌
- 무언가가 다른 것과 정렬되어 있지 않다면 디자인에 속하지 않는 것처럼 느껴짐
- 이상적으로는 각 요소가 일종의 논리에 의해서 다른 요소들과 정렬되어야 함
- 색상의 밝기 값이 서로 다른 경우, 색조 뿐만 아니라 밝기에서도 고유한 룩앤필을 줄 수 있음
- 이렇게 하면 각 색상들이 서로 많이 경쟁하지 않기 때문에 더 좋은 색상팔레트가 됨
- 중성색에 웜/쿨 컬러를 같이 사용하게 되면 컬러팔레트가 일관성있게 느껴지지 않음
- 요소들간의 간격이나, 크기 등은 일종의 축척에 의해 결정 되어야 함. 이렇게 하면 디자인이 일관되게 보이도록 도와줌
- 예제에서는 모든 요소들을 8의 배수로 사용. 간격은 8/16/24/32, 줄높이는 48/40/24, 텍스트 크기는 40/32/16
- 한 행이나 열에 여러개의 요소들이 있고, 그중 일부가 다른 것보다 시각적으로 더 무겁다면(버튼 2개와 링크3개 처럼)
- 시각적으로 가장 무거운 요소가 먼저오고 가벼운 요소가 순서대로 마지막에 와야함
- 주의할 점은 시각적으로 가장 무거운 요소가 가장 바깥에 있어야 한다는 것
- 컬럼 단위로 나눈다면 12개로 하면 1,2,3,4 컬럼을 사용할 수 있어서 많은 유연성을 제공
- 우리의 눈은 대비를 기준으로 요소의 가장자리를 찾기 때문에, 대비되는 지점 사이에는 간격이 있을 것으로 기대함
- 화면의 요소들이 사용자에게 가까울수록(더 앞쪽에 있을 수록) 더 가벼워져야함
- 이것은 라이트/다크모드에도 같이 적용 됨. 실제 세상이 이렇게 작동하기 때문
- Y축으로 4픽셀 확장되는 그림자를 설정할 경우, 블러 값은 8 픽셀로 설정
- 요소가 보는 사람에게 "가까워 지면" 그림자의 불투명도(opacity)도 낮추는게 좋음
- 복잡한 배경(화려한 그라데이션)은 전면(텍스트)가 단순할 때 가장 잘 보임
- 앞이 복잡하다면 간단한 배경이 가장 적합
- 단순한 것 위에 단순한 것도 가능은 하지만 밋밋해 보임
- 복잡한 것 위에 복잡한 것은 시각적 혼란을 주므로 피해야 함
- 배경과 컨테이너 사이의 밝기 차이는 어두운 인터페이스에서는 12%, 밝은 인터페이스에서는 7% 이내여야 함 (HSB 컬러시스템 상의 밝기 값)
- 잘 디자인된 웹사이트 약 100개를 대상으로 컨테이너의 밝기를 배경과 비교하여 확인한 연구에서 알아낸 것
- 컨테이너의 내부 패딩은 컨테이너 내부의 요소 사이의 공간. 외부 패딩은 요소와 컨테이너 가장 자리 사이의 공간
- 외부 패딩은 내부 패딩과 같거나 더 커야함
- 16px는 대부분의 브라우저에서 기본 텍스트 크기
- 이 크기 이하의 텍스트는 읽기 어려우므로, 본문에는 사용하지 않는 것이 안전
- 줄길이가 60 이나 80인지는 그다지 중요하지 않지만, 어느쪽이든 멀리가면 가독성 문제가 발생할 수 있음
- 표준 버튼의 패턴은 높이보다 넓음
- 사람들이 버튼으로 인식하게 하려면, 이 패턴을 따르는 것이 좋음
- 두번째 서체는 디자인 뒤에 있는 컨셉을 강화할 수 있는 기회
- 또한 디자인에 다양성을 추가하는데 도움이 됨
- 두 개 이상 사용할 필요는 거의 없으며, 디자인이 시각적으로 혼란스럽게 느껴질 수 있음
- 가끔 두개 이상의 둥근 모서리가 중첩되는 경우가 있음
- 제대로 보이게 하려면 내부 모서리 반경을 외부 모서리 반경에서 둘 사이의 거리를 뺀 값으로 설정할 것
- 예) 외부 모서리 반경이 30px 이고, 내부 모서리와 20px 떨어져 있다면 내부 모서리 반경은 10px로
- 배경 트렌지션, 컨테이너 가장자리, 분할선은 시각적으로 구분하기가 어려움
- 두 개 이상의 구분선이 붙어 있도록 하지 말 것
See also
Favorite site
- Wikipedia (en) 디자인에 대한 설명
- 디자이너를 위한 UI 디자인 툴 10가지
- [추천] 디자인 시스템 1편 - 디자인 가이드/디자인 시스템은 왜 필요한가
- 1편 - 디자인 가이드라인/디자인 시스템은 왜 필요한가(현재글)
- 2편 - 디자인 가이드라인/디자인 시스템의 종류
- 3편 - 디자인 가이드라인/디자인 시스템의 운영
- 4편 - 디자인 가이드라인/시스템 작업 프로세스 및 유의할 점
- 5편 - GUI 디자인 리서치
- 6편 - 기본 시각 요소 설계 시 알아 두어야 할 것들
- 7편 - 컴포넌트를 디자인할 때 고려해야 할 것들
- 8편 - 특수한 목적을 고려한 컴포넌트 디자인하기
References
-
Miniboss_Pixel_art_tutorials.zip ↩