interactive_design/mobile_design 38

모바일 앱 디자이너가 꼭 알아야 할 벤치마킹 사이트 13선

출처 : http://ppss.kr/archives/24086 모바일 앱 디자이너가 꼭 알아야 할 벤치마킹 사이트 13선 2014년 7월 14일 by 정진호 화면구성에 대한 고민. 고민. 고민. 각 페이지의 프레임을 제공하거나 장면전환의 아이디어를 얻고 싶은 사람들에게 벤치마킹은 언제나 필요하다. 간단하게 각 사이트가 어떠한 특징이 있는지만 정리해 보고자 한다. 정리기준: 카테고리 유/무, 기타 특징. 1. http://www.mobile-patterns.com/ 카테고리(OK) 안드로이드/아이폰 화면 제공. 2. http://uxarchive.com/ 카테고리(OK) 아이폰 전용. 별도의 앱만 따로 볼 수 있는 기능 제공. 3. http://pttrns.com/ 카테고리(OK) 아이폰/아이패드/iOS7..

프로그래밍 없이 혼자하는 앱개발 툴app building tools

앱 인벤터 app inventor 를 이용하면 자신이 원하는 간단한 아이폰, 안드로이드 앱을 만들어 볼수 잇습니다. 토드 교수님 수업에 가르치고 있습니다. 그외에도 다양한 앱 빌딩 툴들이 쏟아져 나오고 있습니다. 만약에 만들고자 하는 앱이 간단한 거라면 개발자 없이 직접 만들어 볼 수 있습니다. http://mashable.com/2013/12/03/build-mobile-apps/

터치기기를 위한 디자인 팁 9가지

1. 가장 중요한 터치 영역을 확인하라 2. 콘텐츠를 컨트롤 위에 배치하라... 3. 선례에 따르는 것이 좋다 4. 화면 크기만 보고 터치 특성이 같다고 생각하면 안 된다 5 .모든 데스크탑 디자인도 터치를 고려해서 만들어야 한다. 6. 터치 영역은 최소 44*29 픽셀 이상으로 하라 7. 수직으로 44 픽셀 vertical rhythm을 만들어라 8. 아이콘이 클 수록, 가까이 있을수록 터치가 쉽다 (Fitts의 법칙) 9. 스크린만 생각하고 디자인하지 말고, 센서를 생각하고 디자인하라 http://bahns.net/5673522

앱비쥬얼 디자인에 필요한것: 앱 패턴 갤러리, UI 가이드, 그리드, 아이콘

모바일 앱 패턴 갤러리 http://www.mobile-patterns.com/http://www.lovelyui.com/ 아이폰 UI 가이드 https://developer.apple.com/library/ios/design/ 안드로이드 UI 가이드http://developer.android.com/design/index.html 한글 무료 글꼴, 웹폰트http://blog.bsmind.co.kr/890 아이폰 그리드 참고http://uielements.net/mobile-guides/iphone-5-grid-psd/ 안드로이드 그리드 참고http://developer.android.com/design/style/metrics-grids.html 좋은 앱디자인 참고http://www.webdesigne..

모바일 앱 이미지 프로토타입 만드는 툴과 방법

http://baak.me/2012/08/%EC%A0%84%EB%9E%B5%EC%A0%81%EC%9D%B8-%EB%AA%A8%EB%B0%94%EC%9D%BC-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9D%B4%ED%95%91%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%8B%A4%EC%A0%84-%EA%B0%80%EC%9D%B4%EB%93%9C/ 파워포인트나 아크로뱃리더를 이용하는 것도 같은 원리 https://groups.google.com/forum/?fromgroups#!topic/uiuxstudy/XGzDXiJGZQA 키노트 프로토타이핑 만드는 방법 영상http://vimeo.com/20778110http://keynotekungfu.com/ 가장 쉬운방..

본과 김보람 4학년 학생의 최고의 여친 모바일앱 론칭(안드로이드폰)

안드로이드폰 가진 학생 모두 다운로드 해주세요!!! 인터렉티브 미디어 디자인 2 수업과 A-Camp 에서 진행한본과 4학년 김보람 학생과 김민수 님이 개발한 최고의 여친 마켓에 올라갔습니다. 데모영상http://vimeo.com/56126269/ 안드로이드 폰 플레이스토어에서 '최고의 여친'을 찾아주세요. 페이스북 로그인은 문제가 있을수 있습니다. 아이디 만들어서 로그인하셔요.

[인터렉티브 미디어] 디바이스별 해상도

Tablet, mobile, & email iPad: 1024x768 Landscape orientationiPad: 768x1024 Portrait orientationiPhone: 640x960 Portrait orientationEmail: 640px Desktop environments Standard: 972px Widescreen: 1144px IAB-Friendly: 1000px (Allows for a 320px-wide sidebar that can house a 300x250 unit with 10px of padding.)출처 :http://www.ravelrumba.com/photoshop-grids/ 위의 출처에 가면 아래쪽에 각각의 해상도에 해당하는 포토샵 화일이 들어있는 zip..

인터렉티브 미디어 디자인 1: iPad 화면 스케치 관련 정보 및 템플릿

3주차 과제에 도움이 될만한 샘플이 있는 기사 : http://www.onextrapixel.com/2010/09/29/40-brilliant-examples-of-sketched-ui-wireframes-and-mock-ups/ http://inspirationfeed.com/inspiration/25-examples-of-wireframes-and-mockups-sketches/ http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups 참고 : (인디자인을 사용한 예는 아니니 작업 프로세스만 봐둘것) http://webdesignledger.com/tips/getting-started-in..

CSS3 참고자료 by 전무익님

앱센터 목요일 스터디에서 전무익님이 발표해주신 내용입니다. 출처 : http://uxuistudy.tistory.com/14 발표 슬라이드 http://slides.html5rocks.com/#css3-title (출처: http://www.html5rocks.com/ - 구글에서 제작한 슬라이드입니다.) 참고자료 Safari CSS Reference: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Introduction.html Mozilla CSS Reference: https://developer.mozilla.org/en/CSS/CSS_Reference 예제 http:/..

모바일웹 만들기

1. 모바일 페이지 작성시 사파리로 테스트 방법 1) 스마트폰으로 직접 페이지 열어보기 2) 사파리 브라우저를 이용한 개발자 도구 이용하기 3) 다운로드 http://www.apple.com/safari/download/ 위의 URL에서 웹브라우저 인스톨러를 다운로드 받습니다. 인스톨 하시고 나서 오른쪽 상단에 톱니바퀴같은것을 보실수 있습니다. 이 톱니 바퀴를 선택하시면 여러개의 메뉴가 보이고 "기본설정.."이라는것을 선택하시면 새로운 창에 여러가지가 뜹니다. 그중에 고급 아이콘을 클릭하시면 하단에 "메뉴 막대에서 개발자용 메뉴 보기"라는 것에 체크박스를 표시합니다. 그리고 나서 네모난 종이같은 아이콘은 상단 에서 클릭하면 "개발자용"이라고 메뉴가 새로 보이는 것을 확인할수 있습니다. "개발자용"을 클릭..