Дизайн Landing Page, представляющий товар — монокуляр.
Сайт компании: Monocular.
Так же была разработана светлая версия данного дизайна: Monocular WHITE.
Дизайн создавался в тёмных и светлых тонах, чтобы в будущем обратить внимание на то, какие оттенки лучше воспринимаются в Италии. GIF-изображения для наиболее наглядной демонстрации товара, наглядное описание товара и его преимуществ.
- изучение подобных сайтов: на что лучше обратить внимание, как представить товар;
- продумывание структуры;
- написание текстов для каждого блока;
- разработка дизайна: преимущества товара, о товаре, отзывы, etc.;
- создание дополнительного дизайна в светлых тонах.
Дизайн Landing Page, представляющий товар — средство для роста бороды.
Сайт компании: Barba Plus.
- разработка максимально простого и быстрого, но приятного глазу дизайна;
- создание дизайна с включением возможности прохождения опроса, после которого будет показан основной контент;
- описание товара, отзывы, форма обратной связи.
Дизайн сайта для обзора интерактивной навигации, в соответствии с фирменным стилем Государственного Исторического Музея.
Сайт компании: ГИМ Исторический музей.
Сайт представляет собой упрощённый путеводитель по музею:
- шкала времени по эпохам, где каждая эпохая включает в себя описание и отображение залов списком и на карте, в которых проходят экспозиции соответствующего времени;
- список залов и карточка зала с подробным описанием, галерей и возможностью прослушать текст, а так же разделами и подразделами, где для каждого есть описание и точное расположение витрин на карте + список кспонатов и интерьер с описанием и галерей;
- карточка экспоната с описанием, галерей, списком коллекций, в которых он числится, и отображение принадлежности экспоната к эпохе, залу, разделу и подразделу + возможность посмотреть на плане, где можно найти экспонат;
- список коллекций и сортировка экспонатов по разделам;
- опросы, разбитые по категориям и возможностью единичного и множественного выбора ответов;
- упрощённый дизайн страницы поиска и ошибки 404.
Дизайн и вёрстка с использованием препроцессора SASS [ SCSS ] лэндинга для компании, занимающейся отбеливанием зубов.
Сайт компании: Gratuit de albire.
- яркий дизайн, наглядно демонстрирующий тематику лёндинга;
- перенаправление на вызов при клике на кнопку;
- удобная карусель отзывов и адаптивность для любых устройств.
Дизайн лэндинга для компании Directorix к предстоящей выставке.
Сайт компании: Цифровой указатель DIRECTORIX™.
Задачей было сделать максимально быстро и просто страницу, что рассказала бы о том, что представляет из себя цифровой указатель и какие преимущества у него есть.
Позже был создан похожий лэндинг, но для другой отрасли компании: DIRECTORIX Retail.
Re-дизайн лэндинга.
- сохранение структуры и основных цветов компании Squad In Touch;
- каждому разделу был задан соответствующий цвет для визуального разделения информационных блоков;
- разработка интуитивно понятного календаря, с учётом того, что на каждый день может быть запланировано несколько событий: никаких лишних переходов по страницам — перечень событий, спрятанных под спойлером, и подробное описание каждого события при клике, во всплывающем модальном окне.
Дизайн лэндинга по ремонту компьютерной техники по типу уже существующего — для наиболее быстрой разработки.
Сайт компании: РЕМОКОМП.
- разработка простого логотипа и фавикона;
- шапка и фиксированная навигация для более удобного перехода по разделам;
- два блока с преимуществами;
- разделы услуг, схемы работы компании и как именно она помогает клиентам разобраться с проблемами;
- наглядный прайс-лист и обратная связь.
Одна из первых работ; конкурсная.
Ссылка на сайт: TOP RPG.
- re-дизайн существующего сайта (каталог форумных и онлайн игр) с сохранением структуры и добавлением новых возможностей: индивидуальное оформление сайтов и расширенное описание;
- на начальной стадии было разработано два возможных варианта дизайна с последующей доработкой того варианта, что выбрал заказчик;
- дизайн не только главной страницы, но и всех остальных разделов: описание сайта и отзывы, «вопросники», объявления, профиль и магазин.
Разработка дизайна и логотипа для компании, занимающейся продажей алтайской продукции.
Простота — одно из требований к дизайну (ограниченный бюджет: излишняя функциональность повлекла бы за собой большие затраты на вёрстку).
- разработка простого логотипа;
- шапка создавалась с учётом того, что компания занимается торговлей по трём странам — это было одним из главных преимуществ и особенностей компании, поэтому важно было сделать акцент именно на этом;
- компания не предоставляла возможность онлайн заказа — прайс-лист выведен отдельной ссылкой на скачивание документа, а карточки товара предоставляют лишь основную, более полную информацию о продукте и фотогалерею;
- добавлена возможность поиска и фильтра продуктов по каталогу;
- для новостей создан календарь записей.
Разработка стайлгайда для лэндинга школы, от компании Squad In Touch.
- так как в дизайне для каждого раздела задана своя цветовая схема — все основные блоки сгруппированы в соответствии с определённым цветом;
- для каждого блока указано визуальное оформление всех объектов и ссылок + написание кода цвета (rgb, rgba) и дополнительных эффектов, что могут помочь верстальщику при дальнейшей работе;
- так же, есть раздел с типографикой и паттернами, что используются в дизайне, с пояснениями что и где применяется.
Выполнялось как тестовое задание.
Необходимо было показать умение работать с типографикой. Одно из основных условий: разработать макет, в котором бы не-использовались изображения.
Структура макета создавалась с применением модульной сетки. Текст взят из данного источника: The Ultimate Cheat Sheet For Reinventing Yourself.
Простой дизайн лэндинга для компании, что занимается ремонтом холодильников.
На данный момент компания больше не работает на рынке, однако посмотреть дизайн «вживую», можно здесь.
Главное в этой работе — скорость.
- разработка простого логотипа и фавикона;
- продумывание структуры;
- написание текстов;
- дизайн разделов, с сохранением общего стиля.
Re-дизайн уже существующего сайта.
Создание максимально простого дизайна с сохранением структуры. Главный акцент на каталоге сайта, поиске и тексте: никакой графики, лишь вся необходимая информация, но чтобы выглядело более современно и презентабельно.
Разработка дизайна интерфейса навигации для презентации проекта Эрмитажу.
Дизайн интерактивной навигации с минимальным необходим функционалом, ориентируясь на дизайн официального сайта Эрмитажа:
- меню навигации, с перечислением основного функционала;
- страница списка категорий на примере коллекций;
- список объектов категорий;
- карточка объекта;
- экран с построением маршрута от места нахождения до объекта;
- экран с проходящими в музее экскурсиями.
Дизайн интерфейса интерактивной навигации для Башни Федерации.
Разработка утверждённых заказчиком экранов со всем необходимым функционалом и нарезка скина, для дальнейшей передачи проекта разработчикам:
- на всех основных экранах имеется блок с действующими акциями;
- главный экран с отображением меню по основным разделам навигации и погодой на сегодняшний день;
- экраны категорий раздела и списка объектов категорий;
- карточка объекта с описанием, фотогалереей и построением маршрута от местоположения до объекта;
- экраны списка акций и увеличенного объекта с возможностью посмотреть где проходит акция и как к ней пройти;
- экраны поиска и вывода результата;
- экраны обратной связи, календаря, погоды и пробок;
- отрисовка карты в системе администрирования, ориентируясь на предоставленные чертежи.
Дизайн интерфейса навигации для Государственного Исторического Музея.
Разработка и последующая доработка экранов, согласно предоставленному техническому заданию заказчиком:
- главный экран — меню, карта музея и шкала времени;
- страница шкалы времени с описанием эпохи и списком залом (а так же их отображением на карте), относящимся к выбранному периоду;
- список залов с постоянной экспозицией;
- карточка зала — описание, галерея (с возможностью deep zoom'а), список экспонатов и построение маршрута от точки местоположения до объекта;
- карточка экспоната — описание, галерея, маршрут и переход на карточку зала, в котором находится объект;
- список событий с функционалом фильтра по категориям;
- карточка события;
- экраны поиска и вывода результата;
- дизайн экранов фотооткрытки: сделать фото, редактировать (возможность добавления стикеров и надписей), отправить открытку на почту;
- экран с описанием музея и фотогалереей;
- возможность сменить экспозиционную площадку, перейти на страницу социальных сетей и скачать приложение с Google Play или App Store;
- экраны с информационными плашками — ожидание, смена языка и ошибка.
Дизайн интерфейса горизонтальной навигации для Технопарка Сколково.
Разработка основных экранов, в соответствии с утверждённым техническим заданием:
- гланвый экран с основными разделами компании;
- список категорий и объектов;
- карточка объекта и постройка пути маршрута;
- список событий, карточка события и календарь;
- отрисовка карты в соответствии с предоставленными чертежами;
- нарезка скина для разработчиков.
Дизайн интерфейса навигации для терминала покупки кофе на предстоящую презентацию.
Разработка основных экранов:
- экран ожидания с функционалом подбора напитка, в зависимости от пола и возраста человека;
- список доступных кофе, с отображением цен и короткого описания + блок с выбранными напитками и возможностью перехода к заказу;
- дополнительные параметры для напитка — объём, сироп, etc.;
- модальные окна, если человек решит удалить напиток из заказа, и при сделанном заказе;
- экран подтверждения заказа с указанием имени.
Разработка дизайна листовки, наглядно демонстрирующей преимущества компании: короткое ознакомление с компанией, основные её заслуги и партнёры — отличаются для России и англоговорящих.
Разработка простого, но креативного дизайна визиток.
Выполнялось как тестовое задание, что должно было показать умение работать с векторной графикой и компоновкой объектов по модульной сетке.
- отрисовка изображения в векторе, в соответствии с предоставленным скетчем;
- создание двух простых макетов с использованием данного изображения: компоновка, подбор текста;
- цветокоррекция векторного объекта для более гармоничного его использования в тёмной версии макета.
Дизайн листовки к выставке, что коротко рассказывала бы о Know2Buy, с перечислением преимуществ с обратной стороны. + Подготовка листовки к печати.
Визуализации для компании, что занимается оформлением праздничных мероприятий, для наглядной демонстрации заказчикам, как примерно будет выглядеть выбранное оформление.
Дизайн листовки для выставки с короткой информацией о Directorix и её подготовка к печати.
Визуализация терминалов для предоставления эскизов заказчику будущего продукта с их логотипом и, при необходимости, брендированием киоска.
Открытка к новому году и отрисовка рисунка для печати на печенье.
HTML5 CSS3 SCSS jQuery PHP
Вёрстка Landing Page.
Итоговый результат: Monocular.
Так же была разработана светлая версия данного дизайна: Monocular WHITE.
- адаптивная и кроссбраузерная вёрстка;
- использование flexbox'ов;
- написание PHP-кода для записи логов;
- настройка интеграции по API.
Пример кода:
$filename = 'logs.txt';
$somecontent = "\n". date('Y-m-d H:i:s') ."\n"; // Добавляем дату и время
$somecontent .= $_POST['name']."\n".$_POST['phone']."\r\n"." \n"; // Записываем имя и телефон
// Проверяем наличие и доступность файла «logs.txt»
if (is_writable($filename)) {
// Открываем $filename в режиме «дописать в конец»:
// $somecontent добавится в конец файла с помощью fwrite().
if (!$handle = fopen($filename, 'a')) {
echo "Не могу открыть файл ($filename)";
exit;
}
// Записываем $somecontent в наш открытый файл.
if (fwrite($handle, $somecontent) === FALSE) {
echo "Не могу произвести запись в файл ($filename)";
exit;
}
echo "Ура! Записали ($somecontent) в файл ($filename)";
fclose($handle);
} else {
echo "Файл $filename недоступен для записи";
}
HTML5 CSS3 SCSS jQuery PHP
Вёрстка Landing Page с появлением основного контекта после прохождения опроса.
Итоговый результат: Barba Plus.
- адаптивная и кроссбраузерная вёрстка;
- использование flexbox'ов;
- написание скрипта, отслеживающего пройден ли опрос: если да, то вопросы скрываются и на их месте появляется «подобранный» товар, отзывы и форма обратной связи;
- написание PHP-кода для записи логов;
- настройка интеграции по API.
Пример кода:
session_start();
if (!isset($_SESION['order_id']) || !$_SESSION['order_id']) {
$_SESSION['order_id'] = 'ALTA-'.uniqid(time()); // UNIQUE(!) ORDER ID FROM YOUR SYSTEM. If you don't have a system, please use: 'order_id' => 'ALTA-'.uniqid(time())
}
$api_NAME = "noname"; if (isset($_REQUEST["name"])) { $api_NAME = $_REQUEST["name"]; }
$api_PHONE = "1234"; if (isset($_REQUEST["phone"])) { $api_PHONE = $_REQUEST["phone"]; }
$api_SUB = "test"; if (isset($_REQUEST["sub1"])) { $api_SUB = $_REQUEST["sub1"]; }
$api_CLICKID = ""; if (isset($_REQUEST["sub2"])) { $api_CLICKID = "clickid=".$_REQUEST["sub2"]; }
// set post fields
$post = array(
'api_key' => '******',
'order_id' => $_SESSION['order_id'],
'goods_id' => 634483,
'name' => $api_NAME,
'phone' => $api_PHONE,
'subid' => $api_SUB,
'tracking_params' => $api_CLICKID
);
$ch = curl_init('http://affninjasapi.com/legacy/ALTA/order/');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
// execute!
$response = curl_exec($ch);
// close the connection, release resources used
curl_close($ch);
HTML5 CSS3 LESS JavaScript jQuery Wordpress Blog Templates
Вёрстка шаблона для Wordpress.
Итоговый результат: Azexo. Strong.
После всех настроек — создание чистого, готового к использованию шаблона:
- написание стилей на LESS с учётом того, что пользователь сможет настраивать шаблон под себя, например, для того, чтобы пользователь мог менять цветовую схему — все брендовые цвета задавались одной переменной;
- корректировки в HTML, если того требовал дизайн, в данном случае менялся код меню и других мелкие блоков;
- настройка шаблона — установка кода на CMS, создание и настройка плагинов.
HTML5 CSS3 SCSS JavaScript jQuery
Вёрстка Landing Page для Directorix.
Итоговый результат: Цифровой указатель DIRECTORIX™.
Так же, на его основе был создан другой лэндинг: DIRECTORIX Retail.
- вёрстка с использованием препроцессора SCSS;
- использование в вёрстке слайдера, анимации и добавление кнопки с возможностью вернуться в самое начало;
- вёрстка под мобильные устройства;
- добавление страницы на существующий сайт в Bitrix.
Пример кода:
@mixin whiteHeader($color, $weight, $size, $align) {
font: {
size: $size;
weight: $weight;
}
color: $color;
text-align: $align;
text-transform: uppercase;
}
@mixin placeholder {
input::-webkit-input-placeholder {
color: $lightGray;
}
input::-moz-placeholder {
color: $lightGray;
}
input:-moz-placeholder {
color: $lightGray;
}
input:-ms-input-placeholder {
color: $lightGray;
}
}
HTML5 CSS3 LESS JavaScript jQuery
Вёрстка нескольких страниц для re-дизайна сайта.
Адаптивная и кроссбраузерная вёрстка с использованием препроцессора LESS и Flexbox'ов.
Итоговый результат: Услуги ремонта — «Вежливый сервис 5+».
Было свёрстано:
- главная страница;
- общая страница категорий;
- страница блога;
- внутренняя страница блога;
- страница «О компании».
Пример кода:
.imgback-block(@height: 166px, @border-radius: 5px 5px 0px 0px, @width: 100%) {
position: absolute;
left: 0px;
top: 0px;
width: @width;
height: @height;
background: rgba(38, 53, 71, 1);
border-radius: @border-radius;
padding: 25px;
z-index: 2;
box-sizing: border-box;
@media (max-width: 1040px) {
height: 120px;
}
img {
width: 100%;
height: 100%;
opacity: .3;
position: absolute;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
...
}
}
HTML5 CSS JavaScript jQuery Landing
Вёрстка дизайна лэндинга по ремонту компьютерной техники.
Итоговый результат: РЕМОКОМП.
- адаптивная и кроссбраузерная вёрстка;
- постепенное появление контента и анимация объектов, использование параллакса;
- форма обратной связи.
HTML5 CSS3 SCSS JavaScript jQuery Landing
Адаптивная и кроссбраузерная вёрстка с нуля, с использованием препроцессора SASS [ SCSS ], без применения сторонних фреймворков.
Итоговый результат: justaway.
- адаптивность;
- анимация и плавное появление контента;
- параллакс;
- испльзование flexbox'ов;
- модальные окна с галерей работ, описанием того, что в каждом проекте делалось и примерами кода свёрстанных сайтов для более полного представления работ.
Пример кода:
.experience__portfolio {
position: relative;
width: 100%;
height: 890px;
@include overlay(rgba($ide-back, .9));
@include background-jpg('portfolio_background_2');
@include background-rule($ide-back, no-repeat, 100% 0, auto);
background-attachment: fixed;
text-align: center;
padding: 50px 0 10px;
...
}
HTML HTML5 CSS CSS3 SСSS Landing
Доработка лэндинга, что был начат другим разработчиком.
Адаптивная и кроссбраузерная вёрстка главной страницы сайта по типу лэндинга с использованием препроцессора SASS [ SCSS ].
Итоговый результат: Avigo.
- адаптивность;
- анимация объектов и ховер эффекты;
- отрисовка и анимация svg-объектов;
- работа с чужим кодом.
Пример кода:
@mixin LoadFont($FontName: 'None', $FontPath: '') {
@font-face {
font-family: $FontName;
src: url('#{$FontPath}.eot');
src: url('#{$FontPath}.eot?#iefix') format('embedded-opentype'),
url('#{$FontPath}.woff2') format('woff2'),
url('#{$FontPath}.woff') format('woff'),
url('#{$FontPath}.ttf') format('truetype'),
url('#{$FontPath}.svg#svgFontName') format('svg');
}
}
@include LoadFont('GothamPro', '../fonts/gotham/GothamPro');
$brand-color: #339fd1;
HTML HTML5 CSS CSS3 SСSS Landing
Адаптивная вёрстка дизайна лэндинга с использованием препроцессорва SASS [ SCSS ].
Итоговый результат: PREMIUL.
- адаптивность;
- использование flexbox'ов и простой анимации;
- форма обратной связи.
Пример кода:
%verticalAlign {
top: 50%;
position: absolute;
transform: translateY(-50%);
}
@mixin background-gradient ($top-color, $bottom-color) {
background: $top-color; /* Old browsers */
background: -moz-linear-gradient(top, $top-color 20%, $bottom-color 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, $top-color 20%, $bottom-color 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, $top-color 20%, $bottom-color 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$top-color', endColorstr='$bottom-color',GradientType=0 ); /* IE6-9 */
}
@mixin border($width, $color) {
border: $width solid $color;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@mixin box-shadow($property-inset, $property) {
-webkit-box-shadow: $property-inset, $property;
-moz-box-shadow: $property-inset, $property;
-ms-box-shadow: $property-inset, $property;
-o-box-shadow: $property-inset, $property;
box-shadow: $property-inset, $property;
}
HTML CSS JavaScript
Конкурсная работа.
Итоговый результат: TOP RPG.
Re-дизайн c фиксированной вёрсткой каталога для форумных ролевых и онлайн игр:
- отображение случайных сайтов на главной странице;
- расширеное описание сайтов.
HTML CSS JavaScript jQuery Landing
Фиксированная вёрстка лэндинга по ремонту холодильников.
Итоговый результат: Frost Service.
- адаптивность;
- использование параллакса;
- форма обратной связи.