Miguel Rodríguez hace desarrollo de software efectivo.

Diseño web para programadores

A pesar de que estoy dando concejos de tematización y diseño, recuerda que no soy diseñador, soy un desarrollador, y lo mejor que puedo hacer es algo que se vea bien pero funcional.
Todos tienen habilidades innatas, quizas algunos mas desarrollados que otros, aunque puedes desarrollar cualquier habilidad que quieras, necesitas tiempo y esfuerzo para desarrollarlo, nadie tiene garantia de tener exito, la gente que no es talentosa es mas probable que fallen al desarrollas algunas habilidades, pero incluso si tienes exito, nadie puede ser experto en muchas habilidades.
Hay un mito que especula acerca de alguna gente que son habiles en programación y diseño, algo que honestamente todavia considero un mito, incluso si es verdad que los programadores/diseñadores existen, solo serian un poco, pero, esto significa que los programadores están condenados a crear interfaces visuales feas?, Intentare explicar el acto de "hacer que las cosas luzcan bien sin perder funcionalidad" llamandolo "diseño" ahora en adelante, recuerda que no puedo explicar como diseñar, pero tratare de dar "consejos" para hacer la interfaz visual un poco mejor.
 

Maquetas

 
Primero que todo, necesitaras saber exactamente que haras, la manera perfecta de averiguar que necesitas hacer es haciendo un prototipo, mas especificamente, una maqueta, esto te dara una base en la cual trabajar, te mostrará el orden de la información.
Esto trabaja de manera similar que el desarrollo de software, se supone que debes hacer un modelo del sistema que sera hecho por cualquier medio necesario, DFD, UML or cualquier otro método. saltar este paso llevara a un sistema dificil de desarrollar y mantener, con un código desastroso y un rendimiento dudoso, el diseño trabaja de manera similar, si no haces un modelo del diseño, quizas no tengas los mejores resultados.
al elaborar la maqueta analiza y define la navegacion del sitio web, ten en cuenta que aunque la información fluye de maneras diferentes a traves de la páginas, la navegación debería ser bastante similar en cada página, en otras palabras, deberias definir un patron de navegación que va a mantener los mismos pasos por cada acción a ser tomada en cada página, cada acción deberia tener ciertos pasos que no pueden variar (ejemplo: seria ilogico hacer que el usuario pase por encima de una opción de menú para ver sus sub opciones en una pagina, entonces, en otra página le haces hacer click en la opción de menu para ver sus sub opciones). Recuerda hacer las cosas faciles al usuario, nunca definas la navegación de una manera que pueda molestar al usuario y nunca permitaz que el usuario intente averiguar que debe hacer.
Aunque puedas usar información falsa (ejemlo: lorem ipsun) para la maqueta, usar información real es aconsejado, haciendolo de esta manera, sabrás la información que necesitas resaltar y como mostrarla, escogiendo la apariencia apropiada y posición para ella. no es necesario tener algo especial para hacer la maqueta, incluso puedes usar papel y lapiz, recuerda que el objetivo es representar la información como se deberia ver, organizandolo apropiadamente dependiendo de la importancia de cada porción de información.
 

Texto y colores

 
Una vez tengas la maqueta de tu diseño, la usaras para definir su color, tienes que escoger solo unos cuantos colores, uno de esos colores sera en color de fondo, el resto de colores hara la información visible, esos colores no pueden ser similares al color de fondo, uno de esos colores tiene que ser lo suficientemente llamativo de modo que resalte la información.
El diseño se debe hacer dirigiendo la atención del usuario a información especifica que quieras que el usuario vea, se supone que debes resaltar esta información con los colores elegidos para esta meta, es muy importante que solo pocos colores sean notados mas que otros, y no escoger colores extravagantes, si no distraerias al usuario y perderia interes, si tienes alguna duda, establece el color de fondo como blanco, y escoge el resto de colores desde ese punto.
 
Web Design
Atribución: 
 
No hay estilo particular para el texto, sin embargo, el texto debería ser, por lo menos, de tamaño medio con espaciado moderado, puedes escoger cualquier estilo que quieras, pero escojer estilos extravagantes está desaconsejado (no es obligarorio, es solo una opinion personal), sin embargo, las secciones resaltadas deberían tener un texto un poco mayor. asegurate de que los espacios entre secciones sean suficientemente buenas para hacer la separacion notar, usa una grilla fluida (columnal, 960.gs, ...) si es posible, manejara con todos los espacios y dara soporte para dispositivos moviles.
Debes hacer crecer tu sentido de calidad, necesitas saber cuando algo no luce bien y preocuparte por cada detalle, intanta comparar tu diseño con otros sitios web, y se honesto contigo mismo, manten en cuenta que todo debería ser simple, especialmente si no eres habil en diseño (me refiero diseño real, no al diseño me he estado refiriendo todo este tiempo) o cualquier otro talento artistico, a veces la gente confunde "bien elaborado" con "complejo".
 

Encarando el hecho de que no puedes hacer imagenes

 
Una parte importante de la mayoria de los deseños webs son las imagenes, usar imagenes es casi un deber, pero hay un pequeño detalle, tu, como una persona habil en “usar el lado izquierdo del cerebro”, eres mas probable de tener problemas con este tema, esto es algo que no puedes cambiar (la menos facilmente), hay alternativaz para resolver esa falta de habilidades, gracias a las licencias Creative Commons y una tonelada de contribuidores a nivel mundial puedes encontrar imagenes que puedes usar incluso para fines comerciales, los contribuidores requieren de condiciones a fin de dejar usar sus trabajos, la condición básica es la atribución, pero algunos otros contribuidores quisieran que compartieras tus obras derivadas de la misma manera que ellos compartieron sus trabajos contigo (share alike). Algunos otros sitios web como confinder pueden ayudarte a encontrar esas pequeñas imagenes para cosas especificas con licencias similares.
 
CC Search (Creative Commons)
Atribución: 
 
Habrían algunos casos que quieras añadir una textura especifica a tu diseño web, hacer esto sin imagenes será bastante dificil, esa es la razon porque buscar imagenes compartidas libremente en la web es necesario, a peas de todo, esto no es una garantia de que nunca estaras necesitado de imagenes, esa es la razón porque saber como editar imagenes (photoshop, the gimp, ...) es aconsejado, aunque esto sería la parte mas dificil de la solición, es la unica manera de asegurarse que seras capaz de manejar este tipo de situaciones.
 

Cosas que mantener en cuenta

 

Obtén lo mejor de tus habilidades funcionales

Saber como funcionan las cosas en el fondo y algunas cosas básicas de diseño (el acto de hacer que algo se vea bien y funcional) es una gran ventaja, con ese conocimiento puedes mejorar el rendimiento del sitio web, encontrar mejores planteamientos a problemas relacionados con diseño, y mucho mas. Esto te permitira mejorar la mantenibilidad de la plantilla (el diseño web en físico) al hacer estas actividades;
  • Puedes identificar cualquier estilo que pudiera repetirse y definirlo en el código de una manera que pueda implementarse facilmente en otra parte.
  • Puedes hacer las imagenes sin diferencia (una imagen con bordes similares), si puedes dividir los elementos de una imagen en multiples elementos, y transformar uno de esos elementos en una imagen sin diferencia mejoraría el rendimiento del sitio web entero drasticamente.
 

No puedes reemplazar a un diseñador

Desafortunadamente, esta es una verdad inevitable, tellos (diseñadores) manejan mas conceptos de color, imagenes, y como atraer la atención del usuario con esos elementos mas que tu, quizas mejores tus habilidades con el tiempo, pero si realmente quieres convertirte en un guru web (si eso realmente existe), la unica vía para lograrlo es con en tiempo (me refiero a años, muchos años), sin garantias de que realmente puedas volverte uno de ellos. Recuerda que cada persona tiene un rol y habilidades innatas, cualquiera puede mejorar sus capacidad con cualquier habilidad, no hay abilidad facil de aprender, si quieres volverte habil en algo que no sea tu habilidad innata debes esforzarte por hacerlo.
 

Consigue ayuda

Este artículo fue destinado a dar pautas a programadores con falta de habilidad en diseño a finde ayudarles a completar sus propios projectos si no pueden pagar un diseñador, no fue destinado a ayudar a reemplazar al diseñador en un trabajo profecional que necesite fechas limites y requisitos fuertes, incluso si es tu propio proyecto y realmente necesitas obtener un diseño profecional, obtener ayuda es altamente aconsejado, trabajo en equipo es la mejor manera para resolver cualquier problema y desarrollar cualquier proyecto.

About me

Acerca del autor
Miguel Rodríguez es un desarrollador freelance de Caracas - Venezuela, es una persona persistente y orientada a metas que trata de hacer el mejor uso de sus recursos, es lo suficientemente positivo, proactivo y motivado como para plantear una meta con intenciones de cumplirla, encuentra más sobre él .