3 Conceptos web que debes comprender

3 Conceptos Web que debes comprneder

[vc_row][vc_column][vc_column_text]Si estás por desarrollar o re-diseñar tu sitio web, este artículo es para ti.

Mientras que cada diseñador/desarrollador lleva sus proyectos de diferente manera aveces resulta «complicado» que el cliente explique lo que quiere. Por el otro lado a veces es difícil explicarle a los clientes ciertos aspectos. Aquí entran problemas de comunicación que te ayudaremos a resolver con esta guía básica de 3 conceptos web que debes dominar y entender.

 

1. Estructura del sitio

Hay diferentes maneras de diseñar la estructura o acomodo de un sitio web, nos basaremos en las tres formas más comunes de estructurar un sitio web.

Estructura de Sitio Web

Diseño Encajonado «Boxed»

En este tipo de estructura se tiene un fondo de un color fijo o una imagen y todo el contenido del sitio se encuentra en el centro de la pantalla. Para este tipo de estructura, se tiene que definir el ancho del contenido.

Fondos. Al cambiar el fondo le darás una nueva identidad completa a todo el sitio, con un sencillo cambio. Puedes aprovechar y poner fondos estacionales en Navidad, San Valentín, aniversario de la empresa, etc.

Publicidad. Hay sitios que utilizan este tipo de estructura para poner fondos con publicidad, esto puede ser una fuente de ingreso adicional para blogs o bien si te puede servir si tienes un convenio exclusivo con alguna marca dentro de tu sitio.

Espacio. No se aprovecha por completo el ancho de la pantalla para el contenido.

 Ejemplos[/vc_column_text][vcex_image_grid grid_style=»default» columns=»3″ posts_per_page=»-1″ thumbnail_link=»lightbox» lightbox_caption=»true» custom_links_target=»_self» img_size=»wpex_custom» img_crop=»center-center» image_ids=»486,489,490″ css=».vc_custom_1427224850846{padding-top: 20px !important;padding-bottom: 20px !important;}»][vc_column_text]Diseño Ancho «Wide»

Esta estructura abarca todo el ancho de la pantalla pero el contenido se queda fijo en el centro.

Espacio. Se aprovecha todo el ancho de la pantalla.

Publicidad. Hay sitios que utilizan este tipo de estructura para poner fondos con publicidad, esto puede ser una fuente de ingreso adicional para blogs o bien si te puede servir si tienes un convenio exclusivo con alguna marca dentro de tu sitio.

Fondos. No te permitirá cambiar ocasionalmente el fondo de la pantalla.

 Ejemplos

[/vc_column_text][vcex_image_grid grid_style=»default» columns=»3″ posts_per_page=»-1″ thumbnail_link=»lightbox» lightbox_caption=»true» custom_links_target=»_self» img_size=»wpex_custom» img_crop=»center-center» image_ids=»493,494,495″ css=».vc_custom_1427224869588{padding-top: 20px !important;padding-bottom: 20px !important;}»][vc_column_text]Diseño Ancho Completo «Full Width»

La diferencia entre Ancho y Ancho Completo está en el contenido. Esta estructura abarca todo el ancho de la pantalla y el contenido se desplegará a todo lo ancho de orilla a orilla.

Espacio. Se aprovecha al máximo el ancho de la pantalla.

Fondos. No te permitirá cambiar ocasionalmente el fondo de la pantalla.

 Ejemplos[/vc_column_text][vcex_image_grid grid_style=»default» columns=»3″ posts_per_page=»-1″ thumbnail_link=»lightbox» lightbox_caption=»true» custom_links_target=»_self» img_size=»wpex_custom» img_crop=»center-center» image_ids=»496,497,498″ css=».vc_custom_1427224827062{padding-top: 20px !important;padding-bottom: 20px !important;}»][/vc_column][/vc_row][vc_row parallax_mobile=»» video_bg=»» margin_top=»40px» margin_bottom=»40px»][vc_column width=»1/1″][vc_separator color=»grey» align=»align_center» border_width=»2″][/vc_column][/vc_row][vc_row][vc_column width=»1/1″][vc_column_text]2. Navegación (Menú)

La navegación o menú del sitio se encuentra (por lo general) en la parte del encabezado o parte superior del sitio. Aquí es dónde uno puede encontrar el acceso a las diferentes secciones o páginas que tiene un sitio web.

Recomendaciones:

Dejar siempre visible el área de navegación.

No cambiar el orden de las ligas (links) de la navegación de una sección a otra.

No cambiar el lugar de la navegación de una sección a otra.

Evitar menús horizontales.

Evitar menús escondidos (presiona un botón para ver un menú).

 

Aquí te presentamos algunos ejemplos de estilos de navegación:[/vc_column_text][vc_single_image image=»515″ alignment=»left» border_color=»grey» img_link_large=»» img_link_target=»_self» rounded_image=»» css=».vc_custom_1427230412742{padding-top: 20px !important;}»][/vc_column][/vc_row][vc_row parallax_mobile=»» video_bg=»» margin_top=»40px» margin_bottom=»40px»][vc_column width=»1/1″][vc_separator color=»grey» align=»align_center» border_width=»2″][/vc_column][/vc_row][vc_row][vc_column width=»1/1″][vc_column_text]3. Pie de Página (Footer)

Otro elemento común que llevan algunas páginas es el pié de página o Footer que va en la parte inferior del contenido de cualquier sección. Por lo general esta sección, al igual que la navegación principal (menú) permanece igual en todas las secciones.

Recomendaciones:

Poner acceso a links más utilizados.

Agregar información de contacto.

Agregar información de redes sociales.

Colocar aviso de privacidad aquí.

 

Aquí te presentamos un ejemplo de pie de página:[/vc_column_text][vc_single_image image=»520″ alignment=»center» border_color=»grey» img_link_large=»» img_link_target=»_self» rounded_image=»» css=».vc_custom_1427230746822{padding-top: 20px !important;}»][/vc_column][/vc_row]

¡Únete!

Recibe tips y mejores prácticas

Copy link