Привет! Меня зовут Ива Кочнева. Разбираю общее на детали и собираю из деталей общее.
Занимаюсь созданием сайтов и красивых email писем, занимаюсь UI и UX дизайном, вышиваю руками.
Учу болгарский язык. Люблю народные сказки, кошек и делать полезное.
Я делаю красивую адаптивную кроссбраузерную семантическую вёрстку сайтов и е-мейл писем, а также работаю с доступностью сайтов.
Что это такое и зачем оно нужно?
- Адаптивность
- Свойство вёрстки, при которой готовая страница адаптируется под устройство, на котором её открыли, и её дизайн изменяется в зависимости от этого. Раньше сайтами пользовались только с настольных компьютеров, но с середины нулевых годов XXI века начала расти доля пользователей, которые заходят в Интернет с мобильных устройств. Наверняка и вы сами не раз пользовались интернет-сервисами с телефона. Вы могли заметить, что некоторыми сайтами с телефона очень удобно пользоваться, а другие выглядят странно, криво и неудобно. Так происходит потому, что создатель сайта не позаботился о мобильной адаптации, и браузер пытается адаптировать сайт так, как он умеет. Доля пользователей с мобильными устройствами в том числе зависит от страны и тематики сайта. Она постоянно растёт и кое-где уже достигла 80% от общего числа пользователей. Этот параметр также важен для SEO: сайты, которые хорошо работают на мобильных, в выдаче поисковой системы будет выше неадаптированных сайтов.
- Семантичность
- Это очень важный параметр, влияющий на продвижение сайта в поисковых системах (SEO). Поисковые роботы не знают, как сайт выглядит для человека, да им это и не нужно: они опираются на его разметку, разбирают её, следуя определённым правилам. Меню должно быть размечено как меню, а заголовки — как заголовки, причём у каждого из них должен быть свой уровень в зависимости от того, к какому тексту они относятся. Также семантичность и качество вёрстки очень важны для пользователей с ограничениями зрения, которые пользуются скринридерами (специальными программами, которые озвучивают голосом всё, что находится на сайте).
- Доступность
- Позволяет удобно пользоваться вашим сайтом самым разным людям: с ограничениями по зрению, движениям, да и просто с медленным интернетом. Именно практика доступности делает номер телефона на сайте кликабельным, чтоб пользователь мог связаться с вами, просто нажав на номер телефона (даже если он пользуется сайтом не с телефона, а с настольного компьютера или планшета). А не выделять его, копировать, переходить в другое приложение, вставлять и только после этого звонить. Также из-за тематики сайта к нему могут предъявляться отдельные требования законодательства по доступности. Я знаю, как выполнить эти требования, не увеличивая трудозатраты.
- Кроссбраузерность
- Необходима для того, чтоб сайт на разных устройствах выглядел более-менее одинаково и одинаково работал. Это не всегда возможно из-за того, что браузеры (программы, с помощью которых вы ходите в Интернет) не всегда одновременно и одинаково обрабатывают один и тот же код. Современные браузеры постоянно добавляют поддержку новых свойств, не всегда одновременно и одинаково. При этом старые версии браузеров на старых операционных системах не могут поддерживать новые свойства. Для того, чтоб сайт для пользователей выглядел более-менее одинаково, всё это необходимо это учитывать.
Перед тем, как приступить к работе, я созваниваюсь с заказчиком и выясняю у него все пожелания. Фиксирую их в письменном виде, утверждаю у заказчика и после этого начинаю работать. После каждого этапа работы в письменном виде отчитываюсь заказчику о проделанной работе, узнаю, всё ли верно. При необходимости вношу правки, добавляю изменения. И так на каждом этапе, чтоб заказчик точно получил то, что хочет.
Для вас я могу сделать:
- сайт;
- По готовому макету или по разработанному мною для вас. Если дизайнер не придумал, как сайт будет адаптироваться к экранам разных размеров, я могу сделать это за него.
- Лендинг или многостраничный сайт, без ограничений.
В формате, который будет удобен вам
- Классический набор HTML + CSS + JS файлов
- Можно выложить на сайт по ftp. Плюсы: сайт уже готов и будет открываться у пользователя настолько быстро, насколько это позволяет хостинг.
- Сборка на основе WebPack
- Современный вариант, который можно запустить как на локальном компьютере, так и на подготовленном сервисе при условии установки дополнительных программ. Также этот вариант можно использовать для экономии на хостинге: я выложу его на своём GitHub-аккаунте и настрою, чтоб этот проект открывался на вашем домене. В этом случае все правки на сайте нужно будет делать через меня.
- Разработка дизайна и “натягивание” его на CMS
- Это может быть WordPress, Joomla, Bitrix или другая CMS, которой вы пользуетесь, включая самописные. Если у вас её нет, но очень хочется, я могу помочь с выбором технического решения и настроить его для вас.
- На no-code платформе
- Вы сможете самостоятельно вносить правки на своём сайте, а чтоб это было проще сделать, я составлю подробную инструкцию, сделанную именно для вашего сайта.
- Я предлагаю использовать платформу WebFlow, но если вы хотите использовать другой сервис, могу сделать и на нём.
- красивый шаблон e-mail письма;
- Будет хорошо выглядеть на любом устройстве от телефона до широкоэкранного монитора вне зависимости от того, включена у пользователя загрузка картинок или нет (почтовые сервисы очень любят по умолчанию не загружать картинки в письмах). Двух- или трёхколоночное письмо на маленьких экранах будет становиться одноколоночным. Не каждый сервис с шаблонами писем может предложить такую возможность.
- Могу подготовить шаблон для использования
- в вашей системе генерации писем (со служебной разметкой для использования условий, циклов);
- в сервисе для рассылки писем (ручное добавление разделов с текстовыми пояснениями, куда что добавлять).
- нарисовать в Figma дизайн сайта;
- С 3-5 вариантами адаптации к различным экранам и грамотной вёрсткой, чтоб с макетом было удобно работать другим людям.
Портфолио
- 2023 — Макет для Ковчега
Задача
Редизайн сайта Ковчега
Этапы работы
- Перед началом работы узнала пожелания заказчика и после опиралась на исходный набор цветов и шрифт, немного изменив их.
- Цвет шрифта изменила на тёмно-синий, чтоб достигнуть большей контрастности и лучшей читаемости. Дополнительные цвета подобрала с использованием цветового круга.
- Подобрала похожий шрифт, т.к. исходный не поддерживает кириллицу и в этом случае сбрасывается до дефолтного в системе sans-serif шрифта.
- С помощью AI-инструмента подобрала шрифтовую пару для заголовков.
- Для акцента на заголовке первой страницы подобрала иллюстрацию, отсылающую к причине возникновения проекта Ковчег.
- Разработала множество компонентов с различными состояниями, на основе которых программисты Ковчега смогут собирать второстепенные страницы.
- 2023 — likekintsugi.com
Задача
Внести правки на сайт, привести его в порядок.
Этапы работы
- При аудите сайта на платформе Wix.com обнаружила, что отсупы на сайте разной ширины, не соблюдается дизайнерская сетка. Заказчица сказала, что рассматривала также возможность ведения сайта на платформе WordPress, но у неё нет возможности следить за его обновлениями и безопасностью, поэтому я предложила перенести сайт на платформу WebFlow.
- При переносе сайта добавила мобильную адаптацию для трёх экранов.
- Для называния классов CSS использовала методологию БЭМ.
- Внесла несколько правок по желанию заказчицы и реализовала семантическую вёрстку.
- 2023 — iva-kochneva.eu
Задача
Cделать сайт-портфолио.
Этапы работы
- Отрисовала в Figma лаконичный дизайн, который потом будет удобно украшать и расширять.
- Выбрала платформу GitHub Pages из-за
- удобства работы;
- демонстрации навыков;
- экономии на хостинге.
- Сделала сайт на связке HTML+SaSS+webpack с использованием БЭМ-метолодогии.
- Самостоятельно настроила сборку webpack с оптимизацией графики.
- Выложила проект на GitHub.
- Семантическая вёрстка: в том числе использование тега details для пояснений.
Планируемые обновления
- Английская и болгарская локализации
- Страница о вышивке
- 2022 — framedinbelarus.net
Волонтёрство на социальном арт-проекте для поддержки политических заключённых в Беларуси
Задача
Сделать вёрстку публичной части сайта и внутреннего конструктора, который автоматизирует логику добавления новой вышивки в базу, в компании с двумя программистами и дизайнером.
Язык коммуникаций в команде: английский + русский.
Этапы работы
- Отрисовала в Figma экраны мобильной адаптации главной страницы сайта, согласовала их с дизайнером и сверстала на голом HTML+CSS. Бургер-меню для мобильных реализовала с помощью checkbox.
- Сверстала сайт, используя mobile-first подход, что сэкономило в дальнейшем время на адаптацию сайта к мобильным.
- Программист предложил делать сайт на Vue.js + nuxt с использованием SaSS, создал сборку на webpack и передал её мне.
- Проверила перенос готовой вёрстки, внесла правки.
- Поэтапно сверстала остальные публичные страницы и страницы внутреннего конструктора, оставляя комментарии к коду на JavaScript.
После этого выяснилось, что логику работы сайта и конструктора нужно изменить, сейчас идут работы над этим.
- 2022 — www.vyzyvanka.com
Задача
Реорганизовать и оптимизировать сайт на no-code платформе Webflow, добавить информацию на страницу о выставках
Этапы работы
- На главной сайта было очень много графики, которая тормозила загрузку сайта, поэтому я перенесла её на отдельные страницы по разделам.
- Реорганизовала меню, сделав его универсальным для всех страниц.
- Сделала страницу Галерея, чтоб в дальнейшем было проще изменить контент главной страницы.
- Навела порядок на странице Выставки, облегчив будущую работу под добавлению информации, и добавила новые выставки в список.
- 2008-2022 — работа в компании Доктор Веб
- Адаптировала десктоп макеты для планшета и смартфона.
- Сверстала более 60 промо-сайтов и просветительских проектов по макетам Figma и Photoshop различной сложности (доступные работы: 1, 2).
- Разработала шаблоны для мультиязычного сайта на самописной админке.
- Добавляла текстовую и графическую информацию на мультиязычный сайт.
- Работала с доступностью сайта (например, добилась, что на всех страницах сайта номер телефона указан в кликабельном формате).
- Сверстала более 20 шаблонов для регулярных и промо е-мейл рассылок, включая «резиновые».
- Организовала разработку сервисов рассылки еженедельных дайджестов в 2015 и 2021 году.
- Написала более 30 инструкций по внутренним проектам на русском и английском языках.
Сколько стоит
- Сайт на Webflow
- Без иллюстраций и цветов, с вашими текстами
- Срок работы: от 1 рабочего дня
- Стоимость: 180лв
В комплект входит:
- мобильная адаптация, чтоб на разных устройствах выглядело и работало плюс-минус одинаково;
- подбор цветов;
- подбор шрифтов, чтоб везде работало и читалось;
- семантическая вёрстка, чтоб пользователям с особыми потребностями было возможно пользоваться, и поисковые роботы не заблудились;
- бесплатное доменное имя вида https://название сайта-случайный набор знаков.webflow.io/
- Цветной сайт с вашими текстами и иллюстрациями
- Срок работы: от 2 рабочих дней
- Стоимость: 250лв
В комплект входит:
- мобильная адаптация, чтоб на разных устройствах выглядело и работало плюс-минус одинаково;
- подбор цветов;
- подбор шрифтов, чтоб везде работало и читалось;
- семантическая вёрстка, чтоб пользователям с особыми потребностями было возможно пользоваться, и поисковые роботы не заблудились;
- бесплатное доменное имя вида https://название сайта-8425bc.webflow.io/
- Дополнительные услуги за дополнительные деньги
- с анимацией элементов в бесплатном тарифе Webflow — 20лв (может заметно увеличить время отклика анимированных элементов на странице)
- с анимацией на платном тарифе Webflow 280лв — 30лв (этот тариф вам понадобится ещё и чтоб сайт выводился по самостоятельному доменному имени)
- создание шаблонов для упрощения создания новых страниц на сайте — 30лв (шапка, подвал, что должно быть посередине)
- подробные инструкции по тому, как делать новые страницы с использованием шаблонов — 50лв;
- подбор/генерация или отрисовка иллюстраций — зависит от объёма работы;
- написание или корректировка текста — зависит от объёма работы;
- настройка вывода сайта на отдельном доменном имени — 20лв.
Со мной можно связаться
- iva.kochneva@outlook.com
- @ivaLynx
- +359 87 723 9840