소개
경력의 어느 시점에서 거의 모든 디자이너가 배너 광고 세트를 디자인해야합니다. 나가 기치 광고와 예술의 수천을 수넌에 걸쳐 좀더 지시했기 때문에 이 디자인 이하 장르를 시험하는것은 좋을 것이 것 을 나가 생각한 그들의 첫번째 이제까지 기치 광고를 했었던 것과 나에게 말한 누구에의해 고무시켜.
이 게시물에서는 광고가 게재되는 페이지 유형 또는 디자이너가 변경할 수없는 클릭률 등의 문제에 관여하지 않습니다. 나는 독점적으로 그들을 더 매력적으로 보이게하기 위해 배너를 디자인하는 공예를 볼 것입니다(그리고 잘하면 더 클릭 할 수 있음).
배너 광고는
배너 광고 풍경
세 가지 가장 일반적인 온라인 배너 광고는 모양이 웹 페이지(리더 보드)의 너비에 걸쳐 또는 개별 열(마천루 및 고층 빌딩)내에 맞게 웹 전체에 나타납니다. 리더는 멀티 태스킹 또는 마천루 중 하나에 배치하지만,세 가지가 함께 나타나지 않습니다.
배너 광고는 일반적으로 기존 캠페인의 일부이므로 클라이언트(예:로고,이미지,복사 방향)가 재료를 제공 할 수 있습니다. 열쇠는 2 초안에 웹사이트 사용자에게 재미있는 방법안에 그 성분을 또는 그래서 그들이 광고를 주변에 검사하면(더 적은 조차)광고를 검사한 쓰고 있다 결합하고 있다. 그것은 매력적인 이미지/메시지와 함께 자신의 관심을 사로 잡아 당신이 그들을 다음에하고 싶은 것이 분명하게하는 것이 중요합니다. 너가 너의 눈을 가늘게 뜨고 광고안에 명백한 초점 그때 일하게 있을 법하지 않으면.
나는 배너가 웹 사용자가 클릭하는 것을 명확하게 푯말해야한다고 강하게 느낀다. 이 방법은 사용자가 그들을 거기 보낸 광고 처럼 보이는 페이지에 도착 합니다. 그렇지 않은 경우 그들은 자연스럽 게 실망 될 것 이다 또는 그들이 기대 했다 처럼 아무것도 보이지 않는 경우 연기.
결과적으로 나는 보통 배너 광고를 디자인 할 때 목적지 페이지를 먼저보고 거기에서 거꾸로 작업합니다. 다음 그것은 광고의 다양 한 재료(예:로고 첫 번째 하지만 작은,제목 다음 하지만 지배적인 등)의 오른쪽 계층 구조의 경우.). 그 후 복사본으로 연결 하 고 원하는 작업/응답 밖으로 주문 하는 적당 한 클릭 유도 문안을 추가 합니다. 메시징의 계층 구조가 정렬되면 세 가지 배너 광고 크기에 개별적으로 적용할 수 있습니다.
원소들은 사각형 모양으로 인해 대부분의 원소들에서 서로 경쟁한다.
(300×250)
일반적으로 페이지의 더 좁은 오른손 열에 배치되며,그 결과 형식이 대략 정사각형이고 크기가 작아 접힘 위에 나타납니다. 사각형 형식은 인간의 눈이 약간 더 수평(가로 형식)또는 더 깊은(세로 형식)이미지를 좋아하기 때문에 구성 문제를 나타냅니다.
나는 로고,이미지,헤드 라인 및 인터넷 광고의 혼합은 종종 광고의 초점을 형성하기 위해 네 가지 중 하나에 대한 많은 공간을 떠나지 않는 느낌. 이 모든 요소는 웹 사용자의 관심을 끌기 위해 서로 싸우고있는 곳 위에 쉽게 볼 수 있습니다. 두 경우 모두 배경은 단순히 요소를 배치 할 태블릿으로 사용됩니다.
이와 대조적으로,위의 과학수사대는 배경 이미지를 사용하여 그림자에서 나오는 요소들을 하나로 모았다. 원 총,노란색 증거 카드와 발에 손도 음색을 설정하고 사본을 읽을 수없는 경우 눈에 대한 다른 시각 정보를 제공하기 위해 그림자에서 등장.
헤드 라인은 리더의 핵심 초점 요소입니다
리더(728×90)
리더 보드의 긴 가로 모양은 위의 예에서와 같이 요소를 일련의 동일한 청크로 사용하는 디자인으로 이어질 수 있습니다. 그러나 표제가 다른 2 개의 기치 광고 단위안에 매우 더 크면 순위표에는 충격이 더 있는 고가 나는 발견했다. 이 명확 하 게 위의 엑스 팩터 광고에서 시연 어디 광고를 신속 하 게 스캔 하는 경우에 키 테이크 아웃은”당신은 그것을 있어?”
리더는 일반적으로 페이지의 맨 위에 배치되기 때문에 헤드 라인에 중점을 두어 신문과 잡지를 읽는 잔여 메모리 인 웹 페이지를 처리하는 방법에 대한 기존의 심리에 적합합니다.
디스플레이 해상도의 크기가 증가함에 따라 너무 너무 이전 728 을 만드는 웹 페이지 폭은 점점 중복된다(원래 1024 768 해상도를 위해 설계). 결과적으로 이 CBS 인터랙티브가 이동을 바꾸는 모든 728x90s 에 그것의 네트워크의 사이트 970x66s(이라고 불리더). 이 새로운 광고는 사이트의 사용자에 대한 덜 방해하고 모든 지금 970 픽셀 폭 다양한 페이지에 더 꼭 맞는. 수퍼리더의 추가된 길이 그리고 더 얕은 깊이는 캠페인의 표제에 의하여 몬 반복에 더군다나 빌려준다.
폴드는 사용자가 아래로 스크롤 할 때까지 고층 빌딩을 반으로 자릅니다
길고 가느 다란 마천루는 작은 헤드 라인과 큰 이미지를 가지고
고층 빌딩(160×600)
(-위의 그림 참조 일반적으로 약 600 픽셀 아래)마천루는 페이지의 접기에 의해 반으로 절단된다. 그 결과로 로고 표제 및 중앙 무역 협정과 같은 중요한 정보는 최고 반에서 이어야 한다. 마천루의 좁음은 또한 그들의 헤드 라인이 작은 경향이 있음을 의미합니다.
내 경험에서 나는 고층 빌딩이 이미지에 정보와 빛에 무거운 페이지에 배치하는 경향이 발견했다. 이 고층 빌딩에 이상적입니다.
고층 빌딩 위의 3 개의 160 개의 600 개의 예에서 왼쪽에서 오른쪽으로 접힘을 고려하여 설계되었습니다. 마력의 마천루에서 위의 모든 요소는 동일한 굴지를 부여 한 결과 눈에 대한 초점이 없다. 엑스 팩터 광고 캠페인의 다른 반복 보다 더 큰 발표자 하지만 작은 제목 다른 모든 요소에 의해 압도 되고있다-핵심 정보는 모든 배 아래 이며 광고 하단 무거운. 과학 수사 대 마천루에서 큰 이미지 두 번째 로고 상단에 약간 과밀 발생 했습니다 동안 함께 요소를 제공 합니다.
이 광고의 728 90 버전과 아래의 300 250(애니메이션 광고는 여기 참조)비교
애니메이션은 시간이 지남에 따라 요소를 나누는 데 도움이
애니메이션
배너 광고에 애니메이션을 추가하면 눈을 끌 것입니다. 배너의 플래시 버전은 또한 시간이 지남에 따라 이러한 요소를 분해하는 데 도움이됩니다. 전체 연필을 보여주는 위의 앨리 728 90 에서 눈이 다음에 무슨 일이 일어나는지보기 위해 기다리고있는 300 250 버전보다 덜 매력적입니다.
최근에 나는 애니메이션 광고에 더 많은 재생 버튼을보고 있어요–의심의 여지가 광고가 이미 페이지가로드를 시작으로 재생을 시작하기 때문이다. 정적 버전의 광고는 태블릿이나 스마트폰과 같이 플래시가 재생되지 않는 환경에서 기본 제이펙으로 로드되면서 다시 관련성이 높아졌습니다.
애니메이션만으로는 광고를 좋게 만드는 것만으로는 충분하지 않습니다. 이 응용 프로그램은 당신이 당신의 신용 점수,다이어트 및 모기지 광고를 잡아 모든 싼 관심처럼되는 방향으로 방향을 바꾸고,그렇지 않으면 광고에 매력적인 뭔가가 있어야합니다. 나는 원래 이 게시물에 대한 애니메이션 기프트에 위의 두 동맹 광고를 설정했지만 내 눈은 자동으로 내가(웹에서 아마 대부분의 사람들)그래서 서로의 위에 쌓인 애니메이션 광고를 무시하는 데 사용 오전 그들을 상영.
배너 광고 디자인 팁
내가 너무 많은 배너 광고를했기 때문에 여기에 내가 지난 몇 년 동안 포착 한 몇 가지 팁입니다. 그들이 명백하게 보인다면 사과,나는 그들이 끊임없이 적용되지 않는 것을보기 때문에 그들을 진술하고있다:
복사
•사용자가 읽기 어렵게하므로 대문자 사본을 모두 피하십시오
•헤드 라인과 본문 사본은 독자가 쉽게 스캔 할 수 있도록 크기가 달라야합니다
•헤드 라인 및/또는 본문 사본은 세 줄 이상이어야합니다
•메시지의 계층 구조를 보존하고 모든 텍스트를 일관되게 정렬해야합니다(왼쪽,오른쪽,가운데)
•흥미로운 타이포그래피를 이미지로 사용하는 것이 좋습니다.”지금 이동”또는”확인”과 같은 지점까지 짧아야합니다. 나”
•이상이어야합니다 배 160×600,300×600 단위(대략 중간의 단위)
•해야한 배우 각각의 시작 단어를 쉽게 스캔
버튼을
•대조 색상되어야를 보지 않고 화려한
•위치해야 한다 끝으로의 복사 및/또는 오른쪽
•일치해야에서 통하여 크기 세트 배너 광고가
•분명히 얻는 것보다 더 많은 클릭만 텍스트 링크에서는 배너 광고(도 후기 보기 더 우아한)
기타
•추가 1 픽셀의 회색 테두리에 광고 1433>*모든 디자인과 마찬가지로 광고의 프레임을 항상 스케치하여 시간을 절약합니다.
페이지 스킨은 페이지를 래핑하거나 프레이밍하여 배너 광고를 함께 제공합니다.
결론
웹 사용자는 배너 광고(및 일반적으로 광고)를 보는 데 너무 익숙하기 때문에 앞으로 많은 변화가 있습니다. 300’절반 페이지’광고와 같은 일반적인 되고있다 보았다. 향후 인터넷을 채울 가능성이 높은 새로운 유닛의 전체 목록은 여기를 클릭하여 주제에 대한 페이지를 확인하십시오.
보다 포괄적이고 조화로운 브랜딩 경험을 위해 페이지 스킨(또는’배경 화면’)은 배너 광고를 함께 감싸면서 인터넷을 통해 더 많이 사용되고 있습니다. 우리는 약 900 스킨을 할(자세한 내용을 읽으려면이 문서를 다운로드). 스킨이 너무 더 많은 해짐에 따라 사용자 정의 만든 리치 미디어 인수의 상승은 특히(이 여기에 내 게시물을 참조에 대한 자세한 내용을 보려면)반란군에서 요청되고있다도있다. 그러나 스킨과 리치 미디어 인수 모두에 대해 페이지의 표준 배너 광고 및 사용자의 경험과 함께 광고 경험이 여전히 필요합니다.
부록
배너 광고의 역사:http://en.wikipedia.org/wiki/Web_banner
인터랙티브 광고 국(국제)표준:
http://www.iab.net/guidelines/508676/508767/displayguidelines
배:http://en.wikipedia.org/wiki/Above_the_fold
특정 브랜드에 대한 배너 광고를 조회:http://www.moat.com
화면 디스플레이 해상도:http://en.wikipedia.org/wiki/Display_resolution
: http://tv.adobe.com/watch/cs5-design-premium-feature-tour/interaction-design-101-create-a-simple-banner-ad-with-flash-professional-cs5/
일부 크라우드 소싱 배너 광고 페이지:
http://jobs.designcrowd.com/bannerad-design-jobs
http://99designs.com/banner-ad-design/contests
http://www.crowdspring.com/banner-ads/
일부 저렴 한(과 밀)웹 배너 디자인 사이트:
http://www.justgothere.com/web_banners/web_banner_example/300x250_web_banner_example.htm
http://www.decentbanners.com/portfolio_300x250.html
http://www.banner4five.com/business_banners_300x250
