Los grandes sitios web siempre parecen combinar un gran diseño con un gran código. Dado que la creación de un sitio web es una tarea bastante simple, muchas personas aprenden HTML y CSS y creen que si pueden aprenderlo, podrán diseñar cualquier sitio web que deseen. Aunque técnicamente pueden, a menudo descubrirán que hay algunos errores clave que cometen porque no desean tomarse el tiempo para aprender realmente sobre el diseño.
Los programadores son diseñadores por derecho propio, pero diseñan código y sistemas maravillosamente diseñados. Diseñar algo visual es completamente diferente y solo porque tengas buen ojo para el diseño no significa que tengas una buena idea para aplicarlo.
Debido a que muchos programadores tienen proyectos personales, generalmente significa que tienen que crear sus propios sitios web. Si eres un codificador independiente, uno de los mayores recursos que puedes tener es conocer el proceso completo de desarrollo web de principio a fin, y esto incluye el diseño.
Aquí hay ocho errores que a menudo veo que los desarrolladores hacen al aplicar diseño a un sitio web.
Puede ser difícil separar un ojo para el diseño con la capacidad de diseño. Es muy similar a las personas que pueden mirar la moda y decirte lo que se ve bien, pero que en realidad no pueden vestirse de la misma manera.
Los grandes diseñadores simplemente saben qué es un buen diseño. Saben lo que funcionará y lo que no funcionará muchas veces antes de tomar un lápiz o abrir Photoshop. A menudo este es el caso porque han pasado años vertiendo sobre diferentes diseños y probando diseños ellos mismos. Al igual que ningún artista puede tomar un lápiz y dibujar algo genial la primera vez, ningún desarrollador debe creer que puede sacar su primer diseño del parque.
Similar a la forma en que un programador podría estudiar el código de otra persona, cualquiera puede estudiar un diseño y comenzar a comprender por qué funciona.
Echando un vistazo a la hermosa Punchfork puedes ver lo que hace que el diseño sea tan genial.
Hay muchas más partes del diseño que lo hacen tan maravilloso. Cuando te encuentras con un diseño que te gusta, tómate un tiempo para estudiar los elementos individuales, pero también reconoce cómo encajan en el conjunto. Un gran elemento de un diseño no hace que todo el diseño sea genial.
La selección del color puede ser un dolor. Odio tener que elegir colores porque hay tantos para elegir. Por alguna razón, la mayoría de los desarrolladores tienden a seguir una paleta azul y blanca. Tal vez porque se usa en todas partes o esos son los valores predeterminados del navegador, pero el diseño excelente puede involucrar una gama de colores. Afortunadamente para nosotros, gente desafiada por el color, hay un montón de herramientas que pueden ayudarnos a armar algunas maravillosas combinaciones de colores.
COLOURlovers es una gran comunidad donde las personas crean sus paletas de colores favoritas y las comparten. Puede navegar, guardar y votar por sus paletas y colores favoritos. En más de una ocasión, he recurrido a COLOURlovers para que vengan y salven el día con la selección de colores.
Al elegir una paleta de colores, asegúrese de seguir una que se adapte a la atmósfera de su sitio y su contenido. No escoja una paleta simplemente porque la ama. Naranja y negro pueden no ser los mejores colores para un sitio en torno al concepto de amor, por ejemplo.
En raras ocasiones necesitará usar más de 3-4 colores diferentes y si lo decide necesita justificar su elección.
Puede ser muy tentador centrar un titular. Se ve muy bien en los periódicos, pero rara vez funcionará bien en la web a menos que todo esté centrado. Sabemos que el texto alineado a la izquierda se ve profesional y funciona con el flujo natural de los ojos, entonces, ¿por qué ir más allá de las líneas?
El texto centrado se utiliza mejor para titulares y líneas cortas de texto. Los usuarios pueden leerlos con facilidad porque las líneas son cortas, escaneables y no necesitan movimientos oculares repetidos. El texto centrado también puede darle a su diseño un aspecto estético con su formato simétrico. Esto funciona para texto que va con imágenes centradas. Si sus imágenes están alineadas a la izquierda o a la derecha, debe alinear a la izquierda su texto para mantenerlo coherente con su diseño.
Los titulares centrados funcionan en los periódicos porque el texto se divide en columnas para que el título fluya a lo largo de toda la historia. Si solo está tratando con una columna de texto, debe adherirse a un título alineado a la izquierda.
Cuando no estás inmerso en el mundo de la tipografía, entonces Arial parece Helvetica y Georgia se asemeja al Times New Roman. Usted sabe que hay otras fuentes como Comic Sans, pero no ve la importancia de tener que pagar por una fuente cuando puede usar fácilmente lo que está disponible para usted.
Con recursos como Typekit sin embargo, la selección de fuente se ha vuelto inquietantemente similar a la selección de color. Puede llevar días de investigación encontrar la combinación correcta cuando podría haber utilizado fácilmente una fuente básica y terminado con el resto.
No te excedas con las fuentes. Al igual que los colores, una selección limitada a menudo funciona mejor. Cuando se trata de fuentes, una o dos fuentes diferentes pueden ser suficientes para producir un hermoso diseño. Recuerde que puede hacer muchas cosas diferentes con las fuentes. Puede ponerlas en cursiva, ponerlas en negrita, subrayarlas, mayúsculas o minúsculas.
Cuando eres un desarrollador, cuanta más información puedas tener en una página, mejor. Cuando codigo, me gusta hacerlo en varias pantallas porque me permite tener todo justo frente a mí. Lamentablemente, esto no funciona en el diseño. No debe meter tanta información en un espacio estrecho como le parezca adecuado, porque entonces el diseño se vuelve disfuncional.
El ojo solo puede captar tanta información a la vez y si el objetivo de la mayoría de los diseños es completar una tarea, esconderla dentro de un millón de otras piezas de información no ayudará.
Mientras que los sitios web ocupados pueden ser efectivos, muchas veces no lo son. El espacio en blanco debe ser tu mejor amigo. Necesita porciones vacías en su diseño para dar énfasis a las partes del diseño que son importantes.
Todos conocemos esa sensación maravillosa de crear algo y verlo en el mundo real. Debido a que lo creamos, tiende a haber un sesgo detrás que nos hace pensar que es mejor de lo que realmente es. Necesita obtener las opiniones de los demás para saber si su diseño es efectivo y si no lo es puede encontrar formas de mejorarlo. En cambio, los desarrolladores sienten que no necesitan pedir la opinión de los demás porque saben cómo funciona su diseño, por lo que todo tiene sentido para ellos.
También encontrará que cuando las personas piden una opinión sobre un diseño, no piden una crítica, sino la aprobación. Quieren justificación para las decisiones que tomaron y este no es el enfoque correcto. Hacer preguntas realmente te ayuda a encontrar problemas de usabilidad de los que quizás no te habías dado cuenta antes. A menudo te quedas tan atrapado en tu propio diseño que todo tiene sentido para ti, pero para una persona nueva, tu diseño puede ser más complicado que un cubo de Rubiks.
Con grandes diseños, puede ser difícil notar los pequeños detalles que realmente lo hacen. Pueden ser tan sutiles que el observador casual los mira y continúa. Para un desarrollador, los pequeños detalles pueden ser una pérdida de tiempo porque no comprende el impacto general que una sombra puede tener en un elemento.
Los pequeños detalles en sí mismos solo afectan un elemento específico de un diseño, pero cuando todos se unen, tiene un maravilloso diseño que fluye. Sitios como Dribbble exponer qué tan buenos pueden ser los pequeños detalles en un diseño más grande. Sin embargo, si no es un diseñador de oficio, concentrarse demasiado en los detalles puede ralentizar el proceso más de lo que le gustaría. Sin embargo, esto no significa que no deba ser consciente de cómo los detalles pueden afectar un diseño.
¿Qué otros errores comunes cometen los desarrolladores cuando se trata de diseño? Por favor comparte en los comentarios!