SlideShare una empresa de Scribd logo
1 de 13
DISEÑO WEB
 Estructurar los elementos gráficos de
un sitio web para expresar
estéticamente la identidad visual de
una compañía u organización.
¿QUE ES?
ESTRUCTURAR
ELEMENTOS GRAFICOS
REALZAR LA IMAGEN DE
UNA EMPRESA Y
GENERAR CONFIANZA
AREAS DE LA PRACTICA
PROFESIONAL
 Diseño para información.
 Diseño para persuación.
 Diseño para educación.
TIPOS DE DISEÑO WEB
 El diseño web fijo, es el más
utilizado de la Internet, y es aquel que
permanece inalterable sea cual sea el
dispositivo donde se visualiza el sitio
web.
 El diseño web fluido o diseño web
líquido, es aquel que tiende a ocupar
todo el ancho de la pantalla.
 El diseño web elástico, es muy
parecido al fluido, sólo que en este
caso el contenido también crece junto
al ancho del diseño para rellenar la
pantalla.
 Diseño web sensible, es un tipo de
diseño que se transforma en función
del tipo de dispositivo o del ancho del
navegador web que lo visualiza.
ORGANIZACION DE LA
PAGINA
La estructura tradicional de una página
web es la siguiente:
 Un logotipo ubicado en la esquina
superior izquierda. Los usuarios pueden
hacer clic en la mayoría de los logotipos
y volver a la página de inicio.
 Un menú localizado a la derecha o a la
izquierda.
 Un encabezado que contiene el nombre
del sitio web, un banner de navegación y
un área reservada para un banner
(publicitario o de otro tipo).
Ejemplos de logotipos y banners
para una página web.
 El cuerpo principal de la página que
contiene la mayor parte de la información.
 Un pie de página que incluye información
útil como ser, la última actualización, un
vínculo a un formulario de contacto, un
vínculo al mapa del sitio, etcétera.
POSICIONAMIENTO
DE LA
INFORMACIÓN
• Los usuarios leen
desde la esquina
superior izquierda
hacia la esquina
inferior derecha.
ELECCIÓN DE
COLORES
• Se deben elegir en
función del
objetivo.
SELECCIÓN DE
IMÁGENES
• Usar imágenes
adecuadas que no
molesten al
usuario.
COLOR DE
FONDO
• Debe hacer un
contraste
apropiado.
• No dificultar la
lectura.
TIPOGRAFÍA
• Utilizar fuentes
clásicas.
• No utilizar más
de dos tipos de
fuente.
GRÁFICOS
• Tener cuidado
con los símbolos
que se utilizan
en sitios
internacionales.
FONDO NO RECOMENDABLE FONDO RECOMENDABLE
SIMBOLOS USADOS EN
EL DISEÑO WEB

Más contenido relacionado

La actualidad más candente

Aspectos tecnicos y esteticos de una pagina web
Aspectos tecnicos y esteticos de una pagina webAspectos tecnicos y esteticos de una pagina web
Aspectos tecnicos y esteticos de una pagina web
Junior Georghinno
 
Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Web
buciosinai
 
Anatomia de una página web
Anatomia de una página webAnatomia de una página web
Anatomia de una página web
noemi3012
 

La actualidad más candente (16)

Tendencias en Diseño Web
Tendencias en Diseño WebTendencias en Diseño Web
Tendencias en Diseño Web
 
Modulo Marketing en Redes Sociales. Clase Nº3. Prof. Diego del Pizzo. Fecha: ...
Modulo Marketing en Redes Sociales. Clase Nº3. Prof. Diego del Pizzo. Fecha: ...Modulo Marketing en Redes Sociales. Clase Nº3. Prof. Diego del Pizzo. Fecha: ...
Modulo Marketing en Redes Sociales. Clase Nº3. Prof. Diego del Pizzo. Fecha: ...
 
T05 dawebweb
T05 dawebwebT05 dawebweb
T05 dawebweb
 
Equipos de trabajo // Front end - Back end
Equipos de trabajo // Front end - Back endEquipos de trabajo // Front end - Back end
Equipos de trabajo // Front end - Back end
 
Aspectos tecnicos y esteticos de una pagina web
Aspectos tecnicos y esteticos de una pagina webAspectos tecnicos y esteticos de una pagina web
Aspectos tecnicos y esteticos de una pagina web
 
Tipografía en diseño web
Tipografía en diseño webTipografía en diseño web
Tipografía en diseño web
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
Página de Fans en Facebook: Manual de Iniciación en la Creación y Gestión
Página de Fans en Facebook: Manual de Iniciación en la Creación y GestiónPágina de Fans en Facebook: Manual de Iniciación en la Creación y Gestión
Página de Fans en Facebook: Manual de Iniciación en la Creación y Gestión
 
Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013
 
Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Web
 
DISEÑO DE PAGINAS WES 2.0
DISEÑO DE PAGINAS WES 2.0DISEÑO DE PAGINAS WES 2.0
DISEÑO DE PAGINAS WES 2.0
 
Anatomia de una página web
Anatomia de una página webAnatomia de una página web
Anatomia de una página web
 
Pagina web mia_2
Pagina web mia_2Pagina web mia_2
Pagina web mia_2
 
Emi
EmiEmi
Emi
 
Buenas Practicas - Web
Buenas Practicas - WebBuenas Practicas - Web
Buenas Practicas - Web
 
Tenes una pagina en facebook
Tenes una pagina en facebookTenes una pagina en facebook
Tenes una pagina en facebook
 

Destacado

Defending Democracy: Confronting Modern Barriers to Voting Rights in America
Defending Democracy: Confronting Modern Barriers to Voting Rights in AmericaDefending Democracy: Confronting Modern Barriers to Voting Rights in America
Defending Democracy: Confronting Modern Barriers to Voting Rights in America
All That Philly Jazz
 
Actividad final de Redes
Actividad final de RedesActividad final de Redes
Actividad final de Redes
UNAED
 
Handbook of child and adolescent anxiety disorders
Handbook of child and adolescent anxiety disordersHandbook of child and adolescent anxiety disorders
Handbook of child and adolescent anxiety disorders
Springer
 
Etica ecologica
Etica ecologicaEtica ecologica
Etica ecologica
almapeca
 
L1 creation stories
L1   creation storiesL1   creation stories
L1 creation stories
school
 
Contrato de outsoursing
Contrato de outsoursingContrato de outsoursing
Contrato de outsoursing
abraham moreno
 
Scott_Rough Draft with Edits Final Draft
Scott_Rough Draft with Edits Final DraftScott_Rough Draft with Edits Final Draft
Scott_Rough Draft with Edits Final Draft
Elijah Scott
 
Redes 3er.parcial[1]
Redes 3er.parcial[1]Redes 3er.parcial[1]
Redes 3er.parcial[1]
maricela soto
 
Http _www.amipci.org
Http  _www.amipci.orgHttp  _www.amipci.org
Http _www.amipci.org
Julio Carreto
 
Los cuatro pilares_delors
Los cuatro pilares_delorsLos cuatro pilares_delors
Los cuatro pilares_delors
alexcruz28
 
CLIMA ORGANIZACIONAL
CLIMA ORGANIZACIONALCLIMA ORGANIZACIONAL
CLIMA ORGANIZACIONAL
LFRL
 

Destacado (20)

Avaliacao como-processo-de-construcao
Avaliacao como-processo-de-construcaoAvaliacao como-processo-de-construcao
Avaliacao como-processo-de-construcao
 
Defending Democracy: Confronting Modern Barriers to Voting Rights in America
Defending Democracy: Confronting Modern Barriers to Voting Rights in AmericaDefending Democracy: Confronting Modern Barriers to Voting Rights in America
Defending Democracy: Confronting Modern Barriers to Voting Rights in America
 
Leadership Behaviors which Drive Results
Leadership Behaviors which Drive ResultsLeadership Behaviors which Drive Results
Leadership Behaviors which Drive Results
 
Actividad final de Redes
Actividad final de RedesActividad final de Redes
Actividad final de Redes
 
El Poder Ejecutivo
El Poder EjecutivoEl Poder Ejecutivo
El Poder Ejecutivo
 
Handbook of child and adolescent anxiety disorders
Handbook of child and adolescent anxiety disordersHandbook of child and adolescent anxiety disorders
Handbook of child and adolescent anxiety disorders
 
Ieee
IeeeIeee
Ieee
 
Etica ecologica
Etica ecologicaEtica ecologica
Etica ecologica
 
L1 creation stories
L1   creation storiesL1   creation stories
L1 creation stories
 
Contrato de outsoursing
Contrato de outsoursingContrato de outsoursing
Contrato de outsoursing
 
Scott_Rough Draft with Edits Final Draft
Scott_Rough Draft with Edits Final DraftScott_Rough Draft with Edits Final Draft
Scott_Rough Draft with Edits Final Draft
 
Sevicios De Calidad Y Distintivos H Y M
Sevicios De Calidad Y Distintivos H Y MSevicios De Calidad Y Distintivos H Y M
Sevicios De Calidad Y Distintivos H Y M
 
Redes 3er.parcial[1]
Redes 3er.parcial[1]Redes 3er.parcial[1]
Redes 3er.parcial[1]
 
Http _www.amipci.org
Http  _www.amipci.orgHttp  _www.amipci.org
Http _www.amipci.org
 
Social Media - Marketing in the 21st Century
Social Media - Marketing in the 21st CenturySocial Media - Marketing in the 21st Century
Social Media - Marketing in the 21st Century
 
Exposicion tics 16340321
Exposicion tics 16340321Exposicion tics 16340321
Exposicion tics 16340321
 
Los cuatro pilares_delors
Los cuatro pilares_delorsLos cuatro pilares_delors
Los cuatro pilares_delors
 
CLIMA ORGANIZACIONAL
CLIMA ORGANIZACIONALCLIMA ORGANIZACIONAL
CLIMA ORGANIZACIONAL
 
Proyecto creacion club_futbol_fpi
Proyecto creacion club_futbol_fpiProyecto creacion club_futbol_fpi
Proyecto creacion club_futbol_fpi
 
Archivo primer bimestre
Archivo primer bimestreArchivo primer bimestre
Archivo primer bimestre
 

Similar a ¿Qué es el diseño web?

10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
Domestika
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación web
Alexis Morillo
 

Similar a ¿Qué es el diseño web? (20)

Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
Sitio web
Sitio webSitio web
Sitio web
 
Sitio web
Sitio webSitio web
Sitio web
 
Introducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginasIntroducción tamaños y tipos de paginas
Introducción tamaños y tipos de paginas
 
estructura y diseño web partes de una pagina web
estructura y diseño web partes de una pagina webestructura y diseño web partes de una pagina web
estructura y diseño web partes de una pagina web
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
Caracteristicas y partes_de_un_sitio_web
Caracteristicas y partes_de_un_sitio_webCaracteristicas y partes_de_un_sitio_web
Caracteristicas y partes_de_un_sitio_web
 
Actividad 1
Actividad 1Actividad 1
Actividad 1
 
Diseño de Interfaces
Diseño de InterfacesDiseño de Interfaces
Diseño de Interfaces
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Marketing Online
Marketing OnlineMarketing Online
Marketing Online
 
Introducción creación web aula madrid tecnología 2010
Introducción creación web aula madrid  tecnología 2010Introducción creación web aula madrid  tecnología 2010
Introducción creación web aula madrid tecnología 2010
 
Diseño web samanta
Diseño web samanta Diseño web samanta
Diseño web samanta
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
 
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 0910 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
10 Claves Para Rentabilizar Una Web Marketing Por Internet Abascal 26 03 09
 
Usabilidad y accesibilidad web
Usabilidad y accesibilidad webUsabilidad y accesibilidad web
Usabilidad y accesibilidad web
 
Diseño de navegación web
Diseño de navegación webDiseño de navegación web
Diseño de navegación web
 
Guía de evaluación heurística de sitios web
Guía de evaluación heurística de sitios webGuía de evaluación heurística de sitios web
Guía de evaluación heurística de sitios web
 
Moretti
MorettiMoretti
Moretti
 
Sitios web
Sitios webSitios web
Sitios web
 

Último

PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
Leo Florez
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
ilvrosiebp
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
karendaza9506
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
CristianGmez22034
 

Último (20)

PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILEARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
ARQUITECTURA ESCOLAR PÚBLICA COMO PATRIMONIO MODERNO EN CHILE
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Espacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientesEspacios únicos creados por nuestros clientes
Espacios únicos creados por nuestros clientes
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 

¿Qué es el diseño web?

  • 2.  Estructurar los elementos gráficos de un sitio web para expresar estéticamente la identidad visual de una compañía u organización. ¿QUE ES?
  • 4. REALZAR LA IMAGEN DE UNA EMPRESA Y GENERAR CONFIANZA
  • 5. AREAS DE LA PRACTICA PROFESIONAL  Diseño para información.  Diseño para persuación.  Diseño para educación.
  • 6. TIPOS DE DISEÑO WEB  El diseño web fijo, es el más utilizado de la Internet, y es aquel que permanece inalterable sea cual sea el dispositivo donde se visualiza el sitio web.  El diseño web fluido o diseño web líquido, es aquel que tiende a ocupar todo el ancho de la pantalla.
  • 7.  El diseño web elástico, es muy parecido al fluido, sólo que en este caso el contenido también crece junto al ancho del diseño para rellenar la pantalla.  Diseño web sensible, es un tipo de diseño que se transforma en función del tipo de dispositivo o del ancho del navegador web que lo visualiza.
  • 8. ORGANIZACION DE LA PAGINA La estructura tradicional de una página web es la siguiente:  Un logotipo ubicado en la esquina superior izquierda. Los usuarios pueden hacer clic en la mayoría de los logotipos y volver a la página de inicio.  Un menú localizado a la derecha o a la izquierda.  Un encabezado que contiene el nombre del sitio web, un banner de navegación y un área reservada para un banner (publicitario o de otro tipo).
  • 9. Ejemplos de logotipos y banners para una página web.
  • 10.  El cuerpo principal de la página que contiene la mayor parte de la información.  Un pie de página que incluye información útil como ser, la última actualización, un vínculo a un formulario de contacto, un vínculo al mapa del sitio, etcétera.
  • 11. POSICIONAMIENTO DE LA INFORMACIÓN • Los usuarios leen desde la esquina superior izquierda hacia la esquina inferior derecha. ELECCIÓN DE COLORES • Se deben elegir en función del objetivo. SELECCIÓN DE IMÁGENES • Usar imágenes adecuadas que no molesten al usuario. COLOR DE FONDO • Debe hacer un contraste apropiado. • No dificultar la lectura. TIPOGRAFÍA • Utilizar fuentes clásicas. • No utilizar más de dos tipos de fuente. GRÁFICOS • Tener cuidado con los símbolos que se utilizan en sitios internacionales.
  • 12. FONDO NO RECOMENDABLE FONDO RECOMENDABLE
  • 13. SIMBOLOS USADOS EN EL DISEÑO WEB