• Tools We Like

  • 우리가 좋아하는 툴들

  • An occasional look at our favorite tools for building and prototyping

  • 만들고 프로토타이핑을 위해 사용하는 선호 툴 검토

  • Author
  • 글쓴이
  • JUSTINE LEE
  • 저스틴 리
  • Published
  • 발행일
  • FEBRUARY 12, 2014
  • 2014년 2월 12일
  • Reading Time
  • 읽는 시간
  • 3 MINUTES
  • 3분
  • Between client projects and personal ventures, IDEO interaction designers and software engineers across our global offices spend a significant amount of time designing and building apps for iPhones and iPads. We’re part of the thousands of iOS developers worldwide beholden to the operating system’s wild popularity and sound frameworks.
  • 전세계 사무실에 걸쳐서 IDEO 인터랙션 디자이너와 소프트웨어 엔지니어들어들은 고객용 프로젝트와 개인 벤처기업 중간에서 아이폰과 아이패드용 앱을 디자인하고 개발하는데 엄청난 시간을 보낸다. 우리는 광적인 인기를 누리는 운영 체제와 안정된 프레임워크에 신세를 지고 있는전세계 수천명의 iOS 개발자들 중 일부이다.
  • While we focus on the design and code, we rely on the latest tools to help us create clean prototypes and iterate more quickly, saving us time and countless emails. Here are some of our favorite tools, as of late.
  • 디자인과 코드에 중점을 두고 있으면서 프로토타입을 깔끔하게 만들고 좀 더 빨리 작업을 반복할 수 있고, 작업 시간과 셀 수 없이 밀려드는 이메일을 줄여주는 최신 툴에 의존하고 있다. 최근 우리가 매우 좋아하는 툴을 소개한다.
  • Robust features and advanced control for creating rich prototypes
  • 리치 프로토타입을 만드는데 강력한 기능과 앞선 제어력이 있다.
  • — Junu Yang, Interaction Designer, New York
  • 주노 양, 인터랙션 디자이너, 뉴욕
  • HOW I USE IT

  • 사용 방법

  • Proto.io was ideal for prototyping some front-end interactions for a health-tracking app. It’s best for projects involving touch devices and interactions. It has built-in robust features and is relatively easy to learn. If you are familiar with the capabilities of Flash or Axure RP, Proto.io is a simpler version focused on touch devices. For the prototype, I was able to animate/tween elements between different UI states, create swipe gesture interactions, and build a drag-and-drop interaction.
  • Proto.io는 헬스 트래킹 앱용으로 약간의 프론트-엔드 인터랙션을 프로토타이핑하는데 이상적이며 터치 기기와 인터랙션을 구현하는 프로젝트에 최상이다. 소프트웨어에 내장되어 있는 강력한 기능이 있고 상대적으로 익히기 쉽다. 플래시나 Axure RP의 사용에 익숙하다면 Proto.io는 터치 기기에 초점을 맞춘 보다 간단한 버전이라 할 수 있다. 프로토타입을 제작시 나는 서로 다른 UI상태 중에 요소를 애니메이션 시키거나 변형할 수 있고, 톡 치는 제스쳐 인터랙션을 만들고 드래그 앤 드롭 인터랙션을 제작할 수 있다.
Image of 1985 article
  • Proto.io lets you prototype robust touch interactions with animation and modular content containers
  • Proto.io는 애니메이션과 모듈식 콘텐츠 컨테이터를 이용해 강력한 터치 인터랙션을 프로토타입하게 해준다.
  • WHY I LIKE IT

  • 좋아하는 이유

  • Robust features make this tool stand out. Other non-code-based UI prototyping tools I’ve used lack the range of features—like animation and gesture support—that Proto.io offers.
  • 이 툴은 강력한 기능덕에 부각된다. 내가 사용했던 코드 기반이 아닌 다른 UI 프로토타입핑 툴은 Proto.ioc가 제공하는 애니메이션과 제스처 지원 같은 기능 범위가 부족하다.
  • For creating better (quick) prototypes that propel your ideas further — and faster
  • 당신의 아이디어를 좀 더 멀리 나아가게 하는, 더 나은 (더 빠른) 프로토타입을 제작하기 위해
  • Kam Keshmiri, Interaction Designer, London
  • 캄 케쉬미리, 인터랙션 디자이너, 런던
  • HOW I USE IT

  • 사용 방법

  • I was looking for a really fast way to create iPhone prototypes for various IDEO projects and a Top5ives App (for visitors to Hackney, London). My principal goal was to use a software that slotted into my workflow without a steep learning curve. Flinto allows me to link a variety of screens together—with some basic transitions—to evolve the app design by getting it into the hands of users for feedback.
  • 나는 다양한 IDEO의 프로젝트와 Top5ives(런던 해크니 방문자를 위한)앱용 아이폰 프로토타입을 제작을 위해 정말 빠른 방법을 찾고 있었다. 나의 주된 목적은 가파른 학습 곡선없이 작업 흐름 안에 들어가는 소프트웨어를 사용하는 것이었다. 플린트(Flint)는 몇 가지 기본 트랜지션 기능을 이용해 여러 화면을 함께 연결해 주고 피드백을 받기 위해 사용자의 손을 거쳐 앱 디자인을 진화시키도록 했다.
Image of 1985 article
  • One of Flinto’s strengths is how quickly you can go from the workspace to a functioning prototype on your device. Pushing an iteration is seamless and requires no extra effort for you or your clients to view.
  • 플린트의 강점 중 하나는 작업 공간에서 기기 상에 프로토타입을 작동해 보기까지 정말 빠르게 할 수 있다는 것이다. 작업은 매끄럽게 반복되고 당신이나 고객이 검토하는데 추가적인 노력은 들지 않는다.
  • WHY I LIKE IT

  • 좋아하는 이유

  • Flinto stood out for me because of the simplicity and thoughtfulness of the software, and the sheer addictiveness of quickly building out a prototype, getting it on the phone, testing it out, and then being able to iterate with very little fuss or pain! Top reasons to consider Flinto for you next project:
  • - Take your static screens and create prototypes that emulate a native iOS app
  • - As a designer, you can focus on creating the best work in your own chosen program. You don’t need to spend weeks wrestling with unfamiliar tools, learning how to create screen layouts, managing big libraries of UI elements, etc.
  • - Use all the real estate of your desktop screen and manage your workflow through a minimal, responsive workspace
  • - Sharing and set up are easy and the product flow is light touch
  • - It works offline! Amazing when you are road testing your ideas
  • For more details on Flinto, follow this hands-on tutorial I put together.
  • For quickly measuring pixels of any asset directly on your computer screen
  • —Mel He, Software Engineer, Digital Shop, Bay Area
  • HOW I USE IT

  • I use xScope to quickly measure visual assets on the screen. For many of the apps and assets I work on for clients, there are no design guides or specifications. For instance, there is rarely instruction as to how many pixels an asset should be off from the vertical edge. I’ve also used it to identify color values, which saves me from opening up Photoshop.
Image of 1985 article
  • Using your cursor, you can easily drop guidelines and move indicators to measure pixels of elements, directly on your screen
  • WHY I LIKE IT

  • Instead of emailing people hundreds of times asking for every spec, I can get the measurements right away with xScope. It’s infinitely better than guessing and enduring back-and-forth messaging for every little layout detail.
0 Comments