ZipIt
Тип на проекта:
Уеб редизайн
Извършени услуги:
Уеб дизайн,
UI/UX
Клиент:
През годините Zipit са се утвърдили като виден доставчик на правни услуги, съобразени с нуждите както на стартиращи, така и на вече утвърдени бизнеси, характеризиращи се с акцент върху напредничави решения и иновации. Юристи по образование, предприемачи по душа. ZipIt познава както регулациите, така и бизнеса.
Цели на проекта
Адвокатската кантора се нуждаеше от нов и свеж дизайн на стария си уебсайт. Външният вид трябваше да отговаря на иновативния подход на предлаганите от тях услуги. Клиентът поиска много лек и семпъл дизайн, който трябваше да излезе от обичайните шаблони за дизайн в сферата на правото, които обикновено са много сериозни, скучни и твърде корпоративни. Предизвикателството беше да се балансира това с желанието им да имат стил, който да се хареса на ИТ сектора, който е основния им таргет - външен вид, който е остроумен, футуристичен с щипка усещане за виртуална реалност, без да залита прекалено към научната фантастика.
ZipIt вече имаше лого, което беше добре познато в тяхната област и не се нуждаеше от големи промени, така че имах някои първоначални бранд насоки. Също така реших да включа мотива с цип по някакъв начин в различните страници. Започнах да изяснявам творческата посока на проекта, като предложих moodboard, който включва много геометрични форми, примери за типография и усещане за простор. Играх си и с някои цветови нюанси, тъй като клиентът искаше да разнообрази всичко, като вече не разчита на черно-бяла палитра.
Подход
След като клиентите одобриха посоката на дизайна, проведох дискусии с разработчиците, за да обсъдя възможни паралакси и маскиращи анимации, които ще придадат футуристичното IT усещане на уебсайта. Направих wireframes на двете страници, включително по-голямата част от графичното съдържание, за да предам идеите си на разработчиците. Използвах грид от 5 колони, така че когато редувам секции, мога да използвам приблизително 40% от основния контейнер за текст и да оставя по-голямата част свободна за хубави визуализации и анимации. В случаите, когато имахме нужда от повтарящи се полета със съдържание, които бяха само 2 или 3 на ред, използвах съответно гридове с 2 или 3 колони само за този раздел.
Решенията
-
Цифровият футуристичен изглед или тип виртуална реалност е постигнат чрез използване на избледняващи фонове, градиентни запълвания за геометричните фигури, които летят наоколо, както и 3D рендериран стил на изображения. Повечето от страниците съдържат този мотив на цип, като имат пунктирана линия с цип, който се движи заедно с потребителя, докато той скролира, насочвайки ги надолу към call-to-action бутоните. Липсата на резки промени или разделители между секциите също беше решение за създаването на по-завладяващо изживяване.
-
Страница беше една от най-натоварените с текстово съдържание. Затова трябваше да балансирам с идеи за анимирани визуализации, за да поддържам интереса. Редуването между ляво и дясно позициониране на текста и разделянето му на отделни секции беше друг начин да се улесни потребителя да "смели" цялата информация.
-
Използвах акордеон за потребителския интерфейс, за да побера цялото съдържание на по-малко пространство и да не карам потребителите да скролират толкова много, както и да им помогна да се концентрират върху областта, която търсят. Иконите за всяка област на специалност следват стила на дуотон с градиент, който беше избран в началото при определяне посоката на дизайна.
-
За страницата на екипа исках да измисля креативен начин да покажа толкова много снимки, без да е скучно. Затова реших да направя разчупен фон за основателите на Адвокатската кантора, която символизира цифровата пикселизация. Друг начин за поддържане на интереса е да се промени формата на снимката на отделните членове, в зависимост от това дали са сътрудници на фирмата.
-
Предизвикателството тук беше да вмъкна всички препоръки в интересна подредба, затова използвах стила Masonry на подреждане на кутиики. Решихме да добавим някои от фирмените статистики, за да направим цялата страница малко по-интересна.
-
Пресцентърът е блог частта на сайта на ZipIt. Има 3 подкатегории, показани отгоре като табове. Отново полупрозрачните подложки и припокриващите се кутиики в тази страница са консистентни със стила на дизайна.
Мобилна версия
Много опростената навигация и текстовете, припокриващи се с анимирани графики, бяха ключови за създаването на интригуваща мобилна версия на уебсайта. Бяха нужни значителни усилия, за да се донастроят размерите на шрифта, така че да не са твърде големи за мобилното изживяване и да спестяват пространство, но също така да изглеждат добре и балансирани. Някои потребителски интерфейси обаче се нуждаеха от допълнително пренареждане, за да работят добре на мобилни устройства, както в примера с карусела с лога на клиентите на началната страница.
