1

Step 1

Виджет "кнопка с иконкой" для вставки в статьи сайта на базе WordPress

2

Step 2

Вставка иконок в меню сайта на базе WordPress

3

Step 3

Иконки для заголовков статей сайта на базе WordPress

4

Step 4

Изучение библиотеки Vue

5

Step 5

Анимация иконок

6

Step 6

Интеграция наборов иконок Icons8 в плагин

7

Step 7

Интеграция OpenSource наборов иконок в плагин

8

Step 8

Иконки для категорий сайта на базе WordPress

9

Step 9

Виджет "ссылки с иконками" для сайдбара на сайте на базе WordPress

10

Step 10

Дополнительные визуальные параметры

1

Step 1

Виджет "кнопка с иконкой" для вставки в статьи сайта на базе WordPress

2

Step 2

Вставка иконок в меню сайта на базе WordPress

3

Step 3

Иконки для заголовков статей сайта на базе WordPress

4

Step 4

Изучение библиотеки Vue

5

Step 5

Анимация иконок

6

Step 6

Интеграция наборов иконок Icons8 в плагин

7

Step 7

Интеграция OpenSource наборов иконок в плагин

8

Step 8

Иконки для категорий сайта на базе WordPress

9

Step 9

Виджет "ссылки с иконками" для сайдбара на сайте на базе WordPress

10

Step 10

Дополнительные визуальные параметры

20 April 2017 31 August 2017
Goal completed 24 August 2017

Goal author

Pavel Volyntsev

Russia, Новосибирск

41 years old

General

6000 установок иконок Icons8 для WordPress

Кто мы

Мы работаем в команде Icons8 — бесплатно рисуем иконки в стиле Flat по заявкам обычных пользователей и уже нарисовали 43 000 иконок. Также мы делаем много полезных бесплатных утилит для работы с иконками. Наш новый проект — плагин Icons Enricher для WordPress, который позволяет иллюстрировать сайты на базе WordPress аккуратными иконками.

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

Цель

Сделать удобный инструмент для вставки иконок, который позволит использовать в сайтах на базе WordPress более 40000 иконок в векторном формате от команды Icons8 и более 10000 иконок из 30 популярных коллекций иконок и иконочных шрифтов, таких как FontAwesome, IonIcons, Linecons, Google Material Icons, LineAwesome.

--------------------------------------------------------

Что дают иконки обычному сайту?

Одна иконка заменяет несколько слов. В некоторых случая иконка вообще может заменить надпись. Она узнаваема независимо от того, каким языком владеет посетитель сайта. Она однозначно даёт понять, что эта кнопка - для скачивания ZIP, если подставить там иконку "download" или "ZIP".

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

--------------------------------------------------------

При разработке концепции плагина были учены шесть важных факторов:

1. Плагин Icons Enricher очень компактный

Более 50 000 иконок в форматах PNG и SVG - это 300 мегабайт данных даже в ZIP. Но плагин должен оставаться компактным, чтобы работать на бесплатных хостингах. В Icons Enricher включен только минимум файлов, остальное запрашивается с специального сервиса и сохраняется в блоге только при необходимости.
Он также компактен по программному коду - нет развесистой структуры классов PHP, нет громоздких скриптов JS. Все написано очень сжато. Скрипты и стили минифицированы.

2. Плагин Icons Enricher использует ассоциативный поиск

В других плагинах иконки традиционно неудобно искать. При использовании других плагинов пользователю приходится просматривать глазами огромные списки иконок, либо выбирать их из выпадающих списков, либо вводить имя иконки по памяти. В IonIcons около 900 иконок и я не помню как точно называется иконка "палец вверх". В Icons Enricher эту иконку можно найти по ассоциациям: «like», «good», «perfect», «like», «thumb», «approve», «hand» и много других. Ищи иконки по тому слову, которое тебе пришло в голову

3. Плагин Icons Enricher имеет много настроек для иконки и не теряет изящества интерфейса

Да, я опять про списки иконок. Их можно посмотреть глазами, конечно. А ещё можно сравнить иконки разных наборов. А ещё настроить отображение иконки: размер, цвет, отступы, анимацию, подложку...

4. Плагин Icons Enricher - мультифункциональный

WordPress устроен так, что записи блога, меню навигации, виджеты - это всё разные части, у каждого своя логика. Обычно для виджетов устанавливают плагин от одного автора, для меню навигации - плагин другого автора. Но как во всех этих плагинах выбрать одну из 50 000 иконок для меню навигации?

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

5. Плагин Icons Enricher экономит трафик

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

  • использовать встроенные в плагин файлы, чтобы они загружались с самого сайта автора блога
  • или загружать файлы со сторонних серверов

Это экономит трафик и ускоряет работу блога.

6. Плагин Icons Enricher следит за целостностью стиля

Бывает возникает необходимость вставить на одну страницу две иконки, но какая-то из них найдена в коллекции LineAwesome, а какая-то в Stroke7. Эти коллекции нарисованы в разном стиле: отличается толщина линий, отступы, способ заливки.

Некоторые иконки имеют базовый тон (как коллекция иконок Ultraviolet) или набор цветов как коллекция иконок в стиле Microsoft Office.

Плагин следит за тем, какие иконки используются на странице. Если он обнаружит, что иконки разного стиля - предупредит об этом и предложит иконки на замену.

--------------------------------------------------------

Скачать плагин Icons Enricher можно уже сейчас, бесплатно, без SMS, без рекламы

Попробовать в действии на специальной demo-странице

Ознакомиться с планами и добавить свои идеи

Посмотреть статистику по количеству установок и количеству иконок

--------------------------------------------------------

Это был питч про плагин, небольшой устный доклад про несуществующий пока проект. Если тебе интересно всё, что здесь написано, то значит было правильным решением создать его.

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

Итак, его ещё предстоит сделать настолько хорошим, насколько мы сами себе это представляем.

 Goal Accomplishment Criteria

1. Плагин для WordPress имеет 6000 инсталяций

2. С помощью плагина можно работать с 50 000+ иконок в векторном и растровом формате

 Personal resources

Умею программировать, есть команда из дизайнеров, знаю CMS WordPress, есть достаточное количество свободного времени

 Goal ecological compatibility

Хочу помогать людям

  1. Виджет "кнопка с иконкой" для вставки в статьи сайта на базе WordPress

  2. Вставка иконок в меню сайта на базе WordPress

  3. Иконки для заголовков статей сайта на базе WordPress

  4. Изучение библиотеки Vue

    Для создания удобного интерфейса требуется реализовать его на базе фреймворка для Single Page Application
    Фреймворк должен быть маленьким (требование компактности) и с удобной внутренней архитектурой, чтобы не запутаться когда плагин станет сложнее

  5. Анимация иконок

  6. Интеграция наборов иконок Icons8 в плагин

    Вся коллекция Icons8 = более 40 000 иконок в 10 стилях

    1. Иконки в формате PNG с размером до 100px

    2. Иконки в формате PNG с размером до 1024px

    3. Иконки в векторном формате SVG

  7. Интеграция OpenSource наборов иконок в плагин

    1. Line Awesome

    2. Font Awesom

    3. Google Material Icons

    4. IonIcons

    5. Foundation

    6. Glyphicons

    7. Icomoon Free

    8. Webhostinghub

    9. Entypo

    10. Elusive

    11. Mfglabs

    12. Raphael

    13. Simple Line

    14. Weather Icons

    15. Linecons

    16. Meteocons

    17. Metrize

    18. Octicons

    19. Iconic

    20. Maki

    21. OpenWeb icons

    22. Stroke7

    23. Typicons

    24. Zocial

    25. Brandico

    26. Fontelico

  8. Иконки для категорий сайта на базе WordPress

  9. Виджет "ссылки с иконками" для сайдбара на сайте на базе WordPress

  10. Дополнительные визуальные параметры

    Практически все иконки с прозрачной подложкой. Можно настроить подложку чтобы иконки были на сплошном фоне с скруглёнными углами и обводкой.

    1. Подложка под иконку разного цвета и формы

    2. Обводка подложки разного цвета и толщины

    3. Дополнительные CSS классы для стилизации всех иконок

  • 3213
  • 20 April 2017, 06:11
Sign up

Signup

Уже зарегистрированы?
Quick sign-up through social networks.
Sign in

Sign in.
Allowed.

Not registered yet?
 
Log in through social networks
Forgot your password?