Cómo planear una página web

Si quieres diseñar y crear una página web, descubrirás que es mucho más sencillo si planeas de antemano. La fase de planeamiento permite que el desarrollador y el cliente trabajen juntos para encontrar un formato y una disposición que concuerden con sus necesidades. El proceso de planeamiento influencia las decisiones de estilo y probablemente sea el aspecto más importante del diseño de páginas, en especial en el campo de los negocios.

Parte 1

Parte 1 de 4:

Crea la estructura subyacente

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Plan-a-Website-Step-1.jpg\/v4-460px-Plan-a-Website-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Plan-a-Website-Step-1.jpg\/v4-728px-Plan-a-Website-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Determina la función del sitio. Si haces la web para ti mismo, es probable que ya sepas la respuesta. Si haces la web para otra persona, compañía u organización, tendrás que saber qué esperan de esta y de su funcionalidad. Todo lo que decidas en esta etapa impactará en la web final.
- ¿Necesita una interfaz de ventas? ¿Quieres comentarios de usuario? ¿Los usuarios deberán registrarse? ¿Contendrá artículos? ¿Contendrá muchas imágenes? Todas estas preguntas y más te ayudarán a establecer el diseño y la estructura de la web.
- Puede resultar un proceso interminable, en especial si se trata de una compañía grande con muchas personas involucradas en el proyecto.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/3e\/Plan-a-Website-Step-2.jpg\/v4-460px-Plan-a-Website-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/3e\/Plan-a-Website-Step-2.jpg\/v4-728px-Plan-a-Website-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Un mapa del sitio es como un diagrama de flujo y muestra cómo los usuarios saltan de una página a otro. Ni siquiera necesitas páginas en este punto, solo un flujo general de conceptos. Puedes usar un programa informático para crear el diagrama o esbozarlo tú mismo en un trozo de papel. Usa el mapa del sitio para planear la jerarquía y la conectividad del sitio web.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fb\/Plan-a-Website-Step-3.jpg\/v4-460px-Plan-a-Website-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fb\/Plan-a-Website-Step-3.jpg\/v4-728px-Plan-a-Website-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Un método grupal popular es usar un conjunto de fichas para averiguar la clasificación ideal de cada una. Toma un juego de fichas y escribe el contenido básico de cada página en cada ficha. Haz que el equipo organice las fichas de la manera que consideren más útil. Es mejor en situaciones de creación web colaborativas. ^{[1]
X
Fuente de investigación}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/Plan-a-Website-Step-4.jpg\/v4-460px-Plan-a-Website-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/Plan-a-Website-Step-4.jpg\/v4-728px-Plan-a-Website-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Es el método barato de planeamiento original y permite quitar o mover contenido para darle una nueva dirección. Dibuja el diseño en trozos de papel y conéctalos con hilo o dibuja la disposición en una pizarra. Este método es excelente para sesiones de lluvia de ideas.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ac\/Plan-a-Website-Step-5.jpg\/v4-460px-Plan-a-Website-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ac\/Plan-a-Website-Step-5.jpg\/v4-728px-Plan-a-Website-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Es más adecuado para el rediseño que la creación de webs. Introduce cada uno de los elementos o páginas existentes en una hoja de cálculo. Haz notas sobre el propósito de cada una y usa la lista para determinar lo que se va y lo que se queda. Esto ayuda a eliminar los elementos innecesarios y a simplificar el proceso de rediseño.

Anuncio

Parte 2

Parte 2 de 4:

Haz un “wireframe” HTML

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Plan-a-Website-Step-6.jpg\/v4-460px-Plan-a-Website-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Plan-a-Website-Step-6.jpg\/v4-728px-Plan-a-Website-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Crea un wireframe para establecer la jerarquía. Un wireframe HTML es el esqueleto de una futura web, creado usando solo las etiquetas y los bloques más básicos para representar el contenido. Responde a la pregunta "¿qué aparece en pantalla y dónde?". El formato y el estilo se ignoran por completo en un wireframe. ^{[2]
X
Fuente de investigación}
- El wireframe te permite ver la estructura y el flujo de los contenido antes de tomar decisiones de estilo.
- Los wireframes HTML no son estáticos como los PDF o las imágenes y te permite mover bloques de contenido rápidamente para crear una estructura nueva.
- Un wireframe es interactivo, lo cual es beneficioso tanto para el desarrollador como para el cliente. Como el wireframe se escribe en HTML simple, puedes navegar por él y experimentar cómo se siente el salto de páginas. Es algo que no puede expresarse en un concepto PDF.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/Plan-a-Website-Step-7.jpg\/v4-460px-Plan-a-Website-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/Plan-a-Website-Step-7.jpg\/v4-728px-Plan-a-Website-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
Haz una prueba caja gris (gray box). Aísla el contenido de la página en cajas grises, con el contenido más importante en la parte superior. Los bloques se disponen en una sola columna, con la porción de contenido más importante en la parte superior de la página. Por ejemplo, si la página contiene los detalles de la compañía, esta información puede ir en la parte superior, seguida de la lista de personal, seguida de la información de contacto, etc. ^{[3]
X
Fuente de investigación}
- No se incluyen el encabezado ni el pie de página. Las cajas grises son simplemente una representación visual del contenido que estará en la página.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a6\/Plan-a-Website-Step-8.jpg\/v4-460px-Plan-a-Website-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a6\/Plan-a-Website-Step-8.jpg\/v4-728px-Plan-a-Website-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Prueba con un programa para crear wireframes. Hay varios programas que pueden ayudarte con el proceso de creación del wireframe. El conocimiento de programación requerido varía de programa en programa. Algunos de los programas más populares son:
- Pattern Lab. Esta web se especializa en el "diseño atómico", en el que cada porción de contenido se planea como una "molécula" que constituye una página más grande.
- Jumpcharts. Es un servicio de planeamiento y creación de wireframe en web. Requiere una suscripción de pago pero te permite generar wireframes rápidamente sin preocuparte demasiado del código.
- Wirefy. Es otro sistema de "diseño atómico". Las herramientas son gratuitas para desarrolladores.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Plan-a-Website-Step-9.jpg\/v4-460px-Plan-a-Website-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Plan-a-Website-Step-9.jpg\/v4-728px-Plan-a-Website-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Usa un marcado (markup) HTML sencillo . Un buen wireframe puede convertirse fácilmente en la web real más adelante. No te preocupes por el estilo durante el proceso de creación del wireframe. En su lugar, usa un marcado que pueda comprenderse y modificarse con facilidad. ^{[4]
X
Fuente de investigación}
- Cuando se trata de un wireframe, menos es más. El objetivo es construir la estructura. El aspecto visual puede ajustarse después con CSS y un marcado avanzado.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/02\/Plan-a-Website-Step-10.jpg\/v4-460px-Plan-a-Website-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/Plan-a-Website-Step-10.jpg\/v4-728px-Plan-a-Website-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Quizás sea tentador hacer un solo wireframe y decir "genial, puedo aplicarlo en todas las páginas", pero, en realidad, producirás un sitio más genérico y aburrido. Crea un wireframe para cada página y descubrirás que cada una tiene sus propias necesidades de organización.

Anuncio