Новый дизайн CimpleO — теперь ещё удобнее, быстрее и красивее

  • #Web
Share
7.12.2020

0

Цели

Во-первых, нас смущало то, что сайт в полной мере не отражал факт того, что мы не просто веб-студия, но ещё и разработчики интегрируемых IoT-решений, полноценных веб-сервисов и мобильных приложений.

Во-вторых, у сайта не было нормальной сетки, в связи с чем сайт выглядел недостаточно сбалансированным и, как следствие, комфортным для восприятия.

В-третьих, сайт не соответствовал нашему визуальному стилю. В соцсетях и на сайте были разные цветовые палитры. Было принято решение разработать дизайн нового сайта с нуля.

UX дизайн

Здесь стоит отметить три основных изменения.

  1. Мы доработали навигацию. Теперь при нажатии на каждый из блоков услуг, пользователя перенаправляет на раздел с подробной информацией о ней.
  2. Проработали структуры блоков на странице. Мы повысили их сочетаемость, используя общую сетку для всего сайта.
  3. Рассказали больше о компании. В частности, добавили больше информации о том, чем мы занимаемся, какие услуги предоставляем и с какими инструментами работаем.

1 2 3

UI дизайн

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

Цвета

Цветовая палитра стала проще и контрастнее. Чёрный контрастирует с белым, ровно как и желтый с фиолетовым.

Такое цветовое решение было вызвано желанием донести наш профессиональный настрой и серьезный подход к работе. Но также важно было донести отсутствие излишней строгости и чопорности. В итоге, дизайн призван отражать надёжность и гибкость в работе, интеллект и дружелюбное отношение, как к клиентам и партнёрам, так и к сотрудникам компании.

Шрифты

Для заголовков был выбран жирный рубленый шрифт “Russo One”. К нему в пару подобран лёгкий и читабельный “Nunito”.

4

Графика

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

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

5 6

Front-end разработка

Мы решили использовать Glide-карусель для наших слайдеров. Также было решено полностью отказаться от библиотеки jQuery, что позволило нам оптимизировать работу сайта. Сам сайт написан на нативном JavaScript и дополнен с помощью TypeScript. Вся статистика и HTML генерируется при помощи Hugo + Webpack. Собирается сайт средствами GitlabCI и полностью кэшируется в CDN. Всё это обеспечило прекрасную оптимизацию и быстродействие сайта.

7 8 9 10 11

Заключение

Сайт уже готов и прошел все необходимые тесты. Теперь он стал ещё красивее, быстрее и удобнее. Мы исправили недоработки предыдущей версии, выполнив все поставленные перед нами задачи. Отныне наш сайт соответствует визуальному стилю компании, читается значительно легче и в полной мере отражает весь спектр наших услуг. Заходите в гости!