Критика: Как я могу связать логотип с дизайном моего веб-сайта на экранах мобильных и настольных компьютеров?

Я новичок в разделе графического дизайна SE, это мой первый вопрос здесь, но не новичок в графическом или веб-дизайне.

Я занимаюсь созданием бесплатного веб-сайта для нового местного киберспортивного бара. Базовая компоновка есть, но логотип выглядит неуместно. (обратите внимание, что ни одна из графиков не была сделана мной и в настоящее время является просто заполнителем). Веб-сайт использует медиа-запросы, и существует 4 макета разных размеров в зависимости от ширины:

  • Очень большой: 1051px +
  • Большой: 751–1050 пикселей
  • Средний: 461px - 750px
  • Маленький: менее 460

На мой взгляд, логотип идеально смотрится на «маленьком» макете, но выглядит ужасно неуместно на трех других.

Мой вопрос: что я могу сделать, чтобы связать свой логотип с более крупными макетами, чтобы он не выглядел так, как будто он просто сидит там? (Измените ширину браузера, чтобы увидеть разные макеты)

Сайт: http://pvp.comez.com/

введите описание изображения здесь введите описание изображения здесь

В журнале smashing есть подробная статья об использовании SVG и CSS для выполнения именно того, о чем вы просите. coding.smashingmagazine.com/2014/03/05/…
@BrianC Я знаю, как сделать его отзывчивым, и я знаю, как использовать «разные» логотипы в зависимости от используемого макета. Мне просто не нравится, как это выглядит в трех более высоких разрешениях с точки зрения макета. Однако спасибо за интересную статью.
Не имеет отношения к вашему вопросу, но я должен спросить... что такое "киберспортивный бар"?
@DA01 Бар, посвященный видеоиграм и киберспорту. Они транслируют популярные турниры по видеоиграм, таким как League of Legends, Starcraft, DotA 2 и т. д. Киберспорт = интернет-спорт.
Я бы тусовался в этом баре!
@DA01 Это потрясающе! Есть предложения по моей проблеме? :)
Я почти согласен с Бренданом. У него есть хороший ответ.

Ответы (2)

Самый простой ответ: я не думаю, что логотип выглядит ужасно, когда он стоит над всем, как есть.

Простой ответ: вы можете попробовать переместить логотип слева вверху и вверх и переместить меню вверх, чтобы заполнить пространство.

Сложный ответ: вы могли бы больше думать о системе идентификации. Логотип — это не бренд; это только часть этого. Подумайте о том, что у Coca-Cola есть свой логотип, но у них также есть «Динамическая лента», которую они используют в качестве второстепенного элемента на своей банке. Если бы у вас были какие-то второстепенные элементы брендинга или цветовая палитра, вы могли бы добавить их в заголовок и лучше заполнить пространство.

Это хорошая идея, я мог бы добавить кое-что, чтобы заполнить пустое пространство с обеих сторон. Вопрос в том, что?
Не думайте, что вам нужно заполнить пространство. Пустое пространство — это неплохо, особенно вокруг логотипа.
Чтобы расширить последнее предложение Брендана, на мобильном (узком) экране ваш вертикальный макет логотипа имеет смысл. Но на широком экране вы можете рассмотреть более горизонтальный вариант логотипа. Возможно, PVP слева и слоган справа.

Вертикальная форма, такая как этот логотип + текст, имеет тенденцию выглядеть немного потерянной в широком горизонтальном пространстве, особенно по центру. Во многом это связано с тем, что он сразу определяет три прямоугольника, два из которых находятся в противоположной ориентации по отношению к логотипу и тексту. Чтобы текст «бар и зал комиксов» был достаточно большим, чтобы его можно было прочитать, вам также приходится использовать нежелательное количество ценной вертикальной недвижимости в верхней части экрана.

Центрирование текста под логотипом, как вы сделали здесь, делает его очень неподвижным. Сравните со слегка смещенным текстом, который вы использовали в слайдере, который имеет ощущение движения, очень соответствующее теме. С буквенными формами вашего логотипа «пьедестал», образованный двумя строками текста, заставляет PVP казаться достаточно неуравновешенным, чтобы быть немного неудобным.

Сделайте версию для горизонтальных приложений, таких как ваш веб-шапка (она у вас все равно должна быть). Это позволяет «Бар и зал комиксов» быть более заметным, а также позволяет вам поддерживать это ощущение движения, что уменьшает количество необходимого вертикального пространства.

На мобильном экране он красиво заполнит заголовок. На большом экране он должен плавать влево. Именно здесь мы ожидаем увидеть логотип на веб-сайте с написанием слева направо, и он оставляет вам место для вспомогательного меню или ротатора баннеров для объявлений о специальных мероприятиях или рекламы, если они вам нужны.

Критика: Как я могу связать логотип с дизайном моего веб-сайта на экранах мобильных и настольных компьютеров?
СпросиСетьПолитика конфиденциальности1y, 0v