Diseño Web - Claudio Adrian Natoli Michieli

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

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

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

Diseño web para CMS

Isidro Pérez

Diseño web para CMS

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

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