Contenido
- Beneficios de diseñar con código
- Primero los datos
- Bondad móvil gratis
- Encontrar un idioma común
- Aprender más rápido
- Iteración rápida
- Tiempo de lanzamiento más rápido
- ¿Por qué HTML5?
- El atributo de datos mágico
- CSS3: es el nuevo Photoshop
- Sass + Compass: mágicamente delicioso
- jQuery: oh, sí puedes
- Frameworks
- Pensamientos finales
Este artículo apareció por primera vez en el número 235 de la revista .net, la revista más vendida del mundo para diseñadores y desarrolladores web.
Nunca he sido un gran admirador de hacer más trabajo del necesario. Tiendo a evaluar métodos y herramientas en función de su capacidad para hacerme más eficaz a mí oa mi equipo. ¿Qué tan rápido nos llevan a un producto funcional? ¿Qué tan efectivos son para comunicarse? ¿Se quedan fuera de nuestro camino?
A lo largo de los años, he ajustado mi proceso de diseño y mis herramientas. Imagino que seguiré haciéndolo. Esa es la naturaleza del diseño para la tecnología y la Web. Esta industria está en constante evolución; nuestro proceso y nuestras herramientas también deben evolucionar.
HTML5 y CSS3 facilitan la transición de una mayor parte del proceso de diseño en sentido ascendente, alejándose de Photoshop y más hacia un diseño vivo y dinámico. Herramientas como Foundation, Bootstrap y jQuery hacen que mover más de su proceso de diseño al código sea más accesible.
Beneficios de diseñar con código
Primero, no estoy abogando por eliminar Photoshop o cualquier otro editor de diseño visual de su flujo de trabajo. En cambio, me centraré en los beneficios de trasladar ese diseño al código más temprano que tarde.
Primero los datos
Lo que siempre me ha gustado de diseñar con HTML es que fomenta el pensamiento desde la perspectiva de los datos primero. Por el contrario, al usar programas de dibujo como Illustrator, OmniGraffle o Balsamiq, comienza con un cuadro y lo llena con datos.
En HTML se construye el DOM (modelo de objeto de documento), algo así como construir una tabla de contenido. Es un regreso al diseño de información real con jerarquías significativas. HTML5 va un paso más allá con la adición de nuevos elementos semánticos: artículo, sección, encabezado, aparte, pie de página, etc. Este enfoque de datos primero se combina muy bien con diseños móviles que responden primero.
Bondad móvil gratis
Si está leyendo esto, probablemente esté diseñando para dispositivos móviles. Y es probable que tenga que diseñar uno o dos formularios. Con HTML5, estás de suerte. Antes de HTML5, sus tipos de entrada eran prácticamente un campo de texto o de contraseña. HTML5 introdujo varios tipos de entrada adicionales, que incluyen:
tipo de entrada = "correo electrónico"> tipo de entrada = "tel"> tipo de entrada = "url"> tipo de entrada = "fecha"> tipo de entrada = "fecha-hora">
Lo realmente asombroso de estos tipos de entrada únicos y adicionales es que los navegadores móviles en iOS y Android los reconocen y cambian automáticamente un teclado sensible al contexto, sin necesidad de complementos o hacks especiales de jQuery. Ah, y si su navegador no sabe qué tipo de entrada = "correo electrónico"> es, entonces simplemente toma como valor predeterminado una entrada de texto.
Encontrar un idioma común
"Es increíble cómo nuestros diseñadores y desarrolladores pueden trabajar en el mismo lenguaje" - John Drago, desarrollador de aplicaciones en Inflection.
Vea si esto le suena familiar. Estoy en una sala de conferencias con media docena de desarrolladores de aplicaciones del lado del servidor que pueden codificar círculos a mi alrededor en Ruby, Python, Java o .NET. Soy el único diseñador. Algunas de mis sugerencias se descartan inicialmente por ser demasiado complicadas de implementar. Me acerco a la pizarra y empiezo a escribir algo de HTML y CSS en la pizarra para saber cómo se podría implementar el diseño. De repente, el tono de la conversación cambia y uno de los desarrolladores dice a regañadientes: "Bueno, sí, si lo hacemos de esa manera, podría funcionar".
Mover más de mi proceso de diseño al código ha mejorado las conversaciones con los desarrolladores. Hay una capa adicional de respeto ganado al saber cómo crear sus diseños en código. No es necesario ser un experto para ganarse ese respeto. Si bien mis habilidades en HTML y CSS son sólidas, mis habilidades en JavaScript son mediocres en el mejor de los casos. Y no me da vergüenza admitirlo. Aún así, cuando trabajamos con desarrolladores frontend o del lado del servidor, el hecho de que podamos hablar en un idioma común, o reunirnos a mitad de camino, es una gran ventaja.
Aprender más rápido
Si bien las estructuras alámbricas y los compuestos visuales pueden ayudar en la planificación, estos artefactos estáticos son teóricos. ¿Cuántas veces ha intentado explicar una interacción a alguien, solo para que responda: "Supongo que tendré que verlo"? Cuanto antes llegue a un prototipo, algo con lo que la gente pueda interactuar, antes podrá experimentar el diseño y ver si las ideas funcionan.
Iteración rápida
¿Cuándo fue la última vez que un diseño final enviado a producción coincidía exactamente con su composición de Photoshop? Casi nunca. Con el diseño de productos digitales, el cambio ocurre constantemente. Además, cambios como aumentar el tamaño de los encabezados de 22 a 24 puntos en un par de docenas de pantallas pueden llevar horas en Photoshop. Los objetos inteligentes le brindan cierto nivel de diseño orientado a objetos en Photoshop. Desafortunadamente, la mayoría de los diseñadores visuales que conozco no utilizan los objetos inteligentes lo suficiente. Con CSS, debido a que fomenta un enfoque más sistemático del diseño, los cambios tipográficos toman minutos en lugar de horas.
¿Qué hay de cambiar los degradados lineales en todos sus botones? ¿O del tamaño de un borde? ¿Qué tal cambiar de esquinas cuadradas a redondeadas de 2px? En Photoshop, esto puede llevar horas y todavía tienes que codificarlo. La capacidad de diseñar en código ayuda a evitar el viaje de ida y vuelta de volver a Photoshop para iterar en el diseño visual. Cuando mueves esos cambios en sentido ascendente al código, usando CSS3 y Sass (que cubriré más adelante en este artículo), pueden ocurrir en tiempo real y solo tomarán unos minutos.
Tiempo de lanzamiento más rápido
A lo largo de los años, a medida que hice la transición de mi flujo de trabajo de diseño hacia el código, experimenté una mejora real: una reducción de entre un 20 y un 30 por ciento en el tiempo de comercialización. Cuanto más hago esto, menos tiempo dedico a duplicar esfuerzos. Paso menos ciclos en Photoshop o Fireworks y luego repito el trabajo en código.
En algún momento, el diseño tiene que interactuar con algún tipo de backend, ya sea un CMS, una aplicación Rails u otra cosa. Como la mayor parte de mi trabajo de diseño está en código, la integración ocurre más temprano que tarde. Hace un par de años, uno de mis clientes, PointRoll, pasó del prototipo a la producción en cinco días.
¿Por qué HTML5?
HTML5 es más fácil que las versiones anteriores de HTML. Tomemos, por ejemplo, la declaración del tipo de documento. En versiones anteriores de HTML, el DOCTYPE se veía algo como esto:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // ES" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Y había seis versiones diferentes. Por suerte el HTML5 DOCTYPE Se ve como esto:
! DOCTYPE HTML>
En serio. Eso es. Sorprendentemente simple.
Al crear una página HTML estándar, hay una serie de elementos comunes, como el encabezado, el área de contenido principal, la barra lateral y el pie de página. Estoy seguro de que ha visto algo como esto antes:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Nada fuera de lo común allí. Pero una vez que se completa con contenido, esta plantilla se convierte en sopa div. Por el contrario, con los nuevos elementos semánticos de HTML5, obtienes algo mucho más simple y fácil de escanear, como esto:
encabezado> navegación> / navegación> / encabezado> artículo> a un lado> / a un lado> / artículo> pie de página> / pie de página>
Mira eso. Algo que tenga sentido.
El atributo de datos mágico
HTML5 viene con otro gancho increíble que le brinda la capacidad de crear su propio significado semántico: el datos-. Anteriormente, si deseaba asignar algo significativo a un elemento DOM, estaba limitado a ID, clases y roles.
Desafortunadamente, las identificaciones deben ser únicas. Las clases son universales (¡yippee!), Pero usarlas puede convertirse rápidamente en un desastre. Los roles son un activo infrautilizado que proporciona un significado significativo para ARIA. Recientemente, he estado usando datos para una plataforma de análisis de seguimiento de eventos que estamos desarrollando en Inflection.Somos grandes fanáticos de probar nuestros diseños. Cuando trabajamos en aplicaciones o páginas que tienen una gran interactividad, nos gustaría tener una visión más detallada de la participación del cliente dentro de la página.
Introducir el datos-. Con él puede asignar, transmitir y enganchar a un modelo de significado "definir su propio". Entonces, por ejemplo, puede hacer esto:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "registrar"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "registrar "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" registrar ">
Podemos adjuntar un oyente con JavaScript a la página y cada vez que un cliente pasa el mouse o hace clic en este botón, podemos rastrear esa actividad. En lugar de solo poder rastrear a alguien registrado a través de OAuth con Twitter, podemos ver que pasaron por Facebook, luego Twitter, luego LinkedIn y finalmente decidieron elegir Twitter para su modelo OAuth.
Imagine extender esto a un sitio como Pinterest o al nuevo diseño de Myspace donde los clientes arrastran y sueltan mosaicos para reordenarlos según su interés. O posiblemente esconder mosaicos que no les interesan. datos- El atributo le permite adjuntar o asignar una capa adicional de significado semántico a las cosas que puede definir. Para los sitios y aplicaciones que dependen en gran medida de Ajax, abre oportunidades ilimitadas.
CSS3: es el nuevo Photoshop
CSS3 trajo un nivel completamente nuevo de diseño de apariencia que solía requerir imágenes de fondo, cortes y la infame técnica de "puertas corredizas". Afortunadamente, todo eso es cosa del pasado.
Echemos un vistazo a cómo hacer un botón elegante con un degradado lineal, esquinas redondeadas, sombra de texto que le da un agradable efecto de presión de letras y un brillo al pasar el mouse. Aprender estas técnicas será de gran ayuda. Cada uno de ellos se puede usar de forma independiente o en varias combinaciones para lograr casi cualquiera de las tendencias visuales actuales en la web.
Primero, hagamos algunos ajustes en el valor predeterminado botón> y tipo de entrada = "enviar"> elementos. Suponiendo que use uno de los restablecimientos de CSS estándar, solo agregaremos un poco de tamaño y espacio para respirar.
/ * Botones de botones, que tienen los botones. ======================================= * * / botón, entrada [tipo = "enviar"] {altura: 2.7em; acolchado: .4em .7em; altura de línea: 1,9; }
Protip: Los botones y las entradas que se envían pueden ser difíciles de cambiar de estilo. Descubrí que al ajustar la altura de la línea a 1.6 o más, puede evitar el hack de necesitar un div o span adicional dentro del botón> etiqueta.
Ahora que "solucionamos" el problema de nuestro botón, podemos crear un .btn class para darnos un bonito botón limpio con esquinas redondeadas, un degradado lineal, contorno y ese aspecto tipográfico.
.btn {pantalla: bloque en línea; borde: 1px sólido # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; radio del borde: 4px; acolchado: .4em .7em; fondo: # edeff2; fondo: -webkit-gradient (lineal, 0% 0%, 0% 100%, desde (#fefefe), color-stop (0.55, # edeff2), hasta (# e4e6e9)); fondo: -moz-linear-gradient (centro superior, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; caja de sombra: rgba (160,172,187, .7) 0 0 .2em 0; color: # 6c7786; tamaño de fuente: 1.1em; sombra de texto: #fefefe 1px 0 1px; altura de línea: 1.375em; cursor: puntero; }
Y luego un agradable efecto de desplazamiento con un brillo sutil usando el sombra de la caja método:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; caja de sombra: # 129ceb 0 0 2px; fondo: # e6e9eb; fondo: -webkit-gradient (lineal, 0% 0%, 0% 100%, desde (# f7f7f7), color-stop (0.55, # f6f6f7), hasta (# e6e9eb)); fondo: -moz-lineargradient (centro superior, # f7f7f7, # f6f6f7 55%, # e6e9eb); color: # 45484b; sombra de texto: rgb (255,255,255) 1px 1px 0; color del borde: # c9c9c0; }
Ahora bien, no soy un gran fanático de escribir el código de gradiente lineal. Es largo y confuso. Como puede ver, solo he incluido la versión de -moz, -kit weby el modelo estándar. Si desea incluir las versiones -o y -ms, deberá duplicar el código.
Hay otras dos opciones. Uno es un generador de CSS3; hay varios disponibles en la web, incluido ColorZilla. Pero si quieres mejorar un poco tu juego, considera sumergirte en Sass: combinado con Compass, es una bendición.
Sass + Compass: mágicamente delicioso
Puede dejar de esperar la edición unicornio CSS4. Está aquí y se llama Sass + Compass. Sass son las siglas de Syntactically Awesome Stylesheets: heredas todos los beneficios tradicionales de CSS3 con las ventajas añadidas de variables, mixins, extensores y otros beneficios.
Recientemente refactoricé un archivo CSS de 5,000 líneas que tenía más de 30 variaciones en el mismo tono de azul. Con Sass, reemplacé cada variación con este código:
color: $ azul;
Definiendo $ azul en mi _variables.scss archivo, puedo crear un color predeterminado al que cada archivo CSS o SCSS pueda hacer referencia. Cualquiera que escriba CSS puede usar $ azul y no tener que preocuparse por usar un cuentagotas, encontrar un código hexadecimal o un color RGB, RGBA o HSL.
¿Recuerdas ese código de gradiente lineal? En lugar de escribir varias líneas de código, ¿qué tal esto?
@include fondo (gradiente lineal (# b1cfdc, # 7a9cac));
Deje que Sass y Compass hagan el trabajo pesado y generen la sintaxis correcta para usted: listo. Supongamos que desea una versión más oscura o más clara de un color. Puede mover el cuentagotas en Photoshop, o simplemente usar los comandos aclarar / oscurecer en Sass:
@include fondo (degradado lineal (oscurecer ($ litegray, 2%), oscurecer ($ blanquecino, 5%)));
Eso creará un degradado lineal con un 2% oscurecido $ lite-gris y 5% oscurecido blanquecino. ¡Voil! Ni siquiera necesita los códigos HEX o RGB.
jQuery: oh, sí puedes
Tengo una confesión que hacer. JavaScript solía intimidarme. Luego encontré jQuery. No pretendo ser un gurú de JavaScript, pero estoy bastante seguro de que puedo realizar casi cualquier tipo de transición o función que necesite para usar jQuery.
Tomemos, por ejemplo, la capacidad de mostrar una entrada de número de teléfono secundario en la pantalla haciendo clic en un enlace Agregar nuevo número. Usando jQuery, simplemente escribe esto:
// - Revelación progresiva - // $ (’. New-number’). Click (function () {$ (’. Alt-number’). FadeIn (’fast’);});
¿Buscas algo más avanzado? Probablemente haya un complemento para ello. Los comportamientos básicos son fáciles y los complejos son accesibles con jQuery.
Frameworks
Dos de los marcos más robustos de la actualidad son Foundation y Bootstrap. Ahora, antes de descartar los frameworks CSS, déjame preguntarte algo. ¿Usas jQuery? ¿Ruby on Rails? Django? Todos los marcos.
Al igual que jQuery y RoR, Foundation y Bootstrap nacieron al reconocer que hay una gran cantidad de cosas que hacemos una y otra vez (como restablecimientos, tipografía, cuadrículas, formularios, botones, navegación y listas). Foundation y Bootstrap ofrecen soporte para diseños receptivos mediante el uso de clases auxiliares. Ambos están bien documentados y han sido probados en carretera, por lo que puede usarlos con confianza.
Una diferencia clave entre los dos: Bootstrap se basa en el sistema LESS para el preprocesamiento de CSS, mientras que Foundation se basa en Sass. Prefiero Sass a LESS debido a sus capacidades adicionales, pero tanto Sass como LESS aplastan el CSS tradicional en pedazos.
Un último pensamiento sobre los frameworks. Para aquellos que no quieren heredar la hinchazón adicional del marco de otra persona, considere elegir uno existente y desnudarlo hasta la médula, o elegir algunos de ellos para desarrollar el suyo. De cualquier manera, realmente no hay razón para empezar desde cero cada vez.
Pensamientos finales
¿Quiere tener un mayor control sobre el resultado final de su diseño? Mueva más procesos en sentido ascendente al código. HTML5 finalmente le da algo de sentido al DOM. Buen viaje a las tonterías DOCTYPEsy divitis. CSS3 es el nuevo Photoshop: degradados lineales, radio de borde y sombras de caja FTW. Y con herramientas como Bootstrap, Foundation, Sass y jQuery, mover el diseño en sentido ascendente al código nunca ha sido tan fácil.
Descubra 55 asombrosos ejemplos de HTML5 en Creative Bloq.
