Eco Point — это современный и визуально чистый сайт, отражающий философию бренда: гармонию человека и природы.
Он сочетает эстетику минимализма, органические формы, мягкие цвета и удобный UX, чтобы передать атмосферу спокойствия и профессионализма.
Главная идея сайта — показать, что ландшафтный дизайн Eco Point — это не просто оформление участка, а создание живых экосистем, где каждая деталь продумана для устойчивости и красоты.
Я разработала сайт студии ландшафтного дизайна Eco Point полностью самостоятельно, начиная с проектирования макета в Figma и заканчивая реализацией вёрстки и функционала с помощью HTML, CSS и JavaScript. Основная цель заключалась в том, чтобы создать лёгкий, адаптивный и визуально чистый сайт, передающий природную эстетику бренда и отражающий философию экологичного подхода.
1. Макет и проектирование
Работу я начала с создания дизайн-макета в Figma. На этапе проектирования продумала сетку, визуальную иерархию и композицию страниц, чтобы сайт выглядел современно, гармонично и интуитивно понятным для пользователя.
В макете были проработаны все ключевые разделы:
главная страница с крупным визуальным баннером и CTA,
раздел «О компании» с блоками о миссии, ценностях и команде,
страница услуг,
портфолио реализованных проектов,
контакты с интерактивной картой.
Я использовала нейтральную природную цветовую палитру — оттенки зелёного, бежевого и светло-серого, чтобы передать спокойствие и экологичность. Шрифты выбрала современные и читаемые — один акцентный и один базовый sans-serif для основного текста.
2. Вёрстка сайта (HTML + CSS)
После утверждения макета я приступила к вёрстке, используя семантический HTML5, чтобы обеспечить хорошую структуру документа и SEO-дружелюбность.
Каждая страница логически разделена на блоки: <header>, <main>, <section>, <footer> с понятными названиями классов в стиле BEM.
Для оформления я использовала чистый CSS, без фреймворков, чтобы добиться максимального контроля над внешним видом и весом страницы.
Были реализованы:
адаптивная вёрстка под все устройства (desktop, tablet, mobile);
flexbox и grid для построения сеток;
анимации и плавные переходы для оживления интерфейса (hover-эффекты, плавное появление блоков при прокрутке);
переменные CSS для цветовой палитры и типографики (чтобы легко менять тему);
модульная структура файлов — отдельные стили для каждого раздела и компонента.
В результате получился полностью адаптивный, лёгкий и эстетичный сайт, выполненный с нуля на чистых HTML, CSS и JavaScript, без тяжёлых фреймворков.
Он корректно отображается на всех устройствах, быстро загружается, и отражает философию бренда Eco Point — природную гармонию, чистоту и устойчивый подход в каждой детали.
Пожаловаться
