Есть ли недочеты в этом макете сайта?

Question

[Рафик Бох]

Убрал куда подальшу бутылки, кофе и взялся для создания полноценного макета сайта для сервера игры Perfect World.
В этой работе постарался обратить внимание на множество замечаний, оставленных вами к прошлым мои работам.
Создавал его часов 30, много исправлял, переворачивал верх дном и в итоге смотря на этот макет, я уже не знаю, что исправить, чтоб улучшить визуализацию или же какие-либо грубые ошибки, в связи с мои небольшим опытом в этом деле.

От вас мне хотелось бы услышать недочеты в этой работе, на что обратить внимание, чтоб в дальнейшем не наступать на грабли, как в типографике, дизайне так и в структурировании самого сайта. Если же вам понравилась работа, дайте тоже знать.

Так же загрузил видео на ютуб, где можно детально просмотреть макет.
https://www.youtube.com/watch?v=7OgQyCE3ijc&featur...

Comments

[Ярослав Иванов]

Книга дизайн для не дизайнеров.

[approximate solution]

Вы бы загрузили еще 2 версии макета - планшет \ мобильная версия. Хотелось бы понять как всё это красиво будет адаптивиться, и будет ли.

PS: иконки в футере слеплены, нужны отступы.

[Антон Литвиненко]

теперь сверстай его и сам все поймешь.
Даже не умея верстать ты просто прикинь как бы ты его верстал если бы умел верстать.
Например есть изображение главного блока, со всех сторон накрытое вот этими кирпичиками или зубчиками или что там. Вот как бы ты это реализовал? а поверх зубчиков еще квадратики светящиеся. итд. вот пройдись по макету и придумай.
как на меня это флаер под печать, а не макет для верстки

[Mikhail Derkach]

П.С. я не дизайнер, а верстальщик/фронтендер

Что сразу бросается в глаза:
- белый шрифт на светлом фоне, прям на баннере (тень и подложки не спасут :) )
- Синий текст на синем фоне перд футером
- обилие разнородных шрифтов, которые очень плохо читаются, помимо того, что они банально некрасивые. Хуже них только Times New Roman будет, и то, спорно
- некоторые шрифты так вообще видимо будут только картинками
- обилие ненужных декортаивных элементов (имхо)
- по поводу квадратиков написали выше, но эта проблема решится опытным верстальщиком, который сделает, но проклянет весь твой род до начала времен

с таким макетом работать любому верстальщику будет достаточно... проблематично, мягко говоря

Answer 1

[Ivan Bogachev]

• Белый по светлому не читается. Белый по пестрому - тем более. Голубой по голубому - ох...
  
• Странное смешение шрифтов с засечками и без. Никакой системы в этом не наблюдается. Какую задачу эта разница решает - непонятно.
  
• Очень много разных размеров шрифтов и межбуквенных интервалов. Проблема та же - нет системы.
  
• Отступы везде разные. Внизу их вобще нет. Проблема та же.
  
• Местами намешана информация. Глаза разбегаются. Здесь явно прослеживается идея поэкранного скролла, или чего-то вроде него, но стоит подумать над тем, чтобы каждый экран был о чем-то одном. Первый про то, что это такое (зачем там какие-то характеристики про опыт и духов?), дальше описание сервера (зачем там реклама справа?), магазин вообще спрятался в куче рандомных фактов по краям, я его в первый раз даже не заметил.
  
• Не совсем понятно, как это должно адаптироваться под разные размеры экранов.
  

В целом докапываться можно много к чему, перечислять нет смысла, но общий посыл такой:

1. Обращайте внимание на систему в дизайне. Загуглите, что такое дизайн-система и почему простота и последовательность - это хорошо.
   
2. Думайте больше о доступности и адаптивности. Вы дизайн делаете для пользователей в первую очередь. Красочная картинка вторична.
   
3. Не нужно нагромождать все, как в газете. Это очень редко работает. Управляйте вниманием пользователей, не давайте ему растекаться во все стороны.
   

P.S.: Также в таких проектах всегда нужно быть готовым к диалогу с разработчиком и не допускать требований pixel-perfect по согласованным без него макетам. Это не так сложно сверстать, но вот эти штуки по краям с линиями и кубиками будут генерироваться на лету (для адаптивности). Они не будут 100% соответствовать нарисованному. Также тут так и напрашивается все эти картинки анимировать, как на текущем сайте mtg. Не знаю, как этот стиль называется, но WebGL - наше все. Да и эти кубики я бы сделал неспешно плывущими более-менее вниз с покачиваниями и поворотами... Но это уже следующий шаг. Первое - система в дизайне и доступность.

Comments

[Рафик Бох]

Слева и справа, то что за пределами центральной части, где показана защита сервера, "Магазин", это не кликабельные блоки, туда запихнул второстепенную информацию, для того, чтоб выглядело все структурирование. Донат, форум и тд вылезет, если кликнуть по верхнем правым полоскам.
Хрономир - это не реклама, а что-то вроде дополнения к игре.

За подробные замечания большое спасибо, обязательно учту в дальнейших работах.