Logo
Logo
Vsi4kiBri4ki на едно място.
Vsi4kiBri4ki на едно място. Vsi4kiBri4ki на едно място

Време за четене: 1 Минути

Използвани технологии:

adobe-xd photoshop html css sass jQuery laravel php

Корпоративни сайтове

Vsi4kiBri4ki е медиен проект на Bri4ka, на който имахме огромното удоволствие да направим редизайн на сайта. Една от главните ни цели беше да модернизираме визията на уебсайта, запазвайки неговата идентичност, да подобрим потребителската пътека и правилно да поднесем информацията в него.

ЗАДАЧА

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

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

Структура и навигация

Много от страниците нямаха ясно изразена визуална йерархия на елементите - по този начин потребителите биват натоварени с много на брой и обем информация и трудно биха могли да се навигират.

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

Заложихме на Grid система, за лесно позициониране на всички елементи. По този начин, цялата информация следва посоката на дизайна и всичко изглежда като една завършена композиция, с ясна цел и структура. Големите заглавия позволяват на потребителите бързо и лесно да изградят представата за това къде започва секцията и къде е нейният край, без да трябва погледът им да шари из екрана.

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

📰 Новини и Ревюта

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

Представихме всички новини и ревюта в ясно изразени кутийки, като заложихме на това, че последната новина/ревю трябва да бъде ясно показана на екраните на потребителите и затова тя е по-голяма от останалите като размер. Така винаги ще се придава тежест и е по-вероятно да доведе повече трафик, без да трябва потребителите да мислят и да гледат датите на публикуване.

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

📅 Календар със събития

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

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

  • По-лесно за намиране от потребителите на уебсайта;

  • ✅ Подпомагането от гледна точка на SEO и воденето на външен трафик - Хора, които не търсят новинарски уебсайт, а се интересуват от предстоящи събития.

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

📱 Responsive версия

Заложили сме на изпипани практики, от гледна точка на UX дизайна. Направили сме така, че текстовете и снимките да са достатъчно големи, без да изглеждат несъразмерни от телефон. Подобрили сме значително визуалната четимост при бърз преглед на новини и всички елементи са ясно разграничими и ясно обособени в собствените си категории. Разбира се, сме подобрили максимално всичко, което можем, без да променяме прекалено много функционалността на вече съществуващия респонсив дизайн.

Банер система

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

Създадохме логика, с която да се визуализират консистентно банери в самия текст на новините, взаимайки предвид дължината му и придържайки се към изчистеност.

За резолюция 1366 px пространството беше ограничено за наличието на рекламни банери от двете страни на съдържанието на началната страница. За това, направихме така, че банерите и от двете страни, да се визуализират при по-големи резолюции, където има достатъчно място за това.

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

Взехме предвид и това, че потребителите могат да имат наличен Adblock и пригодихме сайта за подобни ситуации. При активен Adblock, се скриват всички banner полета, без да заемат излишно бяло пространство и това да влияе на добрата визия на сайта.

Собствен CMS

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

Следващ
Проект

Разгледай проекта!
MaxAuto24 - Онлайн Магазин.
Back to top