Cómo diseñar un sitio web (con imágenes)

Thysteaches, cómo diseñar un sitio web que parece profesional y se desempeña bien. Si bien la mayor parte del diseño de su sitio web está finalmente depende de usted, hay algunas cosas críticas que hacer, y evitar, al crear un sitio web.

Pasos

Parte 1 de 2:

Cómo diseñar su sitio web

1. Determine si desea utilizar un creador del sitio web. Los sitios web creados desde cero requieren una comprensión bastante detallada de la codificación HTML, pero puede crear fácilmente un sitio web utilizando un servicio de alojamiento gratuito como Weebly, Wix, WordPress o Google Sites. Los creadores de sitios web tienden a ser mucho más fáciles para que los diseñadores por primera vez se usen que HTML.

Si decide codificar su propio sitio web, deberá aprender tanto Html y CSS codificación.
Si invirtiendo el tiempo y la energía para crear su sitio web, no suena atractivo, también puede contratar a un diseñador de sitios web para crear su sitio para usted. Los diseñadores independientes pueden costar entre $ 30 y más de $ 100 por hora.

Imagen titulada Diseño Un sitio web Paso 2

2. Mapa de su sitio. Antes de abrir un creador de sitios web, debe saber aproximadamente la cantidad de páginas que desea que su sitio web tenga, cuál debe ser el contenido de cada una de esas páginas y el diseño general de páginas importantes, como la página de inicio y la página principal "Acerca de" página.

Las páginas de su sitio web pueden ser más fáciles de visualizar si realiza imágenes ásperas de cada una de ellas en lugar de simplemente determinar qué contenido debe aparecer.

Imagen titulada Diseño Un sitio web Paso 3

3. Usar diseño intuitivo. Si bien hay algo que debe decir para obtener ideas nuevas, el diseño básico de su sitio web debe seguir directrices establecidas, como las siguientes:

Opciones de navegación (E.gramo., Las pestañas para diferentes páginas) deben ir en la parte superior de la página.

Si usa un icono de menú (☰), debe estar en la esquina superior izquierda de la página.

Si usa una barra de búsqueda, debe estar cerca del lado superior derecho de la página.

Enlaces útiles (E.gramo., Enlaces a la "Acerca de" página o el "Contáctenos" La página) debe ir en la parte inferior de cada página.

Imagen titulada Diseño Un sitio web Paso 4

4. Se consistente. Independientemente de la fuente de texto, la paleta de colores, el tema de la imagen y las opciones de diseño que elija, asegúrese de utilizar la misma decisión a lo largo de su sitio web. Puede ser increíblemente jarring ver una fuente o un esquema de color utilizado para el "Acerca de" página cuando se usó completamente diferente para la página de inicio.

Por ejemplo, si usa exclusivamente colores de tono freno para la página de inicio de su sitio, no implemente colores brillantes y ruidosos en la página siguiente.

Tenga en cuenta que use colores ruidosos o de choque, especialmente cuando los colores se muestran en una dinámica (E.gramo., Moverse) La moda, puede evocar la epilepsia en un pequeño número de usuarios web. Si decide utilizar estos colores en su sitio, asegúrese de agregar una advertencia de epilepsia antes de cualquier páginas relevantes.

Imagen titulada Diseño Un sitio web Paso 5

5. Añadir opciones de navegación. La colocación de enlaces directos a páginas importantes en su sitio web en la parte superior de la página principal ayudará a dirigir a los visitantes por primera vez al contenido que importa. La mayoría de los creadores de sitios agregan estos enlaces por defecto.

Es importante asegurarse de que se acceda a cada página de su sitio web haciendo clic en las opciones en su sitio web en lugar de solo ser accesible a través de la dirección de la página.

Imagen titulada Diseño Un sitio web Paso 6

6. Usa colores que se complementan entre sí. Al igual que cualquier otro tipo de diseño, el diseño del sitio web se basa en combinaciones de colores agradables visualmente debido a esto, seleccione los colores temáticos que van juntos es crucial.

Negro, blanco y gris es una buena combinación si no sabes a dónde empezar.

Imagen titulada Diseño Un sitio web Paso 7

7. Considere usar un diseño minimalista. El minimalismo fomenta los colores de tono fresco, los gráficos simples, las páginas de texto en blanco en blanco y el poco más del adorno posible. Debido a que el minimalismo requiere poco en el camino de los elementos de lujo, es una forma fácil de que su sitio web se vea profesional y atractivo sin requerir mucho trabajo.

Muchos creadores de sitios web tendrán un "minimalista" tema que puede seleccionar al configurar su sitio web.

Una alternativa al minimalismo es "brutalismo", que utiliza líneas más ásperas, colores brillantes, texto en negrita y imágenes mínimas. El brutalismo tiene menos de lo siguiente que el minimalismo, pero según el contenido de su sitio web, puede adaptarse mejor a sus necesidades de diseño.

Imagen titulada Diseño Un sitio web Paso 8

8. Hacer elecciones únicas. Las líneas rectas y los elementos web bloqueados en cuadrícula son apuestas seguras, pero hacer algunas decisiones estilísticas únicas, ambos prestarán personalidad a su sitio y ayudarán a que su sitio se destaque.

No tenga miedo de pasar las tendencias al colocar elementos de sitio web asimétricamente o utilizando elementos superpuestos para crear una apariencia en capas.

Mientras que las esquinas elegantes, afiladas y los elementos cuadrados (también conocidos como "basado en tarjetas" La presentación) son menos favorables que los elementos blandos y redondeados.

Parte 2 de 2:

Cómo maximizar el rendimiento del sitio web

1. Aproveche las opciones de optimización móvil. Los navegadores móviles representan más tráfico web que los navegadores de escritorio, lo que significa que la cantidad de atención que usted paga a la versión móvil de su sitio web debe al menos igual a el desarrollo de su sitio web de escritorio. La mayoría de los servicios de creador de sitios web crean automáticamente una versión móvil de su sitio, pero querrá tener en cuenta la siguiente información para su sitio móvil:

Asegurar que los botones (E.gramo., Los enlaces del sitio) son grandes y fáciles de tocar.
Evite la implementación de características que no se pueden ver en Mobile (E.gramo., Flash, Java, etc.).
Considera tener una aplicación móvil hecha para su sitio web.

Imagen titulada Diseño Un sitio web Paso 10

2. Evite usar demasiadas fotos por página. Tanto los escritorios como los navegadores móviles pueden luchar para cargar páginas que muestran una gran cantidad de fotos o videos. Mientras que las imágenes son importantes en el diseño web, el uso de más de unos pocos por página puede causar tiempos de carga innecesariamente largos, lo que evitará que las personas visiten la página (s) en cuestión.

En términos generales, desea que las páginas de su sitio web se carguen en menos de cuatro segundos.

Imagen titulada Diseño Un sitio web Paso 11

3. Agrega un "Contacto" página. Notará que prácticamente todos los sitios web establecidos tienen un "Contáctenos" Página que tiene información de contacto (E.gramo., un número de teléfono y una dirección de correo electrónico): algunos sitios incluso tienen un formulario de preguntas incorporado en esta página. Añadiendo un "Contacto `Página le dará a los espectadores del sitio web una línea directa de comunicación para usted, lo que agregará una solución a las posibles frustraciones.

Imagen titulada Diseño Un sitio web Paso 12

4. Crear una página de 404 personalizada. Cuando alguien visita una página específica en su sitio web que no se ha configurado o no existe, un "error 404" Página web se mostrará. La mayoría de los navegadores tienen una página 404 por defecto, pero es posible que pueda personalizar el suyo desde la configuración del Creador de su sitio web, si es así, asegúrese de incluir los siguientes detalles:

Un mensaje de error alegre (e.gramo., "Felicitaciones - Has encontrado nuestra página de error!")

Un enlace de vuelta a la página de inicio del sitio

Una lista de enlaces vistos comúnmente

Una imagen o logotipo para su sitio web

Imagen titulada Diseño Un sitio web Paso 13

5. Use una barra de búsqueda si es posible. Si su método de creación de su sitio web admite agregar una barra de búsqueda a su sitio web, se recomienda encarecidamente que lo haga. Esto asegurará que los usuarios puedan navegar rápidamente a una página o elemento específico sin tener que hacer clic a través de sus opciones de navegación.

Las barras de búsqueda también son útiles cuando su audiencia desea buscar un término general sin utilizar el error y el error.

Imagen titulada Diseño Un sitio web Paso 14

6. Invierte la mayor cantidad de tiempo en su página de inicio. Cuando alguien llega a la página de inicio de su sitio web, deberían obtener la esencia del tema de su sitio web de inmediato, además de esto, todos los elementos de la página de inicio deben cargarse rápidamente, incluidas las opciones de navegación y cualquier imagen. Su página de inicio debe tener los siguientes aspectos:

Un llamado a la acción (e.gramo., un botón para hacer clic o un formulario para llenar)

Una barra de herramientas de navegación o menú

Un gráfico acogedor (e.gramo., Una foto sólida, un video, o un pequeño grupo de fotos con texto acompañante)

Indicio Perteneciente al servicio, tema o enfoque de su sitio web

Imagen titulada Diseño Un sitio web Paso 15

7. Pruebe su sitio web en varios navegadores en múltiples plataformas. Esto es increíblemente importante, ya que los navegadores diferentes pueden manejar aspectos de su sitio web de manera diferente. Antes de comenzar a promover su sitio web, intente visitar y usar su sitio web en los siguientes navegadores en las plataformas Windows, Mac, iPhone y Android:

Google Chrome

Firefox

Safari (solo iPhone y Mac)

Microsoft Edge y Internet Explorer (solo Windows)

El navegador incorporado en varios teléfonos Android diferentes (E.gramo., Samsung Galaxy, Google Nexus, etc.)

Imagen titulada Diseño Un sitio web Paso 16

8. Continúa actualizando su sitio web a medida que en adelante. Diseño de tendencias, enlaces, fotos, conceptos y palabras clave, todos los cambios a medida que pase el tiempo, por lo que tendrá que continuar realizando cambios en su sitio web para mantenerse al día. Esto requerirá que revise el rendimiento de su sitio web junto con otros sitios web similares al menos una vez cada tres meses (preferiblemente más a menudo).

Ayuda HTML básica

Página web de muestra con HTML

Apoyo a WikiHow y Desbloquear todas las muestras.

Hoja de trucos HTML

Apoyo a WikiHow y Desbloquear todas las muestras.

Página web simple de muestra

Apoyo a WikiHow y Desbloquear todas las muestras.

Consejos

La accesibilidad del sitio web es otro aspecto importante del desarrollo de sitios web. Esto incluye cosas como títulos para audiencias con discapacidad auditiva, descripciones de audio para visitantes ciegos y advertencias de fotosensibilidad si su sitio web utiliza efectos potencialmente incautivos de inducción.

La mayoría de los creadores de sitios web tienen un conjunto de plantillas que puede usar para cementar el diseño y el diseño de su sitio antes de agregar sus elementos preferidos.

Advertencias

La mayoría de los creadores de sitios son gratuitos, sin embargo, si desea usar su propio dominio (E.gramo., "tu nombre.com" en vez de "tu nombre.wordpress.com"), deberá pagar una tarifa mensual o anual.

Evite el plagio y observe todas las leyes de derechos de autor: no agregue imágenes aleatorias de la web, ni siquiera elementos estructurales, sin permiso.