Como desarrollador web, ¿debería crear primero una estructura alámbrica o simplemente construir? ¿Cuáles son tus pensamientos?

Crea la estructura metálica. Le ayudará a asegurarse de que no olvide algo.

Comienzo con un mapa del sitio que muestra cómo está organizado el sitio en el formato de un diagrama de flujo.

Una vez que esto se haya aprobado, puedo crear wireframes para cada tipo de página (página de inicio, página de inicio de sección, página de inicio de blog, publicación de blog única, página de error 404, página de resultados de búsqueda, etc., según sea necesario. A veces solo necesita uno o dos, a veces necesitas más). Estos pueden ser simples bocetos a lápiz. Por lo general, los hago en Adobe InDesign, pero los estilizo para que parezcan bocetos en bruto. Estos están destinados a decirme qué elementos de contenido deben estar en la página, pero no están destinados a mostrar el posicionamiento o diseño exacto. (Si se ven muy bien, entonces el cliente comentará sobre el diseño. Él / ella puede decir que debe ir a la derecha en lugar de a la izquierda, o debe ser de un cierto color. No quiero que piensen en eso todavía Solo quiero que estemos de acuerdo sobre qué elementos deben incluirse en la página).

Los wireframes pueden servir como guía para el proceso de diseño. Esto le permite al diseñador saber qué incluir, pero puede reorganizar las cosas en apoyo de la marca y la experiencia del usuario.

El mapa del sitio, los wireframes y los archivos de diseño me proporcionan los detalles y la dirección que necesito para construir el sitio. También sirven como referencia para el cliente y para aquellos que producen contenido.

Si el proyecto es para mí (en lugar de para un cliente), el proceso puede ser menos formal, pero aún tendré un mapa del sitio y esquemas de alambre esbozados en papel. Me gusta imaginar que puedo mantener toda esta información en mi cabeza, pero esbozarla me ayuda a pensar en el proceso y sirve para recordarme mis planes.

Cuando comenzamos nuevos proyectos en Byfrost, comenzamos por una buena parte de la aplicación. A partir de ahí, usamos nuestros procesos de desarrollo para iterar y expandir nuestros diseños.

Wireframing te ayuda a crear / idear sin la limitación de cómo necesitas hacer que algo funcione con código. El código tiene una personalidad propia y cada vez que programa permite que la personalidad de los idiomas se imprima en usted.

Dicho esto, hay una limitación de cuánto tiempo debe diseñar. Este es un ejemplo del problema óptimo de detención [1]. Podrías continuar desarrollando cada página y detalles para tu sitio, pero eventualmente solo necesitas ingresar al código y hacerlo realidad.

Construimos muchos sitios en Byfrost y uno de nuestros grandes puntos de venta es nuestra velocidad. Entendemos la velocidad de la web moderna y la de las nuevas empresas, por lo que cuando construimos, queremos asegurarnos de que nuestro tiempo se pase bien. Eso significa encontrar el tiempo óptimo para dedicar tanto al diseño como al desarrollo.

Notas al pie

[1] Parada óptima – Wikipedia

Wireframe es imprescindible, especialmente si desea crear proyectos sólidos y grandes. Esta es la primera parte de cada proyecto: diseño de UX y UI.

Como desarrollador web, debe codificar, por supuesto, pero con la mente correcta.

Aquí está mi blog sobre desarrollo web: https://dailygit.com

Wireframe primero, o al menos encuentre un sitio existente que modele de cerca lo que tenía en mente.

Mi instinto sería simplemente construirlo, pero la experiencia me dice que eso no saldrá bien.

La primera parte de mi carrera, antes de la Web, fue exclusivamente en diseño de impresión. Me mimaron las aplicaciones de impresión como Quark Xpress o Adobe InDesign que simplemente te permitieron dar forma a un diseño completo como un escultor que trabaja con arcilla: desliza hacia abajo el blob principal, luego agrega más o quita un poco hasta que sientas que se dirige en la dirección correcta, y luego refinar y pulir. Puede aplicar un nuevo blob si falta algo y continuar.

Cuando terminaste, el único dispositivo en el que tenías que preocuparte por probarlo estaba en la oficina de salida, y las cosas generalmente funcionaban sin problemas.

Como proceso de diseño, es un buen ajuste personal. Tengo un buen sentido de lo que funciona, pero no siempre sé cómo llegar allí. Necesito jugar visualmente un poco antes de tomar decisiones, a menudo finalizando pequeñas porciones para ver si una idea va a funcionar.

Desafortunadamente, el diseño web no funciona de esa manera. No se ha creado (todavía) ninguna aplicación que le permita desarrollar libremente un diseño, al tiempo que emite un código que funcione bien con cualquier otra plataforma, marco o back-end que pueda necesitar.

El desarrollo web es programación, y fallará con facilidad y frecuencia. Incluso el cambio más pequeño puede terminar rompiendo muchas cosas que tomarán mucho tiempo arreglar.

Y, es demasiado fácil concentrarse en hacer que los fragmentos funcionen, que pierda la noción de lo que se supone que debe lograr el sitio.

Imagina construir un edificio alto y darte cuenta al final del juego de que necesitas otro ascensor o un sistema de ventilación industrial; tienes un gran problema

Por lo tanto, algún tipo de plan es imprescindible. Obtener los “huesos” correctos la primera vez es la única forma de completar un sitio en un período de tiempo razonable.

Estructura metálica No tiene que ser elegante, solo dibujo en una tarjeta de índice lo que va a dónde. Creo que si construyo sin una hoja de ruta, tenderé a perder de vista la intención general y el diseño del sitio web. Haré demasiados cambios sobre la marcha y no superaré los obstáculos del código. si estoy trabajando en un equipo, entonces necesito mostrar estructuras de alambre de mayor fidelidad, como usar Sketch en modo de rayos x. Si tiene buena práctica, entonces probablemente pueda simplemente entrar en Webflow y omitir la estructura metálica ya que ese programa es amigable e intuitivo. Es una especie de medio paso entre el código y el diseño / O si usa un marco como Bootstrap, tiene una idea de lo que es fácil y posible que simplemente puede construir.

Como novato, la estructura metálica te hace pensar en el problema.

Desarrollador avanzado, lo mismo.

Simplemente agregaré que pensar es más barato que construir.

Si se trata de estructuras metálicas complejas o de bosquejar ideas, comience por pensar en lo que está haciendo. Entonces construir.

Te aconsejo que primero crees una estructura alámbrica, ya que puede reducir el tiempo de construcción de un producto.

Puede cambiar fácilmente la idea, la ruta, el objeto en la estructura alámbrica, pero perderá mucho tiempo para editar y cambiar su código.

No somos desarrolladores web, pero nuestro equipo siempre comienza con una estructura alámbrica primero para que podamos votar los cambios que se realizarán antes de la implementación. Hemos intentado en el pasado sumergirnos en el edificio y modificarlo en el camino y fue caótico.