일러스트 요소를 사용한 웹 디자인 사례 21가지

A GREAT UI IS INVISIBLE

잘 설계된 UI란 어떤 것인지 확인해 보세요.

15 Fresh Freebies from Dribbble

15가지 아이콘 및 다양한 GUI 디자인 리소스를 다운로드 활용해 보세요.

Showcase Of Beautiful Flat UI Design

Flat한 느낌을 잘 살린 UI 디자인 사례를 만나보세요.

21 Inspiring Examples of Contact Pages and Forms

이제는 연락처 페이지에서도 당신의 개성을 표현해보세요! 21가지의 연락처 페이지를 소개합니다.

디엘토 웹사이트는 역경과 고난을 거친 한편의 대서사시 영화 같습니다.
‘워드프레스’라는 솔루션으로 제작하기로 하고 결정 난 후로, 진척이 되지 않아 답답하기도 하였습니다.
(사실 마치 주인공과 시놉시스만으로 영화가 되기를 바라는 것처럼 기다리기만 했었죠.)

하지만 이런 적은 내용을 바탕으로 메타브레인에서 웹사이트의 전반적인 그림을 그려주셨고, 그때부터 속도감 있게 진행이 되었던 것 같습니다. 메뉴에 내용이 더해지고, 이미지들이 채워져 가면서 뿌듯함도 커졌습니다.

기존 블로그 (포털사이트 블로그보다는 조금 어렵지만)처럼 휘리릭 쓰면 바로바로 보여서 관리 측면에서도 아주 편리하고, 모바일에서도 바로 적용된 것을 볼 수 있어 아주 좋은 솔루션인 것 같습니다.

요즘은 어떤 웹사이트를 들어갔을 때 워드프레스로 제작되어 있으면 괜히 반가운 기분이 들고, 더 애틋하기도 합니다.마지막으로 웹사이트 제작하면서 내용과 디테일이 꽤 여러 번 수정되어 많이 힘드셨음에도 잘 만들어주신 메타브레인께 감사드립니다.

디자인 컨셉 및 방향

dlto

아이덴티티 컬러인 옐로 컬러를 포인트로 활용하여 dlto만의 새로운 즐거움을 창조하는 기업이미지를 강조하였으며 유지 관리에 쉽도록 구조 설계 기획 및 콘텐츠 디자인을 진행하였습니다.

구현 방향

metaPresso 300으로 제작된 디엘토 사이트는 기성 테마에서 제공하고 있는 다양한 요소와 구조를 메뉴에 맞게 구성하는 작업이 진행되었습니다.

메인에서는 디엘토의 대표 서비스와 현재 운영 중인 SNS 요소를 배치하였으며, 서비스 메뉴는 포트폴리오 목록 타입을 활용하여 콘텐츠 업데이트 및 운영관리에 유용하도록 제작되었습니다.

반응형으로 제작된 워드프레스 풀 스크린 테마 45가지를 만나보세요.

30 Websites Featuring a Horizontal Stripe Layout

명확한 영역 구분에 유용한 가로 스트라이프를 활용한 웹사이트 디자인의 30가지 사례.

Let It Flow – 26 Awesome Examples of Responsive Web Design

빠르게 성장하고 있는 Responsive Web Design의 흐름과 미래에 대해 알아볼 수 있는 최고의 예제를 제시합니다.

The definitive front-end performance guide

퍼블리싱만 잘해도 가벼운 사이트를 만들수 있습니다. 지금 확인해 보세요.

44 Corporate Identities plus How To Create Your Own Using Photoshop

기업의 비주얼 아이덴티티 브랜딩은 중요합니다. 뛰어난 기업 온/오프라인 아이덴티티 구축 사례를 살펴보세요.

타이포그라피 요소를 활용한 웹 디자인 21선.

30 New Html5 Coming soon Template

흥미로운 HTML5 기술로 귀사의 웹사이트 오픈 예정을 어필할 수 있습니다.

Reflections on Web Design Trends in 2013

2013년 웹디자인 트랜드에 대한 방향을 소개합니다.

10 Free Mockup Backgrounds to Present Your Work

추상적인 도형 Background 이미지를 활용해보세요. 당신의 디자인을 더욱 돋보이게 해드립니다!

HTML5: Threesixty.js Generates 360 Views From Images

HTML5 속성을 사용한 Threesixty.js 스크립트를 이용하여 360도 이미지 뷰어를 만들어 보세요.

회사 블로그 리뉴얼 프로젝트를 메타브레인과 함께 진행하면서 가장 만족스러웠던 부분은 빠른 피드백이였습니다.
세세한 부분까지 친절하게 설명해 주시고 요청사항에 응해주셔서 수월하게 진행할 수 있었던 것 같습니다.

회사의 아이덴티티가 잘 반영된, 디자인적으로 심플하면서도 기능적이고 관리도 쉬운 사이트가 구축된 것 같아 만족스럽습니다. 향후에도 함께 할 수 있길 기대합니다!

Get Content, Get Consumer!

소셜 미디어 마케팅을 넘어 파워 콘텐츠 마케팅으로!
기업의 채널 구축에서 콘텐츠 제작 및 유통까지 기업의 Brand Story를 구축하는 것을 최우선 가치관으로 생각하는
마케팅 기업 inmD 웹사이트를 워드프레스 프리미엄 테마를 활용한 metaPresso 300으로 리뉴얼 구축하였습니다.

디자인 컨셉 및 방향

inmD

원 테마의 깔끔하고 깨끗한 느낌의 속성과 inmD의 아이덴티티 컬러인 핫핑크를 포인트로 활용함으로써 테마와 inmD의 강점을 최대한 부각하는 방향으로 진행하였습니다.

아울러 자칫 깔끔하게만 보며 지루하게 느낄 수 있는 룩엔필에 적절한 그라데이션 효과의 다이어그램과 편집 느낌의 그리드를 활용하여 풍부함을 더 하였습니다.

구현 방향

metaPresso 300 상품으로 구축된 inmD 웹사이트는 메인 상단 슬라이드를 동적으로 표현하기 위한 인터랙션 부분을 중점으로 작업이 진행 되었습니다.

이를 통해 inmD의 강조 콘텐츠를 효과적으로 메인에 노출 시켰으며 반응형 웹디자인(RWD:Responsive Web Design)이 적용된 프리미엄 테마를 활용하였기 때문에 디자인된 페이지도 테마의 구조와 스타일을 고려하여 작업이 진행되었습니다.

유니크한 인터랙션과 활용성이 뛰어난 3D 큐브 UI 플러그인 HexaFlip.

10 Time Saving Online Color Tools for Web Designers

효율적인 작업시간을 위해 웹 디자이너에게 반드시 필요한 Color Palette Tool 모음.

80+ Stunning Creative Freelancer and Agency Portfolio Websites

창조적인 디자이너, 에이전시들의 포트폴리오 웹사이트 80선.

10 Super Useful Free Icon Font Sets

CSS로 스타일을 쉽게 바꿀 수 있는 다양하고 새로운 아이콘 폰트를 만나보세요.

Modern Food-Related Website Designs – Best Examples

모던한 음식 관련 사이트. 식욕을 돋우는 디자인들을 만나보세요.

한국인의 체형에 맞는 프레임의 설계부터 부품 제조업체들과의 기술적 융합을 연구, 아름다움을 표현하는 미학적 요소를 융합하여 사람을 생각하는 마음을 자전거에 녹이는 전문 업체 ‘벨로라인’ 사이트를 워드프레스를 활용한 metaPresso 300으로 구축하였습니다.

디자인 컨셉 및 방향

벨로라인

벨로라인은 기존테마가 가지고 있는 특성에 맞게 background 이미지를 충분히 활용하여 자전거 이미지가 부각되게끔 디자인 진행하였습니다.
로고타입에서 오는 클래식한 느낌을 유지하며 텍스트만을 활용하여 심플하게 하였습니다.

블랙컬러가 기본이 된 테마 느낌에 잘 어울어지도록 레드와 골드계열의 컬러를 활용함으로써 좀더
고급스러운 느낌을 강조 하였습니다.

구현 방향

metaPresso 300 상품으로 구축된 벨로라인 사이트는 배경 이미지에 슬라이드가 적용되기 때문에 로딩 이슈에 대비하여 프리미엄 테마 사양에 맞게 이미지 용량과 사이즈를 최적화하여 속도를 체크하는 것이 우선이었습니다.

그리고 프리미엄 테마에서 제공하는 템플릿 요소들을 확인하여 각 메뉴에 맞춤 타입을 정리하기 위한 분석 작업이 선행되었으며, 제품 상세 페이지의 테이블 요소를 모바일과 태블릿에 최적으로 보여지도록 반응형 웹디자인(RWD:Responsive Web Design)을 고려한 퍼블리싱 작업이 진행되었습니다.

디자인 컨셉 및 방향

비즈케어

나만의 의료보고서를 컨셉으로 종이가 펼쳐지는 듯한 느낌을 주며 화이트와 블루톤의 컬러를 활용함으로써 보다 깔끔하고 깨끗한 느낌을 주었습니다.
자칫하면 차가워 보일 수 있는 느낌에 오렌지 컬러를 포인트를 주었습니다.

또한, 디테일한 아이콘과 심플한 아이콘 형식을 적절히 활용하여 복잡하고 어려운 의학용어를 재미있게 표현하여
밋밋하게 보일 수 있는 웹사이트를 지루하지 않게 볼 수 있도록 디자인하였습니다.

구현 방향

비즈케어의 경우 모바일 웹을 별도로 가져가지 않고 반응형 웹디자인(RWD:Responsive Web Design)으로 구축된 사이트로 디자인 아이덴티티를 해치지 않으면서도 IE6에서도 무리 없이 사이트를 사용할 수 있도록 크로스 브라우징 작업도 함께 진행되었습니다.

사이트에 구현되는 기능에 대한 요건을 고려하여 작업이 진행되었고 병행하여 구글, 다음에서 제공하는 Open API를 사용하여 지도와 차트를 제공하는 작업도 진행 하였습니다.

최소의 인터랙션 기능과 주목성을 높인 다양한 형태의 갤러리 페이지 디자인.

Sleek Media Player Interfaces: Best Examples and Free PSD’s

미디어 플레이어의 좋은 UI 디자인 예와 무료 PSD를 소개합니다.

9 Best Free Online Word Cloud Generators

웹이나 인쇄물, 배경이미지 디자인에 유용하게 사용할 수 있는 무료 온라인 워드 클라우드 도구입니다.

Create interactive infographics

Infogram 베타 오픈. IT 전문가가 아니더라도 쉽고 빠른 인터랙티브 인포그래픽 생성과 소셜 공유가 가능합니다.

How to Create Windows-8 Animation

CSS3와 jQuery를 사용하여 만든 Windows 8 스타일의 UI를 사용해 보세요.

지금 바로 실천할 수 있는 더욱 나은 웹사이트를 만들기 위한 16가지 팁

Modern Website Layout Designs For Inspiration – 22 Examples

22가지 웹사이트 레이아웃 유형에서 규칙성안의 새로움을 살펴 보세요.

25 iPhone and iPad Apps for Freelance Designers

프리랜서 디자이너에게 유용한 25개의 iPhone, iPad 앱

How To Build a Fullscreen Background Video Player

해외 락스타들의 감각이 돋보이는 40개의 웹사이트를 만나보세요.

FRESH AND CREATIVE WEB DESIGN TECHNIQUES

새로운 웹디자인 기술에 대해 공간, 색상, 크기, 영상으로 구분하여 알려드립니다.

22 New Examples Of Huge Typography In Web Design

방문자의 관심을 끌 수 있는 거대한 타이포그래피를 이용한 웹디자인 22가지의 사례.