Diseño de contenido Consejos y ejemplos de diseño intensivo
Para crear diseños integrales para la web se requiere habilidad y mucha dedicación. Los diseñadores web realizan un trabajo donde la mayoría no puede hacer, y de una manera muy sofisticada. A medida que las páginas web han evolucionado, hemos visto la necesidad de llenar más espacio y tener más contenido que nunca.. Si ya entiende cómo diseñar un sitio web, eso es una gran ventaja para comprender mejor estos métodos. Las características básicas en un sitio web rara vez cambian. Sin embargo, con más que el contenido promedio de la página, entran en juego otros factores, como espacios en blanco, tipografía, posicionamiento de elementos, entre otros.
Vamos a entrar en detalles para cubrir algunos de los principales consejos para crear diseños con contenido intensivo. Estos pueden ir desde aplicaciones de redes sociales, grandes empresas y sitios web corporativos, o cualquier cosa intermedia. Es importante preguntarse "¿Qué estoy tratando de lograr con este diseño??"cuando esté diseñando páginas, ya que le ayudará a prever una perspectiva más amplia.
Páginas web personalizadas
No importa cuánta experiencia tenga en el diseño web práctico, es cierto que todos tuvimos que comenzar en algún lugar. Diseñar páginas web personalizadas es generalmente el primer paso hacia una carrera en la programación web antes de aplicar especificaciones convencionales.
Siempre recomiendo crear una pequeña lista de elementos de página que se consideran instalados en la plantilla. Una vez que todo esto está escrito, es más fácil eliminar las malas ideas o recoger gemas perdidas u olvidadas. Esto también allana el camino para facilitar la planificación para aliviar el estrés en el camino.
Estructura de alambre de diseño
Para el sitio web genérico de 5 páginas, a menudo verá los mismos elementos repetidos. El logotipo de la esquina superior, los enlaces de navegación del encabezado, el área de contenido principal posiblemente se dividan con una barra lateral y otras funciones (inicio de sesión, cuadro de búsqueda, etc.).
Considere un buen punto de partida para integrarse en diseños de página detallados. A muchos diseñadores les resulta útil hacer un bosquejo de posibles diseños alámbricos para descartar las fallas no tan obvias. Esto no requiere ningún papel de lujo e incluso se puede hacer en un cuaderno descartado descartado. El propósito de una estructura alámbrica es dar una idea aproximada de hacia dónde debe ir el diseño del sitio con espacio para completar los detalles más adelante.
Con los diseños pesados de contenido, se debe tener en cuenta la cantidad que contendrá la plataforma. La construcción de un diseño cerrado de 2-3 columnas para albergar más de 100 páginas de contenido largo e intrincado no dejará mucho espacio para respirar. Al dibujar y planear por adelantado, puede controlar la cantidad de espacio amplio para el contenido de la página. Esto no solo encapsula texto o áreas de bloques, sino que también trata imágenes y videos.
Brillante espacio en blanco
El espaciado blanco es posiblemente el factor mas importante para ser tenido en cuenta en el diseño de diseño intensivo de contenido. El contenido del sitio web lo rige todo, más que cualquier sitio web normal. Si los lectores no pueden entender el contenido porque no hay espacio para digerir sus palabras, el tráfico será irregular y disgustado.
Los párrafos y los encabezados de página son un buen lugar para comenzar con las personalizaciones. Al utilizar las propiedades de CSS, debería poder manipular los márgenes externos y rellenar cada elemento de texto de la línea de bloque. Estos incluyen todos los encabezados 1-6, párrafos, citas en bloque, listas, texto preformateado y algunos elementos menores.
Si desea mantener la atención de su lector, es importante aplicar el espaciado debajo de los elementos de texto principales. Los párrafos y los encabezados más pequeños funcionan mejor con los márgenes inferiores de 15px-25px en su lugar. Para elementos de página más grandes, como h1 o h2, considere 35px + (esto también dependerá del tamaño de la fuente). Los espacios entre elementos verticales son importantes para el desplazamiento y el escaneo "de un vistazo". sin embargo altura de la línea es otra propiedad CSS importante que influye en el espaciado entre líneas en un elemento de texto. Los párrafos deben tener un valor de altura de línea mucho mayor en comparación con el tamaño de la fuente, por lo que hay un montón de relleno adicional entre líneas.
Considere los estilos dinámicos
Aparte del espaciamiento, tipografía digital debe ser manipulado de manera que salte de la página. Con cientos de millones de sitios web en el mundo actual, es común ver el mismo tipo de fuente en todas partes.
Si está diseñando un diseño para un sitio web cargado de contenido, el resultado se verá como otra plantilla suave al final. Hay muchas propiedades para jugar con estilos tipográficos avanzados. Sombras de texto, menos / más espacio entre letras, plataformas de fondo, iconos ... la lista es interminable.
Verdaderamente eres el diseñador y tu palabra final es ley. El diseño de un diseño no es comparable a una carretera de un solo carril sin cambio. Durante el proceso, puede regresar y cambiar estilos, manipular nuevos elementos o destruir un concepto por completo. Considere algunos otros consejos útiles de CSS y juegue para ver qué se ajusta mejor.!
Utilizar menús desplegables
Con tanto contenido, es poco probable que todos sus enlaces encajen en una sola página. Hay muchas opciones sobre cómo manejar una sobrecarga de páginas. Colocar enlaces adicionales en los bloques de la barra lateral o coser en las columnas en el pie de página del sitio son dos opciones útiles.
La opción más conveniente y práctica es crear un esquema de navegación desplegable con categorías y subcategorías de encabezados. También hay muchos scripts de código abierto que ofrecen subcategorías si tiene temas muy detallados..
Posiblemente la estrategia más rápida y menos frustrante sea comenzar con un marco de JavaScript. Algunos de los más populares incluyen jQuery, MooTools, o posiblemente Prototype. Todas estas bibliotecas ofrecen documentación y muchas tienen scripts gratuitos de menú desplegable disponibles.
Vistas del contenido del plan
En la práctica, es mucho más difícil crear un área del cuerpo simplista para albergar todo el contenido que contiene su sitio web promedio. Con los cambiantes estándares de los navegadores y la compatibilidad con dispositivos móviles semi-shoddy, no es de extrañar que veamos cómo se derriban sitios web tan intensivos en contenido. Sea sensible a cada estilo de página web en la pantalla. Algunos contendrán varias imágenes, otros pueden contener un gráfico o video primario o ningún gráfico. Una vez que haya terminado de codificar el diseño final, cree varias páginas HTML para alojar diferentes vistas.
Todos estos tendrán el mismo marcado interno, excepto los contenidos dentro del área de contenido principal. Cada vista de página individual puede ser manipulada y proporciona información sobre un producto terminado. Cambia esto para que contenga todas las vistas principales que crees que serán necesarias con cada página. Otros ejemplos de elementos de página podrían incluir cuadros de comentarios, videos o galerías integradas, o enlaces de página dividida.
Planificar estrategias a fondo
En verdad, no es del todo difícil crear un diseño web potente. Muchos diseñadores quedan atrapados con los pequeños detalles, como la forma de plantar elementos de bloques o hipervínculos de color. Estos detalles son importantes ya que se envían a través de un mensaje de marca, incluso a partir de elementos más pequeños, el mensaje debe unirse con la totalidad de la página. Planee mentalmente las etapas de su diseño para descubrir cómo se puede utilizar el mejor enfoque para cada obstáculo. Si está trabajando con un cliente, sería bueno discutir qué tipo de contenido llenará las páginas de antemano. Esto le da la oportunidad de planear por adelantado y planear el mejor enfoque para un diseño general.
Otro tema especialmente divertido es el diseño móvil. Este nuevo mercado está experimentando una gran expansión no solo en los teléfonos inteligentes sino también en las poderosas tabletas.. Esto significa que los usuarios pueden estar accediendo a su diseño desde una pantalla móvil. Asegúrese de que el contenido no se esté desbordando y se presente de forma ordenada..
7 ejemplos de sitios web de contenido pesado
A continuación se muestran algunas capturas de pantalla de ejemplo de sitios web con gran cantidad de contenido popular. Estas son en su mayoría marcas conocidas tanto en el mercado físico como en el digital. Echa un vistazo a algunas de las ideas a continuación para encontrar inspiración en tus propios proyectos. También siéntase libre de compartir otros diseños de contenido web pesado en la sección de comentarios.
Taconeador
Clicker es una nueva aplicación de redes sociales para los amantes de la televisión y el cine. Puede registrarse para una nueva cuenta y encontrar algunos de sus programas de televisión clásicos favoritos, archivados por temporada y lista de episodios. Puede comparar el sitio con IMDB con menos información y más contenido de video!
Futuro del diseño web
Future of Web Design 2011 se lanzará en Londres la próxima primavera. Consulte la página de inicio para obtener más información y un excelente ejemplo de diseño de diseño basado en texto. Todos los detalles son realmente compartidos y ofrecen oradores, horarios, talleres, patrocinadores y mucho más..
Señor probable
En este diseño cómico, el personaje principal, Lord Likely, ha sido "caricaturizado" y perforado en una ilustración. El sitio está dividido en 3 columnas con cada nuevo contenido deportivo, anuncios, enlaces de alimentación y archivos. El diseño en sí es muy retro y una inteligente toma de los diseños de ilustración..
Microsoft
La mayoría de los entusiastas de la tecnología están familiarizados con Microsoft. De hecho, la mayoría de las personas que entienden qué es una computadora pueden ofrecerle incluso una breve descripción de Microsoft y Bill Gates. Su página de inicio contiene contenido para docenas de paquetes de software, actualizaciones de noticias, comunicados de prensa e información para desarrolladores. Un poco más abajo en la página, puede ver un menú de pestañas vertical con cambio de contenido dinámico.
Search Engine Land
Search Engine Land es una popular revista web que se centra en los motores de búsqueda y marketing en Internet. Con frecuencia se actualizan con publicaciones de calidad asombrosa y llevan a cientos de miles de personas a su sitio todos los días. La página principal se divide en 3 columnas utilizadas para contener cada módulo de contenido y anuncio.
La casa Blanca
El diseño de la Casa Blanca de los Estados Unidos se ve muy limpio y profesional. Hay mucha información sobre el calendario del presidente y otros eventos políticos importantes. Un truco para aliviar el espacio de la página ha sido la adición de un pequeño control deslizante de contenido hacia el encabezado de la página. Esto es genial para mostrar 3-4 grandes titulares de noticias justo cuando los visitantes llegan a la página..
Yahoo Portal
En cuanto a los grandes sitios web de contenido ir a Yahoo! Debe haber tendencia hacia el pico. Yahoo! ofrece cientos de servicios a sus clientes, incluyendo correo web, noticias, videos e incluso búsqueda en la web. Echa un vistazo a algunos de los Y! enlaces del portal desde la barra lateral para ver cómo se comparan sus plantillas.
Conclusión
Estos son solo algunos de los puntos y pasos clave para crear diseños concretos que demandan contenido. Las páginas web con grandes reservorios de contenido a menudo se consideran una carga que contiene el forraje de SEO y nada de valor real. El diseño lo es todo, ya que es la primera impresión que recibe un usuario de cada sitio web. Con grandes volúmenes de contenido, esto puede convertirse en un desastre con desorden y sobre generalizaciones. Nunca dejes de practicar y con solo unos pocos proyectos adquirirás un dominio para visualizar diseños de contenido intensivo.
