20 técnicas vitales y buenas prácticas para efectivos diseños webCrear webs bonitas, únicas parece mas complicado cada día. Hay muchos sorprendentes diseños web subiendo allí fuera frecos y diferentes casi llegando a lo imposible. E incluso si no estas buscando algo completamente único, crear diseños bonitos que no parezcan anticuados es un desafío constante.
Abajo hay veinte técnicas y elementos excelentes de diseño que puedes incorporar en tus diseños para crear una web hermosa y pulida. Combínalos o escoje y elije los que quieres utilizar para cada proyecto que haces. Y también hemos incluido el un montón de ejemplos para darte ejemplos del mundo real de cómo los diseñadores los están utilizando para crear diseños magníficos.
1. Colores vivosUsando colores brillantes en tu web, los diseños pueden tener mucho interés visual. Son los mejores diseños para los sitios que quieren llegar a los más jovenes o para sitios más "casual". Usando colores en las tonalidades o la saturación similares para obtener un aspecto de más cohesión y evitar parecer demasiado apelotonado.
Asegúrate que al usar los esquemas de colores vivos que permite el suficiente contraste entre los elementos (tal como textos rojos en un fondo verde). Esto es especialmente importante con los textos, pues el contraste incorrecto puede hacer que los textos sean muy difíciles, si no imposibles.
AdaptD.com
Usando colores de parecida saturación e intensidad pra hacer que el esquema de colores vivos parezcan cohesionados.
Joshua Goodwin
Usando cortinas de un solo color brillante puede resultar bien también.
Noe Design
Incluso solo usar los colores vivos en la cabecera y en los títulos puede causar un gran impacto.
Design Slurp
El añadir efectos luminosos a un esquema de colores vivos puede hacerlo destacar aún más.
Tracy Apps Design
La mezcla de colores vivos con otros mas apagados hace que los colores vivos destaquen.
2. Gradientes y efectos luminosos
Los gradientes y los efectos luminosos se pueden utilizar para los efectos dramáticos o sutiles, o cualquier cosa intermedia. Utilizado junto o por separado, puede pulir un poco tus diseños. Un gradiente sutil tono-a-tono puede ser un gran fondo, mientras que los gradientes mezclados con efectos luminosos se utilizan normalmente para crear impactantes cabeceras.
Si estas mezclando gradientes con los efectos luminosos (particularmente efectos múltiples), ten cuidado que tu diseño no parezca demasiado apelotonado. Limita los colores, la intensidad de los efectos luminosos, o el número total de efectos para obtener mejores resultados.
Charlie Gentle
Combinar gradientes y efectos luminosos puede tener un gran impacto, incluso cuando los colores sean apagados.
Fred Maya
Hay una enorme variedad de posibles efectos luminosos que puedes utilizar, como éste que combina la iluminación angulosa con polvo-de-hada.
Leihu.com
Otra combinación de un gradiente sutil con luz artificial.
The Open Video Alliance
Un gradiente simple sobre el fondo eleva inmediatamente este diseño hasta el nivel siguiente.
Squarespace
Otro sitio con un efecto luminoso sutil en la cabecera.
3. Transparecias.Las cajas transparentes funcionan especialmente bien sobre los fondos que no están demasiado abarratodos. Si es una foto, un trozo, o solo elementos geométricos y gráficos, las capas transparentes pueden hacer que el fondo sea una parte más importante en el diseño de su web.
Chris Arbini
La transparencia sobre un fondo modelado funciona muy bien.
Design Attik
Las cajas transparentes sobre un fondo con foto funcionan incluso mejor.
Envato
Incluyendo 1 pixel opaco al borde de sus cajas transparentes lo hace más pulido.
Lilly’s Table
La transparencia puede resaltar los textos mientras que permite que su fondo destaque.
Quinta da Bela Vista
Usando cajas transparentes de un color similar al del fondo hace que destaquen.
4. Grunge.Grunge es una categoría bastante amplia en cuanto diseño web. Añadir elementos sutiles de grunge a webs limpias y pulidas puede contribuir a marcar el límite sobre el resto del diseño. También puedes combinar un montón de pequeños elemtos grunge para tener una web totalemnte grunge.
Algunos de los elementos mas comunes de un diseño grunge son texturas sucias; papel rasgado de bordes sucios (a menudo parecen pinceladas de un cepillo); grapas, clips y elementos similares; colores apagados; agua u otras manchas líquidas; fuentes sucias; y otros estropeados elementos. Usando estos elementos (cuidadosamente) puedes agregar una nueva capa a tu diseño.
Glocal Ventures
Añadiendo un borde grunge al área de contenido principal agregas una capa de pulcritud a la web
squareFACTOR
Los elementos grunge como pinceles y salpicaduras sucios pueden ser fáciles de incorporar en web que de otra manera serían limpios, como se hace en esta cabecera.
Rob Goodlatte
Los bordes y los fondos sucios son dos marcas del diseño grunge.
Paravel Design
Incluso algo tan simple como añadir fondos al título hechos con un pincel de acuarela puede dar a la web un toque grunge. Añadir un sutil fondo sucio refuerza la imagen aunque todavía mantiene una apariencia profesional.
Von Dutch
Hacerlo todo con elementos de grunge puede hacer causar un gran impacto y funciona bien para webs con una imagen atrevida.
5. Diseños dibujados a mano.Los elementos dibujados a mano y bocetos pueden hacer su web mas casual y divertido. Si usted utiliza bocetos completos o simplemente garabatos, usando elementos dibujados a mano hace que su sitio parezca un poco más artístico y a veces se puede parecer un capricho. Muchas veces también hace recordar la niñez y los dibus o, con menor frecuencia, arte.
Una manera simple de empezar con diseños dibujados a mano es utilizar los pinceles, las fuentes, y los iconos de Photoshop. La mayor parte de estos objetos son gratuitos.
Richard Stelmach
Añadir un simple garabato a tu home puede causar un gran impacto.
Happy Dangy Diggy
Con elementos dibujados a mano pueden hacer tu web alegre y relajada
Luova
La cabecera es el lugar perfecto para poner un garabato o dibujo sin dejar de ser una web profesional.
Idiotic Adventures
Mezclar garabatos con fuentes dibujadas a mano funciona bien.
Sawyer Hollenshead
Otro gran ejemplo de fuentes e imagenes dibujadas a mano.
6. Colores apagados.Los colores apagados son una gran manera de crear una sutil web de invitación. La mezcla de colores apagados con uno o dos colores más brillantes o más oscuros pueden hacer que ciertas partes de la web destaquen. Los colores apagados no son solo necesariamente de grises a marrones. Puedes utilizar cualquier tonalidad del espectro, atenuadolo o con un tinte grisáceo.
CSS Addict
La mezcla de colores apagados con un color más brillante o más oscuro hace que destaquen más.
Cuisine Saine
Apagado no tiene que significar solo grises y bronceados. Mezclándose con verdes rebajados, los rojos, y otros colores añaden más interés
I-Avion
Incluso un color brillante (como el chartreuse en este diseño) puede adquirir un tono más apagado cuando se junta con colores rebajados en tonalidades similares.
Ian James Cox
Juntando bronces suavizados y crema con puntos negros hacen una web de apariencia muy profesional.
Joe Nyaggah
La disminución de la saturación de colores brillantes les da una calidad apagada y una apariencia retro al mismo tiempo.
7. Efecto acuarela.Crear un sitio con elementos acuarela se ha vuelto más fácil con la amplia disponibilidad amplia de pinceles y texturas de Photoshop. La utiilización de efectos acuarela en las cabeceras, los fondos y otros elementos son una tendencia importante en diseño. La belleza de los elementos acuarela es que pueden ser hechos fácilmente para destacar o para permanecer en el fondo dependiendo de los colores que utilicemos y lo transparentes que los hagamos. La manera que eliga debe depender de la luz que quiera en su diseño, si desea que tenga un aspecto principal o secundario.
Ali Felski
Los elementos acuarela no tienen que ser necesariamente luminosos o pastel
Boompa
Mezclando acuarelas con lineas dibujadas añade un interesante efecto visual.
Matt Dempsey
Pinceles acuarela mas abastractos provocan una imagen mas relajada
One Starry Night
Usar pinceles acuarela sobre un fondo de papel acuarela funciona muy bien, especialmente cuando está junto a una fuente "casual".
Sunrise Design
Una acuarela hace una gran cabecera.
8. Elementos inspirados en la naturaleza.Los elementos inspirados en la naturaleza son los más populares en webs de empresas ecológicas, pero están comenzando a surgir por todas partes en la red. Algunos de los lugares más frecuentes donde aparecen son el los portfolios de diseñadores y en blogs.
Estos elementos se pueden utilizar de muchas maneras. Algunos los utilizan como parte de un diseño del fondo. Otros los incorporan en cabeceras o iconos. Algunos los utilizan por todas partes, donde quiera que quepan. Encontrar maneras creativas de incorporar elementos inspirados en la naturaleza puede ser un desafío fantástico y divertido.
Story Pixel
Elementos inspirados en la naturaleza no tienen porque ser necesariamente fotorealisticos.
Theater Website Services
Elementos brillantes de naturaleza funcionan bien en las cabeceras.
Weberica
Las vides y el pájaro agregan una sensación orgánica a la cabecera de este sitio, especialmente cuando están junto con los elementos acuarela.
84 Colors
Mientras que no es visible en esta imagen, las hojas y otros elementos inspirados en la naturaleza del fondo se mueven levemente, como si se estubieran moviendo en la brisa.
Juan Diego Velasco
Un simple fondo del césped mezclado con otros elementos artificiales le da una pequeña sensación natural sin pasarse.
9. Fondos Fotorrealistas.En este caso los fondos fotorrealistas no son exactamente imagenes de fondo. En la mayor parte de éstos casos se construyen a parte o tienen elementos añadidos a las fotos pero están digitalizadas o generadas por ordenador.
Una de las técnicas de fondos fotorrealistas más populares el último año o dos es la creación de fondos de escritorio. Éstos consisten generalmente en una superficie de madera con varios papeles, el café, las tazas, y otros elementos sobrepuestos en ellos. Es una técnica complicada de realizar (cerciorándose de que las sombras y las fuentes de luz son consistentes,...) pero crea un efecto impresionante cuando está bien hecho.
Outline 2 Design
The mixture of a photo-realistic background with other photo-realistic elements (such as the image under the "order now" link) add up to a very polished looking site.
La mezcla de un fondo fotorrealista con otros elementos fotorrealistas (tales como la imagen bajo el link de "order now") agrega un aspecto muy pulido a la web.
Ernest Hemingway Collection
Hacer un collage fotorrealista que parezca un escritorio es una tendencia popular.
Design Top 10
Los fondos fotorrealistas no necesitan ser complicados para causar impresión.
Marmalade on Toast
Un fondo fotorrealista no necesita tener múltiples elementos.
Design 54
Un simple collage de imágenes realistas es un tema común y también una técnica popular.
10. Tipografía de gran tamaño.Usando tipografía de gran tamaño puede dar importancia a ciertos elementos del texto. Algunos sitios incluso optan utilizar la tipografía de gran tamaño para todos sus texto. No necesitas hacerlas muy grandes para tener un mayor impacto; poniendo una o dos mas grandes que el resto funciona normalmente muy bien.
Toggle
La tipografía de gran tamaño no tiene porque ser necesariamente enorme, simplemente más grande de lo qué usted esperaría normalmente.
Citizen Wausau
A veces un ligero incremento puede tener mayor impacto que una tipografía gigante.
Protagonize
Otro gran ejemplo de de tipografía que es apenas un poco más grande del que esperamos. Realmente hace que la tipografía destaque por si misma.
Matt Lawrence
Limitar la grandaria de la tipografía de la cabecera de tu web causa un gran impacto.
This is Aaron’s Life
Agrandar toda la tipografía es también una opción
11. Tipografía decorativa.Las fuentes decorativas pueden funcionar a las mil maravillas para los diseños web. Usando Javascript y otras herramientas de substitución del texto que substituyan el texto por una imagen de la fuente deseada crea relativamente fácil estos efectos. En la mayoría de los casos, querras limitar el número de fuentes que quieres utilizar, o corres el riego de hacer la web demasiado embarullada. Pero si la tipografía es el elemento gráfico primario dentro de la web, puedes utilizar tipografías más diversas mientras mantengas el color y/o la proporción.
JP33
Limitar la tipografía decorativa a la cabecera en una web simple puede hacerlo destacar mas.
Lord Likely
Usandando múltiples elementos decorativos la web parece mas consistente.
Cogitatur
Mezclar multiples fuentes decorativas en una web pueden causar un mayor impacto en el diseño. Apenas tenga presente que las fuentes deben tener elementos, escalas, u otros elementos de diseño para obtener mejores resultados.
Simone Maranzana
Mezclar una script font con una serif font da una sensación elegante a la web
Designr.it
Otro gran ejemplo de fuentes decorativas mezclada con la tradicional serif font.
12. Fondos resaltados.Usar imágenes de fondo grandes, y que resalten es otra moda. Hay muchas maneras de hacer esto, incluyendo imagenes que cambian de tamaño. Usar diseños más complejos o más simples, los esquemas de color limitados o vibrantes, y otras opciones similares, usted puede cambiar el impacto que tendrá un gran fondo.
Bada Bing Design
Un fondo resaltado que utiliza un esquema de colores limitado no abruma al contenido de la página.
Piz’za-za
Un fondo fotográfico de tu negocio puede crear un gran impacto en una web simple.
Youandigraphics.com
Los fondos grandes no tienen porque ser necesariamente complicados. La mezcla de una foto repetida de una textura con coloridos fractales es una gran declaración sin ser compleja.
Gummi Sig
Mezclar elementos en el fondo puede crear un gran impacto, como se hace aquí con la mezcla de grunge, de acuarela, de elementos fotorrealistas, y de efectos luminosos.
Safety Goat
Los fondos geométricos pueden crear un enorme impacto, especialmente cuando están mezclados con elementos grunge.
13. Elementos retro y vintage.Incluyendo retro, vintage y los elementos antiguos en tus diseños pueden hacer una web mas diertida o nostaálgica, dependiendo de cómo usted los utilices. En algunos casos, pueden incluso agregar un toque de encanto o clase.
Asombrosamente la inclusión de elementos retros en tu diseño puede darle una apariencia nueva y fresca a la web. Los diseños vintage tienen todavía que saturar la red, así que la gente no los estan utilizando al no verlos. Si usted opta volver a los años 70, 40 o anteriores, estas clases de elementos pueden ser divertidos de añadir.
Ctrl+N
Un collage de elementos vintage es una gran declaración.
Klassiker in Acryl
Un fondo vintage junto a una fuente retro y un esquema de color crea una sensación sesentera.
Radio—The New York Moon
Este sitio junta elementos de radio vintage con apariencia de periódico para tener una imagen años 40.
Rose Fu
El juntar look antiguo con elementos de lujo en los bordes da un aspecto Victoriano a Rose Fu.
Duirwaigh Studios
La mezcla de elementos vintage y antiguos dan una senasacion de un circo o un vodevil a este sitio.
14. Cabeceras llamativasLas cabeceras contienen a menudo información importante que quieres destacar a los visitantes de tu web. Pueden reforzar la imagen de la compañía, proporcionan información vital, características importantes de los puntos importantes, y más. Usando cabeceras llamativas, con el uso del color, las imágenes, y la tipografía, hace que los visitantes se paren a mirar que hay allí.
Buen Retiro Vergara
Un cabecera destacada ligada con el contenido funciona bien para cualquier web.
Deqq
Una imagen dela cabecera que con múltiples elementos (iluminación, fotos, colores vivos) es un gran reclamo.
Ma.tt
Combinar toneladas de diversos elementos en una cabecera tiene un impacto realmente de grande y funcionamuy bien para un blog personal o un sitio más “casual”.
Crush + Lovely
Las cabeceras llamativas no tienen que necesariamente ser brillantes y resplandecientes. Una cabecera con un buen contraste con el resto de la web puede ser igualmente impresionante.
Drew Wilson
Una cabecera con todos los colores del arco iris y algunos sutiles elementos dibujados a mano y el dibujo de título son la insignia de la web de Wilson.
15. Elementos de collage.Los elementos de collage son una de las opciones más versátiles del diseño actual. Utilizado un poco con los bordes limpios, pueden hacer que una web parezca pulida y acabada. Con los bordes ásperos o muy embarullados, pueden agregar una apariencia más “artística” a su web. Y cuando están en alguna parte entre medias, agregan un toque de florituras a la web.
BLK + MTN
Elementos del collage con un toque más digital funciona bien para una web más profesional.
Kiss Me I’m Polish
Los elementos de collage usados escasamente pueden agregar un toque al diseño de su web que lo pone realmente a otro nivel.
M Katek
Los elementos de papel rasgados funcionan con otros elementos delcollage y el grunge.
Web Designer Wall
Una mezcla de elementos dibujados a mano, papel arrugado, y otros elementos de papel crean un diseño muy interesante y único del collage.
Toucouleur
Mezcla de elementos faux-papel con elementos digitales del collage hace esta cabecera sea aún más interesante.
16. Fondos texturizados.Usando fondos con un poco de textura puede añadir ese toque adicional a tu web. Un diseño texturizado, es sucio y “grunge” o algo que parece un paño o cualquier cosa pueda llamar la atención de tu web. Hay literalmente millares de texturas y los fondos modelados en la red que pueden adaptarse a las necesidades del diseño de tus webs, o crea los tuyos propios para hacer algo verdaderamente único.
Designers Couch
Un fondo sutil que aumenta tono a tono añade la sensación de un texturizado.
Jason Julien
Una sutil textura sucia en el fondo añade un elemento del “grunge” a la web de Jason Julien.
Leigh Taylor
Una textura sutil repetida en la cabecera y en el fondo da un sentido de la continuidad entre los elementos.
Zone Art CSS
Una mezcla de elementos texturizados en el fondo agrega un interés más visual.
DGS Creative
Una textura simple parecida al concreto o a la piedra agrega un contraste agradable a un diseño de otra manera brillante y limpio.
17. Navegación tabulada.La navegación tabulada tiene una gran ventaja sobre la navegación de botón o links. Las lengüetas evocan los cuadernos o las carpetas, y la gente tiene una expectativa psicológica que el pinchar en una lengüeta les lleve una nueva página o sección (como una lengüeta señala una nueva sección dentro de una carpeta o de un cuaderno físico). Esta conexión psicológica hace que la gente pinche mas veces entu web y visite diversas secciones.
Las lengüetas pueden ser tan simples o complejas como quisieras que sean. Algunas tienen esquinas redondeadas, algunas son verticales, algunas son apenas lengüetas y se distinguen apenas por una línea vertical entre ellas. En cualquier caso, las lengüetas son el mejor método de la navegación para las secciones importantes de tu web y pueden realmente aumentar el número de visitas de página por visitante.
Prime Cut Design
Las lengüetas simples de tono a tono funcionan bien cuando la lengüeta activa destaca de alguna manera. Aquí es especialmente interesante, pues las lengüetas inactivas son sucias mientras que la lengüeta activa es limpia y brillante.
Momentum
Repitiendo elementos del diseño entre diversas partes de la web agrega continuidad al diseño. El elemento repetido aquí es sutil pero agrega realmente ese punto adicional de pulimento.
Salvemos al Árbol
Las lengüetas usadas para demostrar pasos lógicos tienen mucho sentido cuando tienen utilidad.
Chris Jennings
Las lengüetas no tienen porque ser horizontales.
Abel and Cole
Las lengüetas simples, contorneadas funcionan con un diseño simple del sitio.
18. Blanco y negroLos esquemas de color blancos y negros pueden ser enormemente llamativas en el diseño. Usando solo blanco y negro en la mayoría de gráficos, pero combinar capas de blanco, gris claro y poner negros, grises oscuros, y marrones oscuros puede todo tener un impacto gráfico significativo. Experimente con diversos niveles de contraste para subir con el nivel apropiado para su proyecto de diseño específico.
Carsonified
La mezcla de un gris oscuro con crema da aquí una imagen levemente retro.
Minimal
Usando mucho blanco hace que una web tenga algo mas de importancia y aerodinamiza un diseño negro.
J Bradford Dillon
Al juntar un gris sutil con un gris pardo encaja con un diseño muy clásico y tradicional.
John Likens
Blancos y negros rígidos resaltan los gráficos.
Paiko
Las capas grises pueden ser mas atractivas que una web con más contraste.
19. Scroll horizontal.Los sitios con scroll horizontal pueden ser difíciles de usar y a menudo se reservan para los sitios con el contenido limitado. Pero cuando están combinados con cajas modales y otros elementos, pueden tener un impacto enorme en sus visitantes. Puede que los usuarios no estén aún muy habituados a verlos y costarles utilizarlos
Dean Oakley
Es muy obvio cómo navegar en la web si se agrega a su utilidad.
Nebon Media
Los diseños horizontales funcionan especialmente bien para los porfolios.
Gavin Castleton
Una interesante web horizontal, esta web comienza cerca del centro y navegas a ambos lados.
Lucuma
Esta web utiliza una combinación de movimiento de scroll horizontal y de cajas modales para exhibir el contenido.
Hasrimy
Un fondo constante a través de múltiples pantallas en una web de scroll horizontal da una sensación de consistencia
20. DibusLos dibus agregan un toque de diversión a tu web que otros pocos elementos pueden añadir. Si son relativamente profesionales y pulidos para van bien para una web corporativa o si lo son un poco menos, personajes de dibujos animados y otros elementos de diseño van mejor para una web más fresca y más joven. Una técnica es utilizar caricaturas de personajes conocidos (Einstein, Buda, etc…).
Creative Magasine
Los dibus no tienen porque ser necesariamente caricaturas.
Digimurai
Usando un personaje de dibujos animados como una mascota o un logo funciona bien.
Mochi Media
Los elementos monocromáticos de los dibus son los más versátiles.
Spoof University
Usando un personaje de dibujos animados que encaje con el tema de la web (como una parodia de un profesor en la web de una universidad) añade un elemento gracioso.
Francesco Mugnai
Los dibus de personajes conocidos son muy populares.
Texto original:
20 Vital Techniques & Best Practices For Effective Web Design
