Share
¡Felicidades! Ha diseñado su sitio y siente que está listo para ser enviado a un equipo de codificación. Es posible que tenga un desarrollador en mente, o que esté comparando las populares tiendas de PSD> HTML que existen ... incluso podría planear codificarlo todo usted mismo. Independientemente de la solución que decida, hay algunos trucos que creo que todos los diseñadores deben saber cuando preparan sus diseños para que se codifiquen en sitios web totalmente funcionales..
Philo Hermans es un desarrollador web independiente de Utrecht, Países Bajos. Tiene más de 9 años de experiencia y, a menudo, trabaja con diseñadores para convertir sus diseños en sitios web o aplicaciones web totalmente codificados. Philo también es un exitoso desarrollador de complementos en CodeCanyon, y ha escrito con frecuencia en Nettuts +. Con esa introducción fuera del camino, comencemos con los consejos!
La teoría detrás de la creación de comps de "píxel perfecto" se puede expresar de la siguiente manera: nosotros ver es qué tú ¡obtener! La mayoría de los codificadores no interpretarán tus diseños para ti. Si entrega una composición de diseño con márgenes, relleno, tamaños de fuente, colores, etc., la mayoría de los desarrolladores lo codificarán exactamente como lo vemos, ¡incluidos los errores! Esto puede significar mucha frustración y tiempo perdido (y dinero) haciendo revisiones; así que ahórrese un dolor de cabeza y envíe composiciones de píxeles perfectos si desea una codificación de píxeles perfectos.
Antes de enviar su diseño a la fase de codificación, tómese una o dos horas para revisarlo con un peine de dientes finos..
La solución de flujo de trabajo aquí es simple: antes de enviar su diseño a la fase de codificación, tómese una o dos horas para revisarlo con un peine de dientes finos. No necesariamente tiene que documentar todo su diseño (aunque algunos desarrolladores lo requerirán), pero es crucial asegurarse de que los siguientes elementos sean exactamente como los quiere:
También vale la pena tomarse un momento para establecer algunas "pautas" dentro de los archivos de diseño que entrega. Una forma fácil es usar una plantilla de cuadrícula como la que proporciona el sitio web 960.gs. Las pautas en la plantilla de cuadrícula aseguran que los anchos de los elementos sean precisos. Entonces, en lugar de tener un contenedor de 957px de ancho, serán exactamente los 960px que pretendía.
Si quieres algo que no sea obvio, como un menú de navegación que debe deslizarse hacia abajo cuando mueves el mouse hacia la parte superior de la pantalla. Asegúrate de aclararlo agregando notas. Hay algunas formas en que puede hacer esto (he visto todo, desde documentos de PowerPoint hasta impresiones con escritura manual), pero mi forma favorita en realidad es bastante simple: use la Herramienta de notas en Photoshop (ver imagen abajo). La herramienta de notas hará que las notas aparezcan automáticamente cuando un desarrollador abra el archivo, y es fácil de leer rápidamente sobre lo que un diseñador ha pensado.
Si no estás usando Photoshop, está bien. La mayoría del software de gráficos que he encontrado (desde Fireworks a Illustrator) tiene una forma similar de agregar notas. Si por alguna razón no es una opción, simplemente convierta sus notas en un archivo de texto que incluya con los archivos que entregue al desarrollador..
Cuanto más detallado sea su diseño en términos de interacción, más fácil será para un desarrollador codificarlo. Asegúrese de agregar algunos ejemplos de cómo se verá su diseño cuando interactúe con él. Cada diseño será diferente, pero las interacciones importantes que no deben olvidarse incluyen:
La razón detrás de este consejo es la siguiente: si no le muestra a un desarrollador cómo espera que se vea una cierta interacción, es probable que utilicen un diseño genérico sin estilo, que podría destacarse como un pulgar dolorido. Claro, hay algunos programadores (¡como yo!) Que harán nuestro mejor esfuerzo para adivinar lo que hubieras querido, por eso dejas algo tan importante para adivinar cuando te toma solo unos minutos diseñarlo tú mismo?
El tiempo es dinero, así que si diseñas un sitio web con un control deslizante de aspecto agradable y sabes exactamente qué script sería perfecto para él, ¡díselo al desarrollador antes de que empiecen a codificarlo desde cero! Si no tiene un script en particular en mente, probablemente valga la pena dedicar unos minutos a buscar si existe uno o no. Los scripts personalizados pueden costar mucho tiempo y dinero, y es mucho más fácil para usted crear un diseño teniendo en cuenta un script en particular que crear un script personalizado desde cero para que coincida con su diseño..
¡Usar scripts pre-hechos no es algo malo! Esto podría parecer un consejo destinado a aplastar su creatividad, pero piénselo de esta manera: puede tomar fácilmente 20 veces más tiempo para codificar algo desde cero en lugar de usar un código prefabricado. Los scripts pre-construidos son generalmente fáciles de adaptar y rediseñar, y hay miles y miles de ellos disponibles a través de una simple búsqueda en Google. Envato incluso tiene su propio mercado para scripts premium si no puede encontrar uno gratuito que funcione: CodeCanyon!
Imaginemos que eres un diseñador en un gran proyecto. Pasas semanas trabajando en un diseño y finalmente obtienes la aprobación de tu cliente ... solo para descubrir una semana después que es casi imposible codificar el diseño y que costará 10 veces más de lo que el cliente había presupuestado; Todo porque usted diseñó todo el sitio sin una comprensión de lo que es y no es posible con una determinada tecnología (Flash, HTML, etc.).
Uno de los consejos más importantes que puedo dar es este: es vital que todos los diseñadores web tengan algunos Conocimiento de la plataforma para la que están diseñando. Esto podría ser HTML, Flash, PHP o incluso un dispositivo como un teléfono o tableta. Cuánto aprendes depende de ti, pero la comprensión básica de cómo funciona una plataforma te ahorrará mucho dolor a largo plazo. Con demasiada frecuencia me dan un magnífico diseño que no es práctico (o asequible) para codificar porque no ha sido diseñado teniendo en cuenta la practicidad.
Con demasiada frecuencia me dan un magnífico diseño que no es práctico (o asequible) para codificar porque no ha sido diseñado teniendo en cuenta la practicidad.
No estoy sugiriendo que limites tu creatividad (casi cualquier cosa puede codificarse con suficiente tiempo y energía); y tampoco estoy sugiriendo que salgas y te conviertas en un gurú de la codificación (¡me quedarías sin trabajo!) ... Pero tener un conocimiento básico de la tecnología para la que estás diseñando te ayudará a informar tus diseños con algunos Reglas básicas que harán que su codificación sea más fácil y más asequible..
Por ejemplo: si diseñó un sitio para que se construya como una página web estática, tendría sentido aprender un poco sobre cómo funcionan HTML y CSS. Tener solo una comprensión básica de cómo HTML y CSS se relacionan entre sí será suficiente para que pueda tomar mejores decisiones cuando esté diseñando. Cuanto más informado esté un diseñador acerca de la tecnología para la que está diseñando, mejor se volverán a diseñar.!
* Sí, HTML no es la única tecnología que existe, así que si estás diseñando con Flash u otra tecnología en mente, haz de eso el foco de tu investigación ... aunque la consigas, el arquitecto debería saber cómo hacer pivotar un martillo. incluso si él nunca lo hace.No es necesario que proporcione una guía de estilo de 20 páginas para cada sitio web que diseñe, pero la comunicación de los principios que pueden no aparecer en las composiciones puede ser realmente importante para el éxito de cualquier proyecto de codificación. Si su diseño tiene requisitos especiales (es decir, debe cumplir con ciertos estándares de accesibilidad o debe ser 100% compatible con IE5.1, etc.), asegúrese de informar al programador por adelantado para que podamos planificarlo con antelación. . Descubrir los requisitos más importantes DESPUÉS DE QUE el diseño esté codificado es una receta para revisiones costosas, que no son tan divertidas o lucrativas para los programadores como usted podría imaginar. La mayoría de nosotros preferiríamos pasar a otro proyecto emocionante en lugar de pasar meses haciendo revisiones con un cliente frustrado.
Lo último que mencionaré es esto: si sigue estos consejos, no solo encontrará que sus diseños se vuelven más fáciles y más asequibles para el código, sino que probablemente también notará que su trabajo mejorará como resultado. Tomar algunos pasos adicionales para garantizar que sus diseños tengan sentido en el mundo práctico del desarrollo web puede ser la diferencia entre un buen sitio web y un sitio web excepcional. Espero que hayan disfrutado este artículo.!
Accentsconagua