플라이휠 브랜드 리프레시 비하인드 스토리
게시 됨: 2016-11-17플라이휠은 영광스럽고 빠르게 진행되는 4년 동안 주변에 있었고 그 기간 동안 우리는 믿을 수 없을 정도로 자랑스러워하는 놀라운 일들을 많이 해냈습니다. 우리는 WordPress 사이트가 집이라고 부르는 견고한 호스팅 플랫폼을 구축했습니다. 우리는 디자이너와 에이전시가 워크플로를 개선하고 비즈니스를 성장시키는 데 도움이 되는 최고 수준의 솔루션을 만들었습니다. 우리는 고객이 일을 잘 마치면 맥주를 보낼 수 있는 방법도 만들었습니다! 하지만 진지하게 말하자면, 우리는 상상했던 것보다 훨씬 더 큰 무언가를 만들었습니다.
이 모든 변화와 성장을 통해 우리가 한 번도 하지 않은 것이 있습니다. 바로 브랜드를 바꾸는 것입니다. 이제 성장하기 때문에 회사 브랜드를 변경해야 한다는 규칙은 없지만(어리석은 일이지만) 상황이 우리의 모습에 조금 더 충실할 수 있다고 느꼈습니다. 조금 더 밝고 아름답습니다. 조금 더 플라이휠-y.
그래서 더 이상 고민하지 않고 멋진 새로운 비주얼 아이덴티티를 공개하게 된 것을 매우 자랑스럽게 생각합니다! 종이에(또는 더 정확하게는 화면에서) 기발한 디자인의 대시가 있는 다채로운 새 페인트 코트처럼 보입니다. 이 새로 고침은 호스팅 앱의 세련되고 멋진 새로운 사용자 경험부터 전국 에이전시를 위한 색종이로 가득한 이벤트 초대에 이르기까지 회사의 모든 자료에 적용됩니다.
이 새로 고침은 우리 브랜드를 밝고 아름다운 방식으로 개편하는 것이었고 물론 몇 가지 실용적인 부분도 있었습니다! 특정 목표 중 일부에는 성장에 따라 제품을 확장할 수 있는 능력 향상, 회사 전체에 걸쳐 일관되고 의도적인 디자인 생성, 고객이 Flywheel과 상호 작용할 때 모든 것을 더 쉽고 즐겁게 만드는 것이 포함되었습니다.
우리가 어떻게 그것을 해냈는지 관심이 있으십니까? Flywheel 브랜드 새로 고침에 들어간 모든 생각, 프로세스, 회의, 스케치, 말장난, 연구, 카페인 및 색종이 조각에 대해 배우기 위해 무대 뒤에서 우리와 함께하십시오.
그리 새롭지 않은 새로운 로고
약간의 비밀을 알려 드리겠습니다. 새로 고침을 시작했을 때 실제로 모든 것이 아니라 로고를 세련되게 다듬는 훨씬 더 작은 프로젝트로 시작했습니다. 우리는 항상 우리 브랜드가 진행 중인 작업이라는 것을 알고 있었고 많은 면에서 브랜드를 크게 변경할 수 있는 여유가 없었습니다. 하지만 올해 우리 팀은 많이 성장했고, 완전히 새로 고칠 수 있는 리소스가 있다는 것을 깨닫고 기회를 잡고 실행했습니다!
그래서 우리는 브랜드 리프레쉬의 첫 번째 변화를 만들기 위해 멋진 플라이휠 로고로 시작했습니다.

재미있고 친근한 정신을 구현하면서 단순하고 읽기 쉽고 본질적으로 읽을 수 있습니다. 대담하면서도 부드러운 외관의 플라이휠 로고는 사용자가 우리 문화를 공유하고 우리와 함께 시간을 보내도록 초대합니다!
약간 전후에, 우리가 어디서 시작했는지 알 수 있습니다.우리의 오래된 로고는 항상 우리 마음(그리고 공동 창립자 Tony의 왼쪽 팔뚝)에 특별한 자리를 차지할 것이지만 우리의 가치와 에너지를 반영하기 위해 약간의 광택이 필요할 수 있다는 것을 알고 있었습니다. 이것이 우리의 새로 고침이 시작된 곳이었고 우리가 올바른 길을 가고 있는지 확인하기 위해 많은 플라이휠과 다양한 반복을 응시하는 것이 포함되었습니다.
“우리는 원래 로고에서 너무 멀리 벗어나고 싶지 않았습니다. 단지 크기가 작거나 크거나, 디지털 및 인쇄된 다양한 환경에서 좀 더 잘 작동하면서 더 다재다능한 로고를 원했습니다. 그것은 '휠'의 재창조가 아니라 단지 더 나은 디자인일 뿐입니다.” – Andrea Trew, 그래픽 디자이너
Museo Sans Rounded 글꼴의 하이브리드를 만들고 모서리를 둥글게 하여 로고를 더욱 친근하게 만들었습니다(Flywheel처럼!). 또한 로고마크와 워드마크 사이, 그리고 그 안의 문자들 사이의 공간을 늘려 숨쉬는 공간을 조금 더 확보했습니다. 기존 환경에서는 상황이 너무 제한되어 있었고 우리는 모두 개방적이고 환영하는 환경을 만드는 데 주력하고 있습니다.
이러한 약간의 조정을 수행한 후 로고로 달성하고자 하는 것이 한 가지 더 있습니다. 바로 유연성 향상입니다. 수평 로고는 많은 상황에서 훌륭하지만 때때로 너무 길어요. (디자이너 – 투쟁을 알고 있다는 것을 압니다.) 그래서 우리는 조금 더 큰 보조 로고를 만들었습니다.

가로 및 세로 버전을 모두 처리한 다음에는 로고를 더 작은 크기로 조정하는 문제를 해결했습니다. 아주 작은 사양으로 작업을 시작할 때까지 아이콘은 훌륭합니다. 우리는 축소 과정에서 번역에서 약간의 손실이 있다는 것을 알아차렸으므로 모든 요소(글자 자체에서 측면의 "스피너"까지)가 모든 크기에서 읽기 쉽고 아름답게 유지되도록 로고마크를 단순화하고 두껍게 했습니다. .

한 단계 더 나아가 더 단순화된 로고(또는 버그라고 부르고 싶은 대로)도 만들었습니다. 로고마크에서 몇 개의 스포크를 제거하고 요소 사이의 공간을 늘리고 조금 더 두껍게 만들면 버그가 50픽셀 너비만큼 작아질 수 있습니다! 우리는 그것을 매우 자랑스럽게 생각하며, 그것이 가는 모든 작고 마법 같은 장소를 보고 싶어 기다립니다.
우리의 눈부신 새로운 컬러 휠
만약 당신이 이곳에 처음 왔다면 제가 약간의 비밀을 알려드리겠습니다. 우리는 밝고 아름답고 다채롭고 멋진 디자인을 좋아합니다! 따라서 단순히 브랜드 새로 고침을 위해 몇 가지 색상을 선택하는 대신 색조와 음영으로 완성된 전체 플라이휠 색상환을 설계했습니다.

우리는 프로젝트를 멋지게 꾸미고 누군가의 하루를 만드는 가장 즐거운 방법 중 하나가 밝은 색상의 펀치를 추가하는 것이라고 믿습니다. (우리는 색종이 조각에 대해 같은 생각을 가지고 있지만 나중에 자세히 설명합니다!) 오해하지 마세요. 우리는 우리의 새 로고가 진정으로 꿀벌의 무릎이라고 생각하지만 행복한 색상은 로고 자체만큼 우리에게 거의 중요합니다. 그렇기 때문에 로고를 이러한 멋진 색상 중 하나로 사용할 수도 있습니다(물론 특별한 경우에만 해당).

새로 고침 전에 우리는 실제로 두세 가지 색상으로만 작업했습니다(솔직히 말해서 항상 일관된 색상은 아니었습니다). 우리는 Flywheel 브랜드에 충실하면서 창의력을 발휘할 수 있는 더 많은 유연성을 원한다는 것을 알고 있었기 때문에 강력하고 기발한 방식으로 실험할 수 있는 많은 공간을 제공할 밝고 생생한 색상 팔레트를 만들기 시작했습니다. 이메일 헤더에서 소셜 미디어 그래픽, 당사 애플리케이션의 아이콘에 이르기까지 Flywheel 브랜드 전체에서 이러한 친숙한 안료를 발견할 수 있습니다. 보시다시피, 우리는 그것으로 많은 즐거움을 누리고 있습니다.
우리의 재미있는 새 글꼴
네, 맞습니다. 브랜드 새로 고침에는 Flywheel만큼 기발하고 매력적인 4개의 새로운 글꼴이 포함되어 있습니다! 타이포그래피는 변경하는 것이 사소한 것처럼 보일 수 있지만 사용자에게 큰 영향을 미친다고 생각합니다. 그렇기 때문에 효과적인 계층 구조와 매력적인 헤드라인을 만들기 위해 다양한 상황에서 사용할 수 있는 여러 글꼴을 선택했습니다.
기본 글꼴은 Museo Sans Rounded이며, 제목과 부제목에 사용되는 더 굵고 산세리프체입니다. 플라이휠 워드마크와 모양과 느낌이 유사한 이 서체도 가독성이 높고 기하학적이며 친근한 둥근 모서리가 특징입니다.

대조적으로 균형 잡힌 두 번째 서체는 달콤하고 매력적인 약간의 기발함을 더한 더 얇은 세리프 서체인 Archer입니다. 우리는 특히 반볼드 기울임꼴 변형에서 이 글꼴을 좋아하며 부제목에 가장 일반적으로 사용합니다.

진정한 플라이휠 방식으로, 헤드라인과 그래픽에 특별한 것을 추가하기 위해 브랜드 새로 고침에 두 개의 멋진 글꼴도 포함했습니다! Heartwell은 손으로 만든 요소가 포함된 대담한 서체로, 브러시로 칠한 모양을 완성하는 데 적합합니다.

스무디는 화려하지만 우리가 충분히 얻을 수 없는 우아하고 기발한 모습으로 스펙트럼의 반대편에 있습니다.


인간적인 요소
우리가 디지털 세계의 디지털 회사라는 사실에도 불구하고, 우리는 우리 작업에서 실제 요소를 사용하는 데 정말 특별한 무언가가 있다고 생각합니다. 그렇기 때문에 우리가 만드는 작품에서 낯익은 얼굴과 함께 멋진 사진과 평면 디자인의 조합을 흔히 볼 수 있습니다! Flywheel은 항상 호스팅의 세계를 인간화하기 시작했으며, 우리 자신의 초인적인 직원을 과시하는 것보다 더 좋은 방법은 무엇입니까? 예를 들어 아래 사진을 찍어보세요. 우리의 행복 엔지니어 중 한 명인 Bryan은 고객 중 한 명을 위해 하루를 구하기 전에 자신의 내면의 슈퍼맨에게 채널을 돌립니다.

사진 외에도 우리가 만드는 모든 디지털 및 물리적 작품은 아무리 작아 보일지라도 사랑과 의도적인 디자인으로 제작됩니다. 우리는 세부 사항이 중요하다고 생각하므로 모든 면에서 고객을 위한 탁월한 경험을 만들기 위해 끊임없이 노력합니다. 방문 페이지의 자산이든 에이전시 파트너를 위한 손으로 만든 장식용 상자이든 우리는 구축하는 모든 것에 인간적인 요소를 추가하려고 노력합니다. (그것이 또한 당신이 우리 사무실에서 색종이 조각 같은 것을 찾을 수 있는 이유이기도 합니다. 그것은 말이 됩니다. 우리는 약속합니다.)

이제 이 모든 것이 매우 빠르게 결합된 것처럼 보일 수 있지만 우리는 이러한 모든 결정을 망치는 데 몇 달을 보냈습니다. 로고 반복에서 색상 조정, 패키지 실험(여기서 우리는 상자에 대해 생각했던 것보다 훨씬 더 많은 것을 배웠습니다)에 이르기까지 모든 움직임은 우리가 Flywheel을 위한 올바른 움직임을 만들고 있는지 확인하기 위해 신중하고 신중하게 선택되었습니다.
일단 우리가 그것을 올바르게 이해하면 몇 가지 일이 일어나기 시작했습니다. 첫 번째는 우리가 새로운 색상과 아이콘, 글꼴에 약간 흥분하여 eBook 표지, 소셜 미디어 그래픽 및 이메일 디자인에 천천히 스며들기 시작했다는 것입니다. (당신은 우리를 비난할 수 있습니까? 우리가 어떻게 기다릴 수 있습니까?)
두 번째는 새로운 브랜드를 더 넓은 규모로 구현할 수 있다는 것이었습니다. 먼저 플라이휠 어플리케이션입니다!
놀라운 새 플라이휠 앱
유쾌한 새로운 글꼴과 아름답고 밝은 색상으로 무장한 우리는 Flywheel 앱으로 눈을 돌렸습니다. 우리는 항상 인터페이스와 플라이휠 대시보드에 대해 정말 긍정적인 피드백을 많이 받았기 때문에 효과가 있었던 것은 유지하고 개선할 수 있는 요소만 변경하고 싶었습니다. 고객이 가입 페이지와 처음 상호 작용하는 순간부터 사이트를 활성화하는 순간까지 우리는 Flywheel 경험을 더 간단하고 매끄럽고 사용하기 쉽게 만들기 시작했습니다!

그러나 플라이휠 앱을 재설계하는 것은 프론트 엔드에 관한 것만이 아닙니다. 우리 개발자들은 또한 코드를 현대화하고 놀라운 미래를 위한 견고한 기반을 구축하기 시작했습니다. JavaScript를 제거하고 코드를 정밀 검사하여 앱을 더 깨끗하고 명확하며 훨씬 더 현대적으로 만들 수 있었습니다. 우리는 가능한 한 빨리 브라우저에 코드를 전달하기 위해 많은 새로운 기술을 사용하여 고객에게 더 나은 경험을 제공했습니다.
새로 고침에 대해 모두가 가장 좋아하는 부분은 일종의 깨끗한 상태였다는 것입니다. 이는 우리에게 전반적으로 결정을 내리고 변경할 수 있는 기회를 주었습니다. 애니메이션을 처리하는 방법부터 색상이 사용되는 방식에 이르기까지 모든 것이 여전히 유연하고 확장 가능한 방식으로 회사의 모든 자료에서 일관됩니다.

예를 들어 드롭다운 메뉴를 사용합니다. 일반적으로 보조 항목을 선택하려고 할 때 마우스를 너무 빨리 움직여 실수로 메뉴를 완전히 종료하는 경우를 제외하고는 아무도 그것에 대해 생각하지 않습니다. 이 새로 고침은 디자이너와 개발자가 이와 같은 작은 문제에 대해 생각하고 개선하여 사용자에게 더 나은 경험을 제공할 시간을 주었습니다. 따라서 Flywheel 앱에서 실수로 드롭다운 메뉴를 떠나는 대신 서투른 사용자를 지원하고 마우스를 과도하게 수정하면 조정됩니다.
"아무도 주목하지 않거나 심지어 눈치채지 못할 수도 있는 미묘한 변화지만, 정말 중요하고 사람들이 Flywheel과 사랑에 빠지게 만드는 보이지 않는 디자인 경험입니다." – Will Riley, 프런트 엔드 엔지니어
우리는 앱에 적용된 모든 작은 변경 사항을 나열할 수 있지만 그것이 요점은 아닙니다(직접 찾는 것보다 훨씬 덜 마법적임). 특정 버튼이나 상호 작용에 관한 것이 아닙니다. 전체적으로 새로 고침과 그에 따른 모든 변경 사항에 관한 것입니다. 우리가 만든 모든 작은 변화에는 분명한 목적이 있습니다.
“이 새로 고침에는 단순히 변경하기 위해 변경하지 않았는지 확인하기 위해 많은 실험이 필요했습니다. 우리는 고객이 Flywheel과 상호 작용하는 방식을 개선하기 위해 우리의 가치와 고객의 요구에 매우 세심한 주의를 기울였습니다.” – Adam Trabold, 수석 제품 디자이너

우리의 행복한 새 홈페이지
마지막으로, 우리는 플라이휠 사이트 전체를 새롭게 단장하기 시작했습니다. 짐작할 수 있듯이 첫 번째 단계는 새로운 브랜드 지침을 구현하는 것이었습니다. 우리는 모든 글꼴 스타일을 업데이트하고 사이트를 새로운 브랜드 색상으로 칠했으며 페이지 간의 일관성 문제를 수정했습니다. 우리는 거기에서 멈출 수 있었지만 새로운 홈페이지를 통해 이 새로 고침을 한 단계 더 발전시키기로 결정했습니다!

다른 모든 것이 새롭게 바뀌면서 홈페이지를 제외하는 것이 잘못되었다고 느꼈습니다. 이는 플라이휠 경험의 필수적인 부분이므로 최선을 다해 고객(그리고 곧 고객이 될 고객)에게 정말 눈에 띄는 것을 제공하고 싶었습니다. 또한 가장 중요한 정보를 찾기 쉽고 이해하기 쉽도록 홈페이지 이면의 전략을 다시 살펴볼 수 있는 기회를 주었습니다.
“Flywheel에서 우리는 디자이너를 위한 것이고 대행사를 위한 것이므로 브랜드와 제품이 그들에게 말을 할 수 있도록 해야 할 책임이 있습니다. 이것이 제가 새로 고침에 대해 가장 흥분되는 부분입니다. 우리는 올바른 방향으로 큰 진전을 이뤘고 이제 우리는 앞으로 하고자 하는 모든 일을 위한 기반을 갖게 되었습니다.” – Nick Chickinelli, 제품 디자이너
몇 가지 최종 생각
우리 브랜드의 핵심은 실제로 많이 바뀌지 않았습니다. 우리는 여전히 당신이 항상 알고 사랑했던 동일한 플라이휠입니다. 우리의 비즈니스는 동일하고, 우리의 가치는 동일하며, 심지어 우리의 로고도 (대부분) 동일합니다. 이 새로 고침은 우리가 Flywheel 브랜드를 자세히 살펴보고 우리가 누구인지, 그리고 여전히 노력하고 있는 모습을 반영하도록 개선했음을 의미합니다. 더 빠른 기세로 계속 전진할 수 있는 토대입니다.
“견고한 브랜드가 없으면 모든 것이 무너지는 경향이 있습니다. 응집력 있고 알아볼 수 있는 브랜드를 갖는 것은 회사의 모든 부분을 하나로 묶는 접착제와 같습니다. 우리가 만든 지침은 고객의 삶을 더 쉽게 만드는 더 나은 솔루션으로 더 나은 문제를 해결하는 데 도움이 될 것입니다.” – Andrea Trew, 그래픽 디자이너

클릭 시 버튼이 미묘하게 움직이는 방식이든 랜딩 페이지의 레이아웃이든 우리는 진정으로 디자인이 중요하다고 믿습니다. 이것은 Flywheel을 계속 회전시키는 7가지 가치 중 하나이며, 이것이 우리가 디자이너와 에이전시를 염두에 두고 플랫폼을 구축한 이유 중 하나입니다.
"우리는 호스팅 공간을 넘어 놀라운 회사가 되기를 열망합니다. 그래서 우리가 누구인지를 말해주고 우리 제품의 품질을 반영하는 브랜드를 갖는 것이 정말 중요했으며, 이것이 우리가 이번 새로 고침을 통해 달성한 것이라고 생각합니다." – Dusty Davidson, CEO 겸 공동 설립자
이것은 시작에 불과하며 플라이휠을 더욱 개선하기 위해 이 새로 고침을 확장하기를 기다릴 수 없습니다.
이제 새로 고침에 대한 비하인드 스토리를 살펴보았으므로 어떻게 생각하십니까? 계속해서 개선하고 멋진 것을 구축할 수 있도록 의견에 대한 여러분의 생각을 듣고 싶습니다!
