Si desea diseñar y crear páginas web, este proceso será mucho más fácil si lo planifica con anticipación. En la fase de planificación, el diseñador y el cliente pueden trabajar juntos para encontrar un formato y diseño que se adapte a sus necesidades. El proceso de planificación afecta el estilo o estilo del sitio, se podría decir que este es el aspecto más importante en el diseño web, especialmente si es para fines comerciales.
Paso
Parte 1 de 4: Creación de la estructura básica
Paso 1. Determine la función del sitio web
Si está creando un sitio personal, probablemente ya sepa la respuesta. Sin embargo, si está creando un sitio para otra organización, empresa o persona, debe averiguar qué quieren y la funcionalidad del sitio. Todo lo que especifique aquí entrará en vigor cuando finalice la página web.
- ¿El sitio web requiere Storefront? ¿Deben hacerse comentarios de los usuarios? ¿El usuario necesitará crear una cuenta más tarde? ¿Está orientado el artículo del sitio web? ¿O orientado a la imagen? Todas estas y otras preguntas le ayudarán a diseñar y diseñar el sitio.
- Este proceso de planificación se puede dibujar en un dibujo, especialmente si es para una gran empresa y muchas personas están involucradas en la creación de este proyecto.
Paso 2. Cree un diagrama de mapa del sitio (mapa del sitio)
Un diagrama de mapa del sitio es similar a un diagrama de flujo, que muestra cómo los usuarios se mueven de una página a la siguiente. No necesita una página web en esta etapa, solo un flujo general de conceptos. Puede utilizar un programa de computadora para crear diagramas o esbozar los suyos propios en papel. Utilice este diagrama para demostrar los conceptos de disposición jerárquica y conectividad de páginas web.
Paso 3. Pruebe el método de redacción de cartas
Un método popular de desarrollo web grupal es utilizar varias tarjetas para conocer las expectativas de todos. Tome varias tarjetas de notas y escriba el contenido básico de una página web en cada una de forma individual. Organice estas tarjetas junto con su equipo para encontrar el mejor concepto. Este método es adecuado para su uso cuando está colaborando con otros en la creación de páginas web.
Paso 4. Utilice papel y un tablero de anuncios o una pizarra
Este es un método de planificación original con un presupuesto reducido, puede eliminar o desplazar contenido rápidamente y cambiar el flujo. Dibuja tu diseño web en papel, luego conecta los papeles con hilo o dibuja líneas en la pizarra. Este método es muy adecuado para su uso en sesiones de lluvia de ideas.
Paso 5. Cree un inventario de contenido
De hecho, tiende a ser más apropiado para rediseñar webs que en nuevos diseños web. Inserte cada pieza de contenido o página web terminada en una hoja de cálculo. Tome nota del propósito de cada contenido o página, utilizando esta lista para determinar qué eliminar y qué conservar. Puede simplificar la estructura de la web y simplificar el proceso de rediseño más adelante.
Parte 2 de 4: Creación de un esquema HTML básico
Paso 1. Cree una estructura alámbrica para establecer la jerarquía de la página web
La plantilla HTML básica es el plano del sitio que creará, utilizando solo las etiquetas más básicas y el contenido de muestra (bloques / plantillas). Este marco responde a la pregunta: "¿Qué es visible en la web y dónde?" No se requiere formato ni estilo en la creación de este esquema.
- Puede ver la estructura y el diagrama de flujo del contenido con un esquema básico antes de elegir una configuración de estilo.
- Las plantillas HTML básicas no son estáticas como los PDF o las imágenes, puede deslizar rápidamente a través del contenido de muestra para crear nuevas estructuras.
- El marco base es interactivo, lo que beneficia tanto a los desarrolladores web como a los clientes. Dado que este marco básico está escrito con código HTML simple, aún puede navegar y saber cómo funciona el cambio de página web. Esto no se puede hacer con PDF.
Paso 2. Pruebe el método de la caja gris
Bloquea o resalta el contenido de tu página web en Gray Box, el contenido más importante está en la parte superior. Ordene el contenido en una columna. Por ejemplo, si la página es "Acerca de la empresa", la información detallada sobre la empresa aparece en la parte superior, seguida de una lista del personal, la información de contacto, etc.
Esto no incluye encabezados ni pies de página. Gray Box es una representación visual del contenido que aparecerá en la web
Paso 3. Pruebe un programa básico de creación de esquemas
Hay varios programas que puede utilizar en el proceso de creación de un marco web básico. La cantidad de código de programación web (lenguaje) que debe dominar es diferente para cada programa. Algunos de los programas que son bastante populares incluyen:
- Laboratorio de patrones. Este sitio está dedicado al "diseño atómico", cada contenido se considera una "molécula" que compone una página web más grande.
- Jumpcharts. Esta página web proporciona servicios de planificación y encuadre basados en la web. Estos sitios son de pago y requieren una suscripción, pero puede crear marcos web rápidamente sin tener que dominar mucho código de programación web.
- Wirefy. Wirefy es otro sitio que ofrece "diseño atómico". Los desarrolladores web pueden obtener la herramienta de forma gratuita.
Paso 4. Utilice un marcado HTML simple
Una buena plantilla básica se convertirá fácilmente en el sitio original. No piense demasiado en el estilo web durante el proceso de creación de esta plantilla. Utilice un marcado que se pueda entender y cambiar fácilmente.
Un marco básico simple es mucho mejor. El propósito de crear un marcado es construir una estructura. La apariencia visual se puede ajustar más tarde con CSS y marcado avanzado
Paso 5. Cree un esquema básico para cada página web
Puede tener la tentación de equiparar cada página web con un esquema básico. De hecho, esto solo hará que su sitio sea sencillo y aburrido. Crea un esquema diferente para cada página, entenderás que cada página necesita su propio diseño.
Parte 3 de 4: Creación de contenido
Paso 1. Prepare el contenido antes de crear una página web
Le resultará mucho más fácil obtener una vista previa de su vista web si ya tiene contenido real en lugar de usar muestras o marcadores de posición. No necesita tener demasiado contenido, pero su maqueta se verá mucho mejor si usa una copia de la imagen original.
No es necesario que tenga todo el material del artículo, pero al menos debe tener un título real
Paso 2. Recuerde que el gran contenido no es solo texto
Internet es mucho más complejo que una simple página web de texto. Necesita una variedad de contenido diferente para crear un gran sitio web para atraer e invitar visitantes. Por ejemplo:
- Fotografía.
- Voz.
- Videos.
- Transmisión web o webstream (Twitter)
- Integración de Facebook
- RSS
- Alimentación web
Paso 3. Solicite ayuda a un fotógrafo profesional
Si desea incluir fotos en su sitio, la primera impresión que obtendrá de su sitio web será mucho mejor si está lleno de fotografías profesionales. Una buena foto vale más que veinte fotos de baja calidad.
Busque un recién graduado en el arte de la fotografía como una solución más barata que un fotógrafo profesional que ha estado en el negocio durante mucho tiempo
Paso 4. Escribe artículos de calidad
El contenido escrito en la página web determinará la cantidad de tráfico web. Si bien no tiene que preocuparse demasiado por la creación de contenido en este proceso de diseño, no está de más comenzar a pensar en ello porque también necesitará contenido de forma regular una vez que su sitio esté en funcionamiento.
Además del contenido del artículo, hay material escrito que también debe tener en el proceso de compilación de una página web. Por ejemplo, información de contacto, nombre de la empresa o cualquier otra cosa que se utilice varias veces en el sitio
Parte 4 de 4: Convertir conceptos en sitios web
Paso 1. Organizar los elementos básicos
Esta disposición de elementos se aplica a todas las páginas de su sitio, como encabezados, notas al pie y menús de navegación. Configúrelo en un estilo muy simple para que pueda verificar cómo se ven todas las páginas. Esto es especialmente útil a medida que avanza en el proceso de diseño web.
No se preocupe demasiado por los detalles, intente obtener una vista previa (vista previa) de cómo se ve el encabezado
Paso 2. Cree un diseño simple
Comience cambiando la posición del reloj desde la columna del esquema base a la ubicación real en la página. Por ejemplo, es posible que desee mover el menú de navegación de muestra a la izquierda de la página y la lista de titulares a la derecha.
Siga experimentando con diseños web para varias páginas antes de pasar al siguiente paso. Permita que otros le echen un vistazo para ver si el diseño que crea se siente vivo
Paso 3. Crea una maqueta
Utilice un programa como Photoshop para crear maquetas o páginas de muestra de su sitio web. Utilice el diseño que ha compilado como guía. Puede hacer maquetas más rápido y obtener los resultados que desea con un programa de procesamiento de imágenes. Los resultados de estas imágenes se pueden utilizar posteriormente como referencia en el proceso de escritura del código de programación web.
Coloque el contenido real en la maqueta para que se vea bien
Paso 4. Reemplace el concepto de muestra con el contenido original
Agregue contenido y elementos a las páginas web. No se preocupe por la configuración de estilo web por ahora, simplemente apile todo en la ubicación correcta. Esto le ayudará a revisar los cambios de estilo web que realice más adelante.
Paso 5. Cree una guía de estilo web
Es muy importante mantener una combinación de estilos, especialmente para sitios grandes. Si el sitio está destinado a fines comerciales y ya tiene su propia marca o estilo, esto debe integrarse en el diseño del sitio. Cosas a considerar al crear una guía de estilo de página web:
- Navegación
- Nota principal
- Párrafo
- Carácter en cursiva
- Carácter audaz
- Enlaces (activos, inactivos, desplazarse)
- Uso de imágenes
- Icono
- Mando
- lista
Paso 6. Aplicar el estilo web
Una vez que encuentre el estilo y el diseño adecuados, impleméntelo. CSS es una de las formas más fáciles de implementar estilos en una página web o en todo el sitio. Consulte las siguientes instrucciones para comprender mejor los detalles del uso de CSS.
