Создание дизайна сайта за 15 дней

« Суши‐Тайм » — компания, занимающаяся доставкой суши по Южно‐Сахалинску . Летом 2013 года мы с огромным удовольствием провели редизайн их старого сайта.

В начале работы над каждым сайтом мы собираем материалы из области деятельности клиента. В данном случае изучению подверглись графические работы с блюдами японской кухни, посудой, суши. Было решено использовать два основных графических мотива: первый содержит большую композицию из продуктов японской кухни, а второй — изображение самого продукта с необычного ракурса. Макет сайта оформили в бумажной версии и получили одобрение клиента.

Обсуждение с клиентом макета. Клиенту идея показалась свежей и интересной. От ярких и сочных фотографий у покупателя должен разыграться волчий аппетит и появиться желание сразу заказать себе суши. Определяемся с фотографом. Выбор пал на Юрия Щапова, зарекомендовавшего себя, как хорошего специалиста.

Встреча с фотографом. Мы показываем ему макет, примеры качественных фотографий, объясняем концепцию. Он согласен, переходим к этапу подготовки инвентаря для главной фотографии.

Клиент присылает фотографии своей посуды. Выбираем, что хорошо впишется в композицию, а что стоит поменять. От главной фотографии много зависит и мы стараемся выполнить подготовку максимально качественно.

День фотосессии. За час до встречи с фотографом приезжаем на объект, где будет проходить съемка. Выбираем с поварами блюда, подбираем подходящую посуду. При составлении композиции представляем, как фотография позволит « вкусно» перемещаться по сайту, постоянно консультируемся между собой, меняем элементы, передвигаем, перекладываем, рассыпаем и собираем, вытираем. Критично осматриваем результат работы и начинаем съемки.

Фотограф сделал пробные снимки с дополнительным освещением и без него. Выбираем лучший вариант. Решили использовать вертикальный ракурс. Фотография получается свежей и стильной. На подготовку и съемку одной главной фотографии ушло 2,5 часа.

Начинаем работу над созданием главной страницы сайта. В главной фотографии выравниваем углы, цвет, дополняем боковые области, вставляем логотип, рисуем подписи к блюдам.

Подбираем палитру сайта. Сама фотография диктует бежевые, салатово‐зеленые тона.

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

Делаем Корзину, в виде япончика‐ниндзя , который реагирует на покупки.

В корзине товар, япончик в шоке:)

И при заказе на сумму больше 1500 руб. япончик просто в восторге:

Продолжаем работу над главной страницей. Располагаем баннеры, меню, создаем внешний вид каталога продукции. Благодаря качественным фотографиям работать над каталогом одно удовольствие.

Необходимо произвести ретушь всех фотографии каталога: на исходниках сероватый фон, а нам необходим кристально белый. Пишем инструкцию по обработке фотографий для клиента, однако после нескольких неудачных попыток принято решение: все фотографии обработает дизайнер. По результатам работы сушку хочется съесть прямо с монитора:)

Создаем структуру каталога, дублируя элементы, приходим к выводу, что « сушкам» в ряду очень тесно. Уменьшаем картинку, увеличиваем отступы. Было:

Работая над оформлением каталога главной страницы мы обнаружили ошибку, возникшую на этапе съёмки: ракурсы на фотографиях сетов продуктов были различны. Просим переснять. Также остро стоит и вопрос: что должен увидеть посетитель сайта? Один большой красивый и вкусный ролл или все‐таки восемь роллов к комплекте? Одно из решений — смена картинки по наведении мыши.

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

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

Создаем форму заказа продукции.

В верхней части внутренних страниц сайта оставляем край фотографии. Для навигации по каталогу упрощаем отображение разделов.

Оформляем типовую страницу, страницы рецептов, выверяем все отступы, г отовим все материалы под удвоенное разрешение ( ретину), о брабатываем фотографии для сайта. Завершаем разработку макета. Приводим все в порядок и отдаем верстальщику — впереди следующий этап разработки.