실루엣은 디자인에 있어 훌륭한 요소로 활용도가 높다. 그래픽 디자인을 비롯하여 프레젠테이션, 인포그래픽스, 인쇄 디자인 등등 시각적 미디어에 널리 사용되고 있다. 이는 실루엣이 개체의 가장 직관적인 인식과 식별을 할 수 있는 모양이기 때문이다. 디자이너라면 포토샵이나 그래픽 도구를 통해 원하는 주제의 실루엣을 만들어 사용할 수 있지만, 일반인들은 쉽지 않아 인터넷에 공개된 다양한 실루엣 모음을 내려받아 활용하는 것이 더 효과적이고 편리한 방법이다.주로 많이 활용되는 실루엣은 다양한 자세의 인물 실루엣이며, 그 외 다양한 오브제들의 실루엣이라고 할 수 있다.이번에 소개하는 실루엣 모음은 hongkiat.com 에서 공유한 자료로 인물, 모델, 파티 군중, 동·식물, 해양, 문양 등 다양한 소재를 포함하고 ..

Design Information/Design Resources 2018. 9. 6. 16:14

요즘 TV나 광고 매체들을 보면 네온사인(neon sign) 효과의 텍스트를 많이 활용하고 있다.도심 야경의 상징적인 아이콘인 네온사인은 화려함과 쾌락 그리고 파티의 즐거움을 대변하기도 한다.지금까지 다양한 네온사인 느낌의 폰트들이 선보였지만, 이글을 통해 소개하는 네온사인 폰트는 조금 다르다. 타이포그래퍼 Aga Magdziak가 배포한 네온 폰트(NEON FONT)는 PSD 형식의 문자와 패턴을 묶은 패키지 폰트로 디자인에 미적이면서도 현대적인 모습을 추가할 수 있고 컬러풀하고 세련된 구성이 눈에 잘 띄고 사용하기 쉽게 되어 있다.네온 폰트(NEON FONT)는 소셜미디어 콘텐츠, 광고 및 포스터, 인쇄물, 패키지 등에 활용하기 적합하다. 무료 다운로드가 가능하며 다운로드한 패키지 파일에는 폰트와 패..

Design Information/Design Fonts 2018. 9. 4. 09:03

최근 들어 인스타그램(Instagram)이 소셜 마케팅의 효과적인 소셜 네트워크 서비스(SNS)로 부상되면서 활용방안과 관심도가 높아지고 있다.이에 따라 각종 프레젠테이션, 서비스 콘텐츠 기획에 있어 인스타그램 UI 디자인의 쓰임새가 많아지고 있다. 하지만 오랜 시간이 지난 Instagram은 디자인에 대한 세부 사항을 변경하고 IGTV와 같은 새로운 기능을 추가했다.새로운 기능이 반영된 레이아웃 및 프로필, 피드 등의 인스타그램 UI 디자인 리소스를 빠르게 확보하여 실무에 활용하는 것도 디자이너, 마케터의 센스라고 할 수 있다. UI/UX와 인터렉션 디자이너로 활동하는 Marina Dillaco가 프레젠테이션이나 디자인 작업에서 사용할 수 있도록 새로운 기능이 추가된 인스타그램 UI 디자인 리소스를 B..

Design Information/Design Resources 2018. 9. 3. 07:00

그래픽 디자이너이자, 타이포그래퍼인 Aga Magdziak이 Behance 포트폴리오를 통해 컬러풀하면서 생동감이 넘치는 Balloon Font를 무료 배포했다. 원색을 컬러풀함이 눈길을 사로잡고 풍선 형태로 구성한 개별 문자들의 밸런스와 디테일이 아주 돋보인다. 유·아동을 대상으로 하는 이벤트 및 패션 분야 Goods 패키지 디자인에 활용해도 좋을 듯하다. 얼핏 보기엔 개별 문자를 활용한 타이포그래피에 적용하기 좋은 디자인 폰트로 보이지만 감사하게도 otf 파일 형태로 제공하고 있어 다양한 그래픽 도구와 문서에도 활용할 수 있도록 했다.더불어 멋진 패턴 리소스까지 무료로 제공하고 있어 디자인 작업 활용도를 높였다.Balloon Font는 Aga Magdziak이 Behance 포트폴리오로 접속한 후 드..

Design Information/Design Fonts 2018. 9. 2. 09:00

최근 흥미롭고 특이한 텍스트 및 레이아웃 효과를 만들기 위해 'shape-outside' CSS 속성을 사용하는 데모가 부각되고 있다. 참고할 만한 사례로는 Mandy Michael 구현한 예제( https://codepen.io/mandymichael/pen/xzyrGa )를 통해서 살펴 볼 수 있다. CSS Shapes 모듈의 일부인 'shape-outside' 속성을 사용하면 객체의 모양을 중심으로 텍스트를 줄 바꿈 할 수 있다. 아래 CdoePen 링크를 통해 필요한 간단한 코드 구현을 이해하고 다양한 속성 변경을 통해 흥미로운 텍스트 레이아웃을 웹페이지에 구현해 볼 수 있다.참고 링크: http://bit.ly/2N8RejR

Design Information/HTML5 and CSS3 2018. 9. 1. 19:18

수확의 계절인 가을은 풍요로운 계절이지만 여름날의 신록이 오색 단풍으로 물들어 낙엽으로 지는 탓에 고독함도 동반되어 자칫 어둡고 우울한 분위기가 디자인 프로젝트에 녹아들 수도 있다.다양한 디자인 폰트들이 있지만, 가을은 정형화된 타이페이스가 세리프나 산세리프 보다 자유분방하고 터치감이 힘이 있는 스크립트와 브러시 타입이 잘 어울린다시즌 이벤트 등으로 다양한 홍보물과 웹사이트 콘텐츠, 배너 디자인을 제작할 때 아래 추천 폰트들은 가을 분위기를 살리고 디자인을 돋보이게 하는데 효과적일 수 있다.무료 폰트이나 상업적 사용에 따른 라이센스는 허용 여부는 한 번쯤 꼼꼼하게 확인하는 것을 잊지 말아야 한다.이 컬렉션은 최근 Web Design Ledger에서 공유한 Stunning Free Fall Fonts 20..

Design Information/Design Fonts 2018. 8. 23. 13:39

CSS 애니메이션은 속성을 이용해 구성요소를 제어하여 동적으로 구현할 수 있게 합니다. CSS 속성을 능숙하게 다룰 줄 안다면 어렵지 않게 구현할 수 있으나 그렇지 않다면 쉬운 일은 아니다.이 글을 통해 소개하는 키 프레임(keyframes) 앱을 이용하면 누구나 손쉽게 CSS 애니메이션을 손쉽게 구현할 수 있다.키 프레임은 브라우저와 편집기 사이를 오가지 않고도 애니메이션을 만들고, 보고, 실행하는 데 도움이 되는 시각적 타임라인을 제공한다. 사용자의 구성 작업이 끝나면 CSS가 제공되며 사용자의 활용 선호도에 따른 구글 크롬 확장 프로그램과 웹 앱 형태로 사용할 수 있게 되어있다. 키 프레임 크롬 확장기능은 UI가 원하는 웹 사이트(로컬 프로젝트 포함) 상단에 바로 삽입되고 애니메이션 하려는 요소를 ..

Design Information/HTML5 and CSS3 2018. 6. 11. 06:24

웹 페이지를 통해 두 가지 상품이나 서비스 이미지를 비교하거나 차이점을 강조해서 보여주고자 할 때, 일반적으로 좌.우 또는 상.하 배치를 통해 보여주거나 페이지 전환을 통해 보여주는 경우가 많다.이런 방법은 레이아웃 유지, 공간 제약, 직관성이 떨어져 효율성이 다소 떨어지는 점이 없지 않았다. 물론 다양한 방법의 diff도구들이 적용되고 있지만 보다 사용자 중심 시각적인 도구는 쉽게 접하기 어려웠다.시각적인 diff도구 TwentyTwenty는 두 이미지의 시각적인 차이를 강조하거나 효과적으로 보여주고자 할 때 유용한 방법이 될 수 있다.두 이미지의 이전과 이후를 한 화면, 특정 레이아웃에서 스와이프를 통해 직관적으로 보여준다. 두 개의 이미지를 쌓아서 동작하며, 슬라이더를 이동하면 CSS clip 속성..

Design Information/HTML5 and CSS3 2018. 5. 23. 07:41