Sabías que las imágenes son uno de los contenidos más atractivos divulgados  en internet. Pero no todos estamos familiarizados con el diseño, lo cual puede ser más difícil para algunos saber con exactitud qué tipo de formato de archivo debería usar en cada situación.

Ya que si usamos el formato equivocado, podríamos alterar la calidad de nuestras imágenes lo cual causaría que nuestras imágenes pierdan su atractivo visual o que nuestro contenido sea más pesado en nuestro sitio web o blog.

Pero, ¿conoces exactamente la diferencia entre cada uno de ellos, o el tipo de formato que debes utilizar en cada caso?

 

¿Tipo de imagen?

Para comenzar hay que entender que contamos con dos tipos de imágenes: Imagen vectorial y el mapa de bits. Es muy importante entender la diferencia entre estos dos tipos.

• Mapa de bits

Las imágenes bitmap o mapa de bits  son las imágenes que son formadas por varios cuadritos pequeños que vemos cuando damos zoom a la imagen, a estos se les llama pixeles. A cada uno de estos se les asigna un color y, a través de coordenadas X y Y, esos pixeles de colores se posicionan en una malla y, así, forman una imagen.

• Imagen vectorial

Las imágenes vectoriales o simplemente vectores son imágenes planas, sin sombres muy complejas. Son imágenes que se basan en polígonos formados por puntos, lo cual puedes aumentar un vector cuanto quieras, ya que no hay pérdida de resolución.

 

¿Cuál es el tipo de formato de imagen que tengo que utilizar?

Hay muchos formatos distintos y no todos son ideales para todo tipos de imagen o para contenidos. Estos son algunos de los formatos más utilizados.

 

• JPEG (Grupo Conjunto de Expertos en Fotografía)

También conocido como JPG, sin duda uno de los formatos más conocidos y utilizados por todos en los medios digitales. Utiliza un complejo algoritmo de compresión de imagen, lo cual puedes equilibrar la calidad y tamaño de la imagen.

Normalmente los archivos JPEG se utilizan en diseño web ya que el formato permite que las páginas carguen más rápido. También son muy recomendados para medios digitales, campañas publicitarias en redes sociales como whatsapp, Pinterest, facebook e Instagram, o promociones.

 

• PNG (Gráficos Portables de Red)

Es un formato de compresión sin pérdida de información. Además, es un formato que permite utilizar fondos transparentes manteniendo la calidad de imagen.

La desventaja de este formato es que para mejorar la calidad de la imagen el peso de esta también aumenta, en caso de las páginas web causara que esta tarde en cargar.

Pero esto no debe de preocuparnos por que hoy en día existen varias herramientas online que nos ayudaran con este problema, reduciendo el peso de nuestras imágenes manteniendo su calidad de imagen.

Este formato suele utilizarse para web y plataformas online, o en aquellos casos en que la imagen no tenga un fondo.  También este formato es perfecto para logos que necesitan transparencia y degradado.

 

• GIF (Formato de Intercambio de Gráficos)

GIF fue el primer formato de imágenes que redujo el tamaño de las imágenes y posibilitó la descarga rápida. También admite transparencias y su peso es muy reducido. Sin embargo, el hecho de ser un formato con un tamaño tan pequeño, lo limita demasiado

El GIF puede animarse, lo cual es una de sus principales ventajas frente a otros tipos de archivo. Actualmente es muy utilizado para crear animaciones para Facebook y whatsapp en Android.

Hay más formatos

Claro que existen mucho más formatos, ya algunos de ellos están en desuso, y otros son propietarios de ciertas aplicaciones. Recuerda en utilizar el formato correcto para cada tipo de gráfico y aplicación.

Cuéntame tu opinión o duda que tengas.

¡Comparte si te ha gustado!

 

 

Las imágenes sin duda son clave importante que más peso le da a nuestra web, sin embargo a la gran mayoría se nos olvida optimizar todo el contenido multimedia antes de subirlo a nuestra web.

Reducir el tamaño de las fotos que será parte de nuestro contenido es uno de los factores importantes para mejorar la velocidad, si estos no son optimizadas correctamente consumirá una gran cantidad de recursos del servidor o hosting y lo cual harán mucho más lento.

Hoy en día existen varios formatos que podemos usar en una página web. Lo más recomendable es que siempre que puedas uses el formato JPG ya que permite un alto nivel de compresión sin perder mucha calidad en tus fotos.

 

5 herramientas gratuitas para optimizar y comprimir imágenes sin perder calidad

Es importante contar con herramientas que nos facilite la tarea de optimizar nuestras imágenes con la mejor calidad. Por ello te compartimos 5 herramientas online gratuitas que te permitirán reducir el peso de tus imágenes.

 

1. Compressor.io

Es una herramienta en línea para reducir el tamaño de sus imágenes y fotos, manteniendo una alta calidad casi sin diferencia antes y después de la compresión.

Sin duda una de las mejor ya que te permite comprimir y optimiza tus imágenes hasta 90% de reducción de tamaño de archivo original. Te permite reducir 4 formatos de archivo compatibles JPEG – PNG – GIF – SVG.

También te permite realizar 2 tipos de compresión que son:

• Loseless la reducción del tamaño será más equilibrada, ya que tu imagen será igual a la original. Este tipo solo está disponible para las fotos en formato JPEG y PNG.
•  Lossy viene siendo hasta de un 90% reducción de hasta el 90% del tamaño de imagen pero la calidad de la imagen disminuye un poco más.

Ir a Compressor.io  

2. TinyPNG

TinyPNG usa técnicas de compresión con pérdida inteligente para reducir el tamaño de tus archivos PNG y JPG.  Además nos permite subir 20 archivos a la vez de hasta 5 MB cada uno. También con  TinyPNG podremos descargarlas una a una o en conjunto, ya sea en una carpeta comprimida llamada “tinified.zip” o bien alojarlas en nuestra cuenta en Dropbox.

También brinda un plugin para WordPress gratuito y otro de pago para Photoshop.

Ir a  TinyPNG.com

 

3. Optimizilla

Con Optimizilla puedes reducir hasta 20 imágenes en JPG o PNG a la vez. Lo que hace resaltar a Optimizilla de los demás es que una vez que las imágenes están en la cola de compresión, podrás editar el nivel de compresión mediante un deslizador, además es posible comparar con el archivo original.

Ir a Optimizilla 

 

4. Image Optimizer

No te dejes engañar por su aspecto ya que es una de las mejores herramientas para reducir tus fotos e imágenes. Además con Image Optimizer no solo podrás comprimir y optimizar las imágenes, sino que también podrás redimensionarlas.

Solo necesitas subir el archivo, elegir el tamaño de final, y elige entre 6 tipos diferentes de compresión que varían de muy pequeño hasta la mejor calidad. Además image Optimizer también ofrece la herramienta como un aplicación para Windows que puedes descargar de forma gratuita para uso personal.

Ir a imageoptimizer.net 

 

5. Compress Jpeg

Compress Jpeg es una aplicación online gratuita que permite comprimir varias imágenes de forma simultánea.

Te permite seleccione un máximo de 20 imágenes de formato jpg o jpeg, lo único que tienes que hacer elegir el formato de la imagen a subir y arrastrar  los archivos a la zona de abajo y por ultimo esperar a que la compresión termine. Podrás descargar las imágenes comprimidas por separado o agrupados en un archivo ZIP.

Ir a CompressJpeg.com

 

Para terminar quiero recomendarte mi posts anteriores  que sin duda te serán de mucha utilidad. 9 bancos de imágenes gratis para tus proyectos digitales.

 

¿Qué otras herramientas para comprimir imágenes o reducir tamaño de fotos conoces? Cuéntame tu opinión o duda que tengas.

¡Comparte si te ha gustado!

El color es un elemento fundamental en cualquier sitio web o proyectos digitales, ya que la elección de un color es mucho más importante de lo que pensabas, ya que a través los colores  podemos transmitir distintos sentimientos.

Para ayudarte a hacer una buena combinación de colores hemos buscado las 10 mejores herramientas que pueden ayudarte a elegir la paleta de color perfecta para que tus diseños sean más llamativos. Además evitaras caer en el ámbito de utilizar los mismos colores. Hay gran variedad de opciones de colores con los que puedes experimentar y  hacer que tus proyectos sobresalgan de los demás.

1. Color Hunt

Color Hunt es una colección abierta de paletas de colores donde los usuarios son los que crean las paletas usando el creador de la paleta Color Hunt . Además, todos pueden crear y enviar su propia combinación de colores.

Cada esquema contiene tonos sencillos y elegantes que pueden servir de inspiración para casi cualquier proyecto. Tambien Encuentra el esquema perfecto al buscar en las opciones Popular. Además obtendrás una nueva paleta de colores cada vez que actualice la ventana de tu navegador y también puedes agregar la extensión de Chrome a tu navegador.

Ir a ColorHunt 

 

2. Coolors

Coolors es una herramienta rápida y fácil que te permite generar hermosas paletas de colores. Simplemente escriba sus colores en el formato que prefiera (HEX, RGB, HSB, CMYK, etc.), bloquéelos y  presione la barra espaciadora para obtener una nueva paleta de 5 colores. También haga clic en el ícono de candado para mantener los colores que desee y repita el proceso hasta que tenga la combinación de colores que necesite.

También, puedes guardar las paletas de color generadas para que otros la utilicen. Coolors te permite exportar a varios formatos como PNG, PDF, SVG, SCSS o copie el enlace.

 

Ir a Coolors

 

3. Adobe color cc

Está herramienta nos permite generar paletas de colores a partir de un color base que nosotros le introducimos, ya sea insertando el código de color hexadecimal o los valores RGB.  A partir de este color base nos generará una paleta de color en función de si queremos que estos colores de la paleta sean análogos, monocromáticos, triada, complementarios, compuestos, tonos, o bien podemos hacer una paleta de color personalizada.

Una vez tenemos nuestra paleta de color elegida, la podemos almacenar, compartirla y descargarla para usarla en los programas como por ejemplo photoshop e illustrator.

Ir a Adobe color cc

 

4. Color Hunter

Color Hunter es un lugar para encontrar y crear paletas de colores creadas a partir de imágenes. Simplemente carga tu imagen y obtén una paleta de colores de acuerdo al contenido de tu imagen.

Una forma útil para tomar rápidamente una paleta de color de imágenes cargadas, por la búsqueda de una etiqueta adecuada o por referencia hex.  Además es rápido y fácil de usar lo cual ofrece una buena variedad de gamas de colores para elegir.

Ir a Color Hunter

 

5. Colorfavs

Genera hermosas paletas de colores a partir de imágenes, URL o aleatoriamente. Su objetivo es facilitarle la creación y descubrir paletas y colores para todas sus necesidades de diseño.

Ir a Colorfavs 

 

6. ColorExplorer

ColorExplorer es una caja de herramientas en línea para trabajar con paletas de colores.  También puede crear, administrar y evaluar paletas de colores de forma rápida y fácil para usar en diseño gráfico, diseños web, diseños y mucho más.

Es absolutamente gratis usar todas las características que se encuentran en el sitio. No es necesario que se registre si no lo desea.

El registro de un perfil de usuario es gratuito, sin embargo, le dará algunos extras (por ejemplo, un control / acceso a la paleta mejor y más seguro).

Ir a ColorExplorer 

 

7. Color Hexa

ColorHexa es una herramienta de color gratuita que proporciona información sobre cualquier color. También genera paletas de colores coincidentes para sus diseños como: esquemas de colores complementarios, análogos, triádicos, tetradicos o monocromáticos.

Solo necesita escriba cualquier valor de color en el campo de búsqueda y Color Hexa ofrecerá una descripción detallada y lo convertirá automáticamente a su equivalente en hexadecimal, RGB, CMYK, HSL, HSV, CIE-LAB / LUV / LCH, Hunter-Lab, XYZ, xyY y Binario.

Ir a ColorHexa

 

8. Colrd

Colrd es unas herramientas de combinación de colores, una gran manera de compartir y descubrir combinaciones de colores. Además Colrd actúa como una gran fuente de inspiración al compartir paletas de colores generados por los usuarios, así como los patrones degradados e imágenes. También un gradiente builder y una herramienta de búsqueda.

Ir a Colrd

 

9. Paletton

Paletton es una herramienta de diseño para crear combinaciones de colores que funcionan  juntas. Comienza con un color base, y Paletton genera tonos similares que lo complementarán. De esta manera, podrás crear paletas de colores para tus diseños basados en cinco estilos que son: Mono, Complemento, Tríada, Tetrad y estilo libre.

Ir a Paletton

 

10. COLOURlovers

Es una comunidad creativa en la que personas de todo el mundo crean y comparten paletas de colores. También incluye esquemas de color, plantillas y variación de sombras que te van a ayudar a que a través del diseño comuniques lo que deseas.

Ir a COLOURlovers

 

Para terminar quiero recomendarte mis posts anteriores  donde hablo de la Psicología del Color en el Diseño Web,te puede ser de mucha utilidad.

¿Conoces otras herramientas de color en línea que te gustaría compartir? Si es así déjanos  tus comentario.

¡Comparte si te ha gustado!

Las imágenes son un elemento fundamental en el diseño ya que van a servir para tus proyectos como: blog, página web, campañas, redes sociales, etc. Encontrar las imágenes adecuadas, de buena calidad y sobre todo gratuitas  es algo complicado. Sin embargo, existen bancos de imágenes gratuitas donde encontraras lo que estás buscando.

Te compartimos 9  bancos de imágenes gratis. Verás que la gran mayoría son de libre uso o creative Commons CC0.

¿Licencia Creative Commons (CC0)?

La mayoría de las imágenes están bajo licencia Creative Commons (CC0) . Esto significa que las imágenes son completamente gratis para ser usadas para cualquier propósito legal.

• Las imágenes son gratuitas para uso personal e incluso comercial .
• Puede modificar, copiar y distribuir las fotos.
• Todo sin pedir permiso ni establecer un enlace a la fuente. Entonces, la atribución no es requerida.

La única restricción es que las personas identificables pueden no aparecer bajo una luz negativa o de una manera que puedan resultar ofensivas, a menos que den su consentimiento. También debe asegurarse de que el contenido mostrado (personas, logotipos, propiedad privada, etc.) sea adecuado para su aplicación y no infrinja ningún derecho.

El contenido mostrado puede estar protegido por marcas registradas, publicidad o por el derecho a la intimidad, por lo que conviene asegurarse en cada caso.

Aun así te recomendamos que revises la licencia antes de descargar la imagen.

 

1. Pixabay

Cuenta con casi 1,4 millones de imágenes, vectores e ilustraciones. También, tiene un buscador bastante útil donde puedes buscar por categorías, por orientación (horizontal o vertical), por tamaño y por colores.

Todas sus imágenes son libres de derechos de autor bajo la licencia Creative Commons CC0, lo cual los hace seguros de usar sin pedir permiso o dar remuneración al artista – incluso con fines comerciales.

Ir a pixabay.com

 

2. Unsplash

Aquí encontraras más de 300,000 fotos gratuitas de alta resolución. 10 fotos nuevas cada semana. El lugar donde podrás encontrar imágenes increíbles. Suscribiéndose a Unsplash tendrás acceso a 10 fotos en HD que se renuevan de manera automática cada 10 días.

Ir a Unsplash.com

 

3. Gratisography

Fotos de alta resolución, originales  y gratuitas creadas por el fotógrafo  Ryan McGuire. Las fotografías de Gratisography están publicadas bajo la licencia Creative Commons Zero, por lo que pueden utilizarse tanto para uso personal como comercial. Sin embargo, estas imágenes no pueden utilizarse para fines pornográficos, penales, difamatorios o intenciones degradantes. Cada semana se añaden nuevas fotos.

Ir a Gratisography.com

 

 4. Pexels

Pexels ofrece fotos de alta calidad y completamente gratuitas, publicadas bajo la licencia Creative Commons Zero (CC0), lo cual podras utilizarlas para cualquier propósito, privado y comercial. Todas las fotos están cuidadosamente etiquetadas, se pueden buscar y navegar en diferentes páginas.

Actualmente ofrecen más de 4.500 fotos gratis para descargar y cada día aumentan 10 nuevas. Al proporcionar fotos gratis, Pexels ayuda a millones de personas creativas de todo el mundo a crear excelentes productos y diseños.

Ir a Pexels.com

 

5. Stocksnap

Aquí encontraremos imágenes gratis de excelente calidad, cuenta con una gran variedad de categorías  (negocios, comida, amor, ciudad, personas, naturaleza, paisaje, abstractas, etc.), Es por eso que cada imagen individual en StockSnap esta bajo los términos de la licencia Creative Commons CC0. Lo cual te da la libertad de copiar, editar, modificar y distribuir esas imágenes en una variedad de formatos y propósitos, incluidos los relacionados con los negocios.

 Ir a StockSnap.io 

 

6. Magdeleine

 Magdeleine cuenta con una variedad de fotos de alta resolución, también con una categoría amplia que facilitara tu búsqueda en la cual podemos encontrar: tecnología, abstracto, naturaleza, ciudad y personas entre otros. También, hay que tener en cuenta que gran mayoría de las fotografías son de dominio público (Creative Common CC0), por lo que puedes hacer lo que quieras con ellas, sin pedir permiso.

Solamente algunas imágenes tienen licencia Creative Common 4.0, lo cual te habilita a utilizarlas para uso personal o comercial, pero otorgándole una correcta atribución al autor.

Ir a Magdeleine.co

 

7. Startup Stock Photos

Fotos gratuitas para startups, bloggers, editores, sitios web, diseñadores, desarrolladores, relacionados con el mundo tecnológico. Sus imágenes de alta definición son libres de derechos (CC0), y por lo tanto se pueden utilizar para cualquier fin.

Ir a startupstockphotos.com

 

8. lifeofpix

Fotos gratis de alta resolución, muy profesionales y de tipo muy variado, cuenta con una licencia Creative Commons CC0, por lo cual cuenta sin restricciones de derechos de autor para uso personal y comercial. También, tiene nuevas fotografías agregadas semanalmente. Hay que tener encuenta que no se permite la distribución masiva.

Ir a lifeofpix.com 

 

9. Freepik

Es un banco de recursos gráficos para todo, donde encontrarás, a través de su buscador, fotos, vectores e ilustraciones de todo tipo que puedes usar para lo que quieras, siempre y cuando le des atribución.

Ir a Freepik.es 

 

Espero que este listado te sea de gran utilidad y si tienes otras recomendaciones de buenos bancos de imágenes para descargar fotos en alta resolución, déjanos  tus comentario.

Usualmente en ocasiones se habla de la influencia psicológica del color en el diseño de un logo, pero no sólo el color es el único factor que influye a la hora de transmitir, también esta la tipografía  y las formas geometría que también ejerce influencia en las personas.

Los logos juegan un rol muy importante cuando se trata de tomar decisiones, ya que están basadas en las percepciones visuales. En el post de hoy te hablaremos sobre que dicen las formas en un logo.

 

1. Formas circulares

El círculo es una de las formas más utilizadas dentro del diseño, ya que  proyecta un mensaje emocional positivo.

Puede representar perfección, innovación, protección, creatividad y movimiento. También están muy asociados a la comunidad, amor, amistad, relaciones y unidad. En diseño es ideal usarlo cuando se quiere representar organizaciones sin fines de lucro, organizaciones globales, gubernamentales, entre otras.

 

2. Formas triangulares

Los logos con forma triangular, están masa enfocados a la masculinidad. Al tener formas más puntiagudas, pueden ser más agresivos a la vista.

Son asociados a empresas o negocios de productos o servicios para un público masculino, representan el poder, ciencia y religión. También se sugiere que los triángulos tienen una buena asociación con el poder, ciencia, religión y legales.

 

3. Formas en línea

En este tipo de forma en línea hay dos tipos de logos, las que se asocian con líneas verticales y horizontales.

• Líneas verticales: se suele utilizar en logos de compañías que se mueven en sectores muy competitivos que reflejan masculinidad, sugieren fortaleza y agresión. También crecimiento y profesionalidad.  Suele ser bastante utilizado en el mundo de la construcción y de la inversión. Sin embargo, las líneas verticales son difíciles de usar porque pueden ser vistas como frías, agresivas y dominantes. Al menos que eso quieras reflejar en tu logo.

• líneas horizontales: transmiten unión, tranquilidad y calma por parte de las marcas que los portan. con frecuencia, son usadas para negar la amenaza y agresión.

 

4. Formas cuadradas

En el diseño de logotipos, las figuras de cuadradas muestran confiabilidad  y solides. Es ideal para representar algo que es real, transmiten fortaleza, seguridad, compromiso, estabilidad y honestidad.

Además, por sus amplias posibilidades a la hora de entrelazar unas curvas con otras, también transmite una imagen de alianza y colaboración.

5. Forma en espiral

En diseño, los logotipos en espiral generalmente dan una sensación de trascendencia, energía, vitalidad, crecimiento, evolución, continuidad y excelencia gracias al camino que se sigue a través de una trayectoria que representa historias y resonancia.

Por lo tanto un logo en forma de espiral es ideal para las empresas que lideran sus sectores, los proveedores de servicios y para banderas. Un diseño en espiral también tiende a trascender en el tiempo y el espacio.

Para terminar quiero recomendarte mis posts anteriores  donde hablo de la Psicología del Color en el Diseño Web, y Tipografías: qué nos transmiten y cuando saber usarlas espero te sea de mucha ayuda.

Cuéntame tu opinión o duda que tengas y estaré encantada en contestarte.

 

Al igual que los colores, las tipografías también trasmiten diferentes emociones y sensaciones incluso sin que las personas se den cuenta de ello. Por eso, para cada proyecto debes elegir la tipografía más adecuada.  Ademas, no todas las fuentes tipográficas sirven para lo mismo ni son apropiadas en cualquier ocasión.

Hoy te voy a explicar algunos tipos de fuentes tipográficas  y las sensaciones que transmiten cada una de ellas, para que, cuando tengas que elegir por una de ellas se te haga más fácil decidir cuál tipografía usar.

• Serif

Esta tipografía proporciona el efecto de tranquilidad, autoridad, dignidad y firmeza. También, elegancia, clase, tradición, seriedad y respeto.

Este tipo de letras las vemos normalmente en los logotipos, en una web, un blog o cuerpo de textos largos como periódicos o resúmenes muy complejos ya que facilitan la lectura, por lo cual es apropiado para la lectura de textos largos. Crean una línea imaginaria bajo el texto que ayuda a guiar al ojo.

Las tipografías más comunes: Book Antigua, Courier, Times New Romance, Garamont.

 

• Sans serif

La tipografía Sans Serif es perfectas para textos cortos pero muy grandes, carteles y títulos.
Se les suele asociar con la tipografía comercial, pues son buenas para impresión de etiquetas y embalajes. Además, son ideales para visualizaciones en pantallas ya que son legibles.  También, es la que tiene mayor presencia en internet, tanto en encabezados como cuerpos de textos pequeños. Son perfectas para la web.

Estas transmiten modernidad, seguridad, alegría y en ciertas ocasiones neutralidad. Algunas de las fuentes más conocidas de esta familia son: Arial, Bauhaus, Tahoma, Verdana o Helvética.

 

• Rounded

Con sus formas suaves y cálidas, dan una personalidad amable, además también puede aprovecharse para textos cortos. Se utilizan mucho en proyectos profesionales que quieren una cercanía con sus clientes, que sean relajados y frescos. Se puede ver principalmente en áreas relacionadas con los niños por ser una tipografía muy amigable.

Son tipografías redondeadas como hace referencia su nombre, son más dinámicas debido a sus formas suaves, es por eso que tiene ese aire de ser cercanas y amigables.

 

• Condensadas

Está fuente tipografías una de sus  características principales es que son más estrechas de lo normal, tienes el aspecto de parecer letras rígidas y duras. Con bastantes espacios entre letras, puede resultar un proyecto muy sofisticado, son perfectos para trabajos con mucha personalidad, que quieren transmitir modernidad, seriedad y elegancia.

Algunas de ellas son Anton, Roboto Condensed, PT Sans Narrow.

 

• Modernas

Esta tipografía transmite estilo, inteligencia, futurismo, tecnología.

Esta fuente tipográfica es perfecta ya que pueden aplicar a cualquier proyecto, siempre que tengamos definido lo que queremos transmitir, pero si se desea que tenga una personalidad fuerte debes acudir a otra tipografía.

Entre las más comunes podemos encontrar: Montserrat, Lato, Infinity, Futura, Majoram, MatchBook destacan por ser bastante neutras y adaptarse muy bien en cualquier situación.

 

• Script o manuscritas

La tipografía script es apropiada para títulos y firmas. Transmiten elegancia, afecto, creatividad, lujo y calidad.

Son ideales para aplicarlas en proyectos cuyo objetivo sea dar la sensación de ser muy elaborados, con mucha historia y tradición. Todo dependerá de cómo combinemos este estilo de tipografías.

Algunas de las fuentes son la Gótica, Brush, Vivaldi y Edwardian Script.

 

• Display

Esta tipografía se caracteriza por tener un personalidad muy fuerte lo cual las hacer ser únicas. Como toda esta tipografía tiene tanto ventajas como desventajas, una de esas desventajas es que suelen ser de muy mala calidad en su versión gratuita, por lo cual hay que saber elegir bien.

En cambio las tipografías de buena calidad su costo es elevado, pero sin duda pueden transmitir muchas sensaciones y adaptarse muy bien a tu proyecto.

Podemos encontrar tipografías como Amerika, Monoton, Medon, Cherry Swash.

Espero haberte ayudado a decidirte por un tipo de letra. Cuéntame ¿Cuál es tu tipografía favorita?

Para terminar quiero recomendarte mi Post anterior donde hablo de la Psicología del Color en el Diseño Web, espero te sea de mucha ayuda.

 

Los colores son parte de nuestra vida, e incluso influyen en nuestras decisiones  sin que nos demos cuenta.Debido a que cada uno de ellos transmite sentimientos que alteran nuestra manera de actuar, puede que la emoción sea distinta dependiendo de cada persona, pero también hay que tener en cuenta que  la gran mayoría de las veces compartimos el mismo sentimiento con respecto a un color.

El color es un elemento fundamental en el diseño de nuestros proyectos digitales, ya que la elección de un color para tus proyectos es mucho más importante de lo que pensabas, ya que a través los colores  podemos transmitir distintos sentimientos.

¿Qué significado tiene cada color?

Entender cómo funciona el color en nuestro cerebro, nos puede ayudar a tomar mejores decisiones, Veamos ahora la psicología de algunos colores puede ayudarte a alcanzar mejores resultados en tu sitio web.

• Azul

Este color simboliza lo fresco, lo transparente, eficacia, calidad, calma, seriedad, fortaleza, sabiduría, lealtad, fuerza, productividad, confianza y seguridad, además tiene un efecto tranquilizador para la mente.

El azul suele asociarse con empresas grandes y bancos porque no es invasivo y se asocia con la seriedad. Por lo tanto es bueno para temas de salud, tecnología, medicina, ciencia, políticos y servicios públicos.

• Naranja

El color naranja representa la diversión, felicidad, energía, calor, ambición, brillantez, actividad y seguridad en uno mismo.
Este color está lleno de vida, por lo tanto es interesante para cualquier empresa que desea mostrar su marca con esa calidez de cercanía hacia sus consumidores. Por lo tanto es una buena opción para las tiendas, automoción, tecnología, entretenimiento, comida o ya sea para el cuidado de niños.

• Rojo

El color rojo se asocia con la emoción, la energía, amor, la pasión, resistencia, fuerza, calidez y movimiento, por lo tanto resulta interesante para cualquier empresa que desea mostrar su marca con la fuerza y felicidad que lo define.
Este color puede ser utilizado para la comida, moda, entretenimiento, deportes, marketing, servicios de emergencia y seguros de salud. Usa el rojo para llamar la atención a algo.

•  Negro

El negro es un color fuerte asociado con la sofisticación, la elegancia, autoridad, poder, estabilidad, modernidad, fuerza, prestigio, formalidad e inteligencia.

Es un buen color en el diseño, ya que puede combinarse con casi todos los colores. Dependiendo de los colores con los que lo combines, el negro puede ser elegante y tradicional. Sirve muy bien para productos de lujo, moda, marketing y cosméticos.

•  Blanco

El blanco es un color que refleja la pureza, limpieza, felicidad, sinceridad y seguridad. Al igual que el negro es combinable con todos los colores.

Este color se asocia a los médicos, enfermeras y dentistas, lo que lo hace un gran color para las páginas relacionadas con la industria de la salud. También funciona para páginas de tecnología y ciencias.

• Amarillo

Normalmente se le asocia este color a la luz, competitividad, felicidad, alegría, optimismo y curiosidad. El amarillo puede dar muy buenos resultados para los botones de llamada a la acción. A la hora de diseñar una web, se pueden utilizar tonos fuertes de amarillo para transmitir felicidad.

• Verde

El verde tiene un efecto armónico. Se asocia con el medio ambiente, crecimiento, la salud, naturaleza, bienestar, dinero, calma, generosidad, fertilidad, envidia, buena suerte, paz y energía.

Este es color que los ojos procesan mejor. Este color es la mejor opción cuando queremos un diseño web para ciencia, turismo, medicina, recursos humanos o medio ambiente.

• Morado

El morado puede usarse para transmitir creatividad, imaginación, autoridad, sofisticación, poder, riqueza, prosperidad, misterio, sabiduría y respeto.

El morado también puede ser perfecto para productos de belleza, astrología, masaje, yoga, salud, espiritualidad y contenido relacionado con chicas adolescentes y marcas femeninas.

• Marrón

El marrón es un color natural y cálido asociado con la tierra, la aspereza, fiabilidad, estabilidad, amistad y naturaleza.

Si con algo podemos relacionar este color, sería a la calidez del hogar, ya que el diseño está muy unido a alimentos que tienen ese mismo color para estimular el apetito, como el café y el chocolate, lo que lo hace apropiado para este tipo de alimentos. El marrón normalmente se emplea para fondos.

• gris

El gris se asocia con la formalidad, el profesionalismo, la sofisticación,  atemporalidad y el carácter fuerte. Por lo tanto es perfecto para páginas profesionales, bienes de lujo, o para crear un efecto calmante de equilibrio.

• Rosa

Se suele asociar el rosa a feminidad. El rosa representa, amor, entrega, generosidad, sinceridad, romance e inocencia.  El rosa no puede asociarse a ninguna cosa negativa, Por lo que adecuado para productos o páginas dirigido a mujeres y chicas adolescentes.

 

Seleccionar los colores correctos para tu diseño no es siempre una tarea fácil, ya que hay que saber elegir los colores cuidadosamente. Estos son algunos aspectos que debemos tener en cuenta.

1. ¿Para quién destino mi web?

Debes tener en cuenta que no debes de elegir los colores que te gustan a ti, debes emplear los colores que más van a influir al usuario para que realice alguna acción en tu web, de ahí la importancia de determinar a qué público objetivo te vas a dirigir.

2. ¿Qué colores seleccionar?

Prueba a hacer buenas combinaciones contrastadas para que estos no cansen la vista del usuario, sino al contrario hacer combinaciones que resulten más cómodo a la vista. También puedes utilizar  colores de la misma gama cromática

3. No abusar de los colores

Un sitio web con muchos colores llega a ser confusa e incoherente, el cual provoca que llegue a verse como algo no profesional. Intenta utilizar la menor cantidad de colores posibles dos o tres es suficiente, también tener en cuenta que es recomendable utilizar un color predominante.

4. Alto contraste

El contraste de color se produce al combinar dos colores que no están relacionados entre sí. Los puntos de alto contraste son muy llamativos para nuestros ojos.

5. Composición y peso de colores

Gracias a los colores podemos dirigir la mirada del usuario y así resaltar determinados elementos clave. Busca el equilibrio justo de colores en el diseño de tu web.

Puedes seguir estas tres reglas básicas:

1. Crea un sólo punto de impacto visual por página: es decir, un punto al que dirigir la mirada.
2. Respeta la mirada del lector: de izquierda a derecha y de arriba abajo.
3. Deja aire y espacios en blanco para que la mirada descanse.

 

Espero que este contenido haya sido de tu agrado e interés.

¡Comparte si te ha gustado!

 

A la hora de crear un sitio web es necesario saber de algunas herramientas de diseño que faciliten  la construcción de nuestro sitio y que a la vez nos permita diseñar en menos tiempo. Hoy te mostraré 9 herramientas que te facilitarán en el diseño de tu pagina web.

 

Adobe Color CC

Hay que saber elegir  cuidadosamente bien los colores de nuestra página, ya que el color es uno de los elementos más importantes que te ayudará a mostrar la personalidad de tu negocio. Adobe Color CC es generador de paletas de colores online que te ayudará a darle vida a tu negocio.

Adobe Color pone a tu disposición numerosos temas de colores, que podrás filtrar entre las más populares, más utilizados, al al zar, temas que has publicado o temas que te han gustado en el pasado.

 

 

Colorzilla

Me llego a pasar que al visitar un sitio web me llamaba la atención los colores que manejaba dándole un toque único a la pagina web pero se me dificultaba saber el código de color que manejaban, quizá les haya pasado en algún momento.

Colorzilla es una extensión de Google Chrome que te facilita el color exacto que llame tu atención,  incluye un selector de color, cuentagotas, generador de gradiente y muchas herramientas de color avanzadas adicionales. También puede obtener una lectura de color desde cualquier punto de su navegador, ajustar rápidamente este color y pegarlo en otro programa.

 

 

WhatFont

Alguna vez te ha pasado que te encuentras visitando un sitio web y te llama la atención el tipo de letra que usa en su sitio y en el contenido de sus post, para darle solución a este problema está a nuestra disposición WhatFont que es una extensión de Google Chrome que te permite seleccionar el texto para saber qué tipo de tipografía está usando el sitio.

 

 

Google Fonts

Hoy en día existen diferentes tipos de fuentes que te serán muy útil para darle un toque único a tu página. La tipografía viene formando un elemento fundamental en el diseño de tu sitio  web facilitando al lector a que tus contenidos sean amigables para leer.

Afortunadamente se cuenta con Google Fonts  que es una herramienta que podrás integrar nuevas tipografías a tu sitio. Actualmente Google Font cuenta con 854 familias de fuentes diferentes, que te ayudarán a darle una buena presentación a tu sitio web.

 

 

 

Pexels

Las imágenes son un elemento fundamental en nuestro sitio web, así como el contenido de sus publicaciones, pero en ocasiones nos es difícil  encontrar las imágenes de buena cálidas y de acceso gratuito. Pexels es un excelente banco de imágenes gratuito, que cuenta con una lista infinita de imágenes de todos los estilos. Todas sus imágenes son con Licencia de dominio público Creative Common 0 (CC0).

 

 

Canva

Si lo que buscas es darle originalidad a tus publicaciones Canva es una herramienta fácil de usar.

Con Canva puedes diseñar y crear contenido web de todo tipo. También podemos crear carteles, posters, infografías, documentos, tarjetas de visita,cuenta con múltiples plantillas, filtros, iconos, formas, tipografías, cabecera o gráfico para los artículos de tu blog, banners, cabecera de cuenta de Facebook y Twitter, Ebooks y blog de forma muy sencilla.

Puedes acceder de manera gratuita de forma limitada y cuenta con varios tutoriales para iniciarse en ella y conocer mejor todas sus posibilidades. También está disponible en la versión Premium.

 

 

MockFlow

Te ha pasado que cuando vamos a empezar un proyecto y a la hora de pensar cómo se vería tomamos lápiz y papel para plasmar nuestro diseño que tenemos en mente. MockFlow es una herramienta que te ayudará a plasmar esas ideas, permite crear prototipos de la estructura  que conformará nuestro sitio de una manera muy rápida y sencillas, esta disponible en la versión gratuita y de paga.

 

 

Stylebot

Es una extensión para Google Chrome que te ayuda a modificar el código CSS de cualquier sitio web que estemos visitando. Stylebot nos ayudará en los momentos en el que  estamos pensando en hacer algunos arreglos a nuestra página web, si no queremos modificar de forma definitiva el código CSS antes de encontrar lo adecuado para nuestro sitio web.

 

 

Sublime Text

Es un editor de código para desarrolladores web  para programar sin distracciones es muy fácil de usar.

Sublime Text es un editor de pago, te permite descargar una versión de prueba, plenamente funcional y sin limitación de tiempo. Las licencias adquiridas para Sublime Text 3 no caducan, sin embargo, se requerirá una tarifa de actualización para Sublime Text 4. La aplicación está disponible para OS X, Linux y Windows.

 

¿Qué tal te ha parecido esta lista? ¿Conoces alguna otra herramienta que te gustaría compartir?

Déjame tus dudas, sugerencias y opiniones en los comentarios y con gusto te estaré respondiendo.