WEBSITE | Сайт для студии иностранных языков LETMESPEAK

13 декабря 2024

Christina Nadina

Полиграфия

Связаться

WEBSITE | Сайт для студии иностранных языков LETMESPEAK — Изображение №1 — Интерфейсы, Графика на Dprofile

Telegram: @christinadina

Instagram: @harmony__designer

Задача | Task

Задача: разработать дизайн многостаночного сайта для студии иностранных языков.

Сайт должен предоставить потенциальным клиентам исчерпывающую информацию о студии и ее деятельности на одной площадке и в структурированном виде. Он должен осветить весь спектр предоставляемых услуг (занятия иностранными языками в студии Коломны и онлайн, курсы наших друзей и коллег, мероприятия, сувенирная продукция).

Требования к сайту: сохранить узнаваемость за счёт фирменных цветов и узора полька-дот. Сайт должен вызывать чувства радости, доверия, комфорта. Минималистичный стиль, простота и понятность в использовании, чтобы путь от знакомства до взаимодействия с нами был кратчайшим.

[ENG]

Task: to create a multi-page website for a foreign languages studio.

The site should provide potential customers with comprehensive information about studio and its activities on the same site and in a structured way. It should cover the entire range of services provided (offline and online lessons, courses of our friends and colleagues, events, souvenirs).

Requirements for web-site: to maintain brand awareness due to corporate colors and polka dot pattern. The site should evoke feelings of joy, trust, and comfort. Minimalistic style, simplicity and clarity of use, so that the path from acquaintance to interaction with us was the shortest.

WEBSITE | Сайт для студии иностранных языков LETMESPEAK — Изображение №2 — Интерфейсы, Графика на Dprofile

Результат | Result

Сайт состоит из трех страниц: основная страница школы, страница сувенирной продукции и страница онлайн-курсов, курсов партнеров и событий школы (как онлайн, так и офлайн).

На основной странице структуированно размещена общая информация о самой студии, о ее преимуществах, форматах обучения, стоимости, команде, отзывах, часто задаваемых вопросах, возможность записаться на пробный урок или бесплатную консультацию через формы записи и контакты. Информация расположена так, чтобы постепенно закрывать вопросы потенциальных клиентов, а уже тем, кто занимается, т.е. ученикам и их родителям, удобно отыскать всю информацию.

Страница сувенирной продукции состоит из каталога товаров, а также информации как можно купить, оплатить, получить товар (доставка) и как возвратить товар. В будущем планируется подключить платежные системы.

Онлайн-курсы школы и партнеров, а также события школы (так как они проходят и в онлайн формате и в оффлайн) было решено объединить в отдельную страницу, потому что основная деятельность школы - это оффлайн-занятия, а только потом уже дополнительные курсы, курсы партнеров и т.д.

[ENG]

The website consists of three pages: the main page of the school, the page of souvenirs and the page of online courses, partner courses and school events (both online and offline).

The main page of the studio contains structured general information about the studio itself, its advantages, formats of lessons, prices, team of teachers, feedback, FAQ, the opportunity to sign up for a trial lesson or a free consultation through the registration forms and contacts. The information is arranged in such a way as to gradually close the questions of potential customers, and it is convenient for students and their parents to find all the information.

The souvenir products page consists of a product catalog, as well as information on how to buy, pay, receive the goods (delivery) and how to return the goods. It is planned to connect payment systems in the future.

Online courses of the school and partners, as well as school events (since they take place both online and offline), it was decided to combine them into a separate page, because the main activity of the school is offline classes, and only then additional courses, partner courses, etc.

СТРУКТУРА САЙТА

WEBSITE | Сайт для студии иностранных языков LETMESPEAK — Изображение №3 — Интерфейсы, Графика на Dprofile

ПРОТОТИП САЙТА

WEBSITE | Сайт для студии иностранных языков LETMESPEAK — Изображение №4 — Интерфейсы, Графика на Dprofile

Дизайн | Design

Для визуального оформления были использованы фирменные цвета, фирменный заглавный шрифт, паттерн полька-дот в фирменных цветах, а также иллюстрации и их элементы. Иллюстрации подготовлены Sonya Tornikova (https://www.behance.net/antoningolubch).

Клиент пожелал фото на сайте сделать черно-белыми, но чтобы не выглядело мрачно и траурно, я обвела элементы фото как будто карандашом в фирменном желтом цвете.

Чтобы сохранить минималистичность сайта, иллюстрации и цветные элементы не перегружают дизайн и находятся в балансе с текстовыми блоками.

[ENG]

Corporate colors, corporate capital font, polka dot pattern in corporate colors, as well as illustrations and their elements were used for visual design. Illustrations created by Sonya Bernikova (https://www.behance.net/antoningolubch).

The client wanted the black and white photos, but in order not to look gloomy and mourning, I circled the elements of the photo as if with a pencil in the company's yellow color.

To keep the site minimalistic, illustrations and color elements do not overload the design and are in balance with text blocks.

Вёрстка на Тильде | Layout on Tilda

Вёрстка сайта осуществлялась на Тильде. Весь сайт был адаптирован под большой экран монитора, экран ноутбука, планшетная версия (горизонтальная и вертикальная) и мобильная версия (горизонтальная и вертикальная).

Так как отзывы были объемные, c помощью модификаций через html-код настроила возможность его полного просмотра по ползунку, а все отзывы по скроллу по стрелке.

Также была настроена анимация элементов сайта, проведена базовая SEO-оптимизация, подключения Яндекс-метрика. Настроена корзина, CMR c форм записей, также настроена возможность дублирования заявок на адрес электронной почты. Также подобрала клиенту домен и проконсультировала о порядке его приобретения.

[ENG]

The layout of the site was carried out on a Tilda. The entire site has been adapted to a large monitor screen, laptop screen, tablet version (horizontal and vertical) and mobile version (horizontal and vertical).

The reviews were voluminous, with the help of modifications through the html code, I set up the possibility of its full viewing by the slider, and all reviews by scrolling by the arrow.

Animation of the site elements was also set up, basic SEO optimization was carried out, and Yandex.Metrica was connected. The shopping cart, CMR with record forms are configured, and the possibility of duplicating applications to an email address is also configured. I also picked up a domain for the client and advised on the procedure for its purchase.

ДЕСКТОПНАЯ И МОБИЛЬНАЯ ВЕРСИЯ