sábado, 27 de agosto de 2016

Las mejores paletas de colores para tu web

¿No sabes qué paleta de colores elegir para tu página web? ¡Te proponemos algunas de las mejores!
Antes de pasar a mostrarte algunos ejemplos de paletas de colores para tu web, conviene remarcar que hay diversos aspectos que influirán en esta elección, tales como el tipo de proyecto, los valores de la firma o las emociones que se quieran transmitir con el diseño web. Es decir, cada página web es diferente y debemos encontrar la paleta de colores más idónea para ella analizando varias características, no sólo teniendo en cuenta nuestros gustos, preferencias o las tendencias del momento.
En este sentido, si vamos a realizar una página web de un curso de arte, por ejemplo, esta paleta de colores inspirada en la historia del arte puede ser la adecuada.

En cambio, si se trata de un proyecto más serio y formal, es más recomendable apostar por tonos neutros como estos.


Aunque, si queremos que nos quede un diseño web profesional pero con un toque divertido, esta paleta de colores puede ser una buena idea. 


Otros de los colores que están de moda, son los tonos neones con contraste, siendo una de las últimas tendencias en paletas de colores modernas.


Por otra parte, los tonos cálidos son una gama que nunca falla, ya sean colores intensos o más suaves, de acuerdo con las particularidades del proyecto en cuestión en el que estemos trabajando.

 

Asimismo, otra de las tendencias en paletas de colores son las vintage o de inspiración retro que nos hacen transportarnos a otra época.


Y si lo que queremos es un toque moderno, podemos apostar por los degradados o los distintos tintes de un mismo tono, dando como resultado un diseño web mucho más innovador que se sale de lo convencional y que aporta un toque fresco y elegante.

 

Como ves, son muchas las combinaciones de paletas de colores entre las que podemos elegir, sólo es cuestión de que seleccionemos la más apropiada para nuestra página web, en función de los aspectos que hemos mencionado anteriormente, para conseguir un diseño que llame la atención de los usuarios pero que también vaya en consonancia con los principios de la firma de la página web.





sábado, 20 de agosto de 2016

Recursos gratuitos para diseñadores web

Gracias a los recursos gratuitos, los diseñadores web podemos crear páginas web de una forma más rápida y sencilla. ¡Descubre los mejores recursos gratuitos para diseñadores web!
Desde plantillas PSD, pasando por fuentes o iconos, hasta mockups o kits de interfaz de usuario, todos estos elementos están al alcance de tu mano a través de los recursos gratuitos para diseñadores webs. Aunque, cabe mencionar, que no se pueden emplear en proyectos comerciales, únicamente son para uso personal, a no ser que apuestes por las versiones premium.
Una de ellas es Visual Hierarchy que te permitirá realizar un mockup, una maqueta con la que mostrar al cliente una visualización de cómo quedaría su producto final, para Social Media. De modo parecido trabaja Graphics Fuel, aunque su especialidad son los mockup de identidad corporativa.
Por otra parte, si lo que buscas es compartir experiencias con otros diseñadores y tener la posibilidad de descargarte plantillas gratuitas, la red social Dribbble de diseñadores es justo lo que estabas buscando. Aquí, podrás encontrar inspiración y mantenerte al día de las últimas tendencias del sector.
En Symu, tendrás la opción de descargarte plantillas de landing pages para aplicaciones, mientras que con Behance podrás hacerte con la fuente Anurati, en FontFabric con Phenomena y/o Muller Narrow y en Tyler Brooks Designs con más de 100 iconos gratuitos.
Y si lo que quieres son kits de IU, conglomerados de componentes ligeros, simples, funcionales y flexibles para implementar en una interfaz de usuario (IU), vuelve a echar un vistazo a Dribbble y a Visual Hierarchy, para hallar diferentes estilos de kits con los que lograrás proporcionar una mejor experiencia a los usuarios de tus páginas web.
De esta manera, con los recursos gratuitos para diseñadores webs, tendrás a tu disposición elementos muy útiles con los que perfeccionar las características de tu diseño web y acelerar el proceso de elaboración de la página, al tener que dedicar menos tiempo a crear estos componentes tan necesarios para cualquier site.
Así que ya sabes, si quieres que tu diseño web sea funcional y resalte por contener las últimas tendencias en este ámbito, visita de vez en cuando las páginas que te hemos recomendado y descarga algunos de sus recursos gratuitos para diseñadores web.


sábado, 13 de agosto de 2016

Conoce qué es la usabilidad o UX Design

La usabilidad es un aspecto determinante en el diseño web al medir la calidad de la experiencia del usuario cuando éste interactúa con la página. ¿Cómo se calcula esto? Mediante el estudio de la relación entre los elementos del sitio web como la navegación o los contenidos, y los usuarios, quienes exponen si dichos elementos han cumplido con su misión principal.
De manera que el objetivo de la usabilidad es identificar e implementar las mejoras que sean necesarias para obtener un diseño web intuitivo y fácil de manejar que proporcione una buena experiencia al usuario.
Características de un diseño web con elevada usabilidad
El autor Peter Morville establece una serie de facetas que debe cumplir cualquier diseño web que quiera tener una adecuada usabilidad:
-       Útil - ¿Nuestra página web está ofreciendo algo tipo de utilidad al usuario? ¿Nos limitamos a presentar nuestro producto sin brindarle algo interesante a los visitantes? Una página con usabilidad siempre es útil.
-                 Usable – Este término hace referencia a la facilidad de uso, es decir, si cualquier usuario, sin importar su nivel de conocimientos informáticos, puede interactuar de forma correcta con nuestra web y cuánto tiempo requiere para ello. 
-     Deseable – Esta faceta está relacionada con los valores del diseño emocional: las imágenes, animaciones y demás que hacen que una web sea atractiva o deseable desde el punto de vista estético.
-       Encontrable – Los usuarios deben poder encontrar fácilmente el producto que deseen. Para ello, es conveniente que la página web cuente con menús que faciliten la navegación o con recursos como las migas de pan.
-     Accesible – Las personas con discapacidades, que representan más de 10% de la población, han de poder interactuar con nuestra página web.
-            Creíble -  Si el diseño de una página web no es creíble, los usuarios huirán de ella. Vigila que todos los elementos transmitan confianza.
-           Valioso – Las páginas webs con usabilidad son valiosas, aportando un valor añadido que no poseen otros sitios.

Prestando atención a las facetas de la usabilidad de Peter Morville, conseguiremos diseñar una página web usable que genere una excelente experiencia en los usuarios, haciendo que permanezcan más tiempo en ella y que se multipliquen las posibilidades de obtener conversiones. 

miércoles, 3 de agosto de 2016

¿Cómo saber que uso la tipografía correcta?

Elegir la tipografía correcta es uno de los grandes quebraderos de cabeza de los diseñadores webs, por eso te damos una serie de consejos para identificar qué tipografía es la adecuada para tu proyecto.
Lo principal es tener claro el objetivo de la web y lo qué quiere transmitir, dado que la tipografía que utilizaremos para un blog de moda será radicalmente distinta a la que empleemos para una web corporativa de una clínica dental, por ejemplo.
En este sentido, con cada estilo de tipografía estaremos comunicando una sensación diferentes:

  • Romanas - Estas tipografías son muy formales e indican clasicismo y conservadurismo. Se caracterizan por sus pequeños trazos que se extienden desde los extremos de las letras.
  •  Egipcias  – Presentan el mismo grosor en todas sus partes, lo que proporciona una apariencia robusta y rectangular.  Son muy atractivas desde el punto de vista visual al transmitir fuerza, precisión y poder.
  • Sin serif: - Es la tipografía más empleada para los textos de gran extensión por su elevada legibilidad y por aportar un toque moderno al diseño web.
  • Fantasía – Dentro de este grupo se engloban numerosos estilos tipográficos como las letras manuscritas, que emiten sensaciones de elegancia y delicadeza, y que suelen ser la debilidad de los profesionales del diseño web, debido a que estéticamente hablando son las preferidas pero no poseen la legibilidad apropiada como para ser utilizadas en el cuerpo de un texto o en los enlaces de navegación.   Asimismo, las letras góticas (vinculadas con algo antiguo) o las decorativas (muy originales), también se aglutinan en este apartado.

Teniendo en cuenta esta información, antes de elegir un tipo de tipografía para tu diseño web debes cerciorarte de que ésta transmita exactamente lo que quieres.  
Asimismo, es conveniente combinar diferentes tipografías para brindarle un mayor dinamismo a la página y prestar atención a factores complementarios como la legibilidad, procurando que tenga un amplio espacio entre sus letras y un alto de altura adecuado, para que la experiencia del usuario sea la mejor posible.

Y recuerda, como dice Urbanfonts, que “el mejor tipo de letra para tu web es aquel que capta la atención de tus visitas, no por su estilo, sino por su mensaje”.

jueves, 16 de junio de 2016

Acerca de mi

Mi nombre es Cristal Muñoz y soy diseñadora gráfica. Decidí estudiar esta profesión porque desde siempre he tenido un especial interés en conseguir que todo combine. De hecho, cuando tenía 10 años, le pedí a mi madre poder redecorar mi habitación, desde ahí mi vida ha girado alrededor del diseño.
Hace dos años, realicé un curso de Diseño Web y me especialicé en esta área, ya que considero que las páginas webs no son sólo el futuro, sino una ventana desde la que podemos acceder a cualquier lugar de mundo.
Por ello, es tan importante ser creativos, ir más allá de los consejos de diseño web de Wikipedia, y buscar aspectos llamativos que se entremezclen entre sí para formar un conjunto único que atraiga a los usuarios, sin descuidar los elementos esenciales de cualquier web, es decir, respetando en todo momento la usabilidad y la accesibilidad.
Y es que tal y como decía Edgas Deges “El diseño gráfico no es lo que ves, sino lo que debes hacer que otras personas vean”.

Con este blog, pretendo enseñar al mundo mi trabajo al mismo tiempo que ofrezco consejos y tutoriales a todos aquellos que se están iniciando en el apasionante sector del diseño web. ¡Espero que lo disfrutéis tanto como yo! 

Haz un menú llamativo en WordPress e impresiona con tu diseño web

¿Quieres realizar un menú llamativo en WordPress con el que impresiones a todos tus visitantes? ¡Te explicamos paso a paso cómo hacerlo!

Dos métodos para realizar un menú llamativo en WordPress
Para resaltar un menú y hacerlo más visual, tenemos dos vías: una para expertos y otra para principiantes.

Los expertos, que dominen las reglas para escribir CSS, pueden optar por emplear selectores avanzados de CSS,  escogiendo el puesto que ocupa con respecto al resto de elementos (el primero, el cuarto o el último) con los pseudo-selectores.

Por su parte, los principiantes tienen la alternativa de utilizar la funcionalidad de WordPress, que posibilita agregar una clase concreta al elemento que queramos destacar.
Se trata de una funcionalidad de WordPress que suele estar oculta en nuestro panel de administración. Para activarla, hemos de acceder al panel de administración y dirigirnos al menú de Apariencia > Menús.

En este apartado, tenemos la posibilidad de crear nuestro menú personalizado de WordPress. Una vez lo tengamos creado, debemos hacer clic en la pestaña “opciones de pantalla”, que se encuentra en la esquina superior derecha, y activar en la sección “mostrar opciones avanzadas del menú”  la casilla “clases CSS”, lo que nos permitirá añadir a cada uno de nuestros elementos del menú una clase distinta y dar un estilo propio a cada página o enlace.

Posteriormente, buscaremos en esta misma página el elemento al que queremos darle un estilo propio. Cuando lo encontremos, hacemos clic en él y veremos cómo se despliega un nuevo cuadro llamado “Clases CSS (opcional)”.

Las clases de CSS que agreguemos han de ir sin el punto delante que después usemos para seleccionarla, y si queremos añadir varias, tenemos que dejar un espacio entre ambas. 

¿Cómo darle estilo al menú?

Tal y como decíamos, con esta funcionalidad podremos cambiar lo colores, el tamaño de las fuentes y hasta modificar la tipografía de nuestro menú, pero para ello debemos alterar el CSS de nuestra página.

Existen diferentes métodos:

-       Emplear el módulo JetPack CSS personalizado y activar el módulo de CSS, teniendo un completo editor CSS del tema a nuestro alcance.

-       Usar el plugin Simple Custom CSS – También muy sencillo. Consiste en instalar Simple Custom CSS y activar el plugin.

-       Crear un Child Theme  – Se basa en cargar una hoja de estilos propia justo después de la hoja de estilos del tema padre.

-       Editar directamente el style.css de tu tema –Sé consciente de que optando por esta vía, tanto si es un tema premium como un tema gratuito, los cambios que realices desaparecerán cuando el tema se actualice. Además, si no tienes conocimiento de CSS, ten mucho cuidado con las puntuaciones y los cierres de reglas, porque podrías provocar que tu hoja de estilos sea ilegible para algunos navegadores.

  Editar el CSS de theme WordPress - Además de los problemas mencionados anteriormente, este método no te dará acceso a todo el CSS en algunos temas.

De esta manera, podrás insertar las características que desees en tu menú y lograr que sea más atractivo para tus usuarios. 

martes, 14 de junio de 2016

¿Cómo elegir los colores de tu sitio web?

Elegir los colores de tu sitio web es un aspecto fundamental porque determinará el diseño final e influirá en la experiencia de los usuarios, pero ¿cuáles son los aspectos que debemos tener en cuenta para elegirlos adecuadamente?

-       Legibilidad - Lo primero es tener claro los colores han de atraer a tus visitantes pero sin descuidar la legibilidad del texto o de la web. Aunque selecciones los colores más bonitos del mundo, si dificultan la legibilidad de la web sólo conseguirás que tus usuarios abandonen tu site.

-       El círculo cromático, tu gran aliado - Contamos con recursos como el circulo cromático, el cual nos ayuda a combinar los colores. Aunque dentro de cada uno existe un abanico de tonalidades y está en nuestra mano realizar una elección correcta.

-       Término medio – Hay que evitar colores que sean demasiado vibrantes o neutros. Esto quiere decir que debemos encontrar el término medio cuando seleccionemos los colores de nuestro sitio web.

-       Saturación del color – De igual modo, no se aconseja optar por colores que estén muy saturados ni que casi no lo estén. En este sentido, podemos comprobar si la combinación de colores es la adecuada, convirtiéndola a escala de grises. Si tras convertirlos, no se leen correctamente, tendremos elegir otros colores.

-       Cuidado con el uso de los colores neón – Son tendencia y se emplean a menudo porque solemos pensar que llaman más la atención, pero no debemos olvidar que son colores muy brillantes, por lo que pueden molestar a los ojos. Un texto en un color neón, aunque usemos fondo blanco o negro, es prácticamente ilegible, además de perjudicial para la vista. La solución pasa por atenuar los tonos, restándoles algo de brillo.

-       ¿Cuántos colores elijo?  Aunque siempre recomendamos la mezcla de dos colores, como mucho tres, es verdad que en función del diseño y el proyecto puede ser adecuado agregar más de dos colores. Eso sí, sin llegar al efecto “arcoíris”.

-       El uso del blanco y negro -  Al igual que ocurre en la moda, en el diseño web también la combinación blanco/negro es una apuesta segura, por su elegancia y contraste. Sin embargo, emplearlos en grandes cantidades pueden provocar sensaciones contrapuestas, ya que, por ejemplo, el negro, puede originar una impresión de pesadez. Para evitar esto, es conveniente introducir colores con los que mitigar su fuerza.


Poniendo en práctica estos consejos, seguro que logras elegir los mejores colores para tu página web.