Разделы

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

20 декабря 2013 г.

=) Долганова Ксения Студийности

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

День первый

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

День второй

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

День третий

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

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

День четвертый

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

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

Переходим к съемкам каталога продукции. Делаем пробные фотографии одного и нескольких роллов, показываем, как укладывать сеты и роллы. Оставляем фотографа работать над материалом.

День пятый–одиннадцатый

Ждем фотографии для начала работы.

День двенадцатый

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

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

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

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


Корзина пуста:

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

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

День тринадцатый

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

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

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

Стало:

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

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

День четырнадцатый

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

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

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

День пятнадцатый

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

Итог нашей работы смотрите на сайте sakh‐sushi.ru