Най-добрите дизайни на уебсайтове от 2019 г. досега

Направете го с Adobe Stock> Открийте безплатни шаблони

WordPress уебсайтове и нашият избор на най-добрите минималистичен дизайн на сайтове .

01. Фил Кофман

Блогът е с шрифт на ръкопис



Кофман е преработил своя блог, за да изглежда по-скоро като традиционно списание

Ако имахме лира за всеки път, когато чухме уеб дизайнер да казва „Наистина трябва да се заемем с препроектирането на моя блог“, щяхме да сме милионери. Така че шапка на Фил Кофман , дизайнер, живеещ в Остин, Тексас, в действителност. Но бонус, той също направи невероятно изобретателна и оригинална работа.

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

най-добрите графити в света

„Този ​​дизайн следва много предишни неуспешни опити“, признава той. „Проектирането за себе си е може би най-малкото ми любимо нещо. докато се боря масово от нерешителност и нереалистични очаквания, които си поставям. В крайна сметка тази концепция спечели, защото исках да се потопя отново в текстури, ръчно рисувани елементи и цялостна художествена насока, която е по-скоро лично списание, отколкото полирана публикация. '



Публикацията в блога е настроена в шрифтовете Neue Haas Grotesk и Miller

„След като научих, че Neue Haas Grotesk е достъпен от Adobe, Милър дойде бързо след като двата шрифта се сдвояват много добре заедно“, казва Кофман

Привеждането в действие на концепцията включва и някои технически предизвикателства, добавя той. „Отне малко опит и грешки, за да се получи текстурираният ефект, който изглеждаше така, както исках в заглавията на публикациите и черните линии“, обяснява Кофман. „Знаех, че CSS има способността да използва текста като изрязваща маска, но не бях отделил много време да копая как правилно да го извадя.“

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

Заключването на изображения също беше „забавно предизвикателство“ за Кофман. „Качих се на използването на CSS Grid, за да установя скелета за маркиране, бъркайки в шаблона на мрежата, за да ми дам достатъчно гъвкавост при позиционирането на фигурата и надписа на фигурата, като същевременно запазих същото съотношение на страните от мобилното оформление към работния плот.“

Публикация в блог в комбинация от шрифтове професор и Милър

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

Що се отнася до типографията, той се спря на Neue Haas Grotesk за заглавията и по-малките безсерифни елементи, Miller за основния текст и професор за ръкописния сценарий.

„Ключът към тази концепция е взаимодействието между ръкописния шрифт и sans и serif шрифтовете“, обяснява той. „Чувствах, че за да може ръкописният шрифт да работи, са ми необходими sans и serif, които са по-ясни или познати, а не такива, които имат много собствена личност.“

02. Булевата игра

Начална страница на булева игра

Тази забавна игра ви учи как да използвате булеви операции в Adobe Illustrator и други векторни инструменти

Булевата игра е забавна браузърна игра, която ви учи как да използвате булеви операции в Adobe Illustrator, Sketch, Figma и други векторни редактори. Създател Марк Макей обяснява как се е получило.

„Изграждам дизайнерски игри от няколко години и подсъзнателно събирам неща, които ми се струва предизвикателно да превърна в образователни игри“, казва той. „Тази идея се носеше от известно време и тогава видях, че paper.js има библиотека, която да ги изпълнява: математически това далеч надхвърля възможностите ми. Затова направих бърз тест и видях, че може да бъде забавно. '

Докато paper.js върши тежката работа на вектора за сайта, MacKay също използва anime.js за анимациите, growler.js за звука и d3-color за управление на цветовата схема.

Начална страница на булева игра

MacKay използва paper.js, anime.js, growler.js и d3-color за изграждане на сайта

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

И интересното е, че тези три месеца го научиха на някои важни уроци за използването на dev tools.

Начална страница на булева игра

Основното предизвикателство беше да накараме играта да работи на всички устройства

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

„Казвам това, защото преди се чувствах неадекватно, тъй като не познавах React, NPM, тестване,„ най-добри практики “и т.н. Сега разбирам, че трябва да оптимизирам за собствения си поток и удоволствие. Инструментите и практиките на разработчиците са ориентирани към надеждност, сътрудничество и модулност, които са много различни ограничения. '

03. Експериментът с Гиленхал

Визуализация на данни за правописни грешки на Бритни

Този сайт използва данни от Reddit, за да визуализира колко зле сме в изписването на имена на знаменитости

Един от най-добрите примери за визуализация на данни, които сме виждали от известно време, Експериментът с Гиленхал е идеята на Ръсел Голдънбърг и Мат Даниелс от дигитални публикации Пудингът .

„Видяхме тази история за анализа на Колин Морис за самоидентифицирана грешка в Reddit “, обяснява Голдънбърг. „И мислех, че може да се направи още нещо с идеята да се визуализира потокът на това как хората пишат.“

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

Текстово поле с покана за правопис

Създателите искат да направят нещо интерактивно, което да показва обратна връзка в реално време за правописните потоци

Двойката разчита на JavaScript и предимно на библиотеката D3.js за по-голямата част от визуализацията, както и използва Firebase за съхранение на потребителски резултати.

„Най-голямото предизвикателство досега беше изобразяването на диаграмите на потока“, казва Голдънбърг. „Въпреки че технически това е диаграма на sankey, трябваше да направим много персонализирани неща, за да накараме пътищата да се изобразяват правилно и да не се припокриват.“

Визуализация на данни за правописни грешки на Матю Макконъхи

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

В хода на изграждането на сайта най-голямата изненада беше да научите колко много различни начини хората пишат имена. „Имаше над 800 начина, по които хората се опитваха да изписват например Матю Макконъхи.

„От гледна точка на разработката имаше много потребителски потоци, които трябва да се разгледат, от всякакви вариации до това как те могат да отговорят на въпрос, до обработка на различни състояния (напр. Върнаха ли се на сайта, след като вече отговориха?). Познаването на всички възможни състояния преди време беше от решаващо значение за гладкото развитие и проектиране. '

04. JSConf 2019

Начална страница на JSConf 2019

Този конферентен сайт се фокусира върху основите и ги прави блестящо

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

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

Снимка на участниците в JSConf 2019

Malte Ubi положи всичко, за да направи този „най-бързият уебсайт за конференции в света“

Плюс това е бързо - супер бързо. Като Малтийски ubl обяснява в тази публикация в блога : „Прекарах напълно неразумно много време, опитвайки се да го направя най-бързият уебсайт за конференции в света.“ (Той не е сигурен дали е успял, но досега никой не е обезсилил иска му).

Помага, че Ubi е създателят на AMP, библиотека на уеб компоненти за създаване на надеждно бързи уебсайтове. Той използва уебсайта jSConf като своя детска площадка, за да изпробва нови техники; и те със сигурност изглежда са работили; сайтът работи прекрасно на всяко устройство, на което сме го изпробвали.

Можете да се потопите дълбоко в умните начини, по които Ubi е постигнал това, от оптимизиране на производителността на шрифтовете до изчезване на мъртъв код, тук .

05. Дизайн заглавия

Начална страница на дизайнерските заглавия

Този весел сайт пародира безсмислени заглавия на длъжността с точност без усилие

Кой казва, че уеб дизайнът не може да бъде забавен? Не Xtian Miller и Борис Кроутер , които са създали този весел генератор на длъжности, Дизайн заглавия , което пародира някои от по-глупавите монитори, които някои уеб дизайнери изглежда изчезват в наши дни.

Що се отнася до дизайна, това не е сложен сайт: той прави едно нещо и го прави много добре и за това може да се каже ужасно много.

„Наистина започна като вътрешна шега“, обяснява Милър. „За добро или лошо, заглавията в рамките на творческата индустрия са развили живачен характер, което води до непоследователност в тяхното определение, тъй като те непрекъснато се развиват.

Начална страница на дизайнерските заглавия

Сайтът е изграден на основата на статични HTML, CSS, JS, Gulp и Sass

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

Сайтът е изграден със статични HTML, CSS и JS, с Gulp за автоматизация на работния процес на разработка и Sass за CSS предварителна обработка. Функцията и алгоритъмът на генератора са направени изцяло от нулата във Vanilla JavaScript.

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

Начална страница на дизайнерските заглавия

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

Изглежда мъдро, дуетът, който бяхме вдъхновени от Международния типографски стил, но по-точно системата за проектиране на метрото на Vignelli в Ню Йорк за оформление и типография.

„Когато се впуснете в този стил, вие донякъде осъзнавате влиянието, авторитета и обективността зад него, което според нас беше иронично за цялата тази концепция“, казва Милър.

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

06. Капитан Марвел

Начална страница на капитан Марвел

Никога не сме осъзнавали колко много сме пропускали неонови цветове и сиреневи шрифтове

Най-новият филм на Marvel, Капитан Марвел , се провежда през 90-те години и така този весел промоционален сайт пресъздава перфектно вида и усещането за това как изглеждаше мрежата през това десетилетие.

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

Има дори автентична игра „Spot the Skrull“, която ви моли да решите дали някой е човек или маскиран извънземно променящ формата си извънземен. Да, деца, това беше най-модерната промоция на филми в края на 20-ти век.

Ние обичаме това там

Харесва ни, че има брояч и книга за гости!

Разбира се, под капака сайтът не е напълно автентичен. Докато директорът на софтуерното инженерство на Marvel Лори Ломбърт се шегува, че „Създадохме това във FrontPage и го хостваме Angelfire“, той всъщност е конструиран с помощта на съвременни CSS и JavaScript, така че браузър от 1995 г. като Netscape Navigator не би знаел какво да прави с него. Да не говорим, че размерът му от 10 МБ щеше да отнеме цяла вечност, за да се изтегли чрез комутируем достъп чрез зловещ AOL модем.

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

Прочетете още: