Най-добрите дизайни на уебсайтове от 2021 г.
Страница 1 от 3: The Neverlands от Active Color- The Neverlands от Active Color
- Изходът на мелницата от студио
- Най-добрите уебсайтове на 2020: 3-8
Не всяко уеб изживяване трябва да бъде новаторско, визуално зашеметяващо и изпълнено с неочаквани изненади. През повечето време посетителите на уебсайт просто искат да намерят търсената информация бързо и лесно.
Но както по-странните тоалети на модните подиуми могат да повлияят фино на по-носещите се дрехи, открити на главната улица, струва си уеб дизайнерите да следят поне половин око върху горния край на създаването на уебсайта. Дори тези, които изглеждат прекалено крещящи, все още могат да ви дадат вдъхновение и идеи, които можете да включите по различни начини в собствения си дизайн.
Имайки това предвид, ние обръщаме поглед назад към дизайните, които смятаме, че наистина са избутали плика. Тези сайтове не само изпълняват основната работа да обслужват посетителите това, което търсят, по безпроблемен начин, но и преосмислят как уебсайтът може да изглежда и функционира по свежи, изобретателни и оригинални начини.
01. The Neverlands от Active Color
Когато посетите уебсайт, популяризиращ място за нощен живот, очаквате нещо крещящо, шумно, цветно и вероятно малко пищно. Но The Neverlands - дом на две от най-добрите места за нощен живот в Лос Анджелис, The Edison и Clifton’s Republic - искаха да проектират нещо малко по-вкусно. Затова се обърнаха към Активен цвят , които са им изработили уебсайт, който е всичко друго, но не и обикновен.
Въз основа на техните анимации на персонализирани ръчно рисувани илюстрации от Шанън Стейми , това наистина е нещо от красотата. Разговаряхме с основателя и креативен директор Дамян Краячич, за да разберем как са го направили.
Как се получи този необичаен концерт?
Работим с клиента и собственика на The Neverlands, Андрю Мейран, откакто за първи път отвориха първото място в центъра на Лос Анджелис. Edison е наистина грандиозно нощно място, построено в подземието на историческата сграда на LA Higgins, и запазващо генераторите на енергия и индустриалните елементи на електроцентралата, което сигнализира за новото бъдеще на DTLA.
По-късно работихме по още няколко проекта със същия клиент, включително уебсайта на Clifton’s Republic. Когато този проект стартира, ние вече бяхме много дълбоко потопени в марката и местата, както и доста близо до клиента и неговия изключителен, визионерски и ексцентричен стил.
Какво беше брифингът?
Клиентът винаги имаше фантастична визия за това как да превърне тези визионерски пространства в цифров свят. Те искаха да създадат усещане за приключение, любопитство, бягство от обикновеното в детски свят на фантазията. Този проект беше съвместно творческо усилие с клиента в продължение на повече от две години. Въпреки че всеобхватната концепция остава доста същата с течение на времето, идеите за това как да я приложим на практика се развиват непрекъснато и често ние влизаме в малки подробности за илюстрации или специфичен вид движение или произведения на изкуството.
Въпреки че обикновено имаме много по-ясен, стратегически и дефиниран процес, в този случай решихме да оставим артистичната природа на проекта да ни води по много начини. Тъй като самият клиент беше изключително креативен и артистичен, не видяхме друг начин да успеем да завършим проекта успешно. Понякога трябва да изкривите правилата, за да създадете нещо свежо и неочаквано.
Какви бяха вашите визуални вдъхновения?
Както концепцията, така и цветовете на уебсайта са вдъхновени основно от зашеметяващия интериор на Clifton's Republic и The Edison, които буквално са тези фантастични светове, в които можете да се потопите. Въпреки че Clifton's се състои от седем отделни места в една и съща 5-етажна сграда , във всяко пространство има основна топлина, а топлите бронзови, медни и златни тонове проникват в сетивата. Искахме да разширим тази цветова схема, за да бъде малко по-подходяща за всяко място или целева страница, така че разширихме цветовата палитра, за да включим пастелни блус, тийзъри и разнообразие от други цветове.
Част от цветовата палитра беше отчетливо вдъхновена от ръчно рисуваните илюстрации и ние ще огънем страницата, за да съвпадне. Друг път бихме нагласили нюансите и цветовете на илюстрациите, за да ги смесим и да се впишем в по-сплотен стил.
Кой е изработил илюстрациите?
Илюстрациите са дело на Шанън Стейми, която е поръчана от клиента. Заедно с клиента и Stamey ние концептуализирахме екраните за кацане и илюстрациите, които бяха изпълнени до съвършенство от Stamey. Това, което не можахме да получим ръчно рисувано, успяхме да намерим или в стокови изображения, или в архиви на публично достояние. Клиентът Андрю Майеран е историк, с невероятни познания и страст към изкуството от този период, така че той е допринесъл за намирането и вземането на решения за много от елементите.
Как подходихте към типографията?
Това беше баланс между практичност и шанс. Нямахме система за визуална идентичност, с която да работим тук, нито предварително дефиниран стил или лого, така че работихме назад, за да намерим шрифтовете, които съответстват на произведението на изкуството. Искахме да запазим нещата да се чувстват човешки, естествени и използваеми, но в същото време малко вълшебни в избора си.
Какви технологии използвахте за изграждането на сайта?
Използвахме персонализирана инсталация на WordPress за захранване на задната част. Уебсайтът е изцяло персонализиран кодиран отпред с много персонализирани JavaScript и CSS. Модифицирахме страхотния скрипт за паралакс с отворен код от Матю Уагърфийлд като основен двигател зад движението на целевата страница. Също така изградихме много други персонализирани функции, които се случват на страници на местата като The Edison, Clifton’s Republic и Pacific Seas, докато потребителите превъртат, карайки да се чувствате така, сякаш слизате в града, надолу по дървесните дървета или в океана.
Най-голямото предизвикателство досега беше как да създадем гладко изживяване на браузъра с толкова много прозрачни PNG файлове, които се движат в паралакс движение. Много време се отделя за оптимизация на изображения и скриптове, за да може да се извлече от различни браузъри.
Преходите са красиво ефективни: как ги създадохте?
С много ощипвания и експерименти! Бяхме малко ограничени в възможността да поискаме допълнителни илюстрации, ако е необходимо, така че понякога се налагаше да закърпваме парчетата, да разширяваме произведението на изкуството, да го манипулираме. След като подготвихме активите, отделихме много време, за да коригираме преходите, за да направим потока плавен. Това беше фин баланс между това, което искахме визуално, и това, което е технически изпълнимо във всеки браузър с ограничена мощност на рендиране.
Как накарате сайта да пее на мобилни устройства?
Преводът на мобилен телефон всъщност беше доста гладък. Този проект беше тежък за настолни компютри, но знаехме, че целевите страници ще работят добре на мобилни устройства, защото така ги замислихме от самото начало. Бяхме наясно, че поради много намалените размери на изображенията преходите ще бъдат плавни. И накрая, не можете да имате твърде много неща на малък екран, така че успяхме да намалим нещата и да опростим потребителския интерфейс. Всичко това доведе до по-гладко и по-лесно мобилно изживяване.
Кой е най-големият урок, който научихте?
Това търпение е добродетел. Със сигурност трябваше да имаме много от него в този проект. Въпросът е, че за да направите нещо добре, трябва да сте готови да отделите време и да положите усилия, а това изисква търпение.
От техническа и артистична страна на нещата, проектът ни напомни колко обичаме нестандартните сайтове, датиращи от сайтове, вградени във флаш, които обожавахме, в даден момент интернет беше много по-разнообразен и неконвенционален. Въпреки това, с последните разработки на браузъри, ние отново сме в състояние да постигнем изключителни преживявания, които не попадат в кутията, и сме развълнувани да използваме тази информираност, за да ни насочваме към бъдещи проекти. Имахме късмета, че в този случай работихме с много уникален клиент, който цени естетиката и оригиналността.
Следваща страница: Открийте дизайна на уебсайта номер две от 2020 г. досега ...
Creative Bloq създаде това съдържание като част от платено партньорство с Adobe Stock. Съдържанието на тази статия е напълно независимо и отразява единствено редакционното мнение на Creative Bloq.
- 1
- две
- 3
Текуща страница: The Neverlands от Active Color
Следваща страница Изходът на мелницата от студио
