Дизайн, користувацький досвід, техніка та продуктивність - коли твій портал стає ще кращим!

Дизайн, UX, техніка та продуктивність - якщо ваш портал стане ще краще!

Stefan Petri
опубліковано:

Від барвистого і помітного до вродливого та все ж корисного - протягом останніх тижнів і місяців ми внесли численні зміни на TutKit.com. Це включало в себе покращення продуктивності та технічні оновлення, а також налаштування дизайну та навігації користувача. Все це сприяє позитивному впливу на вашу взаємодію з користувачем. Що змінилося під капою та сверху - докладний огляд.

Тепер темною стає

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

Активуйте темний дизайн на сайті TutKit.com.

У цей же час ми також конвертували всі зображення в формат AVIF, щоб вашому браузеру не довелося завантажувати так багато даних (бл. 70% зменшилися розміри зображень за розміром файлу).


Активи, шаблони та е-книги: більше інформації одним поглядом, без зайвого кліку

Завжди ми показували вам маленькі ескізи на сторінках наших активів, шаблонів та е-книг для всіх окремих елементів. Таким чином, ви одразу бачите, що вас очікує при завантаженні.

За кожним ескізом також ховався невеликий меню. Це дозволяло вам збільшувати ескіз, відзначати вміст як улюблений та переглядати інформацію про сумісність. Це було приємно ... Але також означало, що вам доводилося відкривати меню для збільшення кожного зображення, натискати на піктограму, переглядати та закривати зображення, перш ніж переходити до наступного. Непотрібний обхід. Тому ми видалили меню. Тепер достатньо навести мишу на маленький ескіз, і вуаля: вам відобразиться великий варіант.

В ході перегляду також виникли інші розумні налаштування: Рекомендації про сумісність тепер можна отримати шляхом кліку на іконку з зображенням «Повідомлення», а відзначення вмісту здійснюється шляхом кліку на улюблений також за допомогою самих добре видимих іконок, які тепер відображаються лише для авторизованих користувачів.

Ефект наведення на окремі вмістові елементи.
Скорочено до істотного: Під час перегляду наших окремих елементів вам просто потрібно навести мишу на ескіз, щоб відобразити його у великому розмірі. Інші функції, які раніше приховувалися в меню, тепер доступні безпосередньо через піктограми.

Відео-уроки: Тепер ви також можете бачити малюнком!

Якщо ви допитливо переглядали наші сторінки з відео-уроками кілька тижнів тому, там було набагато більше, ніж переважно сіре пустелю текстів та кнопок відтворення. Перегляд був цілковито перероблений так, що він точно відтворює макет активів, шаблонів та е-книг.

Іншими словами: Тепер у наших відео-уроках також є маленькі ескізи, що виглядають просто естетично привабливо. Чи це відео безкоштовне чи свіже оновлення, ви бачите - як у випадку з активами - за допомогою кольорових значків на зображеннях.

Нова функція: відео з ескізами
Від сірого до ого: Поки раніше на сторінках з відео-уроками ви бачили лише кнопки відтворення, зараз ми також показуємо вам ескізи при відео-уроках.

Тепер наші сторінки презентуються уніфіковано. Незалежно від того, чи це актив, шаблон, е-книга, чи відео-урок: Тут є ескіз, який ви величаєте при наведенні курсора; тут є кнопка для завантаження або відтворення відео; тут є іконки для отримання додаткової інформації та відзначання улюблених; якщо матеріали також містять додаткові матеріали, такі як проектні файли, інструкції або текстові уроки, ви знайдете посилання на них внизу описів.

Крім цього, було видалено непотрібні іконки відкриття та закладання текстів, щоб зробити перегляд більш впорядкованим за принципом менше - це більше. Всі оптимізації ми врешті-решт виклали і для мобільних пристроїв.

Велике прибирання на сторінках загальних пакетів

Що можна викинути? Як можна змінити відображення? Де можна розмістити щось краще? Такі питання ми кинули на сторінки наших загальних пакетів, щоб розмістити їх меншими, але при цьому зберегти високий рівень інформації. Крім того гірше зазначених змін у вигляді окремих елементів, ми внесли наступні налаштування:

Галерея: У галереях ми показуємо, як, наприклад, ви можете використовувати наші активи та шаблони. Раніше тут був ефект обертання. Красивий, але також відволікаючий. Отже, ми звели вигляд нової галереї тільки до трьох речей: ви бачите вибране зображення, підпис та навігацію вліво та вправо - без якісь великих ефектів навколо.

Відкривання і закривання та трошки більше кольору: До цього часу практично кожна секція на сторінці загальних пакетів можна було розгорнути та скласти, для цього були використані відповідні кнопки у вигляді трикутників. Ця функція була видалена. Це зробило сторінки ще більш лаконічними - і будемо відверти: чи є хоч хтось, хто коли-небудь використовував цю функцію? На додаток, всім розділам присвоєно більш багаторівневу кольорову гамму. Відтепер від вигляду наверху до низу розділяє кожний окремий сектор на м'яке TutKit-зелене замість грубого чорного.

Інформаційна область: Зверху праворуч на сторінках загальних пакетів ми зібрали всю додаткову інформацію, наприклад, щодо сумісності, кількості контенту та категорій. Тут збирається чимало даних.

Інформаційну область ми ще раз відсортували та зробили ілюстративніше. Так, прогрес у навчанні тепер відображається лише для увійшовших користувачів (вихідні відвідувачі взагалі не потребують цього). Оцінки наших пакетів перенесено в нижню частину коментарів. Нові відомості в інформаційній області - посилання на умови використання. Найбільш очевидним змінами став показ осіб, які створили пакет. Замість їхніх імен ми показуємо тобі їхні портрети. Це, сподіваємося, також зробить їх хоча б трохи привітнішими ...

Багато малих поліпшень деталей:

  • немає більше навігації слайдером в розділі програмного забезпечення/категорії
  • загальне безперервне прокручування в пошуку, сторінках категорій і т. д.
  • Карти: менше тіней, відсутність піктограм, кутові кутові
  • Карти: відсутність анімації, замість цього зелений оверлей
  • Оптимізований Hover-ефект для розділу «Split-Button»
  • Більші обличчя, наприклад в блозі та під час відео-тур
  • Обличчя в контактній формі
  • Зовсім новий футер (більше відкривати, показувати обличчя і т. д.)
  • Сторінка авторів: видалено «На веб-сайт автора», безперервне прокручування, зелені оверлеї
  • Головна сторінка: Новий контент більше не відображається як слайдер
  • 4 стовпці для авторів
  • Поскачування при спливаючих вікнах
  • новий модуль для цільової аудиторії

За меншою кількістю питань про поліпшення продуктивності

Швидкі завантажувані сторінки - це подобається Google, мені, і вам, впевнено, також. Щодо продуктивності нашого порталу, ми і надалі вдосконалюватимемося. Наприклад, була виконана оптимізація зображень. Вони були переконвертовані з формату JPG, який забирав багато місця, на вдвічі менші формати WEBP та AVIF.

Крім того, ми звернулися до баз даних та запитів, які виникають під час доступу до наших сторінок. Дуже технічно все, але хай буде приклад: коли ви заходите на одну зі сторінок загальних пакетів із навчальними матеріалами, системі потрібно знати, у якій мірі ви можете переглядати відео. Тобто, чи маєте ви членство? Чи придбали ви пакет? Можливо, деякі відео безкоштовні? Такі питання ми мусимо задати при кожному відкритті сторінки, що, звісно, займає час. Відповідно, ми віддамо перевагу покращенню продуктивності (Увага, зараз буде дуже технічно):

  • Видалені непотрібні запити до баз даних, які питали більше інформації, ніж фактично потрібно.
  • Швидкість найчастіше використовуваних запитів до баз даних була покращена.
  • Код у методах PHP було оптимізовано, і повторні запити до баз даних у певних циклах були знищені.
  • Було перевірено всі частини нашої системи на непотрібні запити до баз даних, які використовувалися на всіх сторінках, зокрема ті, що були пов'язані з нашими пунктами меню. Вони були оптимізовані для кращої продуктивності.
  • Було виявлено, що деякі запити до баз даних повторювалися непотрібно, зокрема ті, які пов'язували користувачів з пакетами. Ці повторення було виправлено за допомогою системи тимчасового зберігання (кешування), що зекономило як час, так і ресурси.
  • Системний протокол помилок було перевірено, і всі сигнальні проблеми було виправлено.
  • Автоматизовані системні завдання (Cronjobs) були перевірені на терміни виконання або переривання. Ці завдання було оптимізовано, витягаючи інформацію безпосередньо з бази даних, а не через PHP-код.

У всьому технічно підтримано в актуальному стані? Усе підтримуєтся в актуальному стані!

Звичайно, ми також оптимізували багато під капотом або оновили програмні пакети, наприклад:

  • Оновлення до останньої версії PHP.
  • Laravel (наш фреймворк) було оновлено з версії 9 на 10.
  • Понад 35 пакетів фреймворка було оновлено, а також SDK нашого платіжного постачальника Braintree.
  • Тепер ми використовуємо http2 (ми б найбільше хотіли використовувати версію 3, але він (ще) не підтримується сервером Apache.
  • Ubuntu було оновлено з 20.04 до 22.04 (це було важливо для підтримки зображень у форматі AVIF).

Що ще прийде?

Зараз ми інтенсивно працюємо над тим, щоб наш портал також був доступний в різномовному режимі з січня. Це дуже велика робота, але ми відчуваємо гордість, коли це вдається.

Крім того, вже наступного тижня буде можливість придбати окремий контент за зниженою ціною у разі проведення акції. Це призведе до того, що наш окремий магазин (shop.psd-tutorials.de) не буде оновлюватися новими продуктами і, в останній інстанції, перейде в автономний режим до кінця першого кварталу 2024 року, і всі наші вмістові матеріали будуть доступні лише на TutKit.com.

Ми також плануємо відправляти принаймні 1 раз на місяць розсилку новин, щоб усі члени та підписанти на новини могли бачити всі новинки. Тому що ми завжди встигали до цього: щотижня ми виводили не менше одного нового матеріалу в мережу!

Звичайно, ми і надалі будемо надавати цікавий новий контент. Наприклад, бажаю зняти новий тренінг з Adobe Photoshop Elements, оскільки на поверхні нарешті щось змінилось і тепер варто підготувати цілком новий тренінг. Тема ШІ продовжить нас цікавити, і ми будемо оновлювати існуючі продукти на новому рівні або готувати зовсім нові продукти.

Щось ще потрібно? Тоді пишіть мені на електронну адресу info@tutkit.com. Я також буду радий, якщо у блозі буде можливість коментувати. Що ви думаєте? Розумно чи все одно мало хто коментує через відсутність часу?

Опубліковано на від Stefan Petri
Опубліковано на:
Від Stefan Petri
Стефан Петрі разом зі своїм братом Матіасом керує популярним спеціалізованим форумом PSD-Tutorials.de, а також платформою для електронного навчання TutKit.com, яка зосереджується на освіті та підвищенні кваліфікації у сфері цифрових професійних навичок. 
Повернутися до перегляду