Cuando Collis lanzó este sitio y solicitó a los lectores solicitudes de tutoriales, una de ellas era la de "temas de revistas" para plataformas de blogs. Este tutorial se centra en la primera parte del proceso: aplicar una cuadrícula CSS al diseño para crear un prototipo de una plantilla de página de inicio.
Demo y Fuente
Puede ver una demostración de este tutorial haciendo clic en el botón "Demo", a continuación. Para la fuente, la descarga del archivo ZIP no incluye el código Blueprint CSS.
Lo que estamos construyendo
El foco aquí está en un ejemplo de diseño de página web que utiliza el marco de cuadrícula de Blueprint CSS, basado en mi artículo anterior de qué marco de cuadrícula de CSS. Sin embargo, puede aplicar el mismo proceso a cualquier marco de cuadrícula CSS que prefiera. Si no le gusta usar marcos de cuadrícula en los sitios de producción, siempre puede reemplazar el código CSS y las clases HTML correspondientes por su propio.
El diseño de la página que se muestra a continuación está influenciado por numerosos temas de la revista WordPress, por lo que es posible que veas elementos de diseño conocidos, aunque no es un tutorial específico de WP..
Un proceso típico de diseño gráfico
Permítanme señalar que solo soy un "sillón", un diseñador autodidacta, y la naturaleza minimalista de mi diseño reflejará mi falta de capacitación adecuada. Esperemos que esto le permita centrarse en el diseño general de la cuadrícula y el proceso de codificación, que se basa en elementos geométricos, no en el estilo..
Un proceso de diseño típico para páginas web es comenzar con un boceto en papel, seguido de una maqueta gráfica en Photoshop o Fireworks, etc. Coloque todos los elementos de diseño, colocados aproximadamente donde los desee. Más adelante, en la fase de diseño basado en cuadrícula CSS, determinará las medidas exactas.
FilmPundits es un sitio propiedad de un amigo que estoy construyendo. La siguiente maqueta es uno de los varios diseños "FilmScenic" que he creado como prototipo. El tema de la película solo se presta a este ejemplo debido a las imágenes de estilo panorámico..
Si desea utilizar un diseño similar para temas que no sean películas, simplemente ajuste la altura de la imagen para que se vean menos en pantalla panorámica. Para mis necesidades de diseño, la imagen más grande debe tener el mayor impacto. Así que la composición se posiciona ligeramente descentrada, horizontalmente. Esto hace que toda la página sea un poco más dinámica y llama la atención sobre los elementos más importantes..
Veamos las líneas de "guía", a continuación, que forman la cuadrícula de diseño para la maqueta de arriba..
Use su software de gráficos favorito para convertir las líneas de guía en un mapa de "sección":
Si no está utilizando una cuadrícula de CSS, codificaría manualmente su página web y el archivo CSS en este punto, o permitiría que su software genere el código para usted..
Proceso de diseño basado en cuadrícula CSS
Ahora que tenemos una maqueta de diseño gráfico, necesitamos traducir eso a código HTML y CSS. Para reiterar, el uso de un marco de cuadrícula CSS acelera el proceso de creación de prototipos. Puede medir los elementos de diseño en anchos de píxel y afinar para adaptarse a la cuadrícula CSS que está utilizando. (No me estoy poniendo mucho en posición vertical porque tiendo a controlar eso con alturas de imagen y márgenes superior / inferior).
Este es el proceso que normalmente utilizo para aplicar cuadrículas CSS, que trata la maqueta de diseño gráfico como algo aparte. Tendrás que ajustar esto para satisfacer tus necesidades..
En una hoja de papel, dibuje un rectángulo delimitante (horizontal o vertical) que represente la forma general del diseño de su página..
Divida el rectángulo delimitador en secciones aproximadas: encabezado, pie de página, contenido principal, barra lateral.
Partición de las secciones en bruto más, según sea necesario.
Elija su marco de cuadrícula CSS, ya sea pre-construido o personalizado. Estoy usando Blueprint. Puede usar este documento PDF de una página como "hoja de trucos".
Decidir sobre el ancho de página máximo. He utilizado el ancho de página predeterminado de Blueprint de 950 píxeles, que está formado por 24 columnas de 30 px de ancho cada una, y 10 canales de ancho de px entre columnas (24x30 - 10 = 950 px).
Simule su diseño en el software de gráficos de trama (Photoshop, Fireworks, etc.) si lo desea. Tiendo a saltarme este paso porque. Tenga en cuenta que la mayoría de los marcos de cuadrícula CSS incluyen una cuadrícula PNG o JPG que puede superponer como guía. No utilicé esa cuadrícula en el proceso de diseño gráfico discutido anteriormente.
Decide los anchos mínimos para tus diferentes secciones.
Quería que la barra lateral tuviera al menos 190 px de ancho (5 columnas Blueprint), pero dejé esto hasta el final para asegurar que los tres pequeños bloques de características en la parte inferior izquierda tuvieran prioridad.
El lado izquierdo del bloque de "características" debe tener un poco de espacio en blanco (> = 30 px, ya que es el ancho de una columna en Blueprint). Después de jugar con las secciones de mayor prioridad, me decidí por 3 columnas = 110 px de ancho.
Los tres bloques de características pequeñas deben tener el mismo ancho. Cualquier cosa menor a 190 px de ancho no tendría el mismo impacto visual. Nada más que 190 px no dejaría espacio suficiente para el espacio en blanco a la izquierda. (Si tuviera el tiempo y la inclinación, podría haber creado un marco de Blueprint personalizado que brindaría un control más preciso, o utilizar una página de mayor ancho).
El ancho de la imagen de la característica grande (590 px = 15 columnas) se decide automáticamente, ya que tiene que abarcar el ancho de los tres bloques de características más pequeños. Su relación altura / anchura es mayor que para las imágenes de características más pequeñas, para un impacto visual y, por lo tanto, significa que es "más importante" que otros elementos de la página. Todas estas imágenes dan un atractivo de pantalla ancha, a pesar de las diferentes relaciones de altura / anchura.
En la sección "Publicaciones recientes" de la barra lateral, el ancho de la imagen se fuerza a 70 px (2 cols), en lugar de mis pulgares de 48x48 deseados, como resultado de lo que queda de la pantalla horizontal. (Aquí es donde un marco de cuadrícula CSS puede ser una responsabilidad: tamaños forzados). Sin embargo, al final, incluso las miniaturas pequeñas apuntan ligeramente al tema de "pantalla panorámica".
Cualquier bloque de texto que sea demasiado ancho se puede arreglar fácilmente usando una fuente más pequeña, preferiblemente usando una familia de fuentes que aún pueda leerse en tamaño reducido.
Determine las alturas de los elementos donde sea posible. Satisfacer las preferencias de altura me preocupa menos, pero minimicé la ubicación de los elementos de diseño verticalmente para que el diseño general de la página resulte una sensación de "pantalla panorámica". Al menos para esta plantilla de página de inicio, no quería que la altura de la página fuera tan grande que la mayoría de los lectores tendrían que desplazarse hacia abajo. Eso arruinaría el efecto "pantalla panorámica".
El menú es solo un marcador de posición y no está cubierto aquí en el código. Abarca todo el ancho del "contenido" de 710 px (18 cols).
La altura de la imagen de la característica grande fue decidida por el diseño. Sus proporciones deberían asemejarse a una "pantalla ancha"..
Las imágenes de características pequeñas son una versión reducida de las que uso en otro sitio de películas. Los originales son 470 w x 175 h. Dado que solo hay 190 px de ancho para trabajar, al escalar una imagen original, la altura resultante es de 71 px, que he recortado aquí a 70 px. La proporción resultante aún da una sensación de pantalla panorámica, pero refleja el hecho de que estos bloques no son tan importantes como la imagen de gran tamaño..
La altura del texto de cada sección de características pequeñas se define mediante cuatro secciones verticales: título de la película, fecha de publicación, autor de la publicación y descripción, así como varios "bordes inferiores". (Más adelante, en el código CSS, verás que la altura de línea predeterminada es 115%).
La altura de los elementos en el bloque de Publicaciones recientes es un mínimo de 49 px, aunque son variables dependiendo de la longitud del título de una publicación..
La parte superior de la sección Noticias no se alinea con la parte superior de las funciones pequeñas. Hay maneras de lograr esto, aunque no lo he cubierto aquí.
Determine los anchos finales de cada elemento, teniendo en cuenta la configuración de su marco de cuadrícula. Puede utilizar su dibujo de papel o maqueta de gráficos como ayuda.
Rebana tu maqueta gráfica, si estás usando una, y guarda segmentos en archivos de imagen.
Agregue las etiquetas div Blueprint y los atributos de clase necesarios para respaldar su diseño.
Prueba y modifica hasta que tengas un diseño final con el que estés satisfecho..
Si lo desea, quite el marco Blueprint. Esto significa reemplazar el marco explícito (HTML, CSS) por uno implícito, lo que para mí me parece mucho trabajo innecesario (pero eso es solo para mí). Como mínimo, en producción, use la versión "comprimida" de los archivos Blueprint.
Ir a vivir.
Si eres un diseñador real, a diferencia de mí, probablemente harás la mayor parte de la maqueta de diseño en tu paquete de edición de gráficos favorito. Por lo general, prefiero dibujar en papel y luego simularme sobre la marcha utilizando HTML y CSS (tanto Blueprint como clases personalizadas), como se explica a continuación..
Proceso de codificación basado en cuadrícula
Ahora que tiene una maqueta del diseño de su página, puede comenzar a codificar en HTML y CSS. Aquí hay un proceso aproximado de los pasos de codificación reales:
Incluya las referencias necesarias de Blueprint CSS y el código condicional de IE en el cabeza elemento de tu pagina web.
En la etiqueta del cuerpo, comience con una div cuyo clase atributo se establece en "contenedor". Este es un código de Blueprint para especificar un área de contenedor para elementos de diseño. Esta sección de la página completa. Si desea que la cuadrícula sea visible, para ayudarlo a colocar los elementos correctamente, también agregue el valor "showgrid" a la clase atributo de este div.
Comience a refinar los bloques en secciones más pequeñas utilizando contenido HTML envuelto en div etiquetas, así como rectángulos controlados por CSS para las imágenes. Para especificar anchos, use las clases "span-x" de Blueprint. Agregue cualquier clase de CSS personalizada que necesite. Por lo general, coloco bloques personalizados redundantes (con un fondo gris), luego los elimino una vez que tengo el diseño real implementado en el código..
Puede continuar refinando cada bloque aproximado o saltar al siguiente paso.
Cree los logotipos, iconos o banners necesarios que no se hayan creado anteriormente.
Reemplace los bloques en bruto con elementos de diseño real. Agregue el apropiado div Etiquetas, cualquier valor restante de la clase Blueprint.
Ejemplo de código HTML y CSS
Para que los procesos anteriores sean más claros, echemos un vistazo a algunos fragmentos de código HTML y CSS reales para el ejemplo de diseño de sitio de película que se muestra anteriormente. Tenga en cuenta que me he vuelto extremo con las etiquetas div que no son de Blueprint solo por claridad en este tutorial. Probablemente deseará eliminar cualquier clase en exceso, posiblemente fusionar etiquetas div anidadas.
Tenga en cuenta también que he usado algunos nombres de clase "feos" que no son de Blueprint para mayor claridad. Todos están precedidos por "fs-", seguidos por un nombre funcional, para dejar en claro para qué los estoy usando..
He codificado cinco etapas para este tutorial, para ilustrar el proceso de refinamiento en HTML y CSS. Normalmente, comprimiría la etapa 1-3.
Plantilla en blanco con clase "contenedor" de planos y archivo CSS vacío.
Bloqueo rugoso etapa 1.
Bloqueo en bruto de la etapa 2. Refinar bloques en bruto de la etapa 1.
Bloqueo brusco etapa 3. Refinamiento del bloque final en secciones necesarias.
Página web final y CSS.
Estos pasos serán más claros en las siguientes secciones..
Paso 1: Código de plantilla en blanco
Para empezar, queremos configurar el archivo HTML:
Plantilla FilmCenic
El encabezado, el contenido, la barra lateral y el pie de página van aquí.
Share
Accentsconagua