Un caso para la codificación de sus wireframes

Trabajar como diseñador día tras día puede ser laborioso. Afortunadamente, el campo se ha expandido, por lo que el proceso se ha simplificado. Muchas herramientas y recursos gratuitos están disponibles.

Las estructuras metálicas aportan elegancia para diseñar maquetas. Son la estructura básica de un sitio web, con colores y mejoras eliminadas.

Se utilizan para ver conceptos de diseño con los elementos esenciales, y pueden proporcionar una perspectiva útil en cualquier proyecto.

La mayoría de los wireframes se crean en suites de software como Adobe Photoshop y Fireworks, pero algunos sitios web le permiten crear imágenes de wireframe directamente en el navegador.

En esta publicación, revisaremos la codificación de una imagen de estructura básica en HTML y CSS y veremos cómo puede beneficiar el proceso creativo.

¿Por qué molestarse?

¿Por qué perder tiempo dibujando la estructura de un sitio web? En algunos casos, podría ser innecesario, pero puede ser útil cuando estás atrapado en una rutina o luchando por ver el panorama general.

Puede beneficiar tanto a diseñadores como a clientes. En el trabajo remunerado, usted es responsable de complacer al cliente. Mostrar la estructura básica de su sitio web que pronto será diseñado puede brindar al cliente alivio y una sensación de control sobre todo el proceso.

Pero si el diseño es muy básico o tiene una estructura simple, la creación de una estructura de alambre puede no valer la pena; burlarse de todo en Photoshop, con botones y color, puede ser igual de rápido.

Decidir qué pasos tomar requiere tiempo y pensamiento crítico. Después de todo, un wireframe es simplemente una herramienta. Es subestimado por muchos diseñadores web pero sorprendentemente útil una vez entendido.

Creación de prototipos de wireframes en código

Durante años, el software de diseño de Adobe ha sido la suite principal para la creación de estructuras alámbricas, pero la web ha sufrido cambios sustanciales y todavía está evolucionando.

El aumento de los estándares de codificación y el aumento en Documentación HTML5 son grandes pasos hacia una web común. Ahora, codificar un wireframe básico en HTML y CSS no es más trabajo que abordar el trabajo en Fireworks.

Con wireframes, puedes atacar un proyecto de frente desde múltiples ángulos. Incluso puede probar la compatibilidad con las técnicas y navegadores CSS2 y CSS3. Las cosas no necesitan ser complejas al principio; un wireframe simplemente sirve como una base sólida para comenzar a codificar.

Compartir contenido también se vuelve más fácil con un wireframe. Puede alojar todos los archivos que necesita en cualquier servidor web, y puede configurar un directorio de demostración y reenviar actualizaciones en tiempo real a los clientes y supervisores de su proyecto. Hacer cambios, como ajustes rápidos a los márgenes y anchos en el CSS del documento, es simple también.

Estandarizar el Código para el Largo Recorrido

Los wireframes ahorran tiempo en el proceso de desarrollo. Si los estilos CSS para sus elementos básicos ya están escritos, el resto es solo relleno (material de relleno importante, téngalo en cuenta).

Comience correctamente, con el tipo correcto de documento HTML y la estructura de directorios. Los tipos de documentos no son muy diferentes entre sí. Puedes leer sobre ellos en el Página de especificaciones W3C . No importan mucho en el viejo modelo de World Wide Web, pero HTML5 es minucioso y permite que su sitio web crezca.

De todos modos, debe probar la compatibilidad en tantos sistemas operativos y navegadores como sea posible, y la etapa de creación de prototipos de wireframe es el momento perfecto para hacerlo, porque ya está concentrado en organizar el diseño.

Este es también un buen momento para trabajar en una plantilla optimizada para dispositivos móviles. A medida que la estructura cambia, debería poder incorporar ideas y manipular el código del documento. El desarrollo se vuelve más fácil porque hay menos código para complicar sus estilos móviles y personalizados.

Principio de la estructura del documento Wireframe

La mejor manera de comenzar es con una pizarra en blanco, porque te ofrece la mayor creatividad. Los elementos obvios para incluir en el código (como en cualquier otro documento web) son html , head y body .

Este es el esqueleto. Necesitarás algunos elementos más para que el wireframe se vea bien. los div (o división) es notable. Este es el elemento utilizado para encasillar ciertas áreas de la página, como el logotipo o el cuadro de búsqueda.

Divs son los bloques de construcción de prototipos de estructura alámbrica HTML5. Cualquier cosa y todo puede estar envuelto en una div , y el estilo es muy sencillo cuando aplica clases e ID a los elementos. Gran parte de tu código principal se dividirá por divs porque son los elementos de bloque básicos.

Con las nuevas especificaciones HTML5, un elemento llamado nav ha sido introducido. Esto se puede combinar con una lista desordenada y algunas propiedades de CSS para crear y definir el área de navegación principal de su sitio web. A continuación se muestra un ejemplo simple de cómo puede estructurar su nav :

Trabajando con header y footer Elementos

Notarás en el ejemplo anterior que utilicé div con una identificación de header para separar mi rumbo de navegación Esto es perfectamente aceptable y nada está mal con el código anterior. Sin embargo, HTML5 nos da otras opciones.

los header elemento en las nuevas especificaciones de HTML5 le permite definir aún más su estructura, que es útil sobre todo para los rastreadores de páginas web y lectores de pantalla, que separan una parte de "encabezado" del contenido. No debería hacer ninguna diferencia para sus usuarios, y mantiene su código en forma y muestra que realmente entiende de lo que está hablando.

Otro elemento interesante que se ha agregado es footer . La misma idea: use este elemento en lugar de div para separar el contenido de tu pie de página. En general, los pies de página están fuera del camino y contienen información básica sobre el sitio web o la empresa.

Puede agregar enlaces al pie de página y usar un nav elemento para definir algunos de ellos, pero sería desacertado. los nav elemento especifica el área de navegación principal, por lo que agregarlo al pie de página o en cualquier otro lugar sería redundante.

En este escenario, usando el footer Elemento y separar los enlaces de navegación como una lista desordenada es lo mejor. Puede usar un pie de página con columnas, con varias columnas de enlaces. Estos podrían ser separados div elementos que se muestran uno junto al otro, todo envuelto en el pie de página principal.

Técnicas CSS para diseñar wireframes

Si entiende HTML y ha trabajado con la web por un tiempo, entonces probablemente conozca algunos CSS básicos. Muchas de las nuevas características de CSS3 son para agregar esquinas redondeadas elegantes y sombras paralelas al texto.

No pretendo sugerir que el estilo de CSS no sea importante, pero el diseño central y el posicionamiento es lo que finalmente hace que la estructura de su sitio web. Con CSS, define ancho, margen y espaciado. Estas son las propiedades básicas de la mayoría de los elementos web, y son el último paso para crear un wireframe verdaderamente excepcional.

Si está intrigado por las nuevas propiedades y selectores de CSS3, consulte el Depósito de Webdesigner Depot colección de mejoras . Contiene guías en toda la web sobre las nuevas funciones en CSS3.

Añadiendo clearfix a los estilos

Si no está familiarizado con la técnica de clearfix, haga alguna investigación . Es una clase popular que agregarías a un div contenedor que contiene dos o más bloques flotantes.

Si nunca has oído hablar de clearfix, puede parecer confuso, pero el concepto es simple. Piensa en un contenedor div eso tiene dos div s dentro de él, ambos flotaron a la izquierda. De forma predeterminada, la mayoría de los navegadores representarían las dos columnas directamente una al lado de la otra, y la que contiene div se expandiría hacia abajo en la página para adaptarse a la columna que sea más larga.

Al agregar un clearfix clasifique a su contenedor, ambas columnas encajarán felizmente dentro del contenedor div , que se expande lo suficiente como para adaptarse a ambos elementos. Esto resuelve muchos problemas en prototipos de wireframe, particularmente con diseños de dos columnas (es decir, el contenido principal y la barra lateral). Este método también funcionará para diseños de tres y hasta cuatro columnas, cada columna solo tendría que caber en un espacio más pequeño.

Mostrar CSS: mantener los estilos externos

Qué hacer con la colocación de CSS es otra decisión importante. Los diseñadores y desarrolladores web profesionales simplemente sugieren mantener una independencia .css archivo, separado de tu código HTML.

De esta manera, la estructura está en un documento y el diseño y la disposición están en otro. Ambos son igualmente importantes para wireframes, pero realizan tareas distintas.

Todo su código HTML es estrictamente estructural. Puede poner enlaces dentro de los párrafos dentro del contenedor div s dentro de otros contenedores, y así sucesivamente. El estilo controla el tamaño, el espaciado, los márgenes y las letras de los párrafos y enlaces, y el diseño del cable define el ancho de los contenedores y su ubicación en la página.

Los elementos de la página brindan más ejemplos. Usted codificaría el div contenedores para contenido y barras laterales, pero los diseñaría y posicionaría usando CSS. Para un diseñador, entender cómo separar el contenido y el estilo es clave para dominar los wireframes.

Implementar marcadores de posición de elementos de página dinámicos

Los efectos elegantes de jQuery y los elementos web Ajax-ified parecen estar de moda. Las tendencias crecen y casi todos los sitios web populares presentan contenido dinámico. Es importante considerar Si complementan el diseño, ¿por qué no incluir bloques en su estructura alámbrica?

Desarrollar un sistema completo de back-end para un cuadro de inicio de sesión dinámico puede no ser práctico, pero tener en cuenta las bibliotecas de JavaScript que necesitará es un gran comienzo. También podría codificar los estilos que estructuran este cuadro y establecer las cosas para más adelante, cuando agregaría color y detalles.

Estos temas se pueden aplicar a muchos elementos de la interfaz. Puede usar sugerencias de búsqueda similares a las de Google o dejar notas en su código para implementar un cuadro de noticias dinámicas o de Twitter, ya sea que haga que su estructura metálica sea dinámica y proporcione una forma elegante de representar un objeto de estado sólido en lugar de contenido dinámico . Durante la fase de creación de prototipos, esto es todo lo que necesita de todos modos.

Errores Comunes de Desarrollo de Wireframe

Es difícil equivocarse cuando recién está comenzando a codificar la estructura básica de un sitio web, pero tenga ciertos detalles en mente.

Recuerde que el propósito de un wireframe es presentar un marco sin muchos detalles. Es útil durante las etapas iniciales de planificación de los elementos de la página; puede profundizar en su sitio web y ver el panorama general.

Mantenga las cosas simples y en orden. Pasar por alto esto es un error común y le impedirá cumplir con los plazos. Un wireframe no necesita estar cerca de ser perfecto; se supone que es un bosquejo del sitio web. Incluso un wireframe estrictamente HTML y CSS debe consistir solo en esquemas de elemento de página.

Evite desvíos centrándose en sus objetivos principales. ¡Recuerda por qué comenzaste el proceso con una estructura metálica en primer lugar!

Wireframes también puede resolver muchos problemas que afectan el proceso de diseño. La codificación de un prototipo en HTML y CSS es la mejor manera de iniciarse en un proyecto web, grande o pequeño. Es una manera simple y eficiente de dar forma a tus ideas.

UN tonelada de artículos en la web se relacionan con el proceso de wireframing. Cubrí el lado de la codificación y el desarrollo, pero para aprender más sobre wireframing, sigue leyendo. Los consejos de diseño están por ahí; ¡Sólo tienes que encontrarlos!

Esta publicación fue escrita exclusivamente para Webdesigner Depot por Jake Rocheleau , un apasionado diseñador de páginas web y entusiasta de las redes sociales. A Jake le encanta leer y escribir sobre las últimas tendencias digitales de Internet y las redes en la comunidad de diseño. Echale un vistazo en Twitter @jakerocheleau para más sobre su trabajo.

¿Cuáles son sus experiencias con el proceso de wireframe? ¿Trabajas primero en código o en algún otro tipo de software? ¿Cuáles cree que son algunos de los beneficios de la creación de prototipos en el código primero?