SlideShare una empresa de Scribd logo
1 de 8
Diseño web para
diseñadores gráficos
  (Cómo pasar del papel a la web)




          www.scuain.com
Tecnologías
       Cliente                    Servidor
         (FrontEnd)                   (BackEnd)



· (X)HTML                    · ASP, ASP.net
· CSS (Hojas de estilo)      · PHP
· JavaScript                 · Java
· Flash + Action Script      · Ruby On Rails
                             · ...
Etapas
1) Arquitectura de la información
  Organización de la estructura de la web: secciones, categorías...

2) Prototipado
  Bocetos/Esquemas que muestran los elementos de cada página

3) Diseño - Look & Feel
  Aspecto visual de la página

4) Programación
  XHTML + CSS + JS: Maquetación + Diversas funcionalidades
  Programación Flash + AS: Carga elementos + efectos
  Integración con la programación servidor
Tipos de web
· XHTML: Diseño centrado en el usuario
  · Información
  · Diseño: convenciones establecidas (usabilidad). Periódico
  · Ágil y tecnología estándar
  · Mejor para posicionamiento en buscadores y analítica
· Flash: Impacto
  · Publicidad
  · Diseño: sin restricciones (≠ libertad total). Poster
  · Más lenta y tecnología propietaria
  · Peor para posicionamiento en buscadores y analítica
Diseñar para la web
· Diseño gráfico ≠ diseño web
  · XHTML vs. Flash
  · Limitaciones de la pantalla: resoluciones y configuraciones
  · Tipografía: fuentes de sistema y legibilidad
  · Lectura en F
  · Diseño fijo vs liquido. Diseño reescalable
  · Formatos de imágenes (GIF, JPEG, PNG) y limitaciones
  · Home vs. páginas interiores
  · Equilibrio entre estímulo visual e información
Usabilidad
· Aspecto fundamental en el diseño web
  · Ojeamos. Jerarquía visual
  · El menú
  · Dónde estamos y a dónde vamos
  · Convenciones: logo, enlaces, buscador
  · Consistencia: retículas y resto de elementos
  · Sin esperas. Velocidad de carga y transiciones
  · Sin elementos móviles
  · Redacción de textos
Más info
· Libros
 · Manual de Estilo Web. Principios básicos para la creación de sitios web
 · No me hagas pensar
· Blogs
 · Smashing Magazine (www.smashingmagazine.com)
 · Usalo (www.usalo.es)
· Galerías
 · CSS Manía (www.cssmania.com)
 · The FWA (www.thefwa.com)
¡GRACIAS!




  Cualquier duda
scuain@gmail.com

Más contenido relacionado

Destacado

UX Nights Vol 02.03: Equipos ágiles de UX
UX Nights Vol 02.03: Equipos ágiles de UXUX Nights Vol 02.03: Equipos ágiles de UX
UX Nights Vol 02.03: Equipos ágiles de UXUX Nights
 
Consenso Fiscal segundo semestre 2014
Consenso Fiscal segundo semestre 2014Consenso Fiscal segundo semestre 2014
Consenso Fiscal segundo semestre 2014PwC España
 
Now zoom banking.
Now zoom banking.Now zoom banking.
Now zoom banking.NOW/UNIT
 
NOW/ Zoom on Banking Update
NOW/ Zoom on Banking UpdateNOW/ Zoom on Banking Update
NOW/ Zoom on Banking UpdateNOW/UNIT
 
Ibm cognitive commerce for banking final
Ibm cognitive commerce for banking finalIbm cognitive commerce for banking final
Ibm cognitive commerce for banking finalChris Yaldezian
 
Arquitectura SOA y herramientas .net
Arquitectura SOA y herramientas .netArquitectura SOA y herramientas .net
Arquitectura SOA y herramientas .netJuan Pablo
 

Destacado (7)

UX Nights Vol 02.03: Equipos ágiles de UX
UX Nights Vol 02.03: Equipos ágiles de UXUX Nights Vol 02.03: Equipos ágiles de UX
UX Nights Vol 02.03: Equipos ágiles de UX
 
Consenso Fiscal segundo semestre 2014
Consenso Fiscal segundo semestre 2014Consenso Fiscal segundo semestre 2014
Consenso Fiscal segundo semestre 2014
 
Estrategia Multicanal en la era del Cliente Digital
Estrategia Multicanal en la era del Cliente DigitalEstrategia Multicanal en la era del Cliente Digital
Estrategia Multicanal en la era del Cliente Digital
 
Now zoom banking.
Now zoom banking.Now zoom banking.
Now zoom banking.
 
NOW/ Zoom on Banking Update
NOW/ Zoom on Banking UpdateNOW/ Zoom on Banking Update
NOW/ Zoom on Banking Update
 
Ibm cognitive commerce for banking final
Ibm cognitive commerce for banking finalIbm cognitive commerce for banking final
Ibm cognitive commerce for banking final
 
Arquitectura SOA y herramientas .net
Arquitectura SOA y herramientas .netArquitectura SOA y herramientas .net
Arquitectura SOA y herramientas .net
 

Similar a Diseño web para diseñadores gráficos

Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Karla Arosemena
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño webciwmx
 
Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webYadith Gomez Nolasco
 
Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webYadith Gomez Nolasco
 
INTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxINTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxMariselaBardales1
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño webOmar Sosa-Tzec
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño WebLorena Guerrero
 
Buenas prácticas para el desarrollo Web
Buenas prácticas para el desarrollo WebBuenas prácticas para el desarrollo Web
Buenas prácticas para el desarrollo Webgueste60889d
 
Diseño con códigos
Diseño con códigosDiseño con códigos
Diseño con códigosIreneF
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasPeter Concha
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbasAvanet
 
Planeación de sitios web
Planeación de sitios webPlaneación de sitios web
Planeación de sitios webVictor Juarez
 
U2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdfU2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdfVICTORMORO11
 
DISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDDISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDsaidi-12barcelo
 
Presentación Diseño WEB-Wireframe.pptx
Presentación Diseño WEB-Wireframe.pptxPresentación Diseño WEB-Wireframe.pptx
Presentación Diseño WEB-Wireframe.pptxLenaSanper1
 

Similar a Diseño web para diseñadores gráficos (20)

Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-web
 
Metodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-webMetodologia para-diseno-de-paginas-web
Metodologia para-diseno-de-paginas-web
 
Gestión web con éxito
Gestión web con éxitoGestión web con éxito
Gestión web con éxito
 
INTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptxINTRODUCCION AL DISEÑO WEB.pptx
INTRODUCCION AL DISEÑO WEB.pptx
 
Principios básicos de diseño web
Principios básicos de diseño webPrincipios básicos de diseño web
Principios básicos de diseño web
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 
Buenas prácticas para el desarrollo Web
Buenas prácticas para el desarrollo WebBuenas prácticas para el desarrollo Web
Buenas prácticas para el desarrollo Web
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Diseño con códigos
Diseño con códigosDiseño con códigos
Diseño con códigos
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Html5 y otras yerbas
Html5 y otras yerbasHtml5 y otras yerbas
Html5 y otras yerbas
 
Manejo y diseño de una pagina web
Manejo y diseño de una pagina webManejo y diseño de una pagina web
Manejo y diseño de una pagina web
 
Diseno web
Diseno webDiseno web
Diseno web
 
Planeación de sitios web
Planeación de sitios webPlaneación de sitios web
Planeación de sitios web
 
U2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdfU2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdf
 
DISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WEDDISEÑO Y MANEJO DE PAGINAS WED
DISEÑO Y MANEJO DE PAGINAS WED
 
Diseño web moderno desde cero
Diseño web moderno desde ceroDiseño web moderno desde cero
Diseño web moderno desde cero
 
Presentación Diseño WEB-Wireframe.pptx
Presentación Diseño WEB-Wireframe.pptxPresentación Diseño WEB-Wireframe.pptx
Presentación Diseño WEB-Wireframe.pptx
 

Último

Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosErickOv
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfjpgaraglia03
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...ORIETTA POLIFRONI
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxlou lou
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxlou lou
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevantesantiagovelez61
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfacoellob
 

Último (7)

Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito Electronicos
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdf
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptx
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptx
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevante
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdf
 

Diseño web para diseñadores gráficos

  • 1. Diseño web para diseñadores gráficos (Cómo pasar del papel a la web) www.scuain.com
  • 2. Tecnologías Cliente Servidor (FrontEnd) (BackEnd) · (X)HTML · ASP, ASP.net · CSS (Hojas de estilo) · PHP · JavaScript · Java · Flash + Action Script · Ruby On Rails · ...
  • 3. Etapas 1) Arquitectura de la información Organización de la estructura de la web: secciones, categorías... 2) Prototipado Bocetos/Esquemas que muestran los elementos de cada página 3) Diseño - Look & Feel Aspecto visual de la página 4) Programación XHTML + CSS + JS: Maquetación + Diversas funcionalidades Programación Flash + AS: Carga elementos + efectos Integración con la programación servidor
  • 4. Tipos de web · XHTML: Diseño centrado en el usuario · Información · Diseño: convenciones establecidas (usabilidad). Periódico · Ágil y tecnología estándar · Mejor para posicionamiento en buscadores y analítica · Flash: Impacto · Publicidad · Diseño: sin restricciones (≠ libertad total). Poster · Más lenta y tecnología propietaria · Peor para posicionamiento en buscadores y analítica
  • 5. Diseñar para la web · Diseño gráfico ≠ diseño web · XHTML vs. Flash · Limitaciones de la pantalla: resoluciones y configuraciones · Tipografía: fuentes de sistema y legibilidad · Lectura en F · Diseño fijo vs liquido. Diseño reescalable · Formatos de imágenes (GIF, JPEG, PNG) y limitaciones · Home vs. páginas interiores · Equilibrio entre estímulo visual e información
  • 6. Usabilidad · Aspecto fundamental en el diseño web · Ojeamos. Jerarquía visual · El menú · Dónde estamos y a dónde vamos · Convenciones: logo, enlaces, buscador · Consistencia: retículas y resto de elementos · Sin esperas. Velocidad de carga y transiciones · Sin elementos móviles · Redacción de textos
  • 7. Más info · Libros · Manual de Estilo Web. Principios básicos para la creación de sitios web · No me hagas pensar · Blogs · Smashing Magazine (www.smashingmagazine.com) · Usalo (www.usalo.es) · Galerías · CSS Manía (www.cssmania.com) · The FWA (www.thefwa.com)
  • 8. ¡GRACIAS! Cualquier duda scuain@gmail.com