16 невероятни HTML примера
Страница 1 от 2: Страница 1- Страница 1
- Страница 2
Някои от тези сайтове използват най-новите технологии, за да разширят границите на възможното в мрежата; други използват традиционни принципи на проектиране, за да изграждат красиви, използваеми сайтове. Независимо дали използвате прост HTML или се гмуркате в WebGL и 3D CSS, тук ще намерите нещо, което да ви вдъхнови.
Имаме и брилянтна селекция от вдъхновяващи примери за CSS за да изследвате.
01. Апи Физ
Appy Fizz е пенлива напитка, която се описва като „шампанско от плодови напитки“. Новият уебсайт на Appy Fizz беше част от по-обширен проект за ребрандиране от базираната в Ню Йорк дизайнерска фирма Sagmeister & Walsh . Както създателите обясняват в казуса си, идентичността „визуализира газирани мехурчета чрез динамичен графичен език на 3D сфери и кръгове“.
Дизайнът представлява интересна комбинация от супер плоски и подразбиращи се триизмерни елементи. Кръговият език, написан с удебелен червен, бял и черен цвят, ми напомня за работата на Яйой Кусама, световноизвестния художник, свързан с поп арт, минимализъм и полка точки.
Изкуството и неговото пространство в търговските индустрии е тема, с която играят Sagmeister & Walsh през цялата си работа и е интересно да видим как тази комбинация се превежда в мрежата. Тук има много анимации и интерактивни елементи на платно, които говорят на един и същ визуален език - симулация на карбонизация дори следва мишката на потребителя, докато се движи през уебсайта.
02. Произведено от малцина
Made by Few е ежегодна уеб конференция, организирана от Малцина , агенция за дизайн и разработка в Арканзас. Сали Никсън Подробните, ярки илюстрации се представят в мачхеда и описанията на високоговорителите и отнема малко време, за да разберете, че има повторение в тълпата, защото е толкова фино.
Докато изследвате сайта, има още изненади. „В„ Малко “обичаме приятните произшествия и насърчаваме проучването“, казва Арлтън Лоури, съосновател на „Малко“ и организатор на конференции. Придържайки се близо до тяхната философия на изследване, има скрити скъпоценни камъни, разпръснати из целия сайт (няма да ги раздаваме всички, но опитайте да ударите кода на Konami!).
Тези забавни елементи придават на сайта много личност, която Арлтън приписва директно на културата на агенцията. „Вярваме, че когато предоставяте на хората отворена и забавна среда, няма как да се каже какво ще се получи от нея.“
03. Всички птици
Allbirds е марка спортни обувки от страната с 29 221 344 овце. Започва, когато съоснователят Тим Браун наблюдава удивителните качества на вълната Merino и се чуди защо никога преди не е била използвана в обувки.
Уебсайтът, който е създаден с помощта на Shopify, смесва фотография на начина на живот с илюстрации. Резултатът е едно възхитително преживяване, което не просто разказва историята зад Allbirds, но и ви дава усещане за самия продукт.
„Той е проектиран да демонстрира невероятното внимание към детайлите и мисълта, които стоят зад нашия продуктов дизайн“, обяснява Браун в мотивите зад сайта. „Инвестирахме сериозно във фотография - и базираният в Ню Йорк фотограф за киви Хенри Харгрийвс - за да оживим сайта и да формулираме нашата мисия да правим по-добри обувки по-добър начин.“
Както Браун, така и Червена рога екипът говори за тяхната изключителна отдаденост към UX на сайта и как те са се навели в детайлите, които толкова често се пренебрегват. Светският раздел с често задавани въпроси е оживен с анимирани GIF файлове, а илюстрацията се използва в целия сайт като неочакван мотив за разказване на истории.
04. Карим Рашид
Дизайнерът Карим Рашид е толкова плодовит, колкото и празнуван. С над 3000 дизайна в производство и работа в 20 постоянни колекции по целия свят, може би не е изненадващо, че собственият му уебсайт бе на заден план през последните 10 години. Докато не поръча Антон и Ирен , това е.
Със своята търговска марка, обхващаща ангажиращи взаимодействия, емоционална типография и наистина агностични оформления на устройства, дуото предостави сайт, който приканва енергично проучване. Което беше, разбира се, целта: „Основната ни цел беше да покажем изобилието от продукти и проекти по визуално примамлив начин“, казват двойката в своя блог.
Това множество продукти също предизвика предизвикателство. Как се доставят над 5000 изображения с различни форми и размери в отзивчива среда? Решението: преосмисляне на конвенционални оформления и lo-fi подход към структурирането, за да се получи прецизна, гъвкава мрежа, комбинирана с удебелена (но ненатрапчива) типография.
Може би най-впечатляващото нещо в новия сайт на Рашид е безпроблемните преходи между изгледите. „Винаги проектираме всички екрани едновременно ... В момента, в който имаме идея за компонент или оформление, ние го изпробваме на всички екрани и проверяваме дали има смисъл от всички страни.“
05. Хистография
Хистография - израелски дизайнер и разработчик Убийте Stauber Проектът на последната година в Академията за изкуство и дизайн Bezalel - е интерактивен график, обхващащ не по-малко от 14 милиарда години, от Големия взрив до наши дни. Буквално разпростираща се върху цялата история на познатата вселена, тя е огромна, интерактивна инфографика, която оспорва нашите предубеждения за това как да общуваме със сложни теми.
Обхващайки теми, вариращи от литература и музика до убийства, изобретения и религия, хронологията на Хистография ни кани да изследваме събития от нашето богато минало, всяка динамично изтеглена от Уикипедия и представена на екрана като малка черна точка. Има два режима: хоризонтален изглед отляво надясно, който позволява на потребителя да се прибере в определен период от време; или подобна на спирала машина на времето, която представя кураторски списък с ключови събития.
Щубер казва, че винаги е бил очарован от идеята историята да се разгръща с течение на времето: „Хронологиите са най-популярният начин за визуализиране на историята и въпреки това усещах, че винаги са много ограничени. От началото на този проект знаех, че искам да създам времева линия, която не е ограничена до година, десетилетие или период. Исках хронология, която да съдържа цялата история.
06. На решетката
Макар и стресиращо за мнозина, преместването на офис също може да бъде чудесен източник на вдъхновение. Кога Хиперакт преместени в Gowanus, Бруклин, вълнението на екипа от откриването на скритите съкровища на новото им обкръжение доведе до превъплъщението на On the Grid: международен квартален наръчник, куриран от дизайнери.
Сайтът е минималистичен, но впечатляващ и беше „ проектиран да бъде силно структуриран, но същевременно игрив и динамичен, точно както съдържанието на сайта '. Безсмислената естетика избягва типичния капан за герои и използва чудесно прозореца за гледане дори при екстремни размери.
И тогава вниманието към детайлите. От анимираното лого до 100-те (и преброяващи) уникални градски илюстрации и прости анимации, On Grid очевидно не е просто поредния начин на живот в блога.
В своя блог Hyperakt обяснява как иска да създаде „надежден ресурс, който улавя истинската същност на местата, които обичаме, чрез красива фотография, откровени описания и курация, задвижвана от дизайна“. С повече куратори, които се присъединяват всеки месец, On Grid може скоро да дойде в квартал близо до вас.
07. LS Productions
LS Productions наскоро разшири своя хоризонт от снабдяване с чудесни локации (под прякора Местоположение Шотландия), за да се превърне в това, което в момента е най-голямата компания за производство на снимки и услуги за движение в Обединеното кралство. Брандирането и уебсайтът му са създадени от Единбургската агенция Пробел .
Старшият дизайнер Майк Брайънт казва, че приоритетът е да се остави работата на компанията да говори: „Те имат толкова невероятно портфолио, вариращо от снимки до движение, че основната ни задача беше да създадем структура, която допълва минимален тип с изображение.“ Този подход веднага се забелязва на началната страница, която обхваща широкото предлагане на компанията с подходяща комбинация от анимирана типография и видео.
Основните технически предизвикателства - свеждане до минимум времената за натоварване и управление на различни култури за висококачествени изображения - бяха преодолени чрез замяна на изображения с по-висока разделителна способност, когато е необходимо, и използване на JavaScript за динамично управление на височината и пропорциите на изображенията при различни размери на екрана .
Крайният резултат, казва Брайънт, е „оголен сайт, който използва модулни панели, изчистен тип и минимална цветова палитра, за да действа като фин фон за красивата работа“.
08. Господи
'Играта е по-стара от културата, тъй като културата ... винаги предполага човешкото общество и животните не са чакали човек да ги научи да играят.' Така започва Homo Ludens на Йохан Хуизинга, където авторът обсъжда въздействието на играта в обществото.
Елементът на играта е този, който Lordz, танцова академия със седалище в Швейцария, приема на сериозно. За Lordz танцът не е само движение; това е форма на изкуство, игриво средство за културна изява. Задачен да проектира сайт за академията, Eidenbenz / Zürcher използва този етос, за да насочва артистичната си посока.
„Искахме да създадем нещо, което се сблъсква с дигиталното преживяване със сърцето на Homo Ludens“, обяснява арт директор и партньор Даниел Цюрхер. „Игрив начин да получите представа за ежедневната практика на танците; движението, чувствата и т.н. За да постигнем това, използвахме най-новите технологии във филмирането, постпродукцията и, разбира се, програмирането. '
Резултатът е доста зашеметяващ; уникално разпознаваем и вдъхновяващ сайт, който наистина улавя сърцето на организацията чрез използването на видео - рядък подвиг в наши дни.
Следваща страница: Още 8 зашеметяващи примера на HTML
- 1
- две
Текуща страница: Страница 1
Следваща страница Страница 2
