Cómo un solo ingeniero front-end puede reemplazar a un equipo de dos

Pensando con dos mentes

La demanda dentro de la escena del diseño web ha cambiado en los últimos años: los diseñadores con habilidades de front-end y los desarrolladores de front-end con habilidades de diseño tienen cada vez más demanda. Sí, podría argumentar que los trabajos son completamente diferentes, y tal vez uno de ellos no le guste, pero la verdad sea dicha, en mis seis años como desarrollador web independiente y doce años como diseñador, he Aprendí que es mucho más difícil salir adelante como diseñador web o como desarrollador front-end que como ingeniero front-end que conoce ambos roles.

Usar ambos sombreros tiene muchas ventajas: solo desde una perspectiva profesional, puede encontrar trabajo más fácilmente y cobrar una tarifa más alta porque está trayendo más a la mesa.

Pero trabajar como ingeniero front-end híbrido también tiene algunas desventajas que debe conocer y cómo solucionarlas. Como diseñador creativo, usará su “cerebro derecho”, la mitad responsable de la información visual, espacial y perceptual; en otras palabras, todo lo bonito en el diseño web. Como desarrollador técnico front-end, utilizará su "cerebro izquierdo", el socio lógico y analítico de su artista loco a la derecha.

Y, dado que eres solo una persona, esto significa que estás trabajando en dos trabajos totalmente diferentes al mismo tiempo, con el mismo cerebro, y eso puede resultar muy confuso para tu cerebro. Si no puede manejarlo, no producirá un trabajo de calidad ni alcanzará su máximo potencial. Y, si usted es un profesional independiente que intenta cumplir con una descripción de trabajo híbrida de ingeniería front-end, probablemente esté compitiendo contra un equipo de dos (desarrollador y diseñador), por lo que tendrá que trabajar en el mismo marco de tiempo mientras conservando la calidad. (¡Por supuesto, también se les puede pagar como si fueran un equipo de dos!)

Saber qué parte de su cerebro usar y cuándo usarla es la clave para agilizar sus procesos y producir los mejores resultados sin frustración y mucho tiempo de sobra en su fecha límite. Independientemente de dónde te falte, a la izquierda o a la derecha, esta publicación te ayudará a comprender las habilidades que necesitas y las formas en que puedes adquirirlas.

Una noche con tu proyecto

¿OK listo? ¡Genial! Supongamos que le han pedido que diseñe el sitio para miniCloud, una nueva empresa en ciernes que ofrece soluciones VPS personalizadas. ¿Por dónde empiezas?

Antes de comenzar cualquier trabajo "real" en un proyecto, me gusta acostarme con él. Esto significa hacer una investigación exhaustiva sobre el producto, los servicios, la competencia, etc. de su cliente. En resumen, búsquelo en Google. Después de eso, piensa en el proyecto todo el día: ¿Cómo se verá cuando termines con él? Llévalo a cenar y duerme con tu nuevo y sexy diseño en mente. Durante esta etapa, ten siempre a mano un lápiz (o teléfono móvil) para anotar las ideas a medida que te surjan. Este tipo de trabajo mental generalmente ayuda a definir aspectos clave de su proceso.

Deje fluir sus jugos creativos: el proceso de diseño

Ahora que tiene algunas ideas para construir, es hora de comenzar el proceso de diseño real. Esto consta de tres pasos: 1) boceto, 2) estructura alámbrica y 3) gráficos. Esta es la parte en la que dejas que la mitad artística del cerebro haga lo suyo y se vuelve loco con lápiz, papel y Photoshop.

Durante esta etapa de diseño, es crucial que permita que su lado de "desarrollador" lo mantenga bajo control para que no se vuelva loco con algunos aspectos del sitio web que serán casi imposibles de recrear rápidamente usando HTML, CSS y jQuery. Si intenta reinventar el navegador, su desarrollador front-end lo odiará por ello. Y tu desarrollador front-end eres tú , ¿recuerdas?

Por lo tanto, guíese por las mejores prácticas de diseño web (y algo de sentido común), porque es muy poco probable que abra nuevos caminos al rediseñar el sitio web del vestido de novia de su amiga. Esto no quiere decir que no debas intentar crear un diseño fantástico e impresionante. Más bien, piensa en algo que sepas que es factible. Los proyectos que reinventan la web generalmente se realizan en su tiempo libre sin una fecha límite sobre su cabeza.

1. Boceto : empiezo con un cuaderno de papel cuadriculado y un par de lápices. El papel cuadriculado es particularmente bueno porque puede usarlo para diseños basados ​​en cuadrículas. No tendrás ningún problema más adelante cuando traduzcas tu boceto en estructuras alámbricas y, al final, en un sitio web basado en cuadrículas. Para miniCloud, nuestro boceto podría verse así:

Tenga en cuenta que los detalles adicionales en el boceto, como la nieve, los pájaros y las nubes, son producto de mi procrastinación y no son obligatorios en ninguna parte de su proceso de diseño, pero se ven bien.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : ahora que tenemos una idea básica de cómo se verá nuestro sitio, es hora de crear wireframes que podamos mostrar al cliente. Hay muchas maneras de hacer esto. En algunos casos, puede omitir el paso por completo si cree que no es necesario. Personalmente, uso Photoshop para estructurar mi idea, ya que es la herramienta con la que estoy más familiarizado. Hay muchos kits gratuitos de estructura alámbrica en .EPS o .PSD que lo ayudan a comenzar en segundos, por lo que no es necesario que cree y dibuje todos sus elementos desde cero. También hay algunas soluciones en línea si quieres evitar Photoshop, pero yo soy más del tipo que no está conectado. De todos modos, ampliando nuestro boceto, podríamos estructurar nuestro sitio web de esta manera:

1. Gráficos : esta es mi parte favorita: transformar nuestro esquema en un hermoso sitio web. Pero no todos soy yo. Si es principalmente un desarrollador y tiene un talento escaso o nulo para el diseño, los colores, la tipografía, etc., le sugiero que comience con otros sitios web para inspirarse en el diseño. Hay muchos de ellos, y están cubiertos de grandes ideas, quién sabe, ¿tal vez hay un diseñador en ti esperando para salir? Me resulta útil mantener una carpeta de marcadores de sitios web que encuentro particularmente atractivos o bien diseñados. Picasso (?) dijo: “Los buenos artistas copian, pero los grandes artistas roban”, eso no significa que tomes el diseño de otra persona y le pongas tu calcomanía. En su lugar, inspírate en el trabajo de otra persona y añádele tu propio giro y enfoque.

Hago todo mi diseño en Photoshop. Idealmente, su cliente le proporcionará materias primas con las que trabajar, como fotografías y texto de copia que puede usar en lugar de marcadores de posición. Se ve mucho mejor cuando lo envías a revisiones.

 So, for step three, we take our wireframe and bring it to life: 

Por cierto: si finalmente usa Photoshop, existen muchos recursos geniales que harán que su proceso sea mucho más rápido, como complementos y estilos. Podría escribir una publicación completa solo sobre ellos, así que solo señalaré algunos que uso con frecuencia.

1. CSS3Ps : Complemento gratuito de Photoshop basado en la nube que convierte sus capas a CSS3.
2. Divine Elemente : crea temas de WordPress directamente desde sus PSD. Es genial para iniciar rápidamente su proyecto de WordPress. Aunque dicen "No se requieren habilidades de HTML", en realidad necesitará algunas si desea obtener resultados increíbles.
3. Patrones sutiles : colección de patrones gratuitos para usar en sus diseños, generalmente como fondos. Detalles como estos marcan la diferencia cuando intentas que tus diseños pasen de buenos a increíbles.

“Slice It Up”: el proceso de front-end

Una vez que terminé con la etapa de diseño y recibí la aprobación del cliente satisfecho, estoy listo para convertir mis imágenes estáticas en sitios web en vivo. Recuerde, en este punto, nuestro diseño sigue siendo solo eso: un diseño. Tenemos mucho camino por recorrer antes de que esté listo para la web.

En esta etapa, es hora de usar la mitad izquierda, más analítica, de su cerebro.

En el mundo del diseño web, nos referimos a este proceso como "rebanar". Aunque el término era más preciso hace algún tiempo, antes de que CSS se convirtiera en el principal bloque de construcción visual de la web y tuvieras que cortar cada pequeña parte de tu PSD o PNG y ponerlo en pequeñas tablas terribles, se quedó.

Si eres un diseñador web y aún no sabes cómo 'front-end', estás de suerte, porque la codificación se puede aprender (a diferencia de tener una habilidad natural para el diseño). Le recomendaría invertir en algunos tutoriales en video en línea como Lynda.com y repasar los conceptos básicos de desarrollo front-end. (Puede encontrar una lista más definitiva de recursos aquí). En cuestión de horas, pasará de cero a leer el código. Y en cuestión de días, lo estarás escribiendo tú mismo. Y en un par de meses, será un maestro de HTML y CSS; entonces, nada lo detendrá cuando se trate de trabajos de ingeniería front-end.

Ahora, si creó algunos excelentes wireframes (en la etapa anterior) de acuerdo con una cuadrícula con la que se siente cómodo, sabrá exactamente cómo desea que se codifique su sitio. La forma más rápida sería usar algún tipo de marco frontal, como Bootstrap.

Una vez que domine el diseño basado en cuadrículas, comenzará a ver cada parte de su sitio web como un conjunto de filas y columnas. Lo primero que hago cuando configuro mi estructura HTML, antes de agregar cualquier contenido real o CSS, es escribir en las filas, luego en las columnas, luego cosas básicas como la navegación, seguidas de marcadores de posición de texto e imagen. Esto le permite obtener la estructura básica primero y construir a partir de ahí. Mirando esta estructura alámbrica, podemos ver seis filas:

1. Logotipo / Navegación
2. Control deslizante de imagen
3. Texto de introducción
4. Imágenes de categoría
5. Últimas noticias / ofertas
6. Pie de página

Después de encajarlos en la estructura HTML de Bootstrap, tendríamos algo como esto:

Muchos sitios web básicos usan el mismo código (o uno similar) y, a medida que trabaje en más y más proyectos, verá que el desarrollo de sitios web es en gran medida un proceso iterativo, y no tiene sentido escribir el mismo código en cada iteración. . ¡Es por eso que los marcos son útiles! Ya sea que haya creado uno propio o haya decidido usar Bootstrap o Foundation, no importa. Lo que importa es que puede mantenerlo más adelante y expandirlo si es necesario.

Casi todo lo que necesita para un proyecto se ha hecho antes y luego se ha vuelto a hacer un par de veces. Entonces, para cualquier tarea importante, busque y pregunte a otros si tienen sugerencias antes de atravesar una pared de cabeza. La mayoría de los grandes marcos tienen comunidades muy activas que crean código adicional y complementos para facilitar su trabajo. Así que trabaje inteligentemente, no duro, y aprenda todos los días. Y, si necesita algo que nadie ha construido antes, entonces, ¡está abriendo nuevos caminos! Escriba sobre esto y compártalo con la comunidad; lo ayudará a crecer como diseñador y desarrollador.

Elegir un CMS

Para algunos proyectos de ingeniería front-end, terminará tan pronto como su diseño exista en una página web activa. Suelen ser sitios más pequeños (p. ej., para pequeñas empresas, abogados, dentistas, etc.). Pero a menudo, usted o su cliente querrán tener control sobre el contenido del sitio web. En ese caso, necesita un sistema de gestión de contenido (CMS). El objetivo de un CMS es permitirle editar y publicar contenido en una página web sin tener que codificar cada nuevo detalle a mano, o incluso codificar en absoluto.

De todos los grandes CMS, me llamaría a mí mismo un evangelista de WordPress: Me encantan los demás desarrolladores, especialmente los principiantes, debido a su versatilidad, facilidad de uso, documentación completa para el desarrollo, gran comunidad, gran cantidad de complementos gratuitos, y así sucesivamente y así sucesivamente…

Si alguien te dice que Joomla! es mejor, especialmente para proyectos más pequeños, entonces no saben de lo que están hablando. De todos modos, no confíes solo en mi palabra: ¡descarga WordPress y Joomla! temas de inicio, eche un vistazo a cada carpeta y luego pregúntese: ¿cuál desea explorar en su nuevo rol de front-end?

Necesitaría un artículo completo para escribir sobre este tema, pero confíe en mí al igual que confiaría en Baz Luhrmann con el protector solar.

Si su proyecto es particularmente pequeño y solo necesita un CMS simple que pueda implementarse sin ninguna habilidad de codificación, le recomendaría que use CouchCMS. Con solo un par de etiquetas XHTML, puede ponerlo en funcionamiento en cuestión de minutos, e incluso su abuela sabrá cómo usarlo.

Mantenimiento de su sitio web

Una vez que haya entregado su sitio web y tenga otro cliente satisfecho, todo lo que le queda por hacer es mantener el sitio. Si ha creado un sitio HTML simple que no tendrá contenido nuevo, probablemente haya terminado.

Si ha utilizado un CMS, deberá asegurarse de que la tecnología esté siempre actualizada para evitar brechas de seguridad. Esto incluye el propio CMS y cualquier complemento que haya utilizado. Si siguió mi consejo y usó WordPress, se le notificará por correo electrónico cada actualización disponible.

Este es el estadio de mi proceso. De acuerdo, esto no funcionará para todos, y ciertamente no se aplicará a todos los proyectos. Pero espero que esto les ayude a los diseñadores a obtener las habilidades que necesitan para convertirse en excelentes ingenieros de front-end, y viceversa, para que podamos seguir aumentando nuestro talento como desarrolladores de front-end.

Sólo puedo mostrarte la puerta. Tú eres el que tiene que atravesarlo. - Morfeo, Matrix

PD: Puede encontrar un PSD de la plantilla anterior y otros diseños geniales en mi cartera de dribble.