>>23171
Тут много что сказать можно.
Давай будем итерациями двигаться к годному дизайну.
Итак, поехали:
Почему ты выбрал ширину макета 1400 для рисования? Я советую рисовать в 1024, или 1280. Я делаю всегда в 1024, ибо у айпадика по широкой стороне именно столько, меньше уже придётся использовать media queries, а больше - всё будет растягиваться, что нормально. Так что советую сразу рисовать минимум-версию, с указаниями верстаку, какие расстояния должны растягиваться, если экран больше чем ты нарисовал. http://grab.by/iyMm
Следующее. После создания стоит сделать хотя бы минимальную горизонтальную сетку и определиться с базовым значеним отступов. Я обычно юзаю 25px как дефолтный маргин. В нашем случае не обязательно делать правильную модульную сетку, сайт простецкий, и будет достаточно лишь горизонтального выравнивания. http://grab.by/iyMs
Далее фигачим логотип. http://grab.by/iyNm
Я использовал шрифт аппетит, который тут где-то рядом раздают, заюзал два цвета. Это, тащем-то и не логотип даже, но для шаражкиной конторы, которая у тебя за 200 баксов сайт заказала и так сойдёт.
Если фимозный заказчик требует всё же написать фимозный слоган, можно сделать так: http://grab.by/iyNE , сильно хуже не станет.
Попутно определяемся с цветовой гаммой.
Я выбрал так:
Тёмно-серый цвет #373737
Синий цвет: #196b99
Чёрный цвет: #080808
Шрифт будем юзать arial, 14px для текста, 32 для h1, 24 для h2, 18 для h3. Интерлиньяж в текстах - 1.3
Шапка. Шапка высотой 360 пикселей - не очень годное решение. Самое популярное разрешение на данный момент - 1366*768, ноутбучное, при такой шапке половину экрана будут занимать бесполезные капельки из клипарта. Лучше, чтобы это место было занято телефонами и главным меню. Вообще, перед каждым новым элементом стоит поразмыслить в стиле "зачем я это делаю и могу ли я не делать этого?". В данном случае ответы будут "для красоты" и "да". Красота нам нахуй не нужна, мы дизайнеры а не художники, наша цель сделать продающий сайт а не ослепить глаза искусствоведов. Поэтому от такой конской шапки мы отказываемся в пользу функциональности и удобства пользователей. Есть такая вещь, как "предсказуемое поведение". Например, главное меню сверху - предсказуемое решение, пользователь именно там и ожидает его увидеть. Телефоны 90% пользователей ожидают увидеть в верхнем левом углу. Поэтому не будем выделываться, и поместим телефоны именно туда. Не забываем про сеточку. http://grab.by/iyOC . Кстати, ctrl+h в фотошопе позволяет скрывать/показывать ВСЕ extras разом, в том числе и наши guides.
Главное меню. Ох, как все любят градиентики в главном меню. Мы просто не можем не сделать что-нибудь монструозное, иначе нам скажут, что мы не дизайнеры и на сайте недостаточно весело. Тащем-та, я бы убивал за такую хуйню. Нам не стоит забывать, что мы делаем не картину, а сайт. На сайте контент первичен, а навигация - лишь способ удобного достижения контента. Поэтому мы сделаем максимально intelligent-градиентики и скругляшечки. Не забываем про сетку, опять-таки же! http://grab.by/iyOM
http://grab.by/iyPU Скругляшечки и градиентики есть? Да. Все довольны, а наша совесть чиста - мы не отвлекаем всё внимание пользователя на главное меню. И при этом всегда чётко даём понять, где сейчас находится человек.
Боковое меню.
Итак, у нас задача сделать не-иерархическое боковое меню с поиском. Что может быть проще? Тем же кеглем (16), что и главное меню фигачим боковое. Не забываем про сетку и не вылезаем за пределы выделеной боковой менюшке области. Увеличиваем расстояние между пунктами и навсегда забываем о проблеме переноса пунктов. Теперь один пункт может занимать хоть двадцать строк, всегда будет ясно, где заканчивается этот и начинается новый. Выбранный пункт ненажимабелен и выделяется, естественно. Кстати, циферки там вообще не к месту. Зачем юзеру знать о количестве позиций в категории? Для поиска делаем простую форму с простой кнопкой. http://grab.by/iyQk Кнопку мне было лень рисовать. Не забываем подписать, что делает эта форма и зачем она нужна. Это - поиск по товарам. Так и пишем.
Если руки чешутся по тенюшкам - можно вот так отделить боковое меню от контента.
Корзина.
Ищем иконку на http://www.iconfinder.com/search/?q=shopping , выбираем какую-нибудь по вкусу. Херачим корзину. http://grab.by/iyQI Выделяем её чем-нибудь лёгеньким, чтобы её было легко найти глазами.
Форма входа.
Форму входа имеет смысл скрыть за ссылкой, зачем она нам постоянно? Только занимает место и отвлекает от контента. Делаем ссылку, подчёркиваем dashed, надеюсь, не надо говорить зачем. Саму форму я не буду рисовать, мне лень ^_^
Бля, пиздец получился, лол. Но это просто как примеры всё, без выравнивания пикселей и без включения головы
Продолжаем самостоятельно в том же духе.
В общем и целом, что я хотел сказать? Перед каждым следующим шагом нужно думать и ставить себя на место пользователей. Не стоит делать градиентики ради градиентиков, картинки ради картинок. Нужно помнить, зачем человек пришёл на этот сайт и что он хочет получить. В нашем случае человек пришёл, чтобы быстро ознакомиться с ассортиментом и сделать заказ. Всё, что относится к этой задаче - реализуется с удвоеным вниманием. Всё что не относится - отметается как неважное. Надо помнить, с какого устройства пришёл среднестатистический пользователь и какой у него экран. Нужно знать особенности этих устройств. Например, нельзя делать телефон картинкой. Если ты пришёл с планшета или телефона у тебя должна быть возможность нажать на номер и позвонить. А не запоминать, сворачивать браузер, ошибаться при наборе и навсегда забывать о вашей конторе.
Эстетика так же важна. Эстетичный сайт брендогенен, в смысле, работает на бренд компании. Бренд существует всегда, даже если сама компания об этом не догадывается.
Если сайт - инструмент получения необходимой пользователю информации, то этот интсрумент должен стремиться к тому, чтобы быть простым, понятным, без перегибов палки, именно такой, какой необходим. Необходимый минимум+милые плюшки по желанию.
А когда у тебя текст нечитаем из-за отсутствия интерлиньяжа или из-за дурацкого выравнивания или из-за того, что от него отвлекает внимание что-то ещё, когда у тебя всё лежит вразнобой, вылезает за границы, когда у тебя невозможно отличить ссылку от заголовка, когда непонятно, где ты находишься в данный момент без дополнительного напряжения глаз, тогда твой сайт можно назвать сайтом ради сайта. Не ради пользователя, рекламы, предоставления услуги, а ради сайта.
Советы вкратце:
— больше внимания к шрифтам, текстам, вёрстке текстов особенно. Иерархичность текстов нельзя нарушать. Списки отбиваются тирешками или •'ами.
— Градиенты = визуальный шум, особенно если их много и они выполнены в грязных тонах. Чтобы сделать хороший бело-голубой градиент и не получить выцветшую детскую пелёнку из девяностых, надо сильно постараться. Лучше не пробовать.
— Не нужно делать так, словно контент зажат в рамки дизайна. Дизайн должен подстраиваться под контент, а не наоборот. Например, http://grab.by/iySo, вот эта штука - ужасна. Бедные пунктики зажаты в рамку. Это же навигация! Навигация - основной инструмент взаимодействияс сайтом, почему она должна быть куда-то зажата? Нахуй рамку, нахуй мусорные уголки, нахуй градиент, нахуй подчёркивания. Смело и размашисто пишем пункты, не забывая о том, что менеджеру потом может захотеться добавить в меню что-то, что не влезет в одну строку. Избавляемся от лишнего, убираем эти цифры.
— Всегда помогаем пользователю. Подписываем, что он получит, когда нажмёт туда или сюда. Например, http://grab.by/iySs . Поиск чего? Поиск где? Поиск кого? Нужен лейбл "Поиск по каталогу", плейсхолдер "название товара" и кнопка "найти". И опять, убираем уголки, это дизайн ради дизайна. Поле для ввода должно выглядеть как поле для ввода, а не как какая-то плашка.
— Ещё раз, внимательнее с текстами! http://grab.by/iySA Тебе жалко места на сайте, чтобы написать "корпус"? Зачем сокращать "телефон"? Зачем запятая после двоеточия? Почему номер в таком странном формате? +7 xxx xxx-xx-xx или +7 (xxx) xxx-xx-xx на крайний случай!
— Учись, смотри по сторонам, изучай работы лучших, читай про вёрстку и дизайн, интересуйся темой, подпишись на тематические сайты, не бойся экспериментов, и всё будет хорошо.
