История
Этот сайт был создан на чистом энтузиазме двумя людьми:
  • Tranquillity (a.k.a. Kaorinite) – концепт, вёрстка (Bootstrap, HTML/CSS), JavaScript-плагины, дизайн (Photoshop, Illustrator, Blender, Substance Painter), перевод на английский;
  • Unic (a.k.a. Takenaki) – бэкенд (Java), фронтенд (JSP, JavaScript, CSS), дизайн (Photoshop).
Tranquillity

Ещё в школе я начала увлекаться рукоделием, иностранными языками и созданием сайтов. В 2009 году я создала сайт fene4ki.ru, где выложила разнообразные уроки по плетению фенечек, кумихимо и других видов рукоделия. Мне всегда хотелось, чтобы не только я могла размещать свои идеи на моём сайте, но и другие люди могли делиться своими со всем миром. И была ещё мечта – сделать сайт, где люди по всему миру могли бы обмениваться фенечками и находить друзей. Два сайта был моими вдохновителями: friendship-bracelets.net и postcrossing.com. Хотелось объединить эти идеи, и добавить что-то своё. Но, к сожалению, мне не хватало знаний бэкенда, чтобы сделать такой сайт. В 2016 году я познакомилась с Unic. Мы обнаружили, что у нас много общего и решили вдвоём создать такой сайт, посвящённый обмену фенечек и идей по рукоделию.

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

Для отдельных элементов дизайна я использовала такие программы как Adobe Photoshop и Adobe Illustrator. Я начала увлекаться 3D, и, поэтому, мне захотелось сделать некоторые элементы дизайна в Blender. Вот несколько примеров их создания:

Для вёрстки я решила использовать Bootstrap, т.к. уже неплохо им владела и посчитала его удобным для использования в нашем проекте. Однако небольшим минусом в Bootstrap из коробки оказалось небольшое количество медиа запросов, которые ограничивались до 768px в размере на мобильных устройствах. Поэтому, мне пришлось дополнительно добавлять медиа запросы для поддержки более мелких экранов.

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

Unic

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

Поэтому решил писать проект на Java, тем более что у меня в этой области было куда больше опыта, чем в других языках. Для реализации серверной части я выбрал фреймворк Spring, в качестве шаблонизатора – Apache Tiles, для работы с базой данных – Hibernate, а в качестве самой базы данных - MySQL. Для кэша был использован Ehcache, для рендеринга текстов писем – Apache Velocity.

В процессе написания проекта я сталкивался с большим количеством интересных и нетривиальных задач, многие из которых для меня были новыми. Одной из самых необычных задач было составление базы геоданных населённых пунктов (городов, сёл и т.д.). Мне не хотелось быть зависимым от внешних сервисов (хотя в этом и есть свои плюсы), поэтому я решил собрать все данные своими силами. Для этого я написал программу, которая, имея список всех более-менее крупных населённых пунктов мира (от 1000 жителей и более), медленно, но верно, доставала геоданные о каждом из них. Данные не всегда удавалось собрать с первого раза, поэтому программа запоминала все неудачные попытки, чтобы снова попробовать собрать данные при следующем запуске. Так в несколько итераций я собрал геоданные обо всех имеющихся у меня населённых пунктах.

Ещё более сложной и интересной задачей было написание удобного и более-менее универсального инструмента для работы с данными, хранящимися в базе данных. Именно необходимость подготавливать начальные данные о населённых пунктах, языках и странах была поводом для написания такого инструментария. В результате я реализовал возможность загрузки и выгрузки данных в виде текста (или в формате CSV, который можно редактировать, как обычные электронные таблицы). В дополнение я написал web-страницу, позволяющую работать с данными прямо из админки. Этот инструментарий сэкономил мне немало времени и избавил от рутинной работы по подготовке данных. Формат (как и саму тулу) я назвал Inida (от «Initial Data»).

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

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

Я всегда очень критически относился ко внешнему виду пользовательского интерфейса (UI) сайта, программы или игры. Я считаю, что UI должен помогать пользователю в навигации, делая работу с приложением удобным и приятным. Элементы интерфейса должны выглядеть так, чтобы их можно было чётко отличить друг от друга, быстро поняв, что и где находится на странице или форме. Поэтому наиболее оптимальным в этом плане вариантом я считаю скевоморфный дизайн, где элементы UI выглядят, как объекты реального мира. Конечно, не всё можно сделать похожим на реальные вещи, но можно хотя бы сделать их напоминающими (кнопки – выпуклыми, поля ввода – вдавленными и т.п.). Чем больше деталей имеет элемент UI, тем легче пользователю его распознать. Я не люблю современные плоские дизайны, где элементы UI сливаются друг с другом – и мозгу приходится больше напрягаться, чтобы понять, что есть что. Поэтому наш сайт вне современных трендов в плане дизайна UI.

Вот пара примеров того, как выглядели вайры страниц настройки профиля и администрирования пользователей соответственно:

А так вот выглядела страница профиля в дизайне на этапе разработки:

Tranqunic

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