АСѾԐД Создание и продвижение сайтов

Портфолио

Покажу в неточном обратном порядке ключевые точки и интересные проекты (не все). Некоторые сайты показаны для понимания, что возможно сделать и как это может быть. Часть сделанных сайтов уже не работает: из-за времени; пришедшей эры смартфонов; продажников дозванивающихся до директоров и объясняющих "как всё плохо", мол надо срочно переделать; закрытия тех или иных отраслей; клоунов по ящику развивающих экономику (экономию на нас); ещё часть утеряна или по техническим причинам не возможно быстро развернуть в рабочее состояние из архива (сайты до 2010г). За кадром останутся десятки сайтов сделанных на шаблонах и не представляющих никакого интереса. Последнее десятилетие постоянно занят большими проектами, на которые уходит от одного и более лет, плюс поддержка, плюс программирование движка для сайтов отнимает многие месяцы, посему сайтов не так много, опыт очень полезен.

Если стоит вопрос о создании дизайна сайта, лучше обратить внимание на решения вроде Figma, большая часть дизайнеров создают (рисуют) макеты именно в Figma(Фигма). Photoshop(Фотошоп) отходит в прошлое, Figma способен экспортировать части графики в векторный формат, от сюда следуют радости векторных изображений с их повышенной чёткостью на любых разрешениях и мониторах/экранах устройств.

MODUMTRANS

Сайт при разрешении экрана 375px (смартфоны) Сайт при разрешении экрана 768px (планшеты) Сайт при разрешении экрана 1024px (ноутбуки и компьютеры) Сайт при разрешении экрана 1280px Сайт при разрешении экрана 1440px Меню перестраивается и белеет при прокрутке страницы Выезжающее мобильное меню на малых разрешениях

Собрал английскую версию сайта компании занимающейся грузоперевозками. Представляет из себя Лендинг, дизайн создан в Figma. Подобные сайты можно делать без движка сайта (CMS) при помощи статических файлов HTML+CSS+JS и PHP скриптом для отправки почты, но в даном случае блоки дизайна поделены на разделы, которые можно редактировать в Панели Управления сайтом (CMS).
Основная и главная задача при создании Лендинга - правильно реализовать программную часть такого сайта, только в этом случае поисковики его воспринимают как условно многостраничный сайт в одном. Как итог, такой сайт получит поощрение и будет занимать верхние строчки поисковой выдачи среди конкурентов.
В целях оптимизации запросов, значки сайта и некоторые картинки (поезда итп.) уложены в отдельный svg.css в двоичной форме base64 (это решение прибавляет вес, но экономит запросы к серверу, как следствие увеличивается скорость загрузки: 1 запрос на 2 Мб выгодней 24-х запросов на 1.5 Мб).
Макеты дизайна нарисованы не все, но сайт перестраивается на промежуточных размерах и свёрстан под расширения экранов (размеры адаптивной вёрстки): 375px (смартфоны), 768px (планшеты), 1024px (от 1000px - 24px точно скроет горизонтальную полосу прокрутки страницы на ноутбуках и компьютерах), 1280px (от 1170px для отступов по бокам), 1536px (от 1441px).

HANDRACE

Главная страница при разрешении экрана 320px (смартфоны) Сайт при разрешении экрана 1024px (ноутбуки и компьютеры) Сайт при разрешении экрана 1920px Купить игру Список трасс Корзина Выезжающее мобильное меню на малых разрешениях Выезжающее меню на больших разрешениях Список товаров в панели управления сайтом Список заказов в панели управления сайтом

Мультиязычный и мультивалютный интернет магазин продающий настольную игру и карты к ней, семейная тематика направленна на развлечение детей и взрослых в отрыве от гаджетов. Изготовление сайта заняло около 13-ти месяцев, поскольку каждая страница сайта представляет из себя отдельный оригинальный дизайн (было нарисовано и свёрстано около 50-ти+ макетов). В процессе были изменения страниц, разные необычные особенности в работе магазина, в том числе наложились заморочки с изменением API Яндекс Кассы (сейчас ЮKassa) - пришлось переписывать код взаимодействия, приведшие к затягиванию изготовления. Искренне надеюсь, что данный сайт будет долгое время приносить пользу, труда вложено очень много.
Из интересного: магазин обслуживает как не зарегестрированных так и зарегистрированных пользователей, во втором случае так же есть система Trade In, курьер забирает на переработку бумажную продукцию. Онлайн оплата через ЮKassa. В целях оптимизации графики растровые иконки и прочие элементы уложены в 1 картинку - спрайт из которого берутся участки под определённые элементы. Часть иконок в векторном .svg. Макеты дизайна нарисованы не все, но сайт перестраивается на промежуточных размерах и свёрстан под расширения экранов (размеры адаптивной вёрстки): 320px, (промежуточное частичное перестроение 375px, 480px, 630px), 768px, 1024px (от 1000px), 1366x (от 1342px для отступов по бокам), (частично 1920px).

BRIGADA1

Сайт при разрешении экрана 320px (смартфоны) Сайт при разрешении экрана 768px (планшеты) Сайт при разрешении экрана 1024px (ноутбуки и компьютеры) Сайт при разрешении экрана 1280px

Сайт бригады занимающейся строительством домов и ремонтными работами.
Показан для примера того, как может выглядеть дизайн, если его рисует программист. Ребята хорошие, приглядитесь, нормальных ремонтников/строителей трудно найти в наше время.
Сайт свёрстан под расширения экранов (размеры адаптивной вёрстки): 320px, 768px (от 640px), 1024px (от 960px), 1280px.

ULTRACUBE

Каталог товаров при разрешении экрана 320px (смартфоны) Каталог товаров при экрана 768px (планшеты) Каталог товаров при разрешении экрана 1024px (ноутбуки и компьютеры) Каталог товаров при разрешении экрана 1536px Страница товара Корзина Полоса с поиском и выпадающим меню Выпадающие меню Список товаров в панели управления сайтом Список заказов в панели управления сайтом

Интернет магазин электроники. Идея создать большой магазин витала в воздухе давно, в тот момент времени обслуживал другой сделанный мной интернет магазин той же тематики, и вот сложились условия, на него ушло около 3-х лет параллельно с другой занятостью. Был сделан обмен заказами и выставления счетов с 1С Управление торговлей. Выгрузка для Яндекс.Маркета. Автоматическая система импорта каталогов с оптов, последующая генерация меню и обновление внутреннего каталога (десятки тысяч позиций). Постарался чтоб это всё происходило максимально быстро и незаметно для пользователей. Система бэкапирования базы данных. Умный поиск сохраняющий результаты и занимающийся морфологическим анализом, преобразующий написанное на английском на русский и наоборот в случае ошибки поиска. Был получен очень ценный опыт, по сути тема Web программирования на большие нагрузки и объёмы данных была закрыта, очень доволен что его сделал.
Один из оптов был Мерлион, который затем закрыл возможность брать xml каталог, начал настаивать на полном использовании их API для работы с заказами и резервированием в онлайн режиме (что нам не подходило из-за взаимодействия с несколькими оптами - возможности сэкономить купив что-то в другом месте), без этого условия ограничил доступ к описанию и картинкам продукции. А потом они пошли ещё дальше - ограничив порог минимальной суммы для оптовиком на 1 заказ. Прямо ряд глупых решений, следом на рынок пришли крупные международные игроки типа Озона и мы увидели "падение" местных сетей типа Юльмарта, уверен что и опты это стороной не обошло.
Выполнил всё обещанное и дополнительные пожелания, пошли продажи, но человек (под дело которого создавался магазин) решил не исполнять договорённости по оплате труда, само собой вселенная такого не прощает, включились механизмы, и бизнес схлопнулся в короткий срок.
По дизайну и оптимизации запросов, как это часто делаю, уложил мелкие иконки дизйна в спрайт. При прокрутке страницы появляется полоса с поиском и выпадающим меню. Сайт перестраивается на промежуточных размерах и свёрстан под расширения экранов (размеры адаптивной вёрстки): 320px, 768px, 1024px (от 980px), 1536x (от 1456px).

YLLI

Каталог товаров при разрешении экрана 320px (смартфоны) Подбор по параметрам в свёрнутом виде Каталог товаров при разрешении экрана 1024px (ноутбуки и компьютеры) Каталог товаров при разрешении экрана 1536px Форма входа на сайт Корзина Выпадающие меню Товарная накладная (чек)

Интернет магазин шин, дисков и электроники. В этом проекте продолжил развитие предыдущего магазина, если тот был сделан из соображений взаимодействия только с юр. лицами, то здесь уже со всеми. В связи с этим, добавил возможность входа в систему через соц. сети. Возможность покупать незарегистрированным пользователям, регистрацию внутри корзины. Подбор по параметрам стал так же доступен и на смартфонах (по умолчанию свёрнут). Сделал генерацию накладной для распечатки (товарный чек). С точки зрения дизайна и того как построены страницы - сайт точно такой же. Отличается только основным цветом, вместо синего - зелёный. Как и в предыдущем магазине 3 цены: розница, скидочная после заказа на сумму, и для магазинов, плюс система начисления бонусов.
Оставалось ощущение незаконченности, связался с одним из владельцев сделанный мной интернет магазинов, первоначально всё пошло хорошо, потратил несколько месяцев, сделал несколько автоматических импортов с оптов шин и дисков, ещё кучу просили, но вовремя остановился (спас ещё несколько месяцев жизни, ведь делал даром в расчёте на будущие прибыли), и в финальной точке человек оказался не готов! Нашёл какие-то отговорки, вместо того чтоб войти в новую жизнь и возможности. Печаль конечно, но как всегда - новый опыт мой.
Сайт перестраивается на промежуточных размерах и свёрстан под расширения экранов (размеры адаптивной вёрстки): 320px, 768px, 1024px (от 980px), 1536x (от 1456px).