전체 글24 8-6. 디자이너가 알아야할 디자인 기법: 텐션 긴장은 모든 창작 작품에 흥미를 더합니다. 디자인과 음악, 문학 등 모든 예술 작품에서 긴장감을 의도적으로 사용해서 흥미를 유발합니다. 바닥에 놓인 정사각형은 균형이 맞고 잘 정렬되어 안정감을 줍니다. 나쁘지는 않지만 긴장감이 조금 떨어집니다. 반면 이런식의 도형은 이전과 달리 긴장감이 확실합니다. 살짝만 기울였을 뿐인데 긴장감이 생겨났습니다. 긴장감을 주는 건 아주 간단합니다. 앞전에 알아봤던 겹치기 역시 입체감과 긴장감을 줄 수 있는 방법 중 하나이며, 혹은 사선의 도형을 사용하는 것도 긴장감을 유발할 수 있습니다. 이런식으로 사선 도형을 사용하면 디자인에 긴장감 속도감, 움직임을 부여할 수 있습니다. 2023. 11. 21. 8-5. 디자이너가 알아야할 디자인 기법: 오버랩 오버랩 기법은 어렵지만 잘만 사용한다면 완성도 있는 디자인을 보여줄 수 있습니다. 서로 다른 요소를 겹쳐서 디자인에 공간감을 형성할 수 있습니다. 주로 인쇄 디자인에서 많이 사용하는 기법이지만 웹디자인에서는 인쇄물에 비해서 절제되어 있고 보수적입니다. 텍스트를 사진과 겹치거나 그림과 그림을 살짝 겹칠 수 있습니다. 한 섹션에서 한 요소만을 겹치는 것을 추천합니다. 너무 많은 요소를 겹치면 오히려 조잡해집니다. 실제 웹에 적용할 수 있습니다. 이런 섹션의 사진배치가 나쁜건 아니지만 조금은 밋밋한 느낌이 들 수 있습니다. 이런식으로 겹치면 이전에 비해서 조금 더 재밌는 디자인으로 바뀌었죠? 여기서는 여러장의 사진을 겹쳤지만 사진이 한장일 경우에는 어떨까요? 이런 식으로 임의의 사각형을 만들어서 이미지와 겹칠.. 2023. 11. 21. 8-4. 디자이너가 알아야할 디자인 기법: 일관성 좋은 디자인을 구분하는 쉬운 방법 중 하나는 일관성입니다. 웹 사이트의 레이아웃, 타이포그래피, 색상의 일관성을 보는 것이죠. 우리 눈은 본능적으로 사물이나 대상에서 패턴을 찾아내려고 합니다. 패턴을 벗어난건 쉽게 알아볼 수 있습니다. 패턴이 벗어난 이유는 잘 몰라도 우리 눈은 쉽게 인지합니다. 웹디자인에서 가장 쉬운 일관성을 바로 레이아웃의 일관성입니다. 그리드가 필요한 이유가 바로 여기에 있습니다. 레이아웃에 일관성을 부여하기 쉬운 방법이기 때문이죠. 특정 배열을 반복하면 사용자는 같은 방식의 레이아웃을 기대하며 기대감이 충족된다면 사용자 경험이 즐거워집니다. 이는 곳 사용자가 사이트를 더욱 신뢰하게 만들 수 있습니다. 일관성을 벗어난 예시입니다. 중앙 배너의 컨텐츠는 좌측 정렬인데 반해 위, 아래 .. 2023. 11. 21. 8-3. 디자이너가 알아야할 디자인 기법: 반복 반복이 사용된 사이트를 하나 가져왔습니다. People first 라는 웹사이트 제목의 컬러풀한 색상이 직원들의 프로필 사진 배경으로 적용되어 있습니다. 직원들을 소개하는 프로필 박스의 레이아웃이 왼편의 이름, 오른편의 사진배치로 반복되어 통일되고 일관성있는 디자인을 적용했습니다. 사진아래 단락에도 컬러풀한 색감이 적용되었습니다. 이런 지그재그 형태의 레이아웃을 한 번쯤은 만들어보거나 봤을겁니다. 반복 기법이 사용된 디자인입니다. 우리 눈은 모든 대상에서 패턴을 찾아내려는 경향이 있습니다. 패턴을 찾아내면 뇌가 쾌감을 느낍니다. 반복 기법이 임팩트가 있는 이유는 바로 이런 점 때문입니다. 2023. 11. 21. 8-2. 디자이너가 알아야할 디자인 기법: 여백 야후의 메인 페이지입니다. 이건 구글의 메인 페이지입니다. 같은 웹 검색 사이트인데 이 둘을 비교해보면 전자는 상당히 복잡한 구성으로 한곳에 집중하기 힘듭니다. 반면 후자는 무엇을 클릭해야하고 무엇에 집중해야할지 명확하죠. 한마디로 구글의 검색이 야후의 검색보다 쉽습니다. 가끔 숙련되지 않은 디자이너나 여백의 의도에 대해서 잘 모르는 고객들은 이런 여백을 불안한 요소로 간주하곤 합니다. 그래서 여백을 항상 "빈 곳"으로 인지하고 꽉꽉채우려고 하죠. "여백이 많아서 불평하는 사용자는 없지만, 복잡한 페이지를 싫어하는 사용자는 많다" 라는 말이 있습니다. 여백은 불안한 요소가 아닙니다. 여백으로 인해 주요 컨텐츠에 이목을 집중시켜 컨텐츠의 중요성을 사용자에게 인지시킬 수 있습니다. 여백을 가장 잘 활용하는 .. 2023. 11. 21. 8-1. 디자이너가 알아야할 디자인 기법: 대비 위 예시 웹사이트의 가장 큰 특징은 대비입니다. 웹 디자인에서 대비 기법을 사용할 수 있는 방법에는 3가지가 있습니다. 색감(color), 크기(size), 무게감(weight). 위에서 나열한 세가지를 염두해서 다시 예시를 살펴보면 웹사이트에 쓰인 대비가 조금 느껴질겁니다. 첫 번째 웹사이트에서는 제목과 단락의 크기/무게감 대비, 배경과 버튼의 색감 대비 기법이 사용되었습니다. 두 번째 웹사이트에서는 붉은 배경과 흰 글꼴의 색감 대비가 가장 눈에 띄네요. 가운데 배치한 흰책 역시 배경과 대비를 이루도록 배치한 것입니다. 마찬가지로 제목과 단락의 크기/무게감 대비도 있네요. 이런 대비 기법은 웹사이트의 시각적 계층구조를 형성합니다. 그리고 보는 맛이 있어요. 보는 맛이라는 건 흥미를 유발한다는 말입니다... 2023. 11. 21. 8. 디자이너가 알아야할 디자인 기법 디자인에는 기법이 있습니다. 이번에는 디자이너가 알아야할 디자인 기법에 대해서 알아보도록 합시다. 8-1. 대비 8-2. 여백 8-3. 일관성 & 반복 8-4. 오버랩 & 텐션 2023. 11. 21. 7-4. 네모에서 벗어나기 틀 벗어나기 사진은 항상 네모난 형태입니다. 사진을 찍던 사진을 내려받던 항상 사진의 사각형의 형태입니다. 이 네모난 이미지를 그대로 사용한다면 그닥 인상적이지 않을때가 많습니다. 공간과 전혀 어울리지 않으며 별개의 요소로써 주위에 네모난 여백을 만들어버립니다. 우리가 인식하지 못한다고 해도 우리 눈은 정직하기 때문에 이미 이상하게 느낍니다. 따라서 이런 여백을 깔끔하게 처리하기 위해서는 네모 형태를 벗어나야 합니다. 이미지의 배경을 모두 지워 테두리를 없애고 틀에서 벗어났습니다. 그리고 모델의 크기를 더 키운 뒤 오른쪽 구석으로 배치했습니다. 이렇게 하면 좁은 틀 안의 형태를 벗어나 페이지 밖으로 나와 이전보다 훨씬 더 인상적인 사진이 되었습니다. 모델의 옷이 하얀색이라 배경과 잘 맞지 않아 배경의 색.. 2023. 11. 21. 7-3. 이미지 자르기 (소프트 크롭) 소프트 크롭 소프트 크롭이라는 이미지 자르기 기법이 있습니다. 소프트 크롭은 윤곽이 선명하지 않다는 것이 특징입니다. 즉, 이미지가 점층적으로 희미해지는 것을 말합니다. 이런 식으로 이미지 위에 희미해지는 오버레이를 추가해서 만들 수 있습니다. 자연스러워 보이는 장점이 있고 왼편에 콘텐츠를 배치하면 비쥬얼 섹션 하나 뚝딱입니다. 이목을 집중시키는 큰/무게감 있는 글꼴의 헤드라인, 파노라마가 적용된 가벼운 무게감의 부제, 가독성이 있는 단락과 브랜드 컬러가 담긴 버튼까지! 이전에 나왔던 모든 기법들이 전부 다 들어갔습니다. 이번에는 난감한 상황에서 적용해봅시다. 가끔 우리가 원하는 이미지를 찾았지만 세로형 이미지일 때가 있어서 넓은 섹션에서 사용하기 난감했던 적 있었을겁니다. 이렇게요... 참 난감합니다... 2023. 11. 20. 7-2. 이미지 자르기 (익스트림 크롭, 블라인드) 익스트림 크롭기법 우리는 가끔 영화 포스터에서도 영감을 받곤합니다. 위 포스터를 살펴보면 얼굴을 아주 가까이 확대했습니다. 이렇게 이미지를 자르는 방법을 익스트림 크롭이라고 합니다. 이전에 색상 추출에서 사용했던 예시입니다. 실제 원본 사진이 위 사진과 같은데 우리가 봤던 이미지 보다 상당히 임팩트가 약합니다. 이렇게 사진을 확대해서 잘랐을 때 훨씬 더 강한 임팩트와 긴장감이 있습니다. 이렇게 익스트림 크롭 기법을 사용하면 두 가지 효과가 있습니다. 일단 첫 번째로 어떤 존재의 가장 중요한 부분, 특히 눈에 더 초점이 맞춰지게 됩니다. 이로인해 이미지가 친근하게 다가오며 더 강한 호소력이 느껴집니다. 두 번째는 호기심을 자극합니다. 피사체의 일부분을 숨기는 것은 보는 사람에게 신비로움과 호기심을 불러일으.. 2023. 11. 20. 이전 1 2 3 다음
