Little pre-word: если честно, эта статья и последующие статьи до конца декабря этого года, мягко говоря, немного запоздали, потому как работу над Able2Design.by (A2D) мы закончили недавно, а работа над некоторыми проектами была закончена еще осенью. В общем, статьи эти пишутся как раз в декабре, то бишь прямо сейчас ;) и довольно сложно вспомнить все нюансы и мелочи, о которых хотелось бы поведать... Поэтому будьте благосклонны и не судите строго - текста будут немного сжаты и не сильно детальны.
Ну вот, с предысторией покончено, теперь к делу!.. Я подумал, что было бы неплохо немного отойти от своих традиций в отрисовке дизайна и не "плясать" от логотипа, а оставить его на десерт. Первое, что я собирался сделать - это создать базу, если хотите, фундамент сайта, где правильно подобраны сочетающиеся цвета, а деление на блоки организовано по классической схеме, а значит знакомо большинству пользователей.
Обдумывая то, каким будет этот дизайн, я решил почитать историю создания компьютерных игр, и знаете, что я нашел? Как вы думаете, чему была посвящена саа-а-мая первая игра? - цитирую wiki: “...Самой первой компьютерной игрой стал симулятор ракеты, созданный в 1942 году Томасом Голдсмитом...” и одна из двух последующих игр была также посвящена космической теме - http://ru.wikipedia.org/wiki/Компьютерные_игры.
И я подумал - а ведь и вправду, в индустрии игр тема космоса, его исследований, захват вселенных была всегда одной из самых интересных. Все самые современные девайсы, технологии, а также самые оригинальные дизайны чего-либо были представлены в играх этой тематики. Итак, задумка получилась следующая: основной стиль - смешение high-tech и web 2.0, “база” будет выполнена в “стальных” цветах, оттенках серого.
Header:
Видоизменяя этот вариант, я дошел вот до чего:
Такой структурой и цветовым решением я был вполне удовлетворен, и приступил к следующему этапу работы. Как я говорил в первой части этой статьи, меню у нас предполагалось в виде «карусели». Его элементы анимированы и при навигации будут двигаться по эллипсу. Если интересна технология создания такой анимации и функционала к ней - пишите в комментариях – расскажу :).
Для воплощения этого замысла подойдут вебдванольные блоки с закругленными уголками. Заказчик настаивал, чтобы в меню использовались оригинальные логотипы и фотореалистичные изображения консолей и других основных товаров, а для этого условия требуется достаточно много места. Итак, используя небольшой градиент в фоне элементов меню и прозрачность для придания объема, я начал разрабатывать меню.
И вот, после полуторачасовой работы у нас уже есть 5 первых элементов меню. Общее представление об этом блоке я уже имею, поэтому приступаю к основному – контентой части. Обсуждая данный блок с заказчиком, мы договорились, что будем использовать «карточку товара» как структурную единицу. Мне очень хотелось, чтобы эта часть проекта была максимально простой для понимания, не перегруженной информацией, поэтому я выбрал среднее состояние карточки: среднего размера изображение товара + цена + краткое описание товара = заказ в корзину.
Я добавил вспомогательную панель справа, на которой разместились блоки «Акция» и «Новости». «Акция» состоит из изображения и небольшого текста, рассказывающего о сути акции и размере скидки. Всю эту информацию можно поменять в "админке" сайта. Блок «Новости» представляет собой отображение нескольких актуальных новостей, есть возможность перейти к полному тексту определенной новости или к полному списку всех новостей.
Так вот, после того как появилась вспомогательная панель с вышеупомянутыми блоками, контентная часть стала казаться сильно не сбалансированной и что-то так «резало глаз»!...хотя рассматривая элементы по отдельности, все было в порядке! Сделав перерыв на кофе-брейк, я еще раз посмотрел на макет, но с большего расстояния, метров с 3-х… и тут я все понял! Вся проблема заключается в цветах: левая, основная сторона контента была слишком светлой и едва ли не сливалась с фоном, а правая же, наоборот, четко и сильно выделялась. Узрев это, я начал экспериментировать с цветом и формой.
...и, наконец, вот он - желаемый результат:
Как вы видите, я добавил рекламный блок со слайд-шоу скриншотов из новых игр, поиск, самую нужную информацию о корзине (логин, количество помещенных в корзину товаров, переход непосредственно к самой корзине), форму входа на сайт, а также логотип.
В целом, результат мне очень понравился. Дизайн получился стильный, строгий и лаконичный. Показателем этого, является то, что макет был принят заказчиком на «ура!», что и было отмечено прямо в той же кафешке, где мы с ним встречались.
Стоит отметить первую эмоцию у заказчика: ”…Великолепно!..”. Ради таких моментов и хочется работать! ;)
{{ Content }}