평면 디자인 vs 사실주의 : 당신은 어느 편입니까?

작년에 플랫 디자인이 디지털 디자인의 세계를 장악했습니다. 스큐 어모 픽 디자인의 특징 인 엠보싱 및 베벨 효과, 3D 인공 텍스처, 드롭 섀도우 및 반사 쉬머-모두 사라지고 미니멀 한 디자인, 대담한 색상의 선명한 가장자리와 선, 단순한 타이포그래피 및 거의없는 경우 그림자로 대체되었습니다. .



이 디자인 트렌드를 강조하기 위해 인터랙티브 에이전시는 손대지 않은 이 멋진 인터랙티브 인포 그래픽을 만들었습니다. 플랫 디자인 vs 리얼리즘 이 멋진 프로젝트에는 사용자가 측면을 선택하고 적과 싸우는 대화 형 게임도 포함됩니다. 프로젝트에 대해 자세히 알아보기 위해 inTacto의 크리에이티브 디렉터 Alejandro Lazos와 이야기했습니다.



개념은 어떻게 생겼습니까?

매년 말, 우리는 높은 생산 가치와 함께 우리의 창의력을 보여주고 싶어하는 에이전시로부터 자기 홍보 인터랙티브 인사를 만듭니다. 우리가 만드는 각 인사말에 대해 우리는 디지털 세계에서 그해 가장 눈에 띄는 테마를 사용하는 것을 좋아합니다. 8은 이미 얼마 전에 채택되었습니다.

이 주제는 입소문이되었고 지지자와 비방 자 모두가이 새로운 스타일을 논의하면서 모든 디자인 블로그에서 논의되었고, 이는 디지털 미디어의 새로운 디자인 트렌드로 빠르게 자리 매김했습니다. 때때로 열띤 토론을 통해 두 그룹의 디자이너 간의 투쟁 개념에 대한 아이디어를 얻었습니다.



inTacto는 작년에 플랫 디자인이 도착했을 때 인터랙티브 인사말을 기반으로했습니다.

inTacto는 작년에 플랫 디자인이 도착했을 때 인터랙티브 인사말을 기반으로했습니다.

HTML5 게임 또한 인기를 얻고 많은 관심을 받고 있었기 때문에이 분야에서 우리의 기술을 보여주고 싶었습니다. 이 때문에 디자인 투쟁을 묘사하기 위해 ¨Street Fighter¨ 형식을 재창조하려는 아이디어가 떠 올랐습니다.

사이버 월요일 2016 gopro hero 5

우리는 디지털 디자인의 세계에서 일어나고 있다고 느꼈던 것을 은유 적으로 설명하는 이야기를 만들었습니다.



게임만으로는 충분하지 않았고 우리는 뭔가 부족하다고 느꼈습니다. 그래서 우리는 디지털 디자인의 세계에서 일어나는 일을 은유 적으로 설명하는 스토리를 만들었고, 게임에 배경과 맥락을 가져 왔습니다. 마지막으로 팀의 영상 인사말을 추가했습니다.

이 프로젝트에 대한 디자인 접근 방식에 대해 알려주세요.

'Flat design vs Realism or Skeuomorphism'이라는 아이디어와 주인공의 성격을 정의한 후에는 두 가지 디자인 스타일을 자세히 조사하여 각각의 특징을 실제로 발견했습니다. 이 단계에서 Pinterest는 큰 도움과 영감의 원천이었습니다.

이후 우리는 스크립트를 기반으로 스토리 보드를 만들고 종이에 다양한 스케치를 만들어 각 캐릭터의 모습을 정의했습니다. 마지막으로 적합한 글꼴을 검색했으며이 경우 두 스타일 모두에서 잘 작동하는 Google Fonts의 Roboto Slab에 매우 만족했습니다.

inTacto 팀은 각 캐릭터의 모습을 정의하기 위해 종이에 다양한 스케치를 만들었습니다.

inTacto 팀은 각 캐릭터의 모습을 정의하기 위해 종이에 다양한 스케치를 만들었습니다.

프로젝트를 구축하기 위해 무엇을 사용 했습니까?

주로 HTML5, CSS, JQuery, JavaScript를 사용하여 사이트를 구축했으며 게임에는 Construct 2를 사용했습니다.

게임 캐릭터에 생명을 불어 넣기 위해 Photoshop의 Puppet Warp 도구를 사용하여 원본 드로잉을 변형 한 다음 프레임별로 애니메이션을 적용했습니다.

포토샵

Surface Pro 3 대 4 성능
Photoshop의 Puppet Warp Tool을 사용하여 게임 캐릭터에 생명을 불어 넣었습니다.

우리는 필요한 정확한 움직임과 원근을 제공하기 위해 기둥이 더 멀리 이동하는 장면에서 After Effects의 3D 카메라 기능을 사용했습니다. 그런 다음 이것을 가져와 CSS를 사용하여 복제했습니다.

마지막으로 이미지에 24 비트 PNG 압축기 (Photoshop 외부)를 사용하여 앤티 앨리어싱으로 테두리의 투명도를 유지하면서 색상 수를 줄일 수있었습니다.

가장 어려운 부분은 무엇 이었습니까?

우리는 많은 기술적 문제에 직면했고 때로는 학제 간 회의를 열고 가능한 해결책을 브레인 스토밍해야했습니다.

주요 문제 중 하나는 시차 스크롤 중간에 HTML5 게임을 삽입하는 것이 었습니다. 스크롤하는 동안 모든 것이 연속적이고 점프하지 않기를 원했기 때문에 사용자는 언제든지 중단없이 처음부터 끝까지 이동할 수 있습니다. 이를 달성하기 위해 Ajax 기술을 활용하여 매개 변수를 URL에 전달하고 div에로드되는 게임은 해당 매개 변수를 수집하고 해당 로딩 화면 (평면 또는 현실감)을 표시합니다.

팀 중 하나

팀의 주요 문제 중 하나는 시차 스크롤 중간에 HTML5 게임을 삽입하는 것이 었습니다.

또 다른 문제는 전체 화면으로 표시 될 때 느린 성능이었습니다. 이를 해결하기 위해 960px 캔버스 (모니터 크기의 50 %)로 작업 한 다음 CSS를 사용하여 크기를 두 배로 늘 렸습니다. 이를 보완하기 위해 두 배 크기로 게임에 삽입했기 때문에 이미지가 늘어난 것처럼 보이지 않습니다.

우리에게 가장 큰 문제는 사이트의 전체적인 무게와 로딩 시간이었는데, 그 결과 컬러 양자화기를 사용하여 모든 PNG를 압축하고 여러 단계에서 사이트를로드하여 처음에 모두 발생하지 않도록했습니다. 흥미로운 해결책은 사용자가 초기 스토리를 보는 동안 최종 비디오를로드하는 것이 었습니다. 또한이 이미지 시퀀스에 대해 2 가지 품질의 JPG를 사용했습니다. 사용자가 최종 비디오로 빠르게 스크롤하면 더 낮은 화질로 볼 수 있지만 기다리면 더 높은 화질로 표시됩니다.

사용자 스크롤 속도를 허용하기 위해 이미지 시퀀스에 두 가지 다른 품질의 JPG가 사용되었습니다.

사용자 스크롤 속도를 허용하기 위해 이미지 시퀀스에 두 가지 다른 품질의 JPG가 사용되었습니다.

마침내 우리는 사이트를 시작한 지 이틀 후에 예상치 못한 긍정적 인 문제가 발생했습니다. 우리가 받고있는 높은 수준의 트래픽에 대처하기 위해 사이트를 호스팅하는 서버를 마이그레이션해야했습니다.

안드로이드 태블릿 용 파인 포인트 스타일러스

  • 크리에이티브 디렉터 : 알레한드로 라 조스
  • 창의적이고 건강한 디자인 : 세르지오 샤 일레
  • 아트 디렉터, 일러스트 레이터 : 데미안 레티에로
  • 멀티미디어 디자이너 : 나탈리아 만테 롤라
  • 프런트 엔드 디렉터 : Guillermo Vazquez
  • 게임 개발자 : Lucas Pallares

마음에 드 셨나요? 읽어보세요!