Дизайн, UX, техника и представителност - когато порталът ти стане още по-добър!

Дизайн, UX, техника и производителност - когато твоят портал стане още по-добър!

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

От ярък и очевиден до по-скоро ненападателен, но все пак полезен - в последните седмици и месеци направихме значителни промени в TutKit.com. Сред тях бяха подобрения в производителността и технически актуализации, както и промени в дизайна и потребителското ръководство. Общо казано, всичко това положително влияе на вашето потребителско изживяване. Какво беше променено под капака и отгоре - обширен преглед.

Сега става тъмно

От сега нататък можете по всяко време да преминете от дизайна на тъмно към светло и обратно с едно щракване. Ние го настроихме по подразбиране, както е зададено в операционната система.

Активирайте тъмен дизайн в TutKit.com.

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


Ресурси, шаблони и електронни книги: повече от един поглед, без нужда от щракване

Отдавна ви показваме на страниците нашите ресурси, шаблони и електронни книги с малки пиктограми за всяко едно съдържание. Така веднага виждате какво ви очаква при изтегляне.

Зад всеки малък пиктограм се криеше и малко меню. Чрез него можете да увеличите избрания пиктограм, да поставите съдържанието като любимо и да получите инструкции за съвместимост. Красиво ... Но също така означаваше, че трябваше да отворите менюто, да щракнете върху икона, да видите и да затворите изображението, преди да продължите към следващото. Ненужен обикновен път. Ето защо премахнахме менюто. Сега е достатъчно да прехвърлите мишката върху малки пиктограми и бум: веднага ще видите голямата версия.

При преработката се появиха още разумни промени: Вече можете да получите информация за съвместимост чрез икона с информационно "i", която се вижда директно. Поставянето на съдържание като любимо става чрез икона със звезда, която също се показва само на влезналите потребители.

Ефект при плъзгане върху отделни съдържания
Основният ресурс: При изгледа на нашите единични съдържания трябва да плува само над пиктограмата, за да видите голямата снимка. Допълнителните функции, които преди бяха скрити в менюто, сега са вече достъпни директно чрез икони.

Видео уроци: Сега и тук сте в картината чрез снимка!

Ако преди време сте разглеждали една от нашите страници с видео уроци, там срещнахте повече или по-малко сива пустиня от текстове и бутони за възпроизвеждане. Изгледът беше напълно преработен така, че той едно към едно съответства на оформлението на ресурсите, шаблоните и електронните книги.

Изблясък: Видео уроците ни вече се представят с малки пиктограми, което просто изглежда естетично по-приятно. Дали видеото е безплатно или свежо актуализирано, можете да видите - както при ресурсите - чрез цветни означения върху изображенията.

Нова гледна точка: Видеа с прегледни изображения
От сиво към уау: Докато преди при видео уроците виждахте само бутони за възпроизвеждане, сега ви показваме снимки на уроците.

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

Освен това, излишните триъгълници за отваряне и затваряне на текстовете бяха премахнати, така че изгледът е по-прост и по-убав. Всички оптимизации са подготвени също и за мобилните устройства.

Голямото почистване на страници с общи пакети

Какво може да отиде? Какво може да се представи по-различно? Какво може да се подреди по-добре? Поставихме такива въпроси на страниците с нашите общи пакети, за да ги оптимизираме и в същото време да запазим високото съдържание на информацията. Освен измененията, вече споменати вгоре, в изгледа на сингъл съдържание, направихме следните промени:

Галерия: В галериите показваме как може да използвате нашия ресурс и шаблон например. Преди това имаше ефект на въртене. Красиво, но отвлекателно. Затова новият изглед на галерията беше намален точно до три неща: виждате избраното изображение, подзаглавие и навигация към ляво и надясно - без голяма огнена травма от ефекти около него.

Отваряне и затваряне и малко повече цвят: Досега почти всеки раздел на страниците с общи пакети можеше да бъде разкрит със стрелки. Функцията бе премахната. Прави страниците още по-чисти - и бъдем честни: Има ли някой, който някога е използвал тази функция? Освен това всички заглавия бяха украсени с повече цвят. Отгоре надолу сега вместо тежко черно меко TutKit зелено разделя отделните области.

Инфо зона: Най-горе вдясно на страниците с пакети събираме всички допълнителни информации, като съвместимост, брой на съдържанието и категории. Тук се събира доста данни.

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

Много малки подобрения на детайлите:

  • няма повече плъзгаща се навигация при Софтуер/Категории
  • континуирано плъзгане в търсене, страници с категории и т.н.
  • Карти: по-малко сянка, без икони, ъглови ръбове
  • Карти: без анимация, вместо това зелено преграждане
  • Оптимизация на hover ефекта при сплит-бутон
  • По-големи лица, например в блога и при видео тур
  • Лице в контактната форма
  • Цялостно ново долура (вече няма отваряне, показват се лицата и др.)
  • Страница с автори: "Към уебсайта на автора" елиминирано, континуирано плъзгане, зелени преграждания
  • Начална страница: Новите съдържания вече не са като плъзгач
  • 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.

Нашето желание е през 2024 г. поне веднъж месечно да изпращаме бюлетин, за да могат всички членове и абонати на бюлетина да видят какво ново има. Защото едно нещо винаги успявахме да направим: Всяка седмица публикувахме поне едно ново съдържание онлайн!

Разбира се, ще продължим да предлагаме интересни нови съдържания. Лично аз бих искал да започна ново обучение за Adobe Photoshop Elements, тъй като интерфейсът се е променил и вече си струва да се създаде напълно ново обучение по темата. Темата за Изкуствен интелект ще продължи да ни занимава и ще поддържаме съществуващите продукти актуални или ще предоставим напълно нови продукти.

Липсва ли нещо? Моля, пишете ми на имейл info@tutkit.com. Сам също бих се радвал, ако блогът има функция за коментари. Какво мислиш? Полезно ли е или все пак почти никой не коментира заради липса на време?

Публикувано на на Stefan Petri
Публикувано на: От Stefan Petri
Стефан Петри управлява заедно с брат си Матийас популярния специализиран форум PSD-Tutorials.de и онлайн платформата за обучение TutKit.com, която се фокусира върху развитието на цифрови професионални умения за обучение и повишаване на квалификацията.
Обратно към прегледа