Crítica: ¿Cómo puedo vincular un logotipo en el diseño de mi sitio web en los tamaños de pantalla de dispositivos móviles y de escritorio?

Soy nuevo en la sección de diseño gráfico de SE, siendo esta mi primera pregunta aquí, pero no nuevo en diseño gráfico o web.

Estoy en el proceso de crear un sitio web gratuito para un nuevo bar local de eSports. El diseño básico está ahí, pero el logo parece fuera de lugar. (Tenga en cuenta que ninguno de los gráficos fue hecho por mí y actualmente son solo marcadores de posición) El sitio web utiliza consultas de medios y hay 4 diseños de diferentes tamaños según el ancho:

  • Muy grande: 1051 px +
  • Grande: 751px - 1050px
  • Medio: 461px - 750px
  • Pequeño: Menos de 460

En mi opinión, el logotipo se ve perfectamente en su lugar en el diseño "pequeño", pero se ve terriblemente fuera de lugar en los otros tres.

Mi pregunta: ¿Qué puedo hacer para vincular mi logotipo a los diseños más grandes para que no parezca que está sentado allí? (Cambie el tamaño del ancho del navegador para ver diferentes diseños)

Sitio web: http://pvp.comeze.com/

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

La revista smashing tiene un artículo detallado sobre el uso de SVG y CSS para hacer exactamente lo que estás pidiendo. codificación.smashingmagazine.com/2014/03/05/…
@BrianC Sé cómo hacerlo receptivo, y sé cómo tener logotipos "diferentes" según el diseño que se esté utilizando. Simplemente no me gusta cómo se ve en las tres resoluciones más altas, en cuanto al diseño. Aunque gracias por el interesante artículo.
No está relacionado con tu pregunta, pero tengo que preguntar... ¿qué es una "barra de eSports"?
@DA01 Un bar dedicado a los videojuegos y los eSports. Transmiten torneos populares de videojuegos como League of Legends, Starcraft, DotA 2, etc. eSports = deportes en Internet.
¡Yo pasaría el rato en ese bar!
@ DA01 ¡Es increíble! ¿Alguna sugerencia con respecto a mi problema? :)
Estoy bastante de acuerdo con Brendan. Tiene una buena respuesta.

Respuestas (2)

La respuesta más simple: no creo que el logotipo se vea terrible sentado encima de todo tal como está.

Respuesta simple: puede intentar hacer flotar el logotipo hacia la izquierda en grande y arriba y mover el menú hacia arriba para llenar el espacio.

Respuesta complicada: se podría pensar más en un sistema de identidad. Un logo no es una marca; es solo una parte de eso. Piense en cómo Coca-Cola tiene su logotipo, pero también tienen la "cinta dinámica" que usan como elemento secundario en su lata. Si tuviera algunos elementos de marca secundarios o una paleta de colores para trabajar, podría incluirlos en el encabezado y llenar mejor el espacio.

Esa es una buena idea, podría agregar algo para llenar el espacio en blanco a cada lado. La pregunta es, ¿qué?
No sientas que necesitas llenar el espacio. Los espacios en blanco no son algo malo, especialmente alrededor de un logotipo.
Para ampliar la última sugerencia de Brendan, en la pantalla móvil (estrecha) el diseño de su logotipo vertical tiene sentido. Pero en una pantalla ancha, es posible que desee considerar una variación del logotipo que sea más horizontal. Quizás PVP a la izquierda y el eslogan a la derecha.

Una forma vertical como este logo+texto tiende a verse un poco perdido en un amplio espacio horizontal, especialmente centrado. Eso se debe en gran parte a que define inmediatamente tres rectángulos, dos de los cuales tienen la orientación opuesta al logotipo y al texto. Para mantener el texto de "bar y salón de historietas" lo suficientemente grande como para que sea legible, también debe usar una cantidad no deseada de valiosos bienes raíces verticales en la parte superior de la pantalla.

Centrar el texto debajo del logotipo, como lo ha hecho aquí, lo deja muy quieto. Compare con el texto ligeramente desplazado que usó en el control deslizante, que tiene una sensación de movimiento que es muy apropiada para el tema. Con las formas de las letras de su logotipo, el "pedestal" formado por las dos líneas de texto hace que el PVP parezca lo suficientemente desequilibrado como para ser un poco incómodo.

Cree una versión para aplicaciones horizontales como su encabezado web (debería tener uno de todos modos). Eso permite que "Bar and Comic Book Lounge" sea más prominente y también le permite mantener esa sensación de movimiento, lo que reduce la cantidad de espacio vertical necesario.

En la pantalla del móvil, llenará muy bien el encabezado. En la pantalla grande, debería flotar hacia la izquierda. Ahí es donde esperamos ver un logotipo en un sitio web de idioma de izquierda a derecha, y le deja espacio para un menú auxiliar o un rotador de pancartas para anuncios de eventos especiales o anuncios si los necesita.

Crítica: ¿Cómo puedo vincular un logotipo en el diseño de mi sitio web en los tamaños de pantalla de dispositivos móviles y de escritorio?
RespuestasAquíPolítica de privacidad1y, 0v