Diseño y usabiliad en sitios web Universidad Miguel Hernández
102
FORO DE PERIODISTAS / FACULTAD DE PERIODISMO UNIVERSIDAD MIGUEL HERNÁNDEZ Diseño Web #dwebumh
-
Upload
isidro-perez -
Category
Education
-
view
378 -
download
0
description
El director creativo de Avanza Soluciones de Comunicación, Isidro Pérez, clausuraba la sexta edición del Foro de Periodistas UMH ofreciendo una interesante charla en la que dio algunas claves de diseño y usabilidad para sacar el mayor rendimiento a blogs y sitios web profesionales. Isidro Pérez, habló sobre iniciación al diseño web, conceptos básicos, retos y problemas más habituales, desde la arquitectura de la información, a la usabilidad y accesibilidad de las páginas. En este sentido, Pérez puso en valor la herramienta de WordPress (blogs) para el desarrollo de proyectos periodísticos online. Además, este joven empresario alicantino explicó a los alumnos de 4º de Periodismo el proyecto LinktoStart de apoyo a jóvenes emprendedores, animando a los estudiantes de Periodismo a desarrollar proyectos y presentarlos para la edición de 2012. El VI Foro de Periodistas se ha desarrollado en el edificio Atzavares y han participado en el mismo ponentes con Jordi Galobart, experto en usabilidad y accesibilidad, la fotógrafa Chiara Cabrera, fotógrafa responsable de Comunidades Online de la Casa Encendida, la periodista Cristina Vílchez o el propio Isidro Pérez, todos bajo la coordinación del profesor de Periodismo de la UMH, Sergio Martínez Mahugo. http://periodismo.umh.es/2011/11/30/isidro-perez-clausura-el-vi-foro-de-periodistas-umh/
Transcript of Diseño y usabiliad en sitios web Universidad Miguel Hernández
FORO DE PERIODISTAS / FACULTAD DE PERIODISMO UNIVERSIDAD MIGUEL HERNÁNDEZ
Diseño Web
#dwebumh
Presentación• Tres años trabajando en Madrid para Delvico Redcell•Caja Madrid, PWC, Grupo Santander•Revolución a crisis de las .com 2000 / 2001
Presentación• 2002 Vuelta a Alicante•Mi perfil profesional no termina de encajar en ninguna empresa•2005 empiezo a trabajar como Freelance•2009 creamos Avanza Soluciones
Orígenes del Diseño Web
Orígenes del Diseño Web
El maravilloso html...
Orígenes del diseño web
Orígenes del Diseño Web
El maravilloso html...… hacíamos lo que podíamos
Orígenes del diseño web
… hacíamos lo que podíamos
Orígenes del diseño web
… y llegaron los gifs
Orígenes del diseño web
http://www.11points.com/Web-Tech/11_Best_Old_School_Animated_GIFs
…y las intros en flash
Orígenes del diseño web
…y vino a salvarnos el css y el dhtml
Orígenes del diseño web
…y para aportarnos más interactividad jQuery y Html5
Orígenes del diseño web
Perfiles del diseñador web
Perfilesdel diseñador web
1
Perfiles del diseñador web
1. Diseñador gráfico
1
Perfiles del diseñador web
2. Arquitecto dela información
1
Perfiles del diseñador web
3. Diseñador de aplicacionesusabilidad y multimedia
1
Perfiles del diseñador web
Diseñador multidisciplinarcon conocimientos “avanzados” de
programación
1
Perfiles del diseñador web
Oferta de empleo:Buscamos diseñador gráfico/multimedia licenciado en Bellas Artes con experiencia en el diseño de interfaces. Especialista en el uso de Adobe Photoshop, Dreamweaver, Illustrator , Flash.
Conocimientos avanzados en programación smarty, php, lynux, mysql, javascript, jquery. Experiencia demostrable en integración de plataformas Wordpress, Joomla, Magento, Prestashop
Se valorarán conocimientos en Silver Light, Asp, .Net , 3DStudio Max, Maya y Blender, Marketing Online, posicionamiento en buscadores y aptitudes comerciales.
1
Perfiles del diseñador web
Oferta de empleo:
675€
Diseño + Usabilidad = Diferenciación
y Coherencia
Isidro Pérez
Diseño Web
Diseño = sentimientos●Con el diseño buscamos captar la atención del usuario
●Buscamos fidelizarlo y que se sienta cómodo e identificado usando nuestra web
Isidro Pérez
Diseño Web
Isidro Pérez
Diseño Web
Isidro Pérez
Diseño Web
Isidro Pérez
Diseño Web
Diseño = marca + diferenciación●Crear un ambiente que el usuario identifiquecon una determinada marca
●Diferenciarnos de nuestros competidores●Fomentar la personalidad empresarial
Isidro Pérez
Diseño Web
Isidro Pérez
Diseño Web
Isidro Pérez
Diseño Web
Isidro Pérez
Diseño Web
Isidro Pérez
Diseño Web
Diseño = orden + belleza●Crear diseños proporcionados●Utilizar colores que combinen de forma adecuada
●Sensación de orden y armonía
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
●1,1,2,3,5,8,13,21,34,55,89....●La sucesión inicia con 1 y 1, y a partir de ahí cada elemento es la suma de los dos anteriores.
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Belleza = Sucesión de Fibonacci
Isidro Pérez
Diseño Web
Usabilidad = Coherencia + Orden
Isidro Pérez
Diseño Web
Usabilidad = Retícula●La retícula nos ayuda a establecer unacoherencia lógica a nuestra navegación
●Los elementos importantes siempre estaránordenados de la misma forma
●Cumpliremos una jerarquía de la información
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Isidro Pérez
Diseño Web
Ejemplos de Retícula
Limitaciones de los CMS
Isidro Pérez
Diseño web para CMS
Tipo de licencia
GPL
Plataforma MultiplataformaEscrito en: PHP, MYSQLVersión 3,2,1
Wordpress
Isidro Pérez
Tipo de licencia
GPL
Plataforma Windows, GNU/Linux, Mac OS X
Escrito en: PHPVersión 1.6
Joomla
Diseño web para CMS
Isidro Pérez
Diseño web para CMS
Isidro Pérez
Tipo de licencia
GPL
Plataforma MultiplataformaEscrito en: PHPVersión 7,8
Drupal
Diseño web para CMS
Isidro Pérez
Diseño web para CMS
Isidro Pérez
Tipo de licencia
OSL Ver. 3
Plataforma MultiplataformaEscrito en: PHPVersión 1.4.1.1
Magento Commerce
Diseño web para CMS
Isidro Pérez
Diseño web para CMS
Isidro Pérez
Tipo de licencia
OSL Ver. 3
Plataforma MultiplataformaEscrito en: PHPVersión 1.4.5.1
Prestashop
Diseño web para CMS
Isidro Pérez
Tipo de licencia
GPL
Plataforma MultiplataformaEscrito en: PHPVersión 2,1
Moodle
Diseño web para CMS
Isidro Pérez
Tipo de licencia
GPL
Plataforma MultiplataformaEscrito en: PHPVersión 7,0
Boonex Dolphin
Diseño web para CMS
Nos adaptamos a los nuevos formatos
Formatos para Diseño Web
Formatos para Diseño Web
Formatos para Diseño Web
Isidro Pérez
¿Como se organiza un diseñador web?
Isidro Pérez
¿Como se organiza y produce un Diseñador Web
-Organización/Gestión de proyectos -Prototipado/Usabilidad del proyecto-Diseño Web-Maquetación y desarrollo-Otras áreas
Organización Diseñador Web
Isidro Pérez
Organización y gestión de proyectos
Organización Diseñador Web
Isidro Pérez
Openproj
Organización Diseñador Web
Isidro Pérez
Abanq
Organización Diseñador Web
Isidro Pérez
Libre Office
WriterCalcImpress
Organización Diseñador Web
Isidro Pérez
Thunderbird
-Correo-Calendario Compartido-Contactos
Sincronizacióncon Android
Organización Diseñador Web
Isidro Pérez
Prototipado y usabilidad del proyecto
Organización Diseñador Web
Isidro Pérez
Pencil
-PlugginFirefox
Organización Diseñador Web
Isidro Pérez
BalasamicMockups
Organización Diseñador Web
Isidro Pérez
Inkscape
Organización Diseñador Web
Isidro Pérez
Fireworks
Organización Diseñador Web
Isidro Pérez
Diseño web
Isidro Pérez
Desarrollo Web con Open Source
Gimp
Isidro Pérez
Maquetación y desarrollo
Organización Diseñador Web
Isidro Pérez
Desarrollo Web con Open Source
Aptana
Isidro Pérez
Desarrollo Web con Open Source
Dreamweaver
Isidro Pérez
Desarrollo Web con Open Source
WebDeveloperToolbar (Firefox,Chrome)
Isidro Pérez
Desarrollo Web con Open Source
Otras áreas
Isidro Pérez
Desarrollo Web con Open Source
Cinelerra
Isidro Pérez
Desarrollo Web con Open Source
Avidemux
Isidro Pérez
Desarrollo Web con Open Source
Audacity
Isidro Pérez
Desarrollo Web con Open Source
Blender
Isidro Pérez
Desarrollo Web con Open Source
¿Como seleccionar nuevas herramientas?
Isidro Pérez
Desarrollo Web con Open Source
¿Como seleccionar nuevas herramientas?
-Que nos resulte útil para nuestro trabajo-Que haya documentación y tutoriales disponibles-Una comunidad activa que actualice la herramienta
Isidro Pérez
Algunos casos prácticos
Isidro Pérez
5 “tips” para empezar
Isidro Pérez
Navega + investiga
www.coolwebsites.dkwww.creatiu.com
www.lacriaturacreativa.com
Isidro Pérez
Analiza analiza y analiza
Isidro Pérez
Oportunidad vs Perfección“Si está todo controlado signifca
que no vas lo suficientementerápido”
Isidro Pérez
Enfócate en el clientede tu cliente
“Traslada tu personalidad a los diseñospero no te desvíes el foco
del cliente”
MUCHAS GRACIAS!!!!
Isidro PérezAvanza Soluciones
twitter: @isidroperezblog: www.isidroperez.com
Empresa: www.avanzaentinternet.comEmprendedores: www.linktostart.com
