Корпоративный сайт Судоходной компании Silverburngroup

Здравствуйте, дорогие наши зрители канала Афонико, может быть будущие клиенты! Спасибо Вам за то, что смотрите канал!

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

Мы можем посмотреть реализацию этого сайта, опять мы смотрим на 27 дюймах, на большом экране, это очень интересный момент, дело в том, что у руководящего состава, который иногда принимает решение работать с кем-то или не работать, который может точно так же просто зайти на сайт вашей компании, он это будет делать скорее всего с большого экрана, со своего стационарного компьютера. А у директоров, у них как правило большие мониторы. Либо же когда вам нужно презентовать, в данном случае, можно, запустить видеоролик, можно показать презентацию, опять же ее растянет на весь экран, но можно показать также сайт на любом мониторе, на любом телевизоре, или на проекторе и он будет корректно отображаться с большим разрешением этого экрана.

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

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

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

Параллельно с роликом, был создан этот сайт и он был запущен как раз к выставке. Проект завершён успешно, клиент всем доволен. Если вам необходим подобный сайт для вашего бизнеса грузоперевозок, просто оказания каких-либо услуг, завода, где нужно правильно, качественно, презентовать вашу компанию, то Вы можете обратиться в Афонику, мы с удовольствием поможем вам это сделать, это реализовать. Вы можете посмотреть другие наши проекты в сфере логистических решений или в сфере другого бизнеса, где мы делаем сайты для компаний которые оказывают какие-либо услуги, абсолютно разного масштаба, влияния, то есть, это услуги могут быть от простой, какой-то небольшой услуги — починить телевизор или кофемашину, до услуги обеспечения безопасности на атомных объектах проекта ВО “Безопасность”. Либо же это, перевозки, где крупные грузоперевозки, уникальные перевозки. Когда это сложная услуга, которую нужно очень качественно и эффектно презентовать. Мы с этим успешно справляемся! Спасибо.

Судоходная компания по транспортировке негабаритных грузов MORWENNA

Сегодня мы рассмотрим один из наших проектов — сайт судоходной компании Морвена. На сайте присутствует анимация, когда мы скролим, наш кораблик плывет, вращается компас. Этот сайт качественно отображается на 27 дюймовом экране.

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

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

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

Есть вывод последних новостей компании. Форма заявки — форма обратной связи, и корпоративный footer.

Особенности данного сайта, его сложности в том, что он и на русском, и на английском. Здесь есть две языковых версии. Еще есть нюанс, это очень большая форма регистрации соискателя, причем это не классическая форма с 3-5 полями, в этой анкете более 40 полей с возможностью выбора,  и еще одна сложность — это флот. Корабли находящиеся здесь, их отображение, можно увидеть краткое отображение, можно увидеть расширенное отображение всех параметров по кораблю, можно сгенерировать pdf. И еще этот сайт, он связан с другими сайтами этой компании и когда мы корректируем корабли здесь, корабли корректируется на остальных сайтах.

Также у этого сайта есть мобильная версия, можно зайти с телефона и точно так же все качественно и красиво отображается.

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

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

Вся печатная продукция — каталог, брошюры, сайт участвовали в тематической транспортной выставке..

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

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

Спасибо за Ваше внимание, обращайтесь если вам нужно разработать подобный, интересный, красивый сайт для вашего бизнеса. Спасибо!

Сайт центра защиты прав и интересов детей, ФРЦ ОВЗ, ФРЦ опеки и попечительства

Здравствуйте, сегодня я расскажу вам  ни об одном кейсе, ни об одном проекте, а сразу о трех. Мы создавали сайт ФРЦ ПМПК, они меняли название, были ФЦ, потом стали ФРЦ, им понравилось как мы реализовали данный проект, и захотели, чтобы мы продолжили работу, сотрудничество. Стояла потребность в создании еще двух сайтов — центров которые стилистически должны были отличаться, но функционально были бы похожи, то есть у них должен был быть схожий функционал, там точно также должны быть навигатор центров, точно также должны быть документы, точно также вопрос-ответ. Единственно там, например уменьшен функционал, нет регистрации, и для этих новых сайтов необходимо было разработать новые логотипы. Некоторые логотипы разработаны были нами, некоторые у них уже имелись.

Один из сайтов это ФРЦ ОВЗ, как вы видите, он очень сильно похож на ФРЦ ПМПК, единственное в нем нет регистрации, в нем изменено меню, иная структура, изменена структура документов. В нем также есть навигатор центров, только здесь уже соответственно свои центры,  здесь есть календарь событий, также есть вопрос-ответ, о нас, и контакты, то есть все то же самое. Еще одно отличие, он подогнан под логотип — это значит, что цветовое решение использовано именно под цвета логотипа, все цвета иконочек, тона.

По такому же принципу был сделан сайт ФРЦ опеки и попечительства, у него точно такой же схожий функционал с точки зрения бизнес-процессов, с точки зрения структуры. Есть такой же навигатор компаний, тоже есть вопрос- ответ, о нас, контакты. И здесь тоже нет регистрации. Как мы видим данный сайт, также подогнан под стилистическое дизайнерское решение логотипа который был утвержден клиентом.

И есть ещё третий проект. В основе лежит вот тот же сайт ФРЦ  ПМПК, но он более видоизменен. Это сайт Центра защиты прав и интересов детей. Как мы видим здесь, из того что сохранилось, это по сути только структура и ширина. Переработана шапка сайта, здесь иначе выглядит меню, оно стилистически иначе оформлено. На главной странице у нас совсем другие блоки, но ряд блоков как вы видите повторяется, но некоторые блоки переделаны под запросы и под задачи данного проекта. Меню тоже переделано, меню footer, здесь он уже у нас большой, например, есть блок который отсутствует везде. Из того что сохранилось, эта версия для слабовидящих, но если вы думаете, что вот при такой переработки, ну просто как бы взяли, это открыли, или с того сайта перенесли, подключили, у вас все работает, то это не так, потому что много из-за того что изменено цветовое решение или изменены где-то блоки, пришлось переделывать и версию для слабовидящих, корректировать и ее.

Сложность этого сайта еще в том что, на старом сайте, он был разработан на мodex, и каждая из вкладок, это отдельный сайт, на отдельном домене, с отдельным дизайном. А перед нами стояла задача, переструктурировать, то есть объединить некоторые разделы. Мы объединили часть разделов, и вот они уже располагаются в виде материалов, их можно почитать,  есть горячая линия, которая раньше была выделена как отдельный сайт, здесь же она у нас находится в едином контуре сайта. У нас есть методические материалы, по разным направлениям, теперь это выглядит более приятно, воспринимается легче, более понятно. Это достигается за счет того что есть иконки, есть понятные кнопки со стрелками что мы переходим, есть и конечно фотографии которые нам подсказывают даже без чтения этих слов о том куда мы перейдем и какую информацию мы получим, есть просто отдельно собранные страницы. По типу, когда подгружаются документы, здесь даже сделан функционал определения размера файла, для того чтобы было понятно пользователю какой объем он будет скачивать. На старом сайте проблема была в том, что разработчик не ограничивал размер файлов которые можно закачивать, на данном сайте есть такие курьезы, как отсканированный документ в формате bmp, который весит 200 мегабайт и это просто скан, ну какого то одного документа, это одна страница, причем просто немного текста, печать, подпись и это весит 200 мегабайт, и это загружалось на сайт, и все это занимало место. И это не единичный случай, там такого добра хватает, и вся эта история крайне много места занимает, поэтому пришлось это все оптимизировать, находить, собирать все эти файлы и оптимизировать, вычищать и соответственно переносить, абсолютно все материалы.

И как обычно,  нам в последний момент дали  структуру, сказали что, ну мы начинали проект сначала как обычно, у нас есть дизайн, у нас есть верстка. Здесь, в данном случае, был дизайн нарисован, чтобы мы посмотрели как этот сайт должен был выглядеть. Далее мы адаптировали верстку под существующей макет, вычистили от старых данных и начали наполнять новый, но нам вот кроме верхней структуры меню, не давали внутреннюю структуру меню и дали ее за три дня до того как решили, не они решили, а министр вдруг решил сайт посмотреть, но мы соответственно когда об этом узнали, то бросили все силы. Все было перенесено, конечно же в последующем потребовались корректировки, но на момент просмотра сайта министром, все были довольны, все работало, все работало лучше чем до этого было, все стало более понятным, более воспринимаемым.

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

Центр психолого-медико-педагогической комиссии — ПМПК

Здравствуйте, дорогие зрители канала Афонико и те кто смотрит данный кейс. Сегодня поговорим о кейсе сайта федерального ресурсного центра ПМПК. Этот сайт был разработан для государственной структуры, которая входит в Центр защиты прав и интересов детей Российской Федерации.  Данный сайт является высоконагруженным и у него есть свои определенные сложности, свои интересные нюансы, о которых я вам сейчас расскажу.

На этом сайте, как мы видим, вверху есть просто меню с выпадающим списком пунктов, в меню есть навигатор ПМПК — это целый раздел, я вам потом покажу, есть просто вопрос-ответ, есть раздел о нас, есть контакты. Как мы видим, здесь есть слайдер, на котором изображен ребенок со специалистом, который чем то ему помогает, есть блок на главной странице часто задаваемых вопросов, опять же блок навигатора, есть центр в цифрах, причем некоторые цифры динамически подгружаются и меняются в зависимости от добавленных в навигатор центров, если в навигатор добавить еще одну организацию, на главной странице изменится число автоматически, есть блок последних новостей, есть блок подписки — рассылки, есть партнеры.

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

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

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

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

Раздел “О нас”, в котором есть презентация, положение, есть специалисты центра и есть контактная информация. Также здесь есть вход в личный кабинет, потому что, присутствует еще один скрытый функционал в личном кабинете, каждый центр ПМПК может сдавать отчет, это просто грандиозная большая форма, которая заполняется, тоже мы разрабатывали, которая заполняется руководителем этого центра и там заполняется все в  числовых показателях, вот у нас 1418 сейчас этих центров. И перед государством стоит задача в целом собрать статистику и  каждый центр регистрируется здесь, не простая форма регистрации, она расширенная, здесь нужно прикреплять файлы и личные данные руководителя, данные ПМПК, контактную информацию, то есть это все нужно предоставлять для того, чтобы получить доступ сюда. И после того как вы отправляете этот отчет, тот отчет который нужно для государства сдать, то в админ панели,  соответственно у  администратора сайта появляется, что такая-то ПМПК сдала отчет, этот специалист может нажать на кнопку сформировать общий отчет — это значит, что вот все эти цифры, по всем этим пунктам, всех-всех ПМПК суммируются и получается один единый большой отчет, в котором представлены числа, получается эти числа уже в целом по стране.  Тем самым можно собрать эту статистику.

Сначала перед нами стояла задача годовой отчет сделать, чтобы это был один отчет, но потом появилась необходимость в том, чтобы, во-первых — эти отчеты можно было делать по округам, можно было делать по краям, по регионам, чтобы выбирать некоторое только количество и именно делать выгрузку по ним. Также, в панели нам понадобилась фильтрация, в админ-панели определенная для того чтобы мы видели кто сдал, кто не сдал, понадобилась система уведомлений, понадобилась система индикации, где у нас сданный отчет, где не сданный,  где на проверке, где на уточнении. То есть вот когда мы просто видим этот сайт, мы видим красивое лицо за которым скрывается большой грандиозный функционал. И ещё кстати, что самое интересное, вот мы сколько сайтов смотрели, на данном сайте реализована самая по моему мнению лучшая в России версия для слабовидящих, потому что, вот на таком уровне ее вообще почти никто никогда не отрабатывает. Здесь мы можем увеличивать шрифты, мы можем менять отображение цвета, можем темные, яркие цвета оставить, можем выключать изображение, можем переходить в обычную версию сайта. Все это работает еще и на мобильных устройствах, то есть мы создавали этот сайт для людей которые будут пользоваться, ряд этих людей с ограничениями, в том числе это и требование законодательства, потому что это государственный портал, поэтому все это здесь реализовано. Также кстати мы добавили горячую линию, обычно, как бы госорганы это не делают, но здесь она добавлена и очень интересно когда им пишут в чат, прямо в живой чат, и у них, они   как в режиме техподдержки, могут отвечать как и на почту, так и в чат могут отвечать, то есть это тоже здесь добавлено, но это просто функционал онлайн-чата. Мобильная версия сделана, сайт отлично смотрится на 27 дюймах, но он адаптируется, то есть  здесь только слайдер адаптируется, сам сайт по ширине 1200.

Протестирован на всех устройствах, везде работает и этим сайтом пользуется вся страна, то есть со всей страны специалисты ПМПК  пользуются этим сайтом. На него сразу пошла большая нагрузка, как его запустили, была история, когда было непонятно как регистрироваться, потому что люди абсолютно разные которые пользовались сайтом, поэтому приходилось создавать инструкцию как работать с сайтом, также все это было разработано. Это один из проектов реализовать который нам доверило государство и в следующих кейсах я расскажу какие еще  проекты у нас есть именно для государства. Спасибо за ваше внимание.

Брендбук, его стоимость

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

Приведу простые примеры. Есть табличка на двери, на ней вы видите время работы, а сам логотип – нет, поскольку что-то пошло не так в процессе ее создания. Второй пример: ваша компания занимается поставкой фруктов. На фуре нарисованы фрукты, но логотип нанесен в неправильном месте, его не видно, и он сливается с фруктами.

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

Зачем это необходимо? В будущем вы можете отдать брендбук в рекламное агентство, оно выполнит ваш заказ, и вам не нужно будет доплачивать за дизайн каждого нанесения: на флеш-карту, ручку, флажок, блокнот, календарь. В брендбуке все это уже сделано. Именно поэтому такова его стоимость и продолжительные сроки разработки. Брендбук может разрабатываться от одного до трех месяцев. Основная его часть делается быстрее.

Как делаем мы? Наносим логотип на поверхности, согласовываем с клиентом, а потом уже красиво оформляем сам документ – брендбук.

Графический дизайн, его стоимость

Создание сайтов – основной вид деятельности «Afonico M&D». Наша компания также занимается графическим дизайном. Иногда в процессе создания сайтов мы встречаем бизнесы, у которых полностью отсутствует визуальная составляющая, формирующая образ компании, и ее необходимо разработать.

Мы работаем по всем трем направлениям: создание образа с нуля, ребрендинг компании и корректировки старого дизайна. Доработка прежнего сайта или ребрендинг необходимы, в случае когда сайт есть, но его нужно переупаковать. При разработке абсолютно нового сайта мы делаем креатив для компании без каких-либо вводных.