SlideShare una empresa de Scribd logo
Partes de una
página web
Elementos o funcionalidades que la componen
En función estructura
Cabecera o header
Cuerpo o body
Pie de página o footer
¿Vemos un ejemplo real?
En función de su contenido
Inicio o home
Contacto
Productos y servicios
Blog
Política de privacidad
Estructura y Contenido
Estructura
Cabecera o Header
Logo de la empresa
El menú de navegación
Un cuadro de búsqueda
Pequeña descripción de la web
<header>Contenido de la cabecera</header>
Cuerpo o Body
Contenido principal
Contenido de contacto
<body>Contenido del cuerpo</body>
Pie de página o Footer
Menú simplificado
Información de contacto Botones de redes
sociales Logo de la empresa
Enlace a la política de privacidad
<footer>El contenido del pie de página</footer>
Contenido
Inicio o home
- Información más relevante de tu empresa.
- CTA o llamada a la acción: comprar/suscribirse…
- Resumen de productos y servicios:
imagen o eslogan, (3 segundos)
- Ofertas que destacar
- Indicadores de éxito:
Número de clientes o empleados
Países en los que operas
Años de experiencia
- Testimonios o colaboraciones:
Reseñas de Google
Logos de empresas para las que has trabajado
Welcome Back
Forgot password?
Remember me
Username
Password
Log In
Log in with Facebook
Log in with Twitter
Log in with Google
Don’t have an Account? Sign Up
P R O D U C T S
H O M E R E S O U R C E S P O R T F O L I O C O N T A C T U S
COMPANYLOGO
S i g n u p L o g i n
Contact us
“Aeoaeo eoa dolor sit amet, consectetuer adipiscing elit, sed diam nomy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat “
SUBSCRIBE NOW
SUBSCRIBE LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
Name
Email
Contacto
- Formulario de contacto:
Contactar contigo las 24 horas del día.
- Dirección de correo profesional:
Direcciones de correo personalizadas con tu dominio.
Productos y servicios
Información detallada de productos o servicios
Ventajas, principales características, a quién están dirigidos, precio, gastos de envío…
Llamada a la acción
Textos como «¡Lo quiero!», «Añadir a la cesta» o «Reserva ya» ayudarán a conducir a tus visitas
hacia el objetivo final.
Responsive
Website
Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat wisi
SHOP NOW
PRODUCT NEW ARRIVAL SERVICES
HOME
COMPANY
NAME
20$ 20$ 20$ 20$
Summer Sale
COMPANY
NAME
Responsive
Website
Lorem ipsum dolor sit amet consectetuer adipiscing elit sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat wisi
SHOP NOW
20$ 20$
Summer Sale
PRODUCT NEW ARRIVAL SERVICES
HOME
COMPANY
NAME
Responsive
Website
Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat wisi
SHOP NOW
20$
Save 10%
20$
Save 10%
20$
Save 10%
20$
Save 10%
20$
Save 10%
20$
Save 10%
20$ 20$ 20$
Summer Sale
Blog
Buscador
No todas las web lo incluyen
Formulario de suscripción
Genera leads de calidad
Enviar el contenido que publicas
Categorías y etiquetas
Estructurar el contenido
Mejorar la usabilidad de tu sitio
Política de privacidad
Proporcionar a tus
usuarios toda la
información relacionada
con el procesamiento de
los datos que se recopilan
a través de tu sitio web.
Generalmente se ubica en
el pie de página o footer,
avisos de cookies o
formulario de registro.
Generadores de Paleta de Colores HTML
ColorHunt
Se actualiza diariamente con nuevas paletas de colores HTML creadas por los miembros de la comunidad.
Cada esquema contiene tonos sencillos y elegantes que pueden servir de inspiración para tu proyecto.
Busca en las opciones “New” o “Popular” el esquema perfecto.
Lorem ipsum
Color Picker por HTML Color Codes
Accede rápidamente al código RGB, Hex o HSL de un color, haciendo un solo clic.
Se te presentan varios esquemas y sombras, basados en la relación que hayas elegido.
Puedes exportar el esquema recién creado en formato Hex, RGB, HTML, CSS o sCSS.
Cohesive Colors
Toma la paleta de color en HTML que estás utilizando y te permite agregar un poco de tinta utilizando
el color de tu elección.
Generara rápidamente una alteración en la paleta de color que ya tenías, y que la hará de tu agrado.
Color Hexa
Una “enciclopedia de colores”, ingresando el valor de un color, regresa la mayor información posible.
Su composición, colores alternativos, diferentes esquemas de color de la muestra, así como vistas
previas del color en diferentes elementos de diseño.
CC Color HTML Wheel de Adobe
Color Wheel de Adobe es bastante útil para aquellos diseñadores que confían ciegamente en las
funciones de Adobe CC. Te da la opción de guardar tus paletas de colores en HTML y directamente
cargarlas en tus programas de Adobe CC.
BrandColors
colores utilizan algunas marcas y startup líderes en el mercado para diferenciar su negocio de su
competencia?, en donde autores y miembros de la comunidad suben esquemas de colores
que?utilizan las compañías más exitosas.
Colourcode
Hay que mover el cursor por la pantalla, hasta que encuentres el color raíz, y luego utiliza la opción de
composición para crear tu paleta HTML de colores completa.
Cuando estés satisfecho con el resultado, descárgalo en formato .scss, .less o como archivo .png.
COLOURlovers
Es uno de los favoritos de muchos diseñadores, gracias a la inspiración de colores que aporta.
Incluye cientos de esquemas de color, plantillas y variación de sombras, que te van a ayudar a que a
través del diseño?puedas comunicar el mensaje correcto que deseas.
Coolors
Para crear una paleta de color, necesitas seleccionar tus colores iniciales, ubicarlos y presionar la barra
espaciadora?de tu teclado hasta que llegues al color adecuado a tu concepto de diseño.
Puedes guardar las paletas de color generadas para que otros la utilicen.
Material Palette
Generador complementario de google que crea paletas sencillas basadas en los diseños de materiales.
Te da sugerencias de qué colores primarios y secundarios puedes utilizar en tu esquema.
Te sugiere qué colores son los más apropiados al comparar fondos con textos.
Mudcube Sphere
Sofisticado, te permite diseñar esquemas que cumplan las necesidades de tus visitantes.
Ofrece 10 diferentes opciones de composición y permite probar y comparar esquemas.
La paleta se descarga en formato .AL o .ACO, que puedes utilizar directamente en Illustrator o Photoshop.
Paletton
Ideal cuando se trabaja con una marca que ya tenga colores y obtener un esquema complementario.
Permite rápidamente generar un boceto que ilustre como puedes implementar los colores en tu sitio.
Palettr
Para buscar esquemas de colores basados únicamente en el tema que se estén utilizando en una industria.
Las paletas son generadas a partir de una composición de tonos provenientes de una librería de imágenes.

Más contenido relacionado

Similar a Diseño Web PRESENTACION.pdf

TIENDA VIRTUAL
TIENDA VIRTUALTIENDA VIRTUAL
¿Cómo hacer un blog?
¿Cómo hacer un blog?¿Cómo hacer un blog?
¿Cómo hacer un blog?
Paola Elizaga
 
Avance SEO para TODOS
Avance SEO para TODOSAvance SEO para TODOS
Avance SEO para TODOS
Daniel Bustos
 
red tienda
red tiendared tienda
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
Esli Chavez R
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2
Raúl Carrión
 
Taller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes ScoutsTaller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes Scouts
Victor Camacho
 
Manual de Prestashop 1.5+ en Español – WebHome & WebDime
Manual de Prestashop 1.5+ en Español – WebHome & WebDime Manual de Prestashop 1.5+ en Español – WebHome & WebDime
Manual de Prestashop 1.5+ en Español – WebHome & WebDime
Brox Technology
 
Curso SEO y SEM - nivel básico
Curso SEO y SEM - nivel básicoCurso SEO y SEM - nivel básico
Curso SEO y SEM - nivel básico
Roberto Ardanaz Espronceda
 
html y css
html y csshtml y css
html y css
CarlosMontilla29
 
Enamora a tu público sin olvidarte de google
Enamora a tu público sin olvidarte de googleEnamora a tu público sin olvidarte de google
Enamora a tu público sin olvidarte de google
Ana María Ros Domínguez
 
Curso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercioCurso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercio
Igone Castillo
 
Gana dinero con tu blog
Gana dinero con tu blogGana dinero con tu blog
Gana dinero con tu blog
Juan Peñasco
 
Magento seo-on-the-fly-#mm15 es
Magento seo-on-the-fly-#mm15 esMagento seo-on-the-fly-#mm15 es
Magento seo-on-the-fly-#mm15 es
Oscar Reales
 
Cómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressCómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpress
Beatriz González Pozo
 
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
samybowman
 
Taller de blogs (1era.parte)
Taller de blogs (1era.parte)Taller de blogs (1era.parte)
Taller de blogs (1era.parte)
Victor Camacho
 
Compu
CompuCompu
Taller de posicionamiento en buscadores SEO
Taller de posicionamiento en buscadores SEOTaller de posicionamiento en buscadores SEO
Taller de posicionamiento en buscadores SEO
Servilia
 
Taller SEO (Mayo 2010)
Taller SEO (Mayo 2010)Taller SEO (Mayo 2010)
Taller SEO (Mayo 2010)
Jose Mª Fonseca
 

Similar a Diseño Web PRESENTACION.pdf (20)

TIENDA VIRTUAL
TIENDA VIRTUALTIENDA VIRTUAL
TIENDA VIRTUAL
 
¿Cómo hacer un blog?
¿Cómo hacer un blog?¿Cómo hacer un blog?
¿Cómo hacer un blog?
 
Avance SEO para TODOS
Avance SEO para TODOSAvance SEO para TODOS
Avance SEO para TODOS
 
red tienda
red tiendared tienda
red tienda
 
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
 
Seo para prestashop V.2
Seo para prestashop V.2Seo para prestashop V.2
Seo para prestashop V.2
 
Taller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes ScoutsTaller de Blog. Jóvenes Scouts
Taller de Blog. Jóvenes Scouts
 
Manual de Prestashop 1.5+ en Español – WebHome & WebDime
Manual de Prestashop 1.5+ en Español – WebHome & WebDime Manual de Prestashop 1.5+ en Español – WebHome & WebDime
Manual de Prestashop 1.5+ en Español – WebHome & WebDime
 
Curso SEO y SEM - nivel básico
Curso SEO y SEM - nivel básicoCurso SEO y SEM - nivel básico
Curso SEO y SEM - nivel básico
 
html y css
html y csshtml y css
html y css
 
Enamora a tu público sin olvidarte de google
Enamora a tu público sin olvidarte de googleEnamora a tu público sin olvidarte de google
Enamora a tu público sin olvidarte de google
 
Curso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercioCurso crea señaletica atractiva para tu comercio
Curso crea señaletica atractiva para tu comercio
 
Gana dinero con tu blog
Gana dinero con tu blogGana dinero con tu blog
Gana dinero con tu blog
 
Magento seo-on-the-fly-#mm15 es
Magento seo-on-the-fly-#mm15 esMagento seo-on-the-fly-#mm15 es
Magento seo-on-the-fly-#mm15 es
 
Cómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpressCómo crear una tienda online en wordpress
Cómo crear una tienda online en wordpress
 
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
Aprende A Crear Un Lugar Web Profesional Con El Nuevo Codecademy
 
Taller de blogs (1era.parte)
Taller de blogs (1era.parte)Taller de blogs (1era.parte)
Taller de blogs (1era.parte)
 
Compu
CompuCompu
Compu
 
Taller de posicionamiento en buscadores SEO
Taller de posicionamiento en buscadores SEOTaller de posicionamiento en buscadores SEO
Taller de posicionamiento en buscadores SEO
 
Taller SEO (Mayo 2010)
Taller SEO (Mayo 2010)Taller SEO (Mayo 2010)
Taller SEO (Mayo 2010)
 

Último

Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador ValenciaCatalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
VISTAS O PROYECCIONES ISO- A.pdf .......
VISTAS O PROYECCIONES ISO- A.pdf .......VISTAS O PROYECCIONES ISO- A.pdf .......
VISTAS O PROYECCIONES ISO- A.pdf .......
kevinmacri02
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
GuillermoAlejandroCh6
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
SarahVzquezVsquez
 
manual pdf de empresa postres maria jose
manual pdf de empresa postres maria josemanual pdf de empresa postres maria jose
manual pdf de empresa postres maria jose
tatianezpapa
 
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdfPLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
RaquelAntonella2
 
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial ValenciaCatalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
CarlosDanielAlanocaT1
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
slaimenbarakat
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
ValentinaBalmaceda2
 
Mueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entornoMueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entorno
Artevita muebles
 
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptxIntroduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
albujarluisl
 
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador ValenciaCatalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
AMADO SALVADOR
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
jeanlozano33
 
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdfAcceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
José María
 
mapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integradormapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integrador
Richard17BR
 
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANOMOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
gonzalezdfidelibus
 
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
IzaakAzaga
 
Babilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESABabilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESA
SarahVzquezVsquez
 
Arquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto VenezolanoArquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto Venezolano
imariagsg
 

Último (20)

Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador ValenciaCatalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
Catalogo General Azteca Ceramica Distribuidor Oficial Amado Salvador Valencia
 
VISTAS O PROYECCIONES ISO- A.pdf .......
VISTAS O PROYECCIONES ISO- A.pdf .......VISTAS O PROYECCIONES ISO- A.pdf .......
VISTAS O PROYECCIONES ISO- A.pdf .......
 
puentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documentopuentes_Puentes_Semipermanentes.documento
puentes_Puentes_Semipermanentes.documento
 
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
RAMESSEUM_ EL TEMPLO DE MILLONES DE AÑOS DE RAMSÉS II - Mundos antiguos digit...
 
manual pdf de empresa postres maria jose
manual pdf de empresa postres maria josemanual pdf de empresa postres maria jose
manual pdf de empresa postres maria jose
 
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdfPLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
PLAN CONTABLE GENERAL EMPRESARIAL (1).pdf
 
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial ValenciaCatalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
Catalogo General Grespania Ceramica Amado Salvador Distribuidor Oficial Valencia
 
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptxSEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
SEMANA 02 TRAZOS DE POLIGONALES TOPOGRÁFICAS 04.pptx
 
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitecturaEl Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
El Movimiento Moderno en Venezuela. Y los cambios que trajo en la arquitectura
 
Portfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina BalmacedaPortfolio_itsmevalen/ Valentina Balmaceda
Portfolio_itsmevalen/ Valentina Balmaceda
 
Mueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entornoMueble Universal la estantería que se adapta a tu entorno
Mueble Universal la estantería que se adapta a tu entorno
 
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptxIntroduccion-a-la-vida-de-Johannes-Kepler.pptx
Introduccion-a-la-vida-de-Johannes-Kepler.pptx
 
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador ValenciaCatalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
Catalogo General Durstone Distribuidor Oficial Amado Salvador Valencia
 
metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.metodologia empleada en smart toolsboxs.
metodologia empleada en smart toolsboxs.
 
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdfAcceso y utilización de los espacios públicos. Comunicación y señalización..pdf
Acceso y utilización de los espacios públicos. Comunicación y señalización..pdf
 
mapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integradormapa de macuspana tabasco por centro integrador
mapa de macuspana tabasco por centro integrador
 
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANOMOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
MOVIMIENTO MODERNO VENEZUELA E IMPACTO URBANO
 
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdfBROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
BROCHURE QONDESA ABRIL 19 OK_pdf_LLQ.pdf
 
Babilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESABabilonia, historia romana Y ARQUITECTURA JAPONESA
Babilonia, historia romana Y ARQUITECTURA JAPONESA
 
Arquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto VenezolanoArquitectura Moderna Contexto Venezolano
Arquitectura Moderna Contexto Venezolano
 

Diseño Web PRESENTACION.pdf

  • 1. Partes de una página web Elementos o funcionalidades que la componen
  • 2. En función estructura Cabecera o header Cuerpo o body Pie de página o footer ¿Vemos un ejemplo real? En función de su contenido Inicio o home Contacto Productos y servicios Blog Política de privacidad Estructura y Contenido
  • 3. Estructura Cabecera o Header Logo de la empresa El menú de navegación Un cuadro de búsqueda Pequeña descripción de la web <header>Contenido de la cabecera</header> Cuerpo o Body Contenido principal Contenido de contacto <body>Contenido del cuerpo</body> Pie de página o Footer Menú simplificado Información de contacto Botones de redes sociales Logo de la empresa Enlace a la política de privacidad <footer>El contenido del pie de página</footer>
  • 4. Contenido Inicio o home - Información más relevante de tu empresa. - CTA o llamada a la acción: comprar/suscribirse… - Resumen de productos y servicios: imagen o eslogan, (3 segundos) - Ofertas que destacar - Indicadores de éxito: Número de clientes o empleados Países en los que operas Años de experiencia - Testimonios o colaboraciones: Reseñas de Google Logos de empresas para las que has trabajado Welcome Back Forgot password? Remember me Username Password Log In Log in with Facebook Log in with Twitter Log in with Google Don’t have an Account? Sign Up
  • 5. P R O D U C T S H O M E R E S O U R C E S P O R T F O L I O C O N T A C T U S COMPANYLOGO S i g n u p L o g i n Contact us “Aeoaeo eoa dolor sit amet, consectetuer adipiscing elit, sed diam nomy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat “ SUBSCRIBE NOW SUBSCRIBE LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM Name Email Contacto - Formulario de contacto: Contactar contigo las 24 horas del día. - Dirección de correo profesional: Direcciones de correo personalizadas con tu dominio.
  • 6. Productos y servicios Información detallada de productos o servicios Ventajas, principales características, a quién están dirigidos, precio, gastos de envío… Llamada a la acción Textos como «¡Lo quiero!», «Añadir a la cesta» o «Reserva ya» ayudarán a conducir a tus visitas hacia el objetivo final. Responsive Website Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat wisi SHOP NOW PRODUCT NEW ARRIVAL SERVICES HOME COMPANY NAME 20$ 20$ 20$ 20$ Summer Sale COMPANY NAME Responsive Website Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat wisi SHOP NOW 20$ 20$ Summer Sale PRODUCT NEW ARRIVAL SERVICES HOME COMPANY NAME Responsive Website Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat wisi SHOP NOW 20$ Save 10% 20$ Save 10% 20$ Save 10% 20$ Save 10% 20$ Save 10% 20$ Save 10% 20$ 20$ 20$ Summer Sale
  • 7. Blog Buscador No todas las web lo incluyen Formulario de suscripción Genera leads de calidad Enviar el contenido que publicas Categorías y etiquetas Estructurar el contenido Mejorar la usabilidad de tu sitio
  • 8. Política de privacidad Proporcionar a tus usuarios toda la información relacionada con el procesamiento de los datos que se recopilan a través de tu sitio web. Generalmente se ubica en el pie de página o footer, avisos de cookies o formulario de registro.
  • 9. Generadores de Paleta de Colores HTML
  • 10. ColorHunt Se actualiza diariamente con nuevas paletas de colores HTML creadas por los miembros de la comunidad. Cada esquema contiene tonos sencillos y elegantes que pueden servir de inspiración para tu proyecto. Busca en las opciones “New” o “Popular” el esquema perfecto. Lorem ipsum
  • 11. Color Picker por HTML Color Codes Accede rápidamente al código RGB, Hex o HSL de un color, haciendo un solo clic. Se te presentan varios esquemas y sombras, basados en la relación que hayas elegido. Puedes exportar el esquema recién creado en formato Hex, RGB, HTML, CSS o sCSS.
  • 12. Cohesive Colors Toma la paleta de color en HTML que estás utilizando y te permite agregar un poco de tinta utilizando el color de tu elección. Generara rápidamente una alteración en la paleta de color que ya tenías, y que la hará de tu agrado.
  • 13. Color Hexa Una “enciclopedia de colores”, ingresando el valor de un color, regresa la mayor información posible. Su composición, colores alternativos, diferentes esquemas de color de la muestra, así como vistas previas del color en diferentes elementos de diseño.
  • 14. CC Color HTML Wheel de Adobe Color Wheel de Adobe es bastante útil para aquellos diseñadores que confían ciegamente en las funciones de Adobe CC. Te da la opción de guardar tus paletas de colores en HTML y directamente cargarlas en tus programas de Adobe CC.
  • 15. BrandColors colores utilizan algunas marcas y startup líderes en el mercado para diferenciar su negocio de su competencia?, en donde autores y miembros de la comunidad suben esquemas de colores que?utilizan las compañías más exitosas.
  • 16. Colourcode Hay que mover el cursor por la pantalla, hasta que encuentres el color raíz, y luego utiliza la opción de composición para crear tu paleta HTML de colores completa. Cuando estés satisfecho con el resultado, descárgalo en formato .scss, .less o como archivo .png.
  • 17. COLOURlovers Es uno de los favoritos de muchos diseñadores, gracias a la inspiración de colores que aporta. Incluye cientos de esquemas de color, plantillas y variación de sombras, que te van a ayudar a que a través del diseño?puedas comunicar el mensaje correcto que deseas.
  • 18. Coolors Para crear una paleta de color, necesitas seleccionar tus colores iniciales, ubicarlos y presionar la barra espaciadora?de tu teclado hasta que llegues al color adecuado a tu concepto de diseño. Puedes guardar las paletas de color generadas para que otros la utilicen.
  • 19. Material Palette Generador complementario de google que crea paletas sencillas basadas en los diseños de materiales. Te da sugerencias de qué colores primarios y secundarios puedes utilizar en tu esquema. Te sugiere qué colores son los más apropiados al comparar fondos con textos.
  • 20. Mudcube Sphere Sofisticado, te permite diseñar esquemas que cumplan las necesidades de tus visitantes. Ofrece 10 diferentes opciones de composición y permite probar y comparar esquemas. La paleta se descarga en formato .AL o .ACO, que puedes utilizar directamente en Illustrator o Photoshop.
  • 21. Paletton Ideal cuando se trabaja con una marca que ya tenga colores y obtener un esquema complementario. Permite rápidamente generar un boceto que ilustre como puedes implementar los colores en tu sitio.
  • 22. Palettr Para buscar esquemas de colores basados únicamente en el tema que se estén utilizando en una industria. Las paletas son generadas a partir de una composición de tonos provenientes de una librería de imágenes.