webdesignbasics | Unsorted

Telegram-канал webdesignbasics - основы веб-дизайна

2857

tg artist @pochitat_design @podplasch

Subscribe to a channel

основы веб-дизайна

#reference
https://julia-heuer.com/

ладно, на самом деле, вот этот хотел показать

клевый логотип (все варианты. и на главной и в меню и в подвале). клевая полоска серой тени внизу страницы с коллекцией. в ней вроде и нет функциональности никакой, но все равно выглядит приятно. клевое кислотное размытие выбранной фотографии на карточке товара. и забавно, что по клику оно перепрыгивает не сразу на то, что кликнули, а переходит по очереди. и сам лейаут карточки тоже интересный, можно его в коллекцию товарных карточек (надо бы уже создать такую). шапка с корзиной в стиле старого 032c или theface, но это нормально

Читать полностью…

основы веб-дизайна

#reference
https://tintlibrary.org/

ну стилек

Читать полностью…

основы веб-дизайна

#reference
https://www.sitterwerk-katalog.ch/

вот это интересно. сайт каталог художественной библиотеки фонда Sitterwerk, что где-то в глубинке Швейцарии. который, как мы узнаем из инфо, содержит около двадцати пяти тысяч книг по искусству, архитектуре, материаловедению и ремеслу. а так же материальный архив на две с половиной тысяч физических штук различного типа и происхождения. и плюс еще отдельно коллекция постеров и всякого такого

но интересует нас, конечно, не сам фонд (к сожалению), а сайт и то, что на нем повторяется структура полок и шкафов с ящиками, какие они в реальности, для удобства поиска. инфо также говорит, что у них специальная система камер и каталогизации, которая позволяет в реальном времени показывает где то, что ты ищешь и то, что стоит на полке рядом с этим

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

есть, конечно, и к чему придраться. например, не хватает просмотра фоток крупно и нет возможности переключаться между тем, что выдал поиск на самой схеме. но главное все выглядит симпатично

Читать полностью…

основы веб-дизайна

собрал папку каналов не про диз, диз надоел, делюсь

/channel/addlist/o-uvkukPc7o3M2Ni

Читать полностью…

основы веб-дизайна

#reference
https://zereraofficial.com/

коллажная сетка (колонки без гаттеров). игривое чередование товарных медиумов (обтравка, живые фото, трехмерные фигуры). один размер текста, намеренно заниженный (10px) и примитивная типографика по углам. клевый анимированный логотип

Читать полностью…

основы веб-дизайна

#reference
https://kunstverein-leipzig.org

клевая механика с плавающими пинами кастомайза страницы. а вот медленная анимация раскрытия не очень

Читать полностью…

основы веб-дизайна

https://codepen.io/plashch/pen/WNPjxzw

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

Читать полностью…

основы веб-дизайна

#reference #portfolio
https://www.systemantics.net

еще сегодня у меня для вас клевый бесшовный переход с главной на страницы и обратно. уже в коллекции

Читать полностью…

основы веб-дизайна

#reference
https://vol3.temporaryliveness.org/

симпатичный эффект. в продолжение темы ecologies.online. с разницей в том, что на вид проще, а технически сложнее. потому что, если там катающиеся по скроллу туда-сюда текстовые блоки целиком, то здесь каждое отдельно слово обернуто в собственный контейнер с заданной траекторией анимации. даже не представляю как и на чем это было сделано

Читать полностью…

основы веб-дизайна

феминитивы

я против феминитивов. и не потому, что там с ними что-то не так, а потому, что два слова обозначающих одно и тоже хуже, чем одно слово. это факт. и все тексты сейчас с этими дизайнеро_к, дизайнера/ку, дизайнер(а)ку выглядят, как пиздец. и не понятно, какую проблему это решает. если пол, гендер или самоидентификация не важны, то зачем обязательно перечислять? а если перечислять, то почему только его или ее?

чтобы никому не было обидно, предлагаю избавиться от гендерных окончаний вообще. и использовать что-то общее и нейтральное, например, я/ю. ‘я — веб-дизайня’ или ‘ищем в команду дизайню’. одно слово для всех и никаких уродских конструкций

Читать полностью…

основы веб-дизайна

сто собрал и пока хватит. отсортировал по годам еще. и отдельно заботливо собрал фаундрисы и просто магазы, где я все это находил. пока собирал, забыл зачем я это затеял, но

https://www.are.na/plashch-plashch/fffffffont

Читать полностью…

основы веб-дизайна

#reference
https://www.vereja.com/

но мой фаворит на сегодня это верея́. ярко, нескучно, клевые иллюстрации. есть не только одежда, но и какой-то лор со вселенной и персонажами. очень нравится

Читать полностью…

основы веб-дизайна

#reference
https://engconcept.com/collections/all/

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

Читать полностью…

основы веб-дизайна

liuba.liouba

приятные штуки. как я понял это с курса creative.coding.class слышал о нем только хорошее

Читать полностью…

основы веб-дизайна

#reference #portfolio
http://susulee.nl

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

Читать полностью…

основы веб-дизайна

#reference
https://ojas.nyc

тоже почему нет

Читать полностью…

основы веб-дизайна

из личного. на днях наконец-то купил себе кольцо. от британских ребят heresy (одежда мне их тоже нравится). и очень этому рад. давно хотел накупить себе колец и долго искал что-то интересное. но, несмотря на то, что вокруг будто бы полно локальных ювелиров, как-то прям интересного чего-то среди них не нашел. сравнимого с тем, например, что можно увидеть на каком-нибудь apoc store. разве что alexanderkarpinsky делает что-то такое экспериментальное, что могло бы там продаваться. как-то грустно от этого. но, так или иначе, теперь у меня есть хотя бы одно кольцо

Читать полностью…

основы веб-дизайна

докинул еще в папку @todaywewilldraw. он про скоростные наброски. каждый четверг в 19:00 авторка выбрасывает пачку картинок на общую тему, которые нужно быстро зарисовать, типа пять минут на каждую. забавная тема. к своему стыду ни разу еще не попробовал. но все обещаю себе

Читать полностью…

основы веб-дизайна

брутализм или вебпанк

сейчас принято все, что нарочно пытается выйти за рамки устоявшихся уже ux паттернов и как-то сломать привычное называть брутализмом. и это нормально. все понимают, о чем речь. можно так и называть

но если кому-то хочется покопаться, то можно начать с известного факта, что термин брутализм пришел из архитектуры, а название происходит от французского beton brut (сырой бетон) и не особо связано с анг brutality (жестокость). но и сама философия архитекторов бруталистов была не столько про перелом устоявшихся норм (хоть и ломала), сколько про ‘форма следует за функцией’ и про красоту чистых необработанных материалов. и, тем более, никогда не была против системы. большинство бруталистичных зданий это муниципалитеты и соцжилье. да и в целом весь модернизм был про тотальную систематизацию всего, что окружало человека

и если это переносить на веб в чистом виде, то, конечно, сюда ближе примеры, как artpapereditions.org. работа с дефолтными стилями, минимум заигрываний с лейаутом, максимум функции

вебпанк, напротив, тоже за время своего существования (где-то со времен тамблера) успел обрасти какими-то приписываемыми ему стилистическими приемам. например, отсылки к ютукей, гличи, яркие градиенты и неоны. но оригинальная идея, в предложении альтернативы существующему, не изменилась. об этом говорит даже то, что про него нет статьи на википедии. то есть никто еще пока не формализовал какие-то правила и признаки по которым что-то можно называть вебпанком, а что-то нет

поэтому, кажется, что все, где предлагается какая-то нестандартная верстка, ломаная сетка, альтернативные механики и всяческое нарушение правильности корректнее относить к вебпанку. главное правило, что все это должно быть неслучайно и что дизайнер осознанно так решил сделать. и поэтому, кажется, что и kunstverein-leipzig.org и zereraofficial.com ближе сюда

еще, как вариант, и в первом и во втором случае можно использовать приставку нео. необрутализм и неопанк. подчеркивая, что это уже другое. тоже почему нет

а еще иногда вспоминаю дадаистов и дадаизм, но эти отрицали вообще все, в том числе и функцию. а сайт вообще без функции представить сложно. на ум приходит только сайтмем с пожилой женщиной на электроскуторе https://jon-l.com/infiniteroll/

в общем, делайте выводы, но не спорьте со мной, а то удалю комментарии

Читать полностью…

основы веб-дизайна

#reference
https://artpapereditions.org

крупные картинки. базовые цвета. нарочито примитивные элементы, верстка и сетка

Читать полностью…

основы веб-дизайна

платная подписка на меня
/channel/+a0Fg0x0xpwAwYWJi

создал, пару месяцев как, отдельный канал, куда сохраняю весь интересный неформат: обрывки своих мыслей, мемы, цитаты. сохраняю для себя, чтобы потом возможно что-то с этим сделать, но в основном просто чтобы не потерять

одному там скучно, поэтому открываю на него подписку. но так как там много личного и так как мне не нужно много свидетелей моего безумия, подписка платная. пока пять евро в месяц. еще могу пообещать честно отвечать на все вопросы и не удалять комментарии

основы и напочитать останутся бесплатными и без рекламы, как и были. у меня все

Читать полностью…

основы веб-дизайна

#reference
https://anqimeng.github.io/notabook/

но самое любопытное на сегодня, это, как я понял, просто случайный студенческий проект посвященный поиску нового ридинг экспириенса. и он прекрасен. и лейаут, и проявляющиеся заголовки по ховеру на главной, и экраны внутри разделенные колонкой с навигацией по статьям. любовь

Читать полностью…

основы веб-дизайна

еще из похожего, что мне попадалось раньше: https://katrinkrumm.de/ и https://never-ready.hfbk.net/

Читать полностью…

основы веб-дизайна

@pochitat_design

тем временем перечитал все, что накопилось и отобрал новое напочитать на этой неделе

Читать полностью…

основы веб-дизайна

комплекс фотографа

у меня нет, как мне кажется, комплекса самозванца. то есть то, что от меня требуется на моей основной работе в Афише я делаю вполне, вроде как. но есть, я бы его назвал, комплекс фотографа. такого обычного, который по улицам ходит, что-то подмечает и снимает, но сам ничего, как будто, не создает. кажется, что со времен, когда я активно путешествовал мало что поменялось, только улицы и города сменились различными медиа (про дизайн и не только) и ареной. и есть ощущение, что это не конвертируется в то, куда бы я хотел прийти в итоге. это не про какое-то конкретное место, а скорее про ощущение от себя. что что-то создаю, а не только подмечаю

и что с этим делать непонятно. искать всякие интересные штуки мне нравится и делиться этим нравится. отказываться от этого и заставлять себя не хочется. пробовал, не работает. и как быть? может со временем, когда уже не останется ничего, что могло бы меня удивить, как-то все само произойдет

Читать полностью…

основы веб-дизайна

а лучший мерч все еще у андердога. хочу

Читать полностью…

основы веб-дизайна

#reference
https://balestraroma.com

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

Читать полностью…

основы веб-дизайна

и к спору о том, кого считать художником, а кого дизайнером. для себя, всех творческих ребят я разделяю на три категории (а не две). художники, áртисты (художники-оформители) и дизайнеры. кажется, так все встает на свои места. различие в мотивации

художники делают что-то свое и для себя. не особо переживая за тренды и нужно ли их творчество кому-то. главное, что есть что-то внутри, что требует выхода. деньги далеко не на первом месте

áртисты создают что-то свое, но с прицелом на рынок. для них главный кайф поработать с кем-то известным: заколлабиться с брендом, оформить обложку для репера или упаковку зубной пасты. главное в своем стиле и чтобы на этом можно было бы заработать. и если не деньги, то долю узнаваемости

а дизайнеры делают что-то для кого-то строго по часовой оплате и страдают от того, что они не первые и даже не вторые

конечно, не каждый дизайнер мечтает стать художником. это вообще необязательно. но по моим наблюдениям, тот, кто не мечтает найти свой стиль или научиться транслировать себя через свои работы, тот и как дизайнер растет слабо. возможно как менеджер, фрилансер, коуч, админ канала, но не как дизайнер

Читать полностью…

основы веб-дизайна

#reference
https://oppenstudios.com

клёвые сдвиги. почти как у ghostly только с анимацией. давно не пополнял свою коллекцию интеракшенов. радостно

Читать полностью…

основы веб-дизайна

#reference
https://www.bylinebyline.com

как хорошо то. и фотографии и типографика и наклончики и верстка и монохром на главной и преключение схем и стилек в целом. шрифт шикарный на самом деле. рандомайзер выбора статьи прикольный. порисовать можно. любовь

Читать полностью…
Subscribe to a channel