Recomendados
Recomendados
Más contenido relacionado
Similar a Partes de una página web
Similar a Partes de una página web (20)
Último
Último (20)
Partes de una página web
- 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.