Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)

100 %
0 %
Information about Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)
Design

Published on December 24, 2013

Author: IzaskunSezVelasco

Source: slideshare.net

Description

Diseño y usabilidad en aplicaciones móviles para iphone contado de una forma muy visual y amena.

Diseño print Diseño web Creatividad USABILIDAD Y DISEÑO DE APLICACIONES MÓVILES izaskunsaez.es Diseño Gráfico www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign www.linkedin.com/in/izaskunsaez www.izaskunsaez.es @isaezdesign

Usabilidad y estilo al servicio de una experiencia de usuario inolvidable www.izaskunsaez.es @isaezdesign

Si nuestra app mola... www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es Ilustración: Igor fernández @isaezdesign

www.izaskunsaez.es Ilustración: Igor fernández @isaezdesign

Si nuestra app NO mola... www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es Ilustración: Igor fernández @isaezdesign

www.izaskunsaez.es Ilustración: Igor fernández @isaezdesign

www.izaskunsaez.es Ilustración: Igor fernández @isaezdesign

¿Cual es el papel del diseñador? www.izaskunsaez.es @isaezdesign

DISEÑO DE APLICACIONES ¿Cómo se interactuará con ella? Características interfaz Patrones de usuario www.izaskunsaez.es ¿Cuá será su aspecto/ESTILO? Aspecto general Texturas Colores Branding @isaezdesign

Todo empieza por www.izaskunsaez.es @isaezdesign

LA IDEA www.izaskunsaez.es @isaezdesign

http://www.mopapp.com/topapps Sirve para investigar qué apps se encuentran en el TOP en diferentes países y diferentes dispositivos. www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

PREGUNTARTE QUÉ quiero que haga mi app A QUIÉN se dirige la app CÓMO funcionaría mi app LA IDEA DÓNDE se usaría principalmente la app

LA IDEA ¿Dirigida al entrenimiento? QUÉ quiero que haga mi app ¿Dirigida a la utilidad? Diseño más enfocado a lo visual o enfocado a la usabiliadad

Hombres Niños A QUIÉN se dirige la app Mujeres LA IDEA Adultos

LA IDEA ¿En movimiento? CÓMO funcionaría/se usará mi app ¿En compañía? ¿Es para disfrutar individualmente? ¿De forma más estática o relajada? ¿Para un uso muy ocasional o más intenso? El tamaño de los botones o acciones a realizar serán distintos.

LA IDEA ¿De noche? ¿De día? ¿En lugares con mucha gente? ¿En ambientes relajados? DÓNDE ¿En sitios con conexión wifi o 3G se usaría principalmente la app ¿En privado? ¿En público? ¿Al aire libre? ¿En una discoteca?

¿Qué y cuánta tecnología nos rodea?

Pensar en las conexiones entre dispositivos puede ayudarte www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

¿Hacia qué lado se inclina tu idea de app? www.izaskunsaez.es @isaezdesign

Utilidad Entretenimiento Vs Ilustración: Izaskun Sáez www.izaskunsaez.es @isaezdesign

Existe ya TU IDEA www.izaskunsaez.es @isaezdesign

No pasa nada www.izaskunsaez.es @isaezdesign

INVESTIGA QUE YA ESTÁ HECHO www.izaskunsaez.es @isaezdesign

Y MEJÓRALO www.izaskunsaez.es @isaezdesign

LA IDEA www.izaskunsaez.es LA EJECUCIÓN @isaezdesign

Hay muchas cosas a tener en cuenta www.izaskunsaez.es @isaezdesign

Apps Nativas Vs HTLM5 www.izaskunsaez.es @isaezdesign

Apps Nativas Experiencia de usuario más rica y un mejor rendimiento ACCESO A DISPOSITIVOS Explota al máximo cada una de las prestaciones integradas en los dispositivos, tales como acelerómetro, calendario, agenda de contactos, audio y vídeo, 3D, y así un largo etcétera. FACILIDAD PARA GENERAR INGRESOS Las aplicaciones nativas se distribuyen fácilmente a través de las tiendas de aplicaciones como App Store, Android Market, y Amazon Appstore, HTML5 FACILIDAD DE DESARROLLO Es más sencillo dar forma al contenido usando HTML y CSS en lugar de las bibliotecas nativas de iOS o Android RAPIDEZ DE DESARROLLO Evaluar y probar su trabajo en tiempo real, creando un ciclo virtuoso de codificación, actualización y repetición. MENOR COSTE DE DESARROLLO MULTIPLATAFORMA CONTROL DE LA DISTRIBUCIÓN Y FACILIDAD DE ACTUALIZACIÓN FUENTE: http://www.businessinsider.com/battle-between-html5-vs-native-apps-2013-55 www.izaskunsaez.es @isaezdesign

A qué accede una Aplicación nativa www.izaskunsaez.es ¿ ¿ @isaezdesign

Cámara TRASERA CONEXIONES Cámara frontal WIFI 3G MULTI TOUCH ROFONO MIC altavoZ GIROSCOPIO Ilustración: Izaskun Sáez

Ya has pensado mucho y tienes... www.izaskunsaez.es @isaezdesign

TU IDEA

COMENCEMOS www.izaskunsaez.es @isaezdesign

STORYBOARD Se trata de ilustrar en formato de secuencia el uso de la app con la intención de explicar un ejemplo de uso de la misma www.izaskunsaez.es @isaezdesign

STORYBOARD ¿Para qué sirve esto? sar posibles Pen gares de uso lu p de nuestra ap www.izaskunsaez.es Pensar en el diseño de usabilidad de la App Detectar mejor el público objetivo de nuestra app @isaezdesign

rb.com http://zu www.izaskunsaez.es @isaezdesign

RYBOARD STO ZzAlert L PROYECTO NOMBRE DE s edo do rm ido y má ¡Si em pre me qu ha pas ad o la parad a! un a vez se me de an 30 mi nut os ¡Y aún me qu ed en bu s! de viaje ¡M ad ru gón! Otra vez lleg aré tarde al tra bajo e o qu e me avi sas Oja lá hu bie ra alg es de lleg ar 5 mi nut os ant ad a... a mi par ¿Y eso cóm o fun cio na? ¡Descárg ate Z zA LERT ! ZZ ALERT ¡A todos nos ha pasado! ¿Cuál es la idea? ar nuestros A todos nos gusta aprovech leer, estudiar... viajes en bus o metro para ir, ¡sobre todo pero tamboén para dorm madrugones! cuando nos pegamos esos cabezadita Aprovechas para echar una la parada!. en el bus... ¡y se te pasa casa a última Llegas tarde a trabjar o a tu hora, al instituto... la du ración La App calcul ará nte GPS... de l viaje media 25 MIN sporte elige tu tran elig da elige tu para Casco Viejo ALERT Casco Viejo ÁDespiŽrtame! ¡La solución! unos minutos Una App que te despierte pero no es antes de llegar a tu parada... or, sino que simplemente un despertad ocalización y mediante el uso de la geol forma exacta GPS la App te avisará de da cuando ya que detectará tu para teniendo en realmemte esté próxima, cuante retrasos imprevistos. I PI P 5 MIN Si LO LLEVAS EN EL BOLSILLO EMITIRÁ UN ZUMBIDO + VIBRACIÓN STORYBOARD aez.es www.izaskuns ZzAlert ¿Y qué pasa si se llega da a mi para daretra sa la hora de porqu e hay tráfico o por lo que sea? elige tu transporte ÀBarakaldo-Bilbao? ará s con música, la par Si llevas auriculare que te despertará! y ¡emitirá un zumbido bao? ECTO elige tu parada ndo ¿Barakaldo-Bil ! ¡Despiértame NOMBRE DEL PROY elige tu trayecto te des pertará usa En ese mo me nto s 3 mét odo s uno de esto PI ¿bus? ¿metro? tren? ¿eusko e tu trayecto Àbus? Àmetro? tren? Àeusko p loca liza ción la Ap Media nte geos ant es de tu parada sab rá 5 min uto e des pertarte que deb Si NECESITAS ALGO MÁS FUERTE PARA DESPERTARTE UNIREMOS: ZUMBIDO+VIBRACIÓN+TIMBRE DE LLAM ADA ¡La aplicación solo te avisa rá qued en muy poco s minutos cuan do llega r a tu dest ino! para PI PI PI No tend rás que esta r pend de la para da porqu e Z iente recalcula rá la llega da constzAle rt ánte ment e ¡Con ALERT llega rás a tiem po trabajo y podrás dorm ir esa al media horit a en el bus! ¡Con Z zAle rt, apro el dorm ir sin mied o a vech arte viaje para pasa tu para da! ¡Ge nia l! ALERT www.izaskunsaez.es www.izaskunsaez.es @isaezdesign

LOS MOCKUPS Plasmar en un papel ya sea a mano o de forma digital el esquema y funcionalidades de la nueva app. www.izaskunsaez.es @isaezdesign

Personalmente creo que... la mejor manera de empezar es con papel y lápiz www.izaskunsaez.es @isaezdesign

http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the-iPhone-User-Experience www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

.com dribbble www.izaskunsaez.es iPhone A pp por J ake Nicolella en Beha nce @isaezdesign

t.com pinteres www.izaskunsaez.es Imagen b y Fernand o Guillen @isaezdesign

NOMBRE DEL PROYECTO Mockup 12:00 PM ESPECIFICACIONES Mockup 12:00 PM ESPECIFICACIONES Mockup 12:00 PM ESPECIFICACIONES Mockup 12:00 PM ESPECIFICACIONES www.izaskunsaez.es

VENTAJAS DEL PROTOTIPADO EN PAPEL... Más rapidéz (dibujar-borrar-dibujar) Lo ideal: hacerlo junto con el cliente Es el BOCETO PREVIO al mockup digital www.izaskunsaez.es @isaezdesign

después... pulir los mockup de forma digital www.izaskunsaez.es @isaezdesign

http://b us 2012-w inessofsoftw a orksho p-team re.org/2012/1 -misfit0 toys-ou /bostput/ www.izaskunsaez.es @isaezdesign

Xcode www.izaskunsaez.es @isaezdesign

n pp desig e.net SVOY a c w.behan http://ww www.izaskunsaez.es @isaezdesign

Visto ent Pinteres www.izaskunsaez.es @isaezdesign

Una VEZ TENGAMOS CLARO... nuestro esquema de uso de la app... vamos con el diseño www.izaskunsaez.es @isaezdesign

Conocer ALGUNOS DATOS os dará una visión de la importancia del diseño de una app www.izaskunsaez.es @isaezdesign

En Julio de 2013 la App Store cumplió www.izaskunsaez.es 5 años @isaezdesign

año 25 600.000 60 2012 1.000.000 mil millones de descargas realizadas (Marzo 2012) año 2013 mil millones de descargas realizadas (Octubre 2013) aplicaciones en el Apple Store aplicaciones en el Apple Store http://appleweblog.c om www.izaskunsaez.es @isaezdesign

Cada segundo que pasa, 800 aplicaciones salen de los servidores de Apple para instalarse en un iPhone o un iPad Fuente: http://www.lavanguardia.com http://www.lavanguardia.com/tecnologia/20130710/54377379926/app-store-apple-cumple-cinco-anos-creado-nueva-industria.html www.izaskunsaez.es @isaezdesign

En la App Store hay + de 400.000 aplicaciones que no se han descargado ni una sola vez www.izaskunsaez.es @isaezdesign

Yo no quiero ser una de esas... vamos a hacer que nos deseen www.izaskunsaez.es @isaezdesign

{ { No hay una segunda oportunidad para causar una buena primera impresión www.izaskunsaez.es @isaezdesign

DISEÑO VISUAL Y ATRACTIVO www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

Si tenemos en cuenta la ENORME COMPETENCIA Tendrás que tener DAR IMPORTANCIA el diseño La app Store es como un gran escaparate en la que destacar y presentar un diseño atractivo puede ser determinante, empezando por su ICONO www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

¿ por qué es tan importante el diseño de un buen icono? www.izaskunsaez.es @isaezdesign

¡Soy una App que molo mucho! PORQUE ES NUESTRA TARJETA DE PRESENTACIÓN PORQUE ACTÚA COMO PEQUEÑO RECORDATORIO PARA QUE UTILICE LA APP www.izaskunsaez.es ¡eh! ¡estoy aquí ! @isaezdesign

REGLAS BÁSICAS ISEÑO DE PARA EL D ICONO N BUEN U www.izaskunsaez.es @isaezdesign

EL TAMAÑO SÍ www.izaskunsaez.es RTA MPO I @isaezdesign

DISEÑO QUE FACILITE SU VISUALIZACIÓN ENTRE EL RESTO DE TODOS LOS ICONOS. www.izaskunsaez.es @isaezdesign

CONSEJO CUANTOS MENOS ELEMENTOS MEJOR www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

COSAS IMPORTANTES A TENER EN CUENTA PARA EL DISEÑO DE UN ICONO www.izaskunsaez.es @isaezdesign

El icono de la aplicación debe tener un diseño atractivo y amigable para llamar la atención del usuario Un icono mal diseñado, desagradable visualmente o que no se entiende lo que ofrece puede ser decisivo a la hora de que que el usuario decida descargarlo. www.izaskunsaez.es @isaezdesign

El icono de una app tiene que verse bien en diferentes tamaños y sobre diferentes backgrounds www.izaskunsaez.es @isaezdesign

El icono de una app aporta una información inicial al usuario un diseño correcto visualmente y atractivo un mejor funcionamiento de la app y más fiabilidad Los usuarios de iphone o iPad quieren tener cosas agradables en sus dispositivos www.izaskunsaez.es @isaezdesign

PARA ESTO... www.izaskunsaez.es @isaezdesign

Texto en el icono Un icono con texto será ILEGIBLE y quedará con un ASPECTO BORROSO O DE MANCHA cuando lo veamos en nuestro escritorio. www.izaskunsaez.es Para solucionar este problema opta por el Uso de una Inicial o como mucho unas siglas o en su defecto utiliza una imagen facilmente reconocible y memorizable. @isaezdesign

www.izaskunsaez.es @isaezdesign

El uso de formas reconocibles y de tamaño adecuado permitirá que el usuario reconozca el contenido de la App www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

El color no es solo esto www.izaskunsaez.es @isaezdesign

Escoge una paleta de colores reducida donde haya un color protagonista esto creará idea de marca www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.colourlovers.com En este site encontraréis cientos de paletas de colores. www.izaskunsaez.es @isaezdesign

el color PROVOCA SENSACIONES www.izaskunsaez.es @isaezdesign

¿Qúe aplicación creéis que dará más luz? www.izaskunsaez.es @isaezdesign

El color es mucho más llamativo y las formas son redondeadas, además son formas poco complejas para que su reconocimiento sea más rápido. Ideal para niños. www.izaskunsaez.es La austeridad en el uso del color y el realismo de la imagen del icono crean una imagen global que se dirige totalmente a un público adulto. @isaezdesign

Pero en todo hay excepciones www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

En resumen a tener en cuenta* 1 El tamaño A Tener en cuenta: - Tamaño del dispositivo 2 El Color Debemos vigilar el uso del color, si nos vamos a dirigir a un público adulto nos decantaremos por colores más serios u oscuros y si nos dirigimos a niños optaremos por una paleta más viva y colorista. * www.izaskunsaez.es 4 3 La gráfica Elegir las formas que comprondrán nuestro icono, sin querer meter un exceso de información, ten en cuenta que tu app ya irá incluida en una categoría dentro de la tienda (App Store) así que no hace falta que en icono representemos absolutamente todo lo que ofrecemos. QUEDAOS CON EL CONCEPTO Y RECORDAD MENOS SIEMPRE ES MÁS (o casi siempre) A veces hay que romper con todo Diferenciaos, destacad, los dispositivos móviles son un pequeño escaparate y nosotros cada vez tenemos menos tiempo (y paciencia) así que o nos ven o no existimos. @isaezdesign

USABILIDAD TODO lo anterior se aplica a la interfaz de usuario www.izaskunsaez.es @isaezdesign

Debemos pensar en el entorno y formas de uso de una App www.izaskunsaez.es @isaezdesign

Tamaño de la pantalla Vs www.izaskunsaez.es @isaezdesign

FORMA DE interactuar Vs www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

FORMA DE USO Vs imagen thinkstock http://www.leadpile.com www.izaskunsaez.es @isaezdesign

http://freshpeel.com/2012/06/where-dopeople-check-their-mobile-phones/ www.izaskunsaez.es @isaezdesign

Todos estos aspectos hay que tenerlos presentes a la hora de pensar el diseño de una app www.izaskunsaez.es @isaezdesign

El usuario de una App no mira OJEA www.izaskunsaez.es @isaezdesign

Menos pasos para realizar una acción Mayor y mejor visibilidad de los elementos Elementos táctiles fácilmente seleccionables Contenido útil www.izaskunsaez.es = abusar de información @isaezdesign

Vamos a centrarnos en algunas cosas concretas www.izaskunsaez.es @isaezdesign

EL TEXTO siempre tiene que ser legible www.izaskunsaez.es @isaezdesign

1 La tipografía La tipografía “verdana”, helvética y otras tipografías “sin serifes” son las que consiguen una lectura más rápida. Hola Vs Hola 2 La disposición del texto Texto enriquecido (títulos, subtítulos, destacados...etc) facilita la lectura al usuario. Texto en peso regular o medium (nunca light o thin porque se pierden los contornos). http://nathanbarry.com/app-design-handbook/ https://developer.apple.com/library/ios/documentation/userexperience/ www.izaskunsaez.es @isaezdesign

3 El tamaño del texto Por defecto el texto de párrafo (body) es de 34 pt Nunca debe bajar de los 22 pt Habrá que controlar el interlineado e interletrado para una legibilidad óptima 4 No abuses de tipografías www.izaskunsaez.es @isaezdesign

5 Contraste texto-fondo El texto color negro sobre fondo blanco resulta más “cómodo” de leer. Se puede poner para evitar demasiado contraste debido al propio brillo de la pantalla un negro al 5% para el fondo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet blandit viverra. Vestibulum eu magna id mauris cursus pellentesque eu ac erat. Negro al 100% Sobre blanco. www.izaskunsaez.es Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet blandit viverra. Vestibulum eu magna id mauris cursus pellentesque eu ac erat. Con 5% de negro en el fondo @isaezdesign

iOS Fonts página donde encontrareis las fuentes que usa apple por defecto App Fonts Fontspring. Para buscar más tipografías. How Much Does It Cost To Use A Font In My iOS App en Dinosaurs With Lazerz escrito por Craig Rozynski donde os hablará sobre el coste de comprar una fuente para vuestra app. developer.apple.com/library/ios/documentation Guía oficial de Apple sobre iOS Human Interface Guidelines www.izaskunsaez.es @isaezdesign

MÁS COSAS A TENER EN CUENTA www.izaskunsaez.es @isaezdesign

1 Los números Mostrar los números como números, a los usuarios les resultará muchos más fácil e inmediato reconocerlos. 3 Imágenes Las imágenes grandes reciben más atención, siempre que sea posible utilizaremos imágenes donde se vea claramente los detalles y la información. Lo aconsejable es que sean sencillas, limpias y amigables. Trabajar con formato PNG de 24 bits 2 Frases cortas Como ya hemos comentado, la interfaz que contenga una cantidad significativa de texto deberá tender hacia las frases cortas ya que los usuarios “usan cortos tiempos de atención” por lo que si se muestra un texto farragoso seguramente les ahuyentaremos. www.izaskunsaez.es 4 Botones y menú Diseño: Tendremos que dedicarle tiempo puesto que suponen el correcto uso de nuestra aplicación. Ubicación: A ser posible se colocarán en la parte inferior de la interfaz ya que estarán más accesibles. Tamaño: que podamos pulsarlo con la mayor comodidad posible y que sean bien visibles. @isaezdesign

7 Espacio en blanco No es necesario ni aconsejable llenar todos los huecos y esquinas de la página, los sitios con demasiado contenido tienden a ser molestos. Deja espacios visuales límpios para no agobiar al usuario y provocar su abandono. Como se suele decir en diseño: ¡Dame aire! www.izaskunsaez.es @isaezdesign

LAUNCH IMAGES edes te qu o No negr en www.izaskunsaez.es @isaezdesign

es lo que se muestra de tu app mientras se está cargando www.izaskunsaez.es @isaezdesign

zZzlert Ejemplo Splash Screens / Launch Images www.izaskunsaez.es @isaezdesign

Volvemos a la App Store www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

Ejemplo de proceso de un proyecto www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

11:56 AM IZAS 11:56 AM Tu Zalert Elige tu trayecto Metro 34 Viajas en metro ¿De dónde sales? Cercanías Cercanías ¿Cual es tu parada? min. Siguiente IZAS Volver Busca tu parada Elige tu transporte Tranvía IZAS Tu Zalert Volver Tu trayecto Volver 11:56 AM IZAS 11:56 AM IZAS Tu transporte Volver 11:56 AM Favoritos Tu cuenta Cercano Buscar Updates Favoritos Tu cuenta Cercano Buscar Updates Favoritos Tu cuenta Cercano Buscar Updates Favoritos Tu cuenta Cercano Buscar Updates Zlert Twitter Facebook Regístrate IZAS Volver 11:56 AM Registro Entrar Nombre de usuario Nombre de usuario Q¿Has olvidado tu contraseña? P W E R T Y U I O A S D F G H J K L Z X C V B N M 123 www.izaskunsaez.es space @ . return @isaezdesign

PALETA DE COLORES BÁSICA www.izaskunsaez.es @isaezdesign

zZzalert - alarma con geolocalización para no dormirte en el autobús, metro o tranvía. Elige tu ruta Login with Facebook Login with Twitter www.izaskunsaez.es Metro @isaezdesign

Pero el trabajo de un diseñador no acaba ahí... www.izaskunsaez.es @isaezdesign

Diseño redes sociales Diseño off line Diseño dentro de la estrategia de Marketing Diseño Landing o site de la App Y lo que surja... www.izaskunsaez.es @isaezdesign

Vamos a cambiar un poco de tercio... www.izaskunsaez.es @isaezdesign

Seguimos con más cosas a tener en cuenta... www.izaskunsaez.es @isaezdesign

El filtro de Apple www.izaskunsaez.es @isaezdesign

En 2010 Apple reveló sus guías de aprobación de aplicaciones 1. Nada de contenido para adultos. 2. Hay muchas aplicaciones de desarrolladores serios y profesionales, y no queremos que sus programas no estén con aplicaciones hechas por amateurs. Si has hecho una aplicación en pocos días, rápido y simplemente para que tus amigos te sorprendan, será rechazada de la tienda. 3. No necesitamos más aplicaciones de pedos. Textual del PDF, señores. 4. 5. 6. 7. 8. 9. No es que en Apple seamos maniáticos del control, sino que estamos comprometidos con que los usuarios disfruten de la mejor experiencia de usuario con las aplicaciones. ¿Emuladores escondidos en aplicaciones con otra descripción? Rechazada. ¿Clones repetidos de otras aplicaciones que ya fueron rechazadas? También rechazadas. Nada de frameworks de terceros para navegar por la web. Aplicaciones muy parecidas en diseño a cualquier promoción de Apple o con nombres parecidos a los productos de Apple, automáticamente rechazadas. Nada de widgets o algo parecido en el iOS. 10. Aplicaciones con contenido generado por usuarios que pueda ser ofensivo (como Chatroulette, por ejemplo), rechazadas. 11. Las aplicaciones que compartan archivos de forma ilegal, rechazadas. http://www.businessinsider.com/heres-why-it-really-sucks-to-be-an-app-reviewer-for-apple-2012-7#ixzz1zaB9ki4H www.izaskunsaez.es @isaezdesign

“creemos que tenemos la responsabilidad moral de mantener el porno fuera del iPhone. Las personas que quieran porno pueden comprar un teléfono Android”. Steve Jobs Esta frase se la dijo a un cliente de Apple que envió un e-mail a Steve Jobs quejándose del control moral que ejerce Apple en este proceso de revisión. www.izaskunsaez.es @isaezdesign

Enero 2013 Apple elimina la aplicación de 500px ya que puedes encontrar imágenes de contenido sexual http://www.applesfera.com/aplicaciones-ios-1/apple-elimina-la-aplicacion-de-500px-ya-que-puedes-encontrar-imagenes-de-contenido-sexual www.izaskunsaez.es @isaezdesign

4+ / No contiene material desagradable. 9+ / Puede contener situaciones leves o infrecuentes de violencia realista, fantástica o en dibujos animados y contenido sugestivo, maduro o de terror que puede no ser apropiado para menores de 9 años. 12+ / Puede contener lenguaje no apropiado leve o infrecuente, violencia realista, fantástica o en dibujos animados frecuente, y contenido maduro o sugestivo leve o no frecuente, y juegos de azar simulados que pueden no ser apropiados para menores de 12 años. 17+ / Puede incluir contenido maduro, sugestivo o de terror intenso y frecuente; más contenido sexual, alcohol, tabaco, y drogas que puede no ser apropiado para menores de 17 años. Los consumidores deben tener al menos 17 años para comprar aplicaciones con esta clasificación. Siempre que una aplicación con esta clasificación sea descargada, se mostrará un mensaje preguntando si el usuario tiene 17 años o más. Desarrollo de Aplicaciones para iOS – Guía Básica http://blog.staffcreativa.pe/desarrollo-aplicaciones-ios-apple/ www.izaskunsaez.es @isaezdesign

iOS app approvals http://en.wikipedia.org/wiki/IOS_app_approvals Apple busca proteger a los niños mediante nuevas directrices sobre las apps infantiles http://applicantes.com/apple-proteccion-ninos-nuevas-directrices-apps/ Como subir apps a Apple Store http://www.imaginanet.com/blog/como-subir-apps-a-apple-store.html Más transparencia: Apple revela sus guías de aprobación de aplicaciones y crea un consejo de revisiones http://www.applesfera.com/apple/mas-transparencia-apple-revela-sus-guias-de-aprobacion-de-aplicaciones-ycrea-un-consejo-de-revision-de-aplicaciones Trabajar en Apple revisando aplicaciones para la App Store no mola nada (y no adivinaríais el motivo) http://www.applesfera.com/curiosidades/trabajar-en-apple-revisando-aplicaciones-para-la-app-store-no-mola-nada Apple modifica algunas normas de revisión para las aplicaciones de sus tiendas http://www.applesfera.com/app-store-1/apple-modifica-algunas-normas-de-revision-para-las-aplicaciones-de-sus-tiendas Es hora de que la App Store mire a los juegos con otros ojos http://www.applesfera.com/aplicaciones-ios-1/es-hora-de-que-la-app-store-mire-a-los-juegos-con-otros-ojos www.izaskunsaez.es @isaezdesign

En la web veremos un gráfico que nos dice cuántos días se está tardando en el último mes en revisar las Apps http://reviewtimes.shinydevelopment.com/ www.izaskunsaez.es @isaezdesign

Hay mucho que leer ...

ivomynttinen.com/blog/ Un blog muy interesante dobre diseño en IOS7 www.izaskunsaez.es @isaezdesign

developer.apple.com/library/ios/de sign/index. html#//apple_ref/doc/uid/TP4001328 9 www.izaskunsaez.es @isaezdesign

Resoluciones & especificaciones Extraído de: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

www.izaskunsaez.es @isaezdesign

App Icons www.izaskunsaez.es @isaezdesign

User Interface www.izaskunsaez.es @isaezdesign

Tipografía www.izaskunsaez.es @isaezdesign

www.idev101.com/code/User_Interf ace/sizes.html www.izaskunsaez.es @isaezdesign

taybenlor.com/2013/05/21/designin g-for-ios.html www.izaskunsaez.es @isaezdesign

Densidad de pantalla www.izaskunsaez.es @isaezdesign

px píxeles por pulgada www.izaskunsaez.es Vs dp puntos por pulgada @isaezdesign

Un factor a tener en cuenta es la densidad de la pantalla. Esta se refiere a la cantidad de píxeles que entran en un determinado espacio físico y se mide en puntos por pulgada www.izaskunsaez.es @isaezdesign

La densidad de la pantalla, se mide de forma distinta según el sistema operativo. Cuantos más píxeles o puntos caben en una pantalla, mayor será la densidad de la misma y su resolución. www.izaskunsaez.es @isaezdesign

iOS solo cuenta con dos densidades retina y no retina www.izaskunsaez.es @isaezdesign

Algunas herramientas para saber la Densidad de pantalla www.izaskunsaez.es @isaezdesign

http://www.teehanlax.com/blog/density-converter/ www.izaskunsaez.es @isaezdesign

Conversor pixel densidad en App Store www.izaskunsaez.es @isaezdesign

http://www.adwe.es/diseno-web-2/dis eno-para-dispositivos-moviles-y-la-densidad-de-p antalla Diseño para dispositivos móviles y la densidad de pantalla www.izaskunsaez.es @isaezdesign

...etc www.izaskunsaez.es @isaezdesign

Aprender es algo contínuo

¡Gracias!

www.izaskunsaez.es @isaezdesign www.linkedin.com/in/izaskunsaez

izaskunsaez.es Diseño Gráfico Diseño print Diseño web Creatividad hola@izaskunsaez.es Skype: isaezdesign Agradecimiento especial a Igor Fernández por las ilustraciones. Su Twitter: igor_f_f

Add a comment

Related presentations

Related pages

Principios de diseño de interfaz para aplicaciones móviles ...

Principios de diseño de interfaz para aplicaciones móviles. ... Diseño y usabilidad en app móviles ... How To Design a Mobile App Signup ...
Read more

Diseño de aplicaciones: usabilidad y experiencia de usuario

... de diseño y usabilidad en apps ya ... de apps para Android; Usabilidad en aplicaciones ... aplicaciones iPhone Aplicaciones móviles App App ...
Read more

Diseño de apps móviles: ¿Qué es UX, UI y IxD? - yeeply.com

Atento a la importancia de la usabilidad y la ... UX y otro para UI. Veamos en qué se ... aplicaciones iPhone Aplicaciones móviles App App ...
Read more

Desarrollo Aplicaciones Móviles para iPhone - mavericks.cool

Desarrollo Aplicaciones Móviles para iPhone, ... Las mejores apps móviles para iPhone iOS en ... DISEÑO UX/UI. Nos preocupamos de la usabilidad y ...
Read more

Cómo diseñar interfaces para Apps en Photoshop? - YouTube

Adobe Photoshop puede facilitar el diseño de interfaces para aplicaciones móviles! ... interfaces para Apps en ... App UI/UX Design ...
Read more

Desarrolladores De Apps – Empresa Desarrollo Aplicaciones ...

Nosotros desarrollamos y diseñamos las mejores aplicaciones para iphone y ... apps; Web Design ... en aplicaciones móviles para desarrollo APPS ...
Read more

Aplicaciones móviles para startups - mavericks.cool

Diseño y Desarrollo de Aplicaciones móviles para ... aplicaciones móviles para iOS iPhone y ... UI. Nos preocupamos de la usabilidad y ...
Read more