Lo que se debe y no se debe hacer en un gran diseño web

Si la sigues, esta guía resultará ser un recurso de diseño web bastante valioso, especialmente si planeas utilizar software de desarrollo de sitios web en el futuro. Desde los inexpertos hasta los experimentados, esta guía tiene algo para todos.

El proceso de un gran diseño web Sólo para asegurarnos de que todos estamos en la misma página, comencemos con la definición básica de "diseño web". Según Wikipedia, el diseño web es:

“un proceso de conceptualización, planificación, modelado y ejecución de entrega de medios electrónicos a través de Internet en forma de lenguaje de marcado adecuado para su interpretación mediante un navegador web y su visualización como interfaz gráfica de usuario” .

El proceso de diseño web se puede comparar con el proceso de redacción de un trabajo de investigación. En la etapa de conceptualización/planificación, se crean diagramas de flujo (el esquema) que ilustran la estructura de navegación de su sitio web. En la etapa de modelado, se crean esquemas estáticos (el borrador) que ilustran el diseño esquelético de cada sección de su sitio web. Una vez creados los marcos de alambre, se utilizan gráficos, colores y texto para crear el diseño de sus páginas web según el diseño de los marcos de alambre. En la etapa de ejecución, su diseño se convierte a un formato compatible con los navegadores web, se agregan texto y contenido y, finalmente, su sitio web se publica en vivo en Internet para que todo el mundo lo vea (borrador final).

Las tres etapas del proceso de diseño son igualmente importantes. Muchos diseñadores web se saltan una etapa para ahorrar tiempo o porque no creen que sea necesario. Sin embargo, las tres etapas son necesarias si su objetivo es crear un diseño exitoso y un sitio web respetable. Incluso si se utilizan las tres etapas, hay muchos errores que los diseñadores web pueden cometer y que conducirán a sitios web de mala calidad y no fáciles de usar. Es hora de limpiar el gabinete de malas prácticas de diseño web y reabastecerlo con las buenas.

Etapa 1: Conceptualización y planificación
Esta etapa se salta con más frecuencia que las otras dos. A la mayoría de los escritores no les gusta crear esquemas para trabajos de investigación y a la mayoría de los diseñadores web tampoco les gusta crear diagramas de flujo. No seas perezoso. Si se esfuerza y ​​planifica su sitio web, encontrará que el proceso de diseño web se desarrollará sin problemas y se cometerán menos errores en el camino.

Hay algunas cosas que necesitará para conceptualizar y planificar eficazmente su sitio web:

• un cerebro
• un bolígrafo y papel
• (opcional) software de diagrama de flujo
• una idea general de las diferentes secciones de su sitio web

Para comenzar, tome papel y lápiz o inicie su software de diagrama de flujo favorito. Usamos OmniGraffle Professiona para Mac OS X, que cuesta $150 por licencia, pero vale la pena si crea sitios web con regularidad. Si está en una PC, SmartDraw es un excelente software de diagrama de flujo GRATUITO que puede usar. Sin embargo, un lápiz y papel funcionan bien.

Existen muchos métodos para crear diagramas de flujo. Le mostraremos la forma más básica de hacerlo por razones de tiempo y extensión de este artículo. Si desea obtener más información sobre los diagramas de flujo, busque diagramas de flujo en Google o Yahoo.

Vea el diagrama de flujo que creamos al conceptualizar los sitios cromáticos. (1) En la parte superior del diagrama de flujo aparece el nombre de nuestro sitio web. (2) A continuación, incluimos cada sección principal de nuestro sitio web: Inicio, Acerca de y Servicios. Estas secciones son la navegación principal de su sitio web. Los nombres de cada sección dependen completamente del contenido de su sitio web. Intente utilizar la menor cantidad de secciones posible para que sus visitantes no se sientan abrumados al navegar por su sitio web.

(3) A continuación, agregue todas las páginas secundarias (subsecciones) que se enumerarán en cada una de las páginas principales. Para Inicio, hemos incluido Diseño web profesional, Desarrollo web y Optimización de motores de búsqueda. La navegación secundaria debe ser más descriptiva que la navegación principal. Cuanto más profunda sea la jerarquía de navegación de sus sitios web, más descriptiva debe ser cada etiqueta.

El dos

• Menos es más; Mantenga el número de secciones primarias al mínimo. Usamos 6 secciones en nuestro sitio web, lo cual es más que suficiente.
• Ya sea que utilice lápiz y papel o un software de diagrama de flujo, mantenga todo lo más limpio y organizado posible. Aunque usted (y cualquiera que trabaje con usted) son los únicos que usarán el diagrama de flujo, aún así debe tener sentido: sus secciones principales deben usar términos más amplios, mientras que los términos secundarios y terciarios deben ser más descriptivos.

Los donts
Crear un diagrama de flujo es bastante sencillo; sin embargo, hay algunos errores que se pueden cometer fácilmente:

• No utilice términos muy descriptivos en su navegación principal a menos que todo su sitio web se centre en un tema concreto. No intente agrupar varios temas en la misma página. Crea una sección general para estos temas y a partir de esa sección crea subsecciones. Esto hará que las páginas web de la subsección (descriptivas) tengan más probabilidades de tener mejores clasificaciones en los motores de búsqueda (Google, Yahoo, MSN, Ask). Una vez que haya creado un diagrama de flujo conciso y descriptivo, estará listo para pasar a la segunda etapa. del proceso de diseño web:

Etapa 2: Modelado
En la etapa de modelado, se crean maquetas estáticas de “estructura alámbrica”. Cada maqueta ilustra un esqueleto básico del diseño de cada una de las páginas web que se incluirán en su sitio web. Esta etapa es importante porque nos da una idea de dónde se colocarán los diferentes elementos en nuestro diseño. Algunos de estos elementos son:

• logo
• menú de navegación
• contenido
• imágenes, vídeos

Para crear estas maquetas, puedes utilizar lápiz y papel o tu software de maquetas preferido. En el pasado usábamos Photoshop, pero últimamente usamos OmniGraffle Professional. OmniGraffle no requiere tantos recursos como Photoshop y nos permite ensamblar nuestras maquetas de estructura alámbrica mucho más rápido.

Además, asegúrese de tener cerca los diagramas de flujo que creó, ya que deberá consultarlos de vez en cuando para asegurarse de que está simulando todas las páginas que aparecerán en su sitio web.

Aquí está nuestro ejemplo de cómo debería verse una maqueta de estructura alámbrica. Como puede ver, no se incluyen colores ni gráficos. Así es exactamente como debería ser una maqueta de estructura alámbrica: un diseño esquelético de su diseño. El objetivo es poder tener una idea general de dónde se ubicará cada uno de los elementos de la página web.

Por lo general, comenzamos desde arriba a la izquierda y avanzamos hacia abajo. No existe una forma específica en que deba verse una estructura alámbrica. Use su imaginación. Sin embargo, asegúrese de que al crear sus wireframes no olvide incluir los elementos más importantes de un sitio web (logotipo, menú de navegación, ubicación del contenido, ubicación de imágenes/vídeo).

Si algunas de sus páginas utilizarán el mismo diseño, entonces no es necesario simular todas esas páginas (aunque ciertamente puede hacerlo). Solo asegúrese de crear una maqueta de cualquier diseño único que tendrá su sitio web. Te lo agradecerás más tarde.

Los hacer

• maqueta todas las páginas únicas
• incluya elementos importantes (logotipo, navegación, ubicación de contenido, ubicación de imágenes/vídeos) -comience desde arriba y avance hacia abajo -haga referencia a su diagrama de flujo creado en la etapa 1 para que no se olvide de maquetar ninguna página -guarde, guarde, guardar: como con cualquier cosa en la computadora, guarde su(s) maqueta(s) cada 10 minutos aproximadamente
• céntrese en diseños limpios y fáciles de usar - etiquete sus elementos para que no olvide cuáles son cuando haga referencia a ellos en la etapa 3, ejecución - use otros sitios web como inspiración; no hay nada de malo en tomar elementos de otros sitios y hacerlos propios (consulte “lo que no se debe hacer”)

El no

• no incluyas gráficos ni colores (eso es para la siguiente etapa); no hagas tus maquetas demasiado “ocupadas”; céntrese en diseños limpios, bien organizados y fáciles de usar; no se salte esta etapa; es tan importante como el primero y el último -si tomas elementos de otros sitios web, asegúrate de no plagiar; Hay una diferencia entre inspirarse en otro sitio web para crear ciertos elementos de tu diseño y arrancar descaradamente su diseño y colores.

Etapa 3: Ejecución
En la tercera y última etapa, la ejecución, la planificación de las etapas 1 y 2 se combina para ayudar a crear un sitio web interactivo y en vivo.
La tercera etapa es, con diferencia, la que requiere más tiempo, ya que usted 1) creará los gráficos, 2) creará el contenido y, finalmente, 3) convertirá los diseños web de imágenes en código que los navegadores web utilizarán para presentar su sitio web al mundo.

Cuando llegue a la tercera etapa, deberá tener una idea clara de:

• cómo sus visitantes llegarán de un lugar a otro (etapa 1, diagrama de flujo) -cómo se distribuirán sus páginas web (etapa 2, maquetas de estructura alámbrica)

Si no tienes una idea clara de estas dos cosas, vuelve a la primera y segunda etapa y continúa desarrollándolas. Descubrirá que la tercera etapa es más fácil cuando haya elaborado un plan de batalla claro y conciso para diseñar su sitio web.

Deshazte del lápiz y el papel
En la etapa 3, deberá utilizar Photoshop u otro programa de edición de imágenes, ya que utilizará colores y gráficos para crear el diseño de su sitio web.

Por lo general, primero comenzamos a crear la página de "inicio" (índice). Utilice los esquemas que creó en la etapa 2 como plantilla para cada una de las páginas que cree. Sin embargo, en lugar de utilizar cuadros sólidos, utilice gráficos, colores y texto. Cada página debe verse exactamente como usted desea que se vea en Internet, ya que esta es la etapa final del proceso de diseño.

Asegúrese de incluir el fondo para su navegación (pero no agregue el texto a su imagen). Cuando se convierte usando CSS (hojas de estilo en cascada), su navegación debe ser en forma de texto y no de imágenes. Los motores de búsqueda no pueden rastrear las imágenes (las palabras clave utilizadas en su navegación no se indexarán en las páginas de resultados del motor de búsqueda, lo que significa que menos personas podrán encontrar su sitio web).

Cuando esté satisfecho con sus diseños y sienta que están listos para publicarse en Internet, es hora de separar los diseños para poder crear un diseño basado en CSS. Para obtener más información sobre cómo convertir sus diseños a CSS o marcar su sitio web en CSS, visite w3schools.com. Después de buscar en Internet, no pudimos encontrar un tutorial decente sobre imágenes a CSS, así que espere uno de nosotros en las próximas semanas. Convertir sus diseños a CSS es extremadamente importante ya que los diseños de tablas son cosa del pasado.

Aquí hay un ejemplo de un sitio web casi terminado del diseño que simulamos en la etapa 2. Esto se tomó directamente desde nuestro navegador web y, como puede ver, ahora hay un logotipo, colores, un bonito sistema de navegación, un pie de página, y lo más importante, un diseño limpio y organizado.
Gracias a la planificación en las etapas 1 y 2, nuestro diseño está bien organizado y es fácil de usar.

El dos

• haga referencia a sus plantillas que se crearon en la etapa 2; Aunque está bien desviarse del diseño original, no debería ser necesario
• investigue un poco antes de crear su diseño real; obtener ideas de otros sitios y hacerlas suyas (sin plagiar)
• incluya color y gráficos para crear el aspecto final de sus páginas web -use CSS (hojas de estilo en cascada) para convertir sus diseños de imágenes en marcas comprensibles para los navegadores web -haga referencia a su diagrama de flujo de la etapa 1 cuando codifique sus páginas con hipervínculos; es mejor utilizar un menú desplegable que incluya todos (o la mayoría) de los enlaces de su sitio web en cada página; esto permitirá una navegación más sencilla y también hará que sus páginas sean más fáciles de rastrear cuando las arañas de los motores de búsqueda pasen por allí; un excelente lugar para obtener menús desplegables de CSS es DynamicDrive.com. Finalice su diseño mientras trabaja en Photoshop o cualquier software de edición de imágenes que utilice; Puede ser complicado realizar cambios en su diseño una vez que se convierte en marcado (código)

Los donts

• no incluya el texto en sus menús de navegación al convertir a CSS; en lugar de utilizar texto de imagen, utilice texto normal que sea legible por las arañas de los motores de búsqueda.
• no utilice tablas al realizar la conversión; incluso si necesitas comprar un libro sobre CSS, valdrá la pena; las mesas están muertas
• no te saltes las dos primeras etapas sólo para ahorrar tiempo; su sitio web será mejor si comienza desde el principio del proceso de diseño web (en lugar de desde el final)
• no olvide comprimir sus imágenes cuando las corte para CSS; no hay nada peor que un sitio web que carga lentamente debido a archivos de imágenes de gran tamaño; Photoshop tiene una opción "Guardar optimizado para Web" (CS3 - "Guardar para Web y dispositivos")

El proceso hace la perfección
Si sigue un proceso de diseño web como el que se ilustra en este artículo, aumentará las posibilidades de crear un sitio web bien organizado, fácilmente navegable y muy fácil de usar. Seamos realistas: si los visitantes se pierden o se confunden al intentar navegar por su sitio web, es posible que presionen el botón Atrás y busquen un sitio web más fácil de usar. A la gente no le gusta pensar cuando se trata de orientarse en los sitios web. No les hagas pensar. Usted piensa planificando su sitio web desde la etapa 1 a la etapa 3 y descubrirá que más personas disfrutarán visitando su sitio web.