Copyright HébergementWebs.com - License GPL

Texturas web: como agregar dimensión adicional a su sitio web

sitio de Internet   2021-01-04 05:59:42

Cuando hablamos de diseno web, tendemos a discutir las cosas en las que los visitantes se enfocan directamente: paletas de colores , imagenes, tipografia y marca bien ubicada, por nombrar algunas. mas -> Cuando se trata de diseno web, tendemos a discutir las cosas en las que los visitantes se enfocan directamente: paletas de colores , imagenes, tipografia y una imagen de marca bien ubicada, por nombrar algunas. Sin embargo, deseoao aqui una tecnica mas sobria para su diseno web , una tecnica que da contexto a su contenido y personalidad a sus paginas sin robar la atencion del usuario. Hablemos de textura. Las texturas web son una excelente opcion de diseno si desea elevar las paginas de su sitio web mas alla de los colores solidos mientras transmiten personalidad y atraen a mas visitantes. Entonces, en esta guia, te mostrare que son las texturas web y por que son efectivas. Tambien compartire consejos para agregarlos a su sitio web y brindarle algunos de los mejores recursos de texturas web para comenzar de forma gratuita. Codigo de llamada a la accion -> finalizar el codigo de llamada a la accion -> ¿Que son las texturas web? En diseno web, una textura web es un elemento visual, generalmente una imagen de fondo, que se parece aes una superficie tactil tridimensional. Las texturas web se utilizan para mejorar la apariencia de un sitio web al dar personalidad y profundidad a las paginas web. Las texturas web son un metodo de diseno web unico, ya que tienen como objetivo reproducir una de nuestras sensaciones fisicas, tocando con otra vista. Al presentar un fondo 3D para los elementos de su pagina, inducen una especie de sensacion haptica a traves del medio visual de las pantallas de nuestras computadoras. Todo esto tiene un efecto interesante en nuestro cerebro: evoca emociones que asociamos con el mundo real. Considere la posibilidad de tumbarse en el cesped en una tarde de verano o en los pequenos crateres de un papel de construccion. Las texturas web intentan reproducir este sentimiento realista en el mundo digital. Tipos de texturas utilizadas en el diseno web Las texturas web vienen en muchosusa variedades para evocar una variedad de sentimientos y experiencias. Es util clasificar las texturas web en funcion de dos factores: realismo y protagonismo. El realismo se refiere a la semejanza de una textura con una textura del mundo real. Esto puede variar desde patrones abstractos, como un degradado de color o patron geometrico, hasta objetos tangibles del mundo real como cesped, alfombra o lino. Esto es similar al concepto de skeuomorphism : cuanto mas realista parece una textura, mas la asociamos con nuestras experiencias de la vida real, lo que hace que la pagina sea mas inmersiva. La prominencia se refiere a como una textura se diferencia de sus otros elementos. En un extremo, las texturas sutiles apenas se notan, pero lo suficientemente presentes para dar una impresion de personalidad y calidez. Las texturas fuertes, por otro lado, llaman la atencion de inmediato.en esa region de la pagina y establecer firmemente la personalidad de un sitio web. Se que he hablado mucho sobre texturas sin ejemplos, asi que echemos un vistazo a algunas ahora. En primer lugar, aqui hay una textura web abstracta y sutil. Ha visto degradados como este en todas partes porque son una excelente manera de interactuar visualmente con una minima distraccion. Aqui hay una textura de telarana abstracta y fuerte. Los angulos agudos ciertamente se destacan mas que un degradado suave. Este diseno poligonal particular podria combinarse con el espacio digital, lo que lo hace adecuado, por ejemplo, para una nueva empresa tecnologica. Aqui hay una textura realista y sutil. Si miras de cerca, puedes distinguir una superficie similar al lino o al papel. Sin embargo, cuando acaba de convertir un sitio web en marron, es posible que no lo note conscientemente. Este tipo de texturas son muy comunes en los sitios.s Web porque pueden transmitir emociones de la vida real sin que los usuarios se den cuenta. Finalmente, aqui hay una textura fuerte y realista: no tienes que entrecerrar los ojos para saber que es concreto. Los disenos atrevidos y realistas como este no dejan ninguna ambiguedad sobre el proposito de su sitio web. Utilice estas texturas con precaucion, ya que tienen un alto potencial de conflicto con los elementos bidimensionales que las acompanan. Texturas y patrones web Es posible que haya notado que estaba evitando usar el patron word " Para describir texturas web. Esto se debe a que "textura" y "patron" tienen significados ligeramente diferentes en el diseno web, aunque es posible que vea estos terminos utilizados indistintamente en su busqueda. Los patrones son imagenes pequenas que se repiten. Cuando vea un patron en unpagina web, probablemente pueda distinguir el "mosaico" que forma el patron. Por ejemplo: Con texturas, por otro lado, Es mas dificil discernir una imagen repetida, a menudo porque las texturas de fondo completas se componen de una imagen unica, detallada y compleja sin una repeticion exacta. ¿Ves la diferencia? ¿Por que usamos texturas en el diseno web? Al igual que con cualquier otro elemento de diseno, las texturas web efectivas van mas alla de hacer que una pagina sea interesante. Texturas La Web puede realizar dos funciones principales en su sitio: evocar sentimientos y atraer la atencion. Invocar sentimientos De grandes cuentas de diseno, no solo por lo que ven los usuarios sino tambien por lo que no ven. Estoy hablando de imagenes que la mayoria de los usuarios no registrans conscientemente, pero que, no obstante, afectan su experiencia de navegacion. Las texturas web son excelentes para hacer esto: pueden hacer que los espectadores sientan emociones positivas y las asocien con su marca. Por ejemplo, un negocio al aire libre podria implementar una textura de cesped, cielo nocturno o nieve. Una empresa de tecnologia puede optar por una textura abstracta geometrica. Una textura horneada podria agregar una pizca de pepitas a su textura. Todo depende de la personalidad que desee comunicar y de las asociaciones reales que desee crear para los visitantes. Por ejemplo, este excentrico sitio derivado para una agencia digital con sede en Vancouver capitaliza perfectamente el poder de textura. Todo el sitio, incluidos sus botones, esta cubierto con una textura de fieltro, que evoca una sensacion de comodidad asociada con el regreso a casa para pasar las vacaciones.nces. Fuente de la imagen Cuando se usa correctamente, una textura web ayuda a los visitantes a sentirse inmersos en la experiencia de su sitio web, como caminar por una tienda, en lugar de solo mire a traves de una ventana del navegador. Guie el ojo Las texturas web tambien pueden influir en nuestra experiencia de navegacion a un nivel subconsciente al dirigir nuestra mirada a ciertos areas de una pagina web. Cuando se aplican a una region de pagina, elemento, imagen o texto, las texturas web llaman nuestra atencion sobre esos elementos al contrastar con la pagina circundante. Este La agencia de diseno francesa destaca la imagen destacada en su pagina. hogar con una textura basica de marmol verde. Muchos de nosotros asociamosmarmol en exposiciones de arte, museos, lujo y prestigio, lo que lo convierte en una eleccion de textura adecuada en este caso. Fuente de la imagen Mas abajo en la pagina, se colocan i"s adicionales en los magos en la misma textura de marmol para una experiencia de desplazamiento constante. Fuente de la imagen Piense en que partes de la pagina desea que las personas vean o hagan clic, y si puede aplicarles detalles especificos. texturas. Estas secciones de la pagina pueden ser descripciones de productos, encabezados, llamadas a la accion o botones. La ubicacion estrategica de ciertas texturas ayuda a crear un camino que seguiran los nuevos visitantes mientras aprenden sobre sus ofertas yn tomar medidas en el camino. Asimismo, las texturas web tambien se pueden utilizar para reforzar la estructura de su pagina. Las texturas de contraste funcionan bien para separar diferentes areas de contenido, haciendo que sus paginas ricas en informacion sean mas comprensibles y atractivas. Como utilizar la textura en el diseno web InnerList: {header = Como usar la textura en el diseno web, content_type = order_list, list = {items = [No exagere., Mantenga el texto legible., Coincida con la sensacion que desea., Equilibre la calidad imagen con tiempo de carga.]}, parrafo = {contenido =}} -> No se exceda. Mantenga el texto legible. Coincida con su sentimiento. Equilibre la calidad de la imagen con el tiempo de carga. Una cosa es encontrar una textura que se vea bien, pero implementarla con buen gusto en supaginas requiere un poco mas de reflexion. Para lograr una textura web que atraiga a los usuarios, asegurese de seguir estas cuatro pautas clave: 1. No se exceda. Al igual que con cualquier aspecto del diseno de sitios web, limite el uso de texturas a lo esencial. Recuerde, las texturas web estan ahi para respaldar su contenido principal, no para reemplazarlo. Demasiada textura puede distraer e incluso abrumar a los usuarios. Empiece por pensar en lo que quiere que logre su textura web. ¿Deberia aparecer en el fondo, como un separador de seccion, en sus encabezados o en otro lugar? Comprender el proposito de sus texturas lo ayudara a ser mas intencional en su uso y evitara que se exceda. Las texturas sutiles y simples son mas faciles de agregar sin distraer a los usuarios, por lo que le recomiendo que pruebe estas y agreguester si necesitas algo mas atrevido. Ademas, mantenga la cantidad de texturas en su sitio web en dos al principio y agregue mas mas adelante si lo desea. Por encima de todo, su textura debe agregar personalidad y guiar la atencion hacia lo que mas importa, su contenido. 2. Mantenga el texto legible. Me sorprende la cantidad de sitios web que he visto en los que el texto se ve ensombrecido por un fondo texturizado. No tiene sentido llamar la atencion sobre el contenido textual si las palabras mismas son ilegibles, y poco mas hace que los visitantes salgan de la experiencia mas rapido. Esta es otra razon para apuntar a la simplicidad en sus texturas, especialmente aquellas detras del texto. Mucho de esto es de sentido comun: no pongas amarillo en una textura blanca o morado oscuro en una textura negra. Sin embargo, desde el punto de vista de la accesibilidad, tambien es jEs bueno ejecutar sus paginas a traves de un filtro de pagina web daltonico como este . De esta manera, se asegurara de que sus texturas y texto funcionen para todos los lectores. 3. Coincide con su sentimiento deseado. La capacidad de inducir sentimientos inconscientemente es algo poderoso, por lo que cualquier opcion de textura web que aplique debe coincidir estrechamente con la identidad de su marca. No quieres mensajes contradictorios cuando se trata de emociones. Si opta por una textura realista, lo mas probable es que las texturas que mejor se adapten a la imagen de su empresa: el cesped implica el exterior, el riego implica productos de panaderia, etc. Para disenos mas abstractos, sin embargo, la eleccion mas logica de textura puede no ser tan clara, especialmente con miles de opciones.. La solucion a esto es una simple prueba de usuario. Ejecute su sitio de prueba con una audiencia diversa y vea como los sujetos reaccionan a diferentes texturas. Sea consciente de las emociones que traen sus texturas y los usuarios se sentiran bienvenidos. No lo pase por alto y podria perder su confianza. 4. Equilibre la calidad de la imagen con el tiempo de carga. Nuestro ultimo consejo tiene que ver mas con el rendimiento que con la estetica. Las texturas web con mayor frecuencia vienen en forma de imagenes grandes, lo que puede afectar el tiempo de carga de sus paginas web no almacenadas en cache. Intente encontrar texturas de la mas alta calidad posible mientras minimiza su impacto en la velocidad de carga de la pagina. De nuevo, esto requerira algunas pruebas de su parte: las texturas borrosas y las velocidades de carga lentas son perjudiciales para el usuario experimentadoesta. Sin embargo, una textura web atractiva merece un rendimiento ligeramente reducido y la integracion de otras soluciones para reducir el tiempo de carga puede hacerlo sin problema. Donde encontrar texturas de diseno web gratuitas InnerList: {header = Donde encontrar texturas de diseno web gratuitas, content_type = order_list, list = {items = [Patrones sutiles, Stockvault, CSS Gradient, Lost and Tomado, Textures.com, Vecteezy, Rawpixel]}, paragraph = { content =}} -> Patrones sutiles Stockvault CSS degradado Perdido y tomado Texturas. com Vecteezy Rawpixel Resulta que las texturas libres estan disponibles en casi todas partes. Ingrese "texturas web gratis " en Google y obtendra toneladas de opciones. Para que su decision sea un poco mas manejable, aqui estan nuestras siete sources en lineafavorito para texturas web gratuitas: 1. Patrones sutiles Aunque tecnicamente un Una source de patrones, Subtle Patterns ofrece una excelente variedad de texturas gratuitas de su coleccion de mas de 500 mosaicos. Obtenga una vista previa instantanea de cualquier opcion en el fondo de la pagina y descargue miniaturas con un solo clic. Dado que los archivos de imagen son pequenos, puede aplicarlos a sus paginas sin afectar el rendimiento. Fuente de la imagen 2. Stockvault Stockvault es una source de imagenes de archivo popular que tambien alberga una biblioteca de alta calidad para usar texturas web. Puede filtrar sus resultados por licencia (uso comercial, uso no comercial o creative commons), tamanoimagen y numero de descargas. Fuente de la imagen 3. CSS degradado CSS Gradient es un generador de degradado de color basico para texturas sobrias de sitios web. Conecte sus colores a la herramienta para crear su propio degradado o elija de una biblioteca de degradados preestablecidos. Para agregar cualquier textura que desee, simplemente copie el codigo CSS y agreguelo a la hoja de estilo de su sitio web. Fuente de la imagen 4. Perdida y tomada Para una variedad solida de texturas realistas, dirigete a Lost and Taken, una gran source de fotos texturizadas de archivo.atuites. El sitio web divide diferentes texturas en categorias, para que pueda encontrar rapidamente la coleccion que desea directamente desde la pagina de inicio. Todas las imagenes son de una comunidad de colaboradores y no requieren atribucion en su sitio. Fuente de la imagen 5. Textures.com Otra source confiable de texturas realistas, Textures.com te permite buscar imagenes realistas y abstractas en una enorme biblioteca, que abarca mas de 100 categorias de texturas diferentes. Para descargar texturas, debe crear una cuenta. En una cuenta gratuita, tiene un limite de tamano de imagen y 15 descargas de imagenes por dia. Si esta configurado en una textura libre especifica, puede obtenerla aqui.De lo contrario, puede comprar creditos para descargas unicas o una suscripcion recurrente. Fuente de la imagen 6. Vecteezy Vecteezy proporciona una biblioteca de texturas vectoriales escalables, que puede explorar con una busqueda filtrada. Para restringir las opciones gratuitas, asegurese de seleccionar "Licencia gratuita " en el campo de tipo de licencia. Incluso aqui, hay miles de texturas vectoriales que puede refinar mediante palabras clave. Tambien puede encontrar una variedad de texturas de fondo abstractas y realistas con la funcion "Explorar". Nuevamente, hay suficientes opciones gratuitas para mantenerte ocupado. Fuente de la imagen 7. Rawpixel Rawpixel es nuestra ultima source recomendada de texturas web gratuitas. Aunque este sitio de membresia se especializa en todo tipo de imagenes, una simple busqueda de "texturas" revela muchas opciones sutiles y atrevidas. Puede filtrar los resultados por tipo de archivo, tamano, dimensiones y costo (gratis o premium). Fuente de la imagen Toma algo de textura A pesar de Un impulso reciente hacia el diseno web bidimensional en los ultimos anos, las texturas web han conservado su lugar gracias a su impacto positivo en la participacion, la experiencia y el disfrute del usuario. Habiendo entendido el proposito de tus texturas, te animo a planificar como te veraslos tendra implementados. Luego juegue con diferentes tipos de texturas y pruebe el mejor rendimiento en su sitio web, mientras ajusta el realismo y la prominencia de los disenos. Con un poco de prueba y error, puede darle un nuevo significado al "aspecto" de su sitio. Codigo de llamada a la accion -> finalizar el codigo de llamada a la accion -> Codigo de llamada a la accion -> Codigo final para llamar a la accion ->