이 글은 며칠전 트위터를 통해 알게 된 글입니다. 한 학기 동안 많은 내용을 공부하느라 수고하신 서울디지털대학의 수강생 여러분들께 학기말 선물로 드리고 싶어 내용을 번역하게 되었습니다.
작성된 내용을 보면 제품 디자인보다는 웹 디자인에 포커싱된 것으로, 웹디자이너들이 웹사이트를 디자인하면서 고려해야 할 사항들을 애플 사이트를 예로 하여 정리한 것임을 알 수 있습니다. 물론 인터페이스라는 관점을 늘 고려해야 하는 제품 디자이너나 다른 분야의 디자이너들도 알아두면 좋은 내용이라 생각됩니다.
번역이 매끄럽지 못하거나, 다소 뜻이 왜곡되는 부분이 있을 수도 있습니다. 원문을 함께 남겼으니 참고하시고, 그래도 번역에 문제가 있다고 생각되시면 댓글에 의견을 남겨 주십시오.
원본 사이트 : http://designshack.co.uk/articles/inspiration/15-design-tips-to-learn-from-apple
작성된 내용을 보면 제품 디자인보다는 웹 디자인에 포커싱된 것으로, 웹디자이너들이 웹사이트를 디자인하면서 고려해야 할 사항들을 애플 사이트를 예로 하여 정리한 것임을 알 수 있습니다. 물론 인터페이스라는 관점을 늘 고려해야 하는 제품 디자이너나 다른 분야의 디자이너들도 알아두면 좋은 내용이라 생각됩니다.
번역이 매끄럽지 못하거나, 다소 뜻이 왜곡되는 부분이 있을 수도 있습니다. 원문을 함께 남겼으니 참고하시고, 그래도 번역에 문제가 있다고 생각되시면 댓글에 의견을 남겨 주십시오.
원본 사이트 : http://designshack.co.uk/articles/inspiration/15-design-tips-to-learn-from-apple
|
|
15 Design Tips to Learn From Apple
애플로부터 배우는 15가지의 디자인 팁(translated by 휘아빠 : http://brandesign.tistory.com )
There is no shortage of companies that follow popular design trends to appeal to a mass market. Much more rare is the breed of company that actually sets design trends. Today we’ll examine the techniques of a company that occupies the top of the design food chain: Apple.
대중 시장(매쓰 마켓)에 나타나는 트렌드를 따르지 않는 업체는 드물다. 더 드문 것은 디자인 트렌드를 실제로 창출하는 업체의 등장이다. 오늘 우리는 디자인 먹이 사슬의 꼭대기에 위치한 업체 '애플(Apple)'의 기술을 탐색해 볼 것이다.
Below you’ll find 15 practical ways to follow Apple’s example in creating beautiful interfaces.
아름다운 인터페이스를 창출하는 애플의 예를 따라가다 보면 당신은 아래와 같은 15가지의 실용적인 방법을 찾게 될 것이다.
#1: Keep it Simple :
단순함을 유지하라
Take a look at Apple’s homepage and don’t think about what you see, but what you don’t see. I’ll give you a hint, it’s all over this site (no not this very site, click the link silly). The answer of course is visual clutter. A homepage is supposed to tell users everything about your company, to communicate all your product categories in detail, to list endless features, and to showcase your logo as big as possible. Right? According to Apple: wrong.
애플의 홈페이지를 한번 둘러보라. 그리고 보이는 것을 생각하지 말고, 보이지 않는 것에 대해 생각해 보라. 힌트를 주겠다. 그 사이트는 링크된 이 사이트(당신이 지금 보고 있는 사이트가 아니다. 링크를 클릭해 보라.)보다 월등하다. 답은 물론 시각적 혼돈이다. 홈페이지는 사용자에게 당신의 회사에 대한 모든 것을 말하고, 당신회사의 모든 제품 카테고리에 대해 세세하게 말하고, 사양을 끝없이 늘어놓기 위해 만들어진 것이다. 맞는가? 애플에 의하면 : 그렇지 않다.
Apple’s homepage simply shows off their most recent work and provides you with a few easily understood categories to help you get to the information you want to see. Granted, odds are you aren’t designing for a remarkably ubiquitous company that needs no introduction. However, you can still use minimal but attractive design to increase usability.
애플의 홈페이지는 그들의 가장 최근의 제품을 명료하게 보여주고, 당신이 원하는 정보를 찾을 수 있도록 도와주는 이해하기 쉬운 몇몇의 카테고리를 제공한다. 엄밀히, 당신이 안내가 필요없는 뛰어난 유비쿼터스 업체를 위해 디자인하고 있지 않을 가능성은 있다. 어쨌거나, 당신은 여전히 미니멀하지만 사용성을 증가시키는 매력적인 디자인을 활용할 수 있다.
Imagine you’re driving up to an airport. As you drive along you are simultaneously hit with five or six signs containing maps with the locations for everything from terminals right down to handicap accessible restrooms. The argument the map designer would make is that he gave you all the information you needed to get anywhere you wanted to go. You would no doubt quip back that his fault was in giving it to you all at once as you were driving by at 20 mph. Now imagine you are at Sky Harbor, Phoenix Arizona’s remarkably easy-to-navigate airport. As you pull in you see a sign that says “Hello, welcome to Sky Harbor. There are three terminals”. Then as you drive along, you reach more signs, each with a brief description of what airlines fly into each terminal and where to go for arrivals or departures. The feeling you get as you drive into Sky Harbor is “Wow, this is easy!”
공항을 향해 운전을 하고 있다 상상해 보자. 운전을 하는 동안에 공항 터미널로부터 장애인용 화장실까지 위치가 표시된 지도가 있는 표지판을 한꺼번에 대여섯개를 마주하게 된다. 그 지도의 디자이너들이 주장하는 바는 그 지도들이 당신이 원하는 곳으로 갈 수 있는 모든 정보를 제공할 것이라는 것이다. 그들이 그 표지판들을 시속 20마일로 지나는 동안 한번에 봐야한다는 오류를 범하고 있다는 것에 대해 당신은 의심할 여지가 없을 것이다. 이제는 페닉스 아리조나의 무지하게 찾아가기 쉬운(remarkably easy-to-navigate) 스카이 하버 공항에 있다고 상상해 보자. 당신이 공항이 다다르면 "안녕하세요? 스카이 하버에 오신 것을 환영합니다. 이 곳엔 3개의 터미널이 있습니다."라고 쓰여진 사인을 보게 된다. 그리고 계속 운전해 가다보면, 더 많은 사인을 만나게 되는데, 각각의 사인에는 어떤 항공편이 어떤 터미널에서 도착하고 떠나는지 간략하게 설명되어 있다. 스카이 하버로 운전하면서 당신은 "와우, 쉬운데!"라는 느낌을 받을 것이다.
Apple takes the same approach to interface design. Rather than hitting you with everything they’ve got in the name of usability, they use smaller bits of information to lead you to the place that holds the content you’re really after. Look at the site you’re working on and consider how you can break the complex information up into smaller pieces that the user won’t find overwhelming.
애플은 인터페이스 디자인에 이와 같은 접근방식을 취하고 있다. 사용성이라는 명분 하에 모든 것들을 당신이 마주하도록 하기 보다는, 보다 작은 정보의 조각들로 당신이 찾고자 하는 컨텐츠가 있는 곳으로 당신을 이끈다. 당신이 작업하고 있는 사이트를 들여다 보라. 그리고 어떻게 하면 복잡한 정보를 사용자들을 압도하지 않을 작은 조각들로 쪼갤 수 있을지 숙고하라.
#2: Use Amazing Product Shots :
멋진 제품 사진을 활용하라
One of Apple’s principle reasons for cutting back on superfluous graphics on their site is to really showcase what’s important: their products. Just look at the shots they use; it’s nearly impossible to look at a page on the Apple site and not have your eyes focus on the products for seconds on end.
애플 사이트에서 불필요한 그래픽의 제거와 관련된 애플의 원칙적 이유는 진짜 중요한 것을 보여주는 '쇼케이스(showcase, 진열장)'라는 점이다. 그들이 사용한 사진들을 보라 ; 제품에 눈을 몇초간 집중시키지 않고 애플 사이트를 끝까지 본다는 것은 거의 불가능하다.
There are several things that make these products look so incredible. The first is that they are obviously pristine. Chalk this one up to digital imaging experts. I haven’t seen exactly how they do it, but the combination is likely a mixture of photography, 3D modeling (take your pick: Modo, Lightwave, Maya, etc.), and of course, Photoshop.
제품들을 멋지게 보이도록 만드는 데에는 여러가지 요인들이 있다. 첫번째는 이미지들이 명백히 원본이라는 점이다. 이점을 디지털 이미징 전문가들에게 물어보라. 나는 그들이 어떻게 하는지 정확히는 모르나, 컴비네이션(제품들이 여러개 있는 이미지)은 사진, 3D 모델링(골라봐라 : Modo, Lightwave, Maya, etc.)과 포토샵의 조합처럼 느껴진다.
The next thing they do is to make them take up a huge portion of the page. If you spend hours making a beautiful package shot and then size it down to a thumbnail, it’s simply not as overwhelmingly impressive. Notice that Apple also frequently includes multiple products arranged in an attractive way as in the picture above.
다음은 그 이미지들이 페이지의 많은 부분을 차지하도록 한다는 것이다. 만약 당신이 패키지 이미지를 아름답게 만드는데 많은 시간을 소요하고, 썸브네일 정도로 사이즈를 작게 한다면, 그것은 명백하게 압도적인 인상을 남기지 못한다. 위 사진에서 보는 것처럼 애플도 종종 여러개의 제품을 매혹적인 방법으로 나열한 페이지를 포함하고 있다는 점에 주목하라.
The lesson here is to not just take a photo of your product and call it a day. Spend the time to make it look fantastic. Whether it’s a can of refried beans or a Lexus, do your best to make a great hero shot.
여기서 배울 것은 단지 제품의 사진을 삽입하고 끝내는 것이 아니다. 그것들이 매력적으로 보이도록 하는데 시간을 써라. 그것이 으깬콩요리 통조림이거나 렉서스이거나 간에, 멋진 한 장면이 만들어지도록 최선을 다하라.
Don’t believe that you can make your non-tech product look as good as Apple stuff? Check out We Shoot Cans as proof that a talented artist can make any product look good.
비기술적인 제품들을 애플만큼 멋져보이도록 만들 수 있다는 것을 믿지 못하겠다고? 그렇다면 유능한 아티스트라면 어떤 제품이라도 멋지게 보이도록 만들 수 있다는 증거로서 We Shoot Cans을 확인해 보라.
#3: Contrast is Key :
대비가 핵심이다
Another thing that makes those Apple product shots look so darn great is the simple environment they drop them into. The human brain loves contrast. It’s the reason we stare at mountain ranges and the horizon over the ocean. It’s also the reason we say “oooooohhhh” when we see a black shiny iPhone on a flat white background. You should seek to apply selective contrast in every single design you create. Look for opportunities to use contrast with color, size, font thickness and anything else you have to work with.
애플 제품 이미지가 멋져 보이게 하는 또다른 요인은 그들이 놓이는 단순한 환경이다. 인간의 뇌는 대비를 좋아한다. 우리가 산능선을 바라보거나 수평선을 바라보는 것도 그 때문이다. 하얀 바탕 위에 놓인 검은색으로 빛나는 아이폰을 볼 때 "오오오오오~"하게 되는 것 또한 같은 이유이다. 당신은 당신이 창조하는 디자인 하나 하나마다 적용할 대비 요소를 찾아야만 한다. 당신이 작업해야 하는 것들에서 컬러, 크기, 글자의 두께나 기타 등등 대비요소로 사용할 수 있는 기회들을 찾아라.
Apple doesn’t just apply contrast to their product shots. Take a look at the pic above and think about what jumps out at you. It’s probably the big blue download button. Cruise around Apple’s site and you’ll see that nearly every time they want you to do something (buy, download, etc), they use a bright blue button to grab your attention.
애플은 제품 이미지에만 대비를 적용시키는 것은 아니다. 위 그림을 보고 무엇이 튀는지 생각해 보라. 그것은 아마도 크고 파란 다운로드 버튼일 것이다. 애플 사이트를 둘러보면 애플 사이트가 매번 당신이 무언가 하기(구매, 다운로드, 기타 등등)를 원하고 있다는 것과, 그들이 당신의 주의를 끄는 빛나고 파란 버튼을 사용하고 있다는 것을 알게 될 것이다.
#4: Sweat the Small Stuff :
작은 것에 공들여라
Apple is all about attention to detail. Every little piece of their site is finessed into perfection. Never fall into the trap of saying “no one will notice” or “good enough.” It is often the margin of time spent on the tiniest details that separate the good designers from the great ones.
애플은 디테일의 집중에 관한 모든 것이다. 애플 웹사이트의 모든 작은 조각들은 완벽할 정도로 교묘하다. "아무도 못 알아본다"거나 " 충분히 괜찮다"는 함정에 절대 빠지지 말라. 그것은 종종 좋은 디자이너와 위대한 디자이너를 가르는 작은 디테일에 소요되는 시간의 한계가 되기도 한다.
Don’t buy into the small stuff argument? Check out the social media logos on the Microsoft Office homepage and tell me that they don’t make you cringe.
작은 것에 대한 논쟁에 신경쓰지 않겠다고? 마이크로 오피스 홈페이지의 소셜 미디어 로고를 확인한 후 그것들이 신경 쓰이지 않는다고 내게 말해보라.
I personally possess vector files of each of these logos. Now if I can do it, don’t you think the Microsoft designers could’ve taken the time to track down better versions of these logos to avoid the sloppy Photoshop Magic Wand selection they’ve got going on? I challenge you to find something this poorly done anywhere on Apple’s site, much less on the landing page of one of their most popular pieces of software.
나는 개인적으로 이들 로고 각각의 벡터 화일을 가지고 있다. 만약 지금 당장 내가 할 수도 있는데, 마이크로소프트의 디자이너들이 포토샵의 마술봉(Magic Wand)으로 선택한 너덜너덜한 모습을 피해, 이들 로고의 더 나은 버전을 만들기 위해 선을 딸만한 시간이 없었다고 생각할 수 있겠는가? 그들의 가장 대중적인 소프트웨어의 랜딩 페이지는 말할 것도 없고, 나는 이처럼 엉성하게 된 것을 당신이 애플 사이트에서 찾을 수 있을지 내기할 수 있다.(찾을 수 없을 것이라 장담한다는 의미)
#5: Avoid Flash :
플래시를 피하라
I’ve never been one to join in with the Flash hater crowd, but the fact is, that crowd is growing. Leading the masses is none other than Apple CEO and world-renowned technology clairvoyant Steve Jobs. Check out this excerpt from a recent Wired article:
나는 한번도 플래시 혐오 군중에 끼어본 적이 없지만, 사실 그 군중은 늘고 있다. 그 군중을 이끌고 있는 사람은 바로 애플의 CEO이자 세계적 명성의 기술분야 천리안인 스티브 잡스다. 최근 와이어드에 실린 기사의 일부를 봐라 :
“About Adobe: They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5.” (Source)
"어도비에 관해 : 그들은 게으르다고 잡스는 말한다. 그들은 흥미로은 일들을 할 수 있는 모든 잠재력을 가지고 있으나, 그런 것들을 단지 거부할 뿐이다. 그들은 카본(맨킨토시 OS에 활용되는 애플의 API)처럼, 애플이 취하는 접근방식들에 관해서는 아무것도 하지 않는다. 오류가 많기 때문에 애플은 플래시를 지원하지 않는다고 그는 말한다.(원본)
( 역자 의견 : 개인적으로 이 부분에 대해서는 수긍할 수 없는 부분들이 있습니다. 플래시가 대다수의 사이트에 이미 적용되어 있고, 이를 이용하고자 하는 방문자나 사용자들이 엄연히 존재하는 것이 현실인 상황에서, 자신들의 철학이나 시스템과 맞지 않는다고 해서 그 소프트웨어를 쓸모없는 것인양, 더 나아가 위해한 것인양 매도하는 자세에는 분명 문제가 있다고 봅니다. 무조건 거부할 것이 아니라 사용자의 불편을 없애고 안전하게 사용할 수 있는 방법을 마련하던지, 아니면 사용자가 부작용이나 위험을 감수하고 사용할 것인지, 아니면 거부할 것인지를 선택할 수 있는 장치라도 마련해줘야 하는 것이 아닌가 싶습니다.)
Those are strong words from a man revered for leadership in the tech world. To be honest, much of what he says rings true. Online Flash content certainly isn’t the most reliable technology out there and is highly dependent upon extra software and up-to-date plugins that the user may or may not have. Further, HTML5 and CSS3 are glimpse into a future where you can accomplish a richly interactive multimedia experience with with simple, standards compliant code.
이것이 기술의 세계에서 그 리더십에 대해 존경받는 이가 주장하는 바다. 솔직히, 그가 말하는 많은 부분이 사실을 엮고 있다. 온라인 플래시 컨텐츠는 많은 부분이 불안정한 기술이고, 외부의 소프트웨어와 사용자가 가지고 있지 않을 가능성이 있는 업데이트 플러인에 대한 의존도가 높다. 더욱이, HTML5 와 CSS3가 단순하고, 표준화된 쉬운 코드로 장차 당신에게 풍부한 인터랙티브 멀티미디어 경험을 제공할 것으로 보인다.
As a developer, if you join Apple in their virtual Flash boycott, you probably won’t regret it. You don’t even have to take an active stance against Flash so much as simply avoid using wherever possible. You’re pretty much guaranteed to have a lot less headaches from users who can’t view your content
개발자로서 당신이 만약 애플의 실질적인 플래시 보이코트에 가담한다면, 당신은 아마도 후회하지 않을 것이다. 당신은 플래시에 대항하여 가능한 한 플래시를 사용하지 않는 것 이상으로 활동할 필요도 없다. 당신의 컨텐츠를 볼 수 없는 사용자들로 인해 생기는 골칫거리가 확실히 줄어들 것이라 장담한다.
#6: Make It Friendly :
친근하게 만들라
For years, Apple was branded as a cult that was anything but friendly. They’ve really sought to purge this idea in recent years by restructuring their image to be more approachable. The most noticeable place you see this is in the “Get a Mac” ads. The Mac is portrayed as an every day kind of guy while the PC is the “out there” business man who’s always up to no good. Subliminally, these commercials are saying that Apple is really an open community and anyone from teenagers to grandmas will fit right in.
수년간 애플은 뭔가 불친절한 종교처럼 낙인 찍혀 있었다. 최근 애플은 좀 더 접근하기 쉬운 이미지를 재구축하기 위해 이러한 이미지를 제거하는 방법을 찾고 있다. 가장 주목할만한 것은 “Get a Mac” 광고 속에 있다. 그 광고 속에서 "PC"는 그냥 거기에 존재하는 아무것도 제대로 못하는 사업가로 그려진 반면, "맥(Mac)"은 늘 친절한 사람으로 묘사되어 있다. 무의식적으로 이 광고는 애플이 진정으로 열린 공동체라는 점과 10대에서 부터 할머니에 이르기까지 그 누구라도 그 공동체에 적합하다는 것을 말하고 있다.
언급된 광고 링크했습니다. 재미있네요^^
Another thing they’ve done is improved their formerly abysmal tech support record. Now anyone in a major city can just make an appointment at the Apple store for a free one-on-one consultation to address any problems and/or questions customers might have.
애플이 하고 있는 또다른 일은 그들이 이전에는 낙후되어 있던 기술지원 기록을 개선하는 것이다. 지금은 도시에 사는 고객이라면 그 누구라도 어떠한 문제나 의문점을 가졌을 때에는 애플 스토어에 무료 1대1 컨설팅 예약을 할 수 있다.
All of these techniques are reinforced by graphics of friendly, smiling faces. Currently the Apple store near me has about a dozen cardboard cutouts of Apple employees in the window as if to say “come on in, we’re happy to help.” You can also spot these smiling employees in a few places on the Apple website as shown in the pic above.
이러한 모든 기술은 친절하게 미소 짓는 얼굴의 그래픽으로 보강되었다. 지금 내 옆의 애플 스토어에는 12명의 애플 직원들이 "어서 오세요, 기꺼이 도와 드릴께요"라고 금방이라도 말할 것 처럼 창에 고개를 내밀고 있다. 위의 그림처럼, 당신은 애플 웹사이트의 몇몇 장소에서 웃고 있는 이들 직원들을 발견할 수도 있다.
What Apple is doing is forming a balance between amazing but non-personable technology-based design and approachable smiling faces. No matter what you’re selling, consider whether it’s appropriate to make it look more friendly and think about what you can do to get it there. Even a simple “Hello” in a headline can go a long way.
애플이 하고 있는 것은 놀랍지만 매력적이지는 못한 기술에 기초한 디자인과 접근 가능한 미소짓는 얼굴 간의 균형을 형성하는 것이다. 당신이 무엇을 팔건, 더 친근하게 만드는 것이 타당한지를 심사숙고 하고, 친근하게 만들기 위해 당신이 할 수 있는 것에 대해 고려하라. 헤드라인의 단순한 "안녕(Hello)" 조차 방편이 될 수 있다.
#7: Use a Strong Grid :
명확한 그리드를 사용하라
The picture above speaks for itself. Every page on Apple’s site adheres to a strict grid structure; whether simple or complicated, it’s there. The purpose? Check out how much information they’re throwing at you on the page above. There is simply a ton going on, but it somehow seems attractive instead of overwhelming.
위 그림은 뭔가를 보여준다. 애플 사이트의 모든 페이지는 정확한 그리드 구조에 맞춰있다 ; 간단하거나 복잡하거나 간에, 격자 구조로 되어 있다. 목적이 뭐냐고? 위 페이지에서 애플이 얼마나 많은 양의 정보를 쏟아놓았는지 확인해 보라. 상당한 양임에도 불구하고, 보는 이를 경악케 하는 대신 어떤 면에서는 매혹적이기까지 하다.
Breaking sporadic information up into manageable cells drastically reduces visual clutter and confusion. Notice that each cell also contains a visual reference to accompany the text description. These visual references all look very similar and fit into the overall Apple theme. Even if you’re using stock images, try to maintain a similar theme so there’s no visual disparity in the pictures scattered all over the page.
돌발적으로 발생하는 정보들을 다루기 쉬운 셀들로 철저히 나눠줌으로써 시각적인 어지러움과 혼란을 감소시킨다. 각각의 셀은 설명글을 제공하는 시각적인 참고문을 포함하고 있다는 점에도 주목하라. 이 시각적인 참고문들은 모두 매우 비슷해 보이고 전반적인 애플의 테마와 딱 맞아떨어진다. 당신이 판매하는 이미지를 사용한다 할지라도 페이지 전반에 걸쳐 이미지들이 시각적으로 달라보이지 않고 유사한 테마를 유지할 수 있도록 노력하라.
#8: Create Instructional Aids :
사용법 안내를 제공하라
To reinforce the message that the top of the mouse is actually a multi-touch surface, Apple created the above illustration. Even without the headline, nearly anyone would be able to comprehend what’s happening in the picture and consequently understand how to use a brand new piece of technology that they’re completely unfamiliar with.
마우스가 멀티 터치라는 메시지를 강조하기 위해 애플은 위와 같은 일러스트를 만들었다. 헤드라인 조차 필요없을 정도로, 이 그림을 통해 거의 대부분의 사람들은 이 이미지를 통해 무슨일이 벌어지는지 숙지하게 되고, 결과적으로 완전히 낯선 기술이 적용된 새로운 제품을 어떻게 사용하는지 이해하게 된다.
Apple goes even further than illustrations though. Nearly every piece of hardware and software on their site has an accompanying video that shows you how it works. This goes a long way to reduce tech support questions. I frequently refer my friends (who have all converted to Mac because of me and therefore see me as free tech support) to these videos because they provide a much richer and easier to understand experience than a phone conversation ever could. Check out Apple’s library of instructional videos to see how great they are for yourself.
애플은 일러스트 이미지보다 한층 더 나아간다. 그들의 웹사이트에 있는 대부분의 하드웨어와 소프트웨어는 그것들이 어떻게 동작하는지 보여주는 동영상을 포함하고 있다. 이것들은 기술적 지원과 관련된 질문을 대폭적으로 줄여준다. 나는 (나 때문에 모든 것을 맥으로 바꿨기 때문에 나를 마치 무료 기술 지원자처럼 여기는) 친구들에게 종종 이 비디오들을 조회하도록 한다. 이 비디오들은 그 어떤 유선 통화를 통한 지원보다도 풍부하고 이해하기 쉬운 경험을 제공한다. 애플 사용법 안내 비디오 라이브러리에 가서 확인해 보라.
#9: Be Consistent :
일관성을 유지하라
The pic above is a screenshot of the iTunes store. Look familiar? If you’re thinking it looks a lot like Apple.com, you’re right. Now have a look around Mac OS X, specifically in the Finder. Again we see strong grid-based design, lots of white, metallic textures, and blue as an attention grabber (in selections). And finally, have a look at the full Apple line of hardware to see these textures and design elements brought into the real world.
위 그림은 이아튠즈 스토어를 캡춰한 것이다. 낯이 익다고? 만약 당신이 애플 홈페이지와 닮았다고 생각했다면 그 생각이 맞다. 이제 파인더(Finder)를 통해 Mac OS X를 둘러보자. 우리는 다시 한번 흰색이 많고, 금속성의 재질과 그리드에 기초한 디자인을 보게 된다. 마지막으로, 이러한 재질감과 디자인을 이 세상으로 데리고 나온 애플의 모든 하드웨어를 살펴 봐라.
Apple’s general look or “brand essence” is applied across every single thing they design. It’s quite stunning when you realize how much their software actually looks like their hardware. How much more integrated can you get? If you’re ever tasked with the job of developing a brand, look at every aspect of the company from televised ads and websites on down to the products themselves. Consider how you can integrate all of these disparate elements to look like individual pieces of a cohesive whole.
애플의 보편적인 스타일, 혹은 "브랜드 에센스"는 그들이 디자인한 각각의 제품 하나하나를 교차하며 파생된다. 애플의 소프프웨어가 그들의 하드웨어와 얼마나 닮았는지를 깨닫게 되는 순간은 정말 경이롭다. 얼마나 더 통합된 것을 찾을 수 있겠는가? 만약 당신이 브랜드를 구축하는 일을 하게 된다면, 회사의 TV광고와 웹사이트에서부터 제품 자체에 이르기까지 모든 외적 요소들을 관찰하라. 어떻게 하면 이러한 각각의 요소들을 결집된 전체의 낱개 조각들처럼 통합할 수 있을까를 심사숙고 하라.
#10: Not Just a Big Store :
단순히 커다랗기만한 쇼핑몰이 되지 않도록 하라
Apple is a great case study in a successful e-commerce site. Notice that the entire site is bent on influencing you to buy, and educating you about, their products. However, the site doesn’t feel like one big store.
애플은 전자상거래 사이트의 위대한 성공사례다. 전체 사이트가 당신의 구매에 영향을 주기 위해 집중하고 있다는 점과 그들의 제품과 관련하여 당신을 학습시키고 있다는 점에 주목하라. 어쨌거나 애플 사이트는 단순히 커다란 가게처럼 느껴지지는 않는다.
What I mean by this is illustrated in the screenshots above. The top shot is the dedicated Time Capsule page. Apple loves making beautiful product pages with clever headlines informing you of how great their products are. Notice that this technically isn’t the “store.” If you click the buy button, you are then taken to the page in the second screen: the actual online store. Here Apple has completely stripped down the visual appeal and focused on usability. They give you the information you need without distractions and make it easy to purchase an item in a few clicks.
내가 말하고자 하는 바는 위의 캡춰 이미지를 통해 드러난다. 상단의 이미지는 '타임 캡슐(Time Capsule)이란 제품의 페이지를 위한(제품 페이지로 유도하기 위한) 것이다. 애플은 그들의 제품이 얼마나 위대한지에 대한 정보를 알려주는 영리한 헤드라인이 삽입된 아름다운 제품페이지를 만들기 좋아한다. 이러한 것은 기술적으로 "가게"가 아니라는 점에 주목하라. 구매 버튼을 클릭하면, 당신은 두번째 캡춰 이미지와 같은 '실질적인 온라인 상점' 페이지로 이동하게 된다. 여기서 애플은 불필요한 시각적 요소들을 제거하고 사용성에만 초점을 맞춘다. 그들은 산만하지 않게 당신이 필요한 정보를 제공하고 몇번의 클릭만으로 상품을 구매할 수 있도록 쉽게 만들었다.
If you’re making a online store, your first idea will probably be to do just that: build a store. If you have the time, budget, freedom, etc., consider building a website to showcase the items in the store in a way that simply wouldn’t be efficient in the store itself. Create beautiful dedicated pages that really boost your product and include a “buy now” link that takes customers to the visually boring but highly practical store section of the site.
만약 당신이 온라인 쇼핑몰을 만들고 있다면, 당신의 첫번째 아이디어는 아마도 이렇게 하는 것이리라 : 쇼핑몰을 만든다. 만일 당신이 시간, 예산, 자유 기타 등등이 있다면, 웹사이트를 단순히 쇼핑몰 자체의 기능에만 효율적인 것이 아닌, 가게 안의 아이템 전시실로 구축하는 것을 고려하라. 제품을 부각시키는 아름다운 유도 페이지를 창조하라. 그리고 고객을 시각적으로는 지루하지만 매우 실용적인 쇼핑몰 사이트로 인도하는 "지금 구매" 링크를 넣어라.
#11: Be Confident :
당당하라
Let’s face it, Apple products are pretty amazing. Click around Apple’s site for a few minutes and you’ll find they aren’t exactly humble about this. Their headlines are filled with adjectives like beautiful, powerful, fun, revolutionary, easy-to-use and advanced. Their product descriptions inform you that the item is the best thing available in its category. If you overanalyze it, this may sound a bit haughty. However, as a casual visitor, you would probably just be impressed.
들여다 보면 애플의 제품들은 정말 놀랍다. 애플 사이트를 몇분간 돌아다니다 보면, 그들이 이러한 사실에 대해 전혀 겸손해 하지 않다는 것을 알게 될 것이다. 그들의 헤드라인은 아름다운, 파워풀한, 즐거운, 혁명적인, 사용하기 쉬운, 진보된 같은 형용사들로 채워져 있다. 그들의 제품 소개글은 그 카테고리에서 그 제품이 현존하는 최고의 아이템이라는 정보를 당신에게 제공한다. 확대해석 한다면, 건방지게 보일 수도 있을 것이다. 어쨌거나, 당신이 우연히 방문한 사람이라면 깊은 인상을 받게 될 것이다.
Whether your website is advertising a product, service, or simply an idea, don’t sell yourself short. Never use the word “good” when you can say “great,” never say “attractive” when you can say “beautiful.” If you are confident in your product, really strive to communicate it to your visitors. You’ll find that it will rub off on them and that they will generally have a much more positive first impression if everything on your site is focused on convincing them how great you are.
당신의 웹사이트가 광고하는 것이 제품이건, 서비스이건, 단순히 아이디어건 간에, 불충분한 상태로 팔지 말라. "훌륭하다(great)"라고 말할 수 있다면 "좋다(good)"라는 표현은 절대 쓰지 말라. "아름다운(beautiful)"이라 말할 수 있다면 "매력적인(attractive)"이라는 표현은 절대 쓰지 말라. 당신의 제품에 자신 있다면 그것을 방문자에게 알릴 수 있도록 최선을 다하라. 당신 웹사이트의 모든 것들이 당신의 제품들이 얼마나 위대한 것인가를 확신시키는 것에 포커싱되어 있다면, 이러한 노력이 제품들을 빛나게 할 것이며, 제품들은 훨씬 더 긍정적인 첫인상을 갖게 된다는 것을 당신은 깨닫게 될 것이다.
Like anything, there is of course a breaking point. Have someone not involved with the site read over your copy to make sure you aren’t pouring on the self-praise so thick that it becomes an annoyance.
무엇이든 그러하듯이, 물론 한계는 있다. 성가신 것이 될 정도로 자화자찬을 심하게 하면 퍼붓고 있지 않다는 것을 확실히 하기 위해, 사이트와 관련 없는 사람을 통해 사이트의 내용을 검토하도록 해야 할 것이다.
#12: Put Legal Copy in it Place :
법률 사항을 적절한 위치에 삽입하라
This one is small but important. If you’re working for a company big enough to have a legal department, you know that the people in legal departments work really hard to prove that they aren’t worthless. Usually what this means is that you as a designer create something, send it to the legal department and get back a 500 word document full of extra content you are required by law to include. Inevitably, cursing ensues.
이부분은 사소하지만 중요하다. 만약 당신이 법률 담당부서를 가지고 있을 만큼 충분히 큰 규모의 업체에서 일하고 있다면 법률 부서 사람들이 그들 스스로 가치없지 않다는 것을 증명하기 위해 정말 열심히 일한다는 것을 알고 있을 것이다. 보편적으로 이것이 의미하는 것은 디자이너로서 당신이 뭔가를 만들어 법률 부서에 보내면, 법적으로 포함되어야 할 500 단어 정도의 추가 컨텐츠를 되받게 된다. 불가피하게도 이것은 저주의 연속이다.
What you do with this content is important. Consider whether or not it’s information that the user actually wants to know or if it’s just an evil necessity that no one will ever read. If it’s the latter, take a page out of Apple’s book (a bite out of the Apple so to speak) and throw it at the very bottom of the page in a small but readable font that doesn’t contrast with the background too much. Your primary goal as an employee should be to make this content accessible, findable and readable. However, your goal as a designer is to make sure it doesn’t screw up your design by filling it with unimportant clutter.
이 컨텐츠를 가지고 당신이 하는 일은 중요한 것이다. 그것이 사용자가 정말 알고 싶어하는 정보인지, 아니면 그 누구도 읽지 않을 단지 필요악일 뿐인 정보인지를 고려하라. 만약 후자라면, 애플의 책에서 한 페이지를 떼어낸 다음(말하자면 애플을 한입 베어 내뱉 듯), 배경과 너무 대비되지 않는, 읽은 수 있는 가장 작은 글자로 페이지의 가장 하단에 던져 놓으라. 고용된 사람으로서 당신의 기본적인 목표는 그 내용들이 접근가능하고, 찾을 수 있고, 읽을 수 있도록 하는 것이다. 어쨌거나, 디자이너로서 당신의 목표는 별로 중요하지도 않은 그 컨텐츠의 조각들이 당신의 디자인을 망가뜨리지 못하도록 확실하게 해 놓는 것이다.
#13: Comprehensive Footer Site Navigation :
사이트의 전체적인 네비게이션이 있는 푸터
Check out the footer in the screenshot above. Apple has transformed the bottom of each page into an extremely helpful navigation tool. This is a great way to reduce the difficulty of navigating a large site. Rather than filling their primary navigation with a link to every section on the site, they’ve reserved it for general categories. Within a category, if you scroll down to the bottom of the page you find a much more comprehensive site map in the footer.
위 캡춰 이미지의 푸터를 잘 보라. 애플은 각 페이지의 하단을 매우 도움이 되는 네비게이션 도구로 변형시켰다. 이것은 방대한 사이트를 탐색하는 어려움을 감소시키는 훌륭한 방법이다. 기본 네비게이션에는 사이트의 모든 섹션에 대한 링크로 채우는 대신, 통상적인 카테고리만을 준비해 놓았다. 카테고리 안에서 스크롤을 내려 페이지 하단으로 가면 푸터 안에 훨씬 더 총체적인 사이트맵을 찾을 수 있다.
Notice they haven’t gone out of their way to make it stick out. It’s enough that you can spot it if you’re looking for something but subtle enough that you don’t give it a second glance if you don’t need help with navigation.
애플이 그것을 눈에 띄는 지나친 방법으로 하지 않았다는 것에 주목하라. 당신이 무언가 찾는 것이 있다면 너무 눈에 띄지는 않으나 알아보기에 충분하며, 네비게이션의 도움이 필요하지 않다면 재차 쳐다보지 않아도 될 정도로는 되어 있다.
#14: Create Beautiful Custom Icons :
아름다운 맞춤형 아이콘을 창조하라
With the introduction of OS X, Apple brought icons into a whole new realm. Since then stunning icon design has flooded operating systems and spilled over onto the web. However, there are a few free icon sets online that have reached such fame that they’ve become cliché.
OS X를 소개하면서 애플은 아이콘을 완전히 새로운 영역 속으로 끌어들였다. 그 이후로 경이로운 아이콘 디자인이 운영 체제에 범람하고 있으며 웹으로까지 넘쳐 흐르고 있다. 어쨌거나 몇몇 온라인용 무료 아이콘 세트들은 그들이 진부해질 정도의 명성에까지 이르게 되었다.
So before you go downloading a set of icons that looks like everything else on the web, give it a go yourself. Fire up Photoshop and/or Illustrator, dust off those drawing skills and make yourself some great custom icons. In the end they’ll really polish off your site designs. As you master the art of good icon design you’ll notice that you are a lot less dependent on third party art to produce amazing sites (which is a really good thing). If anything, you’ll save those crazies in the legal department from trying to figure out the legal restrictions on all those “free” icons.
그러므로 웹상의 어디서나 사용되고 있는 것처럼 보이는 아이콘을 다운로드 하기 전에, 스스로 만들어 봐라. 포토샵이나 일러스트에 불을 당긴 후, 그림 실력에 쌓인 먼지들을 털어내고 스스로 멋진 맞춤형 아이콘을 창조하라. 마침내 그 아이콘들은 당신의 사이트를 빛나게 할 것이다. 멋진 아이콘 디자인의 전문가로서 당신은 (정말 좋은) 놀라운 사이트들을 창출하는데 있어 외부에서 제공되는 디자인들에 훨씬 덜 의존적으로 되었다는 사실을 깨닫게 될 것이다. 뭔가 더 있다면, 그 모든 "무료" 아이콘들의 법적인 제약 여부를 파악하기 위한 법률 부서와의 미친 짓거리들을 하지 않아도 된다는 것이다.
#15: Interactive & Dynamic Content
상호작용 하는 역동적인 컨텐츠
Nearly every page of Apple’s site contains an automatic slideshow, an animated accordion menu, a video, or an interactive photo gallery. The goal here is to keep the attention of the user. Static content can be a little on the boring side and can cause a user to vacate the site in search of something more interesting. Apple keeps your attention by giving you lots of pages with constantly changing content or bits of interactive features.
애플 사이트의 거의 모든 페이지들은 자동 슬라이드쇼, 움직이는 아코디언식의 메뉴, 비디오, 혹은 상호작용하는 포토 갤러리를 포함하고 있다. 이러한 것들의 목적은 사용자의 이목을 계속 집중시키는 것이다. 정지된 컨텐츠는 지루한 것이 될 수 있으며 더 흥미로운 것을 찾기 위해 사용자이 사이트를 떠나는 원인이 될 수 있다. 애플은 끊임없이 변화하는 컨텐츠나 상호작용하는 요소가 있는 페이지들을 많이 제공하므로써 당신의 이목을 계속 집중시킨다.
This kind of content should be approached with extreme caution for a number of reasons. First of all, it’s easy to leave over half of your visitors behind if you’re programming in features that require a special plugin. Try to stick to widely supported technologies that work across multiple browsers. Also, it’s really easy to get carried away with dynamic content. There’s an extremely fine line between eye-catching and annoying and you absolutely must learn where that line falls. Otherwise you give visitors a headache in place of the good impression you were going for.
이러한 유형의 컨텐츠는 몇몇의 이유로 인해 극도로 신중하게 접근해야만 한다. 그 무엇보다 먼저, 특정한 플러그인을 요구하는 특성을 지닌 것으로 프로그래밍 했다면, 방문자의 반이상을 사이트에서 떠나게 하는 것은 쉬운 일이다. 어느 브라우저에서든지 작동할 수 있는 폭넓게 지원되는 기술을 사용하라. 역시, 역동적인 컨텐츠는 넋을 잃게 만든다. 눈길을 끄는 것과 성가시게 하는 것 사이에는 극도로 명확한 구분선이 있으며, 당신은 그선의 경계가 어디인지 반드시 배워야만 한다. 만약 그렇지 않으면, 당신은 당신이 멋진 인상을 남기려 한 곳에서 방문자들에게 골칫거리를 안길 수도 있다.
One More Thing…
한가지 더...
To sum up, Apple Inc. is pretty much synonymous with classy design. There’s a lot we can learn from observing these great designers at work that goes way beyond just ripping off the cool reflections they put on everything. The tips above are meant to be generally applied to your own work in a unique way. Use them as inspiration to blaze your own path in great site design.
요약하자면, 애플사는 멋진 디자인과 거의 동일한 단어이다. 멋진 생각들로 시대를 뛰어넘는 작품을 만들어 내는 위대한 애플의 디자이너들로부터 많은 것들을 배울 수 있다. 위의 팁들은 유니크한 방법으로 당신의 작업에 적용될 수 있다. 위대한 웹사이트의 디자인 속에서 당신만의 선을 빛나게 할 수 있는 영감(inspiration)으로서 그 팁들을 활용하라.
애플에 대해 누군가 언급할 때면 애플의 신봉자나 증오자, 불멸의 사랑이나 깊은 증오를 가진 집단으로 나뉘게 된다. 아래의 질문을 통해 당신이 어느 쪽의 사람인지 우리에게 말해 달라. 당신은 반짝이는 아이콘이 섞여 있는 미니멀한 스타일을 좋아하는가? 아니면 애플처럼 보이려 하는 사이트들 때문에 짜증이 나는가? 우리는 당신의 생각을 알고 싶다.* (translated by 훈샘 http://brandesign.tistory.com )
|
|
'view on'을 클릭해 주는 여유와 센스 잊지 마세요^^