Инди Веб

Каждый из вас хотя-бы раз в жизни задумывался о том, чтобы создать свой собственный сайт. Наверняка вы даже открывали туториалы по HTML и CSS и знаете простые теги типа <h1>, <p>, <div>. Вы примерно понимаете с чего можете начать, но совершенно не представляете что можно в итоге сделать. Как будет выглядеть ваш сайт? Какие там могут быть разделы? И самое главное - как можно творчески раскрыть тему пиксельарта в сайте? Как сделать пиксельное оформление и интерфейс? В этой статье не будет туториала по "коду" и технической части тем более, что любая нейронка может вам собрать сайт буквально за один запрос. Процесс обучения в творчестве проходит не через повторение туториалов, а через просмотр примеров и попытки проанализировать и повторить увиденное. Поэтому покажу вам несколько инди веб сайтов с пиксельным оформлением или пиксельными вайбами.

https://peachlantern.neocities.org/

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

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

В левой колонке - кнопки навигации. Обычно там есть домашняя страница, блог, арты, фотки, ссылки, и гостевая книга. В данном случае разделов гораздо больше, есть ещё портфолио, о себе, подарки и так называемые "клики" (Clique). В русском языке это слово используется в негативном контексте, но в инди вебе оно означает группу или сообщество. Чтобы стать участником клики нужно нарисовать арт по шаблону и организатор добавит его на общую страницу. По сути это то же самое что и наши коллабы.

Я потом ещё расскажу подробнее про клики, сообщества, группы, веб ринги и другие виды объединений в инди вебе.

Рассмотрим теперь правую колонку. Там список последних обновлений и ToDo лист. Иногда туда ещё добавляют всякие виджеты, каленари, часы, счётчик посетителей, тамагочи, и "блинки".

Блинки — это крошечные анимированные гифки размером 150 на 20 пикселей, которые используются в качестве бейджей для обозначения интересов и для шуток! Они были популярным украшением персональных сайтов и страниц в Myspace в начале 2000-х, в эпоху Geocities.

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

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

https://pixelglade.net.au/

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

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

Ещё у этот автор создал вебринг для пиксельартеров.

https://pixscae.neocities.org/

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

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

https://grim-art.neocities.org/

Это пример сайта, который выполнен полностью в пиксельарте, каждый элемент интефейса, каждое окно, каждая буква и даже слайдеры - всё пиксельное. Причём в дизайне используется строго четыре цвета и это выглядит очень стильно и минималистично не смотря на то, что тут используется стандартный шаблон из трёх секций. Но к сожалению это одностраничный сайт, вкладка Games ведёт на аккаунт в itch.io а вкладка Artwork - на аккаунт в lospec.com. Надёюсь это только начало и автор доделает все вкладки, возможно даже создаст блог и не забросит сайт.

https://lunacero.neocities.org/

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

https://foxfable.neocities.org/

Тут у нас сайт от пиксельартера из Финляндии. Первое что бросается в глаза это фон, который занимает больше половины пространства на экране. Само содержание сайта при этом расположено в небольшом окошке по центру. Тут тоже есть колонки и разделы, но они расположены немного необычно - например вся колонка слева посвящена полностью пиксельарту при этом в разделах справа тоже есть "Галерея" и там тоже пиксельарты. В целом цвета хоть и яркие, но достаточно хорошо сочетаются из-за этого сайт выглядит приятно. Но мне не очень нравится когда оставляют так мало места на основной контент, приходится приближать такие сайты и зачастую у них шрифты меньше чем у обычных сайтов. А ещё такие сайты невозможно смотреть на телефонах они никак не масштабируются.

https://macrowdev.neocities.org/

Этот сайт похож своей концепцией на сайт от Grim Art. Тут тоже ограниченная палитра в 4 цвета, тоже раздел с артами ведёт на страницу в lospec.com. Но есть несколько моментов которые делают сайт гораздо живее и интереснее. Во-первых это подвижные элементы - сверху танцует ворона в короне, слева левитирует картинка с воронами, внизу бегущая строка с историями из жизни про ворон. Во-вторых элементы расположены немного хаотично - нет чёткой сетки, нет деления на отдельные колонки, нет обложки вверху, некоторые элементы перекрывают друг на друга, некоторые немного повёрнуты. Все эти незаметные мелочи создают приятную, динамичную, живую композицию и при этом не превращаются в кашу и отлично дополняют друг друга. К сожалению на этом сайте нет блога или девлогов, скорее всего этот сайт сделали один раз и потом ни разу не обновляли. Несмотря на это, он очень крутой.

https://mudflower.earth/

Тут у нас один из самых интересных и проработанных сайтов. Он разрабатывается с 2004 года и выглядит очень уютно и красиво. Слева растёт дерево, а вверху на ветках растут фрукты и развешаны игрушки, справа тоже висят разные штуки. Каждый из этих предметов кликабельный и ведёт на соответствующие разделы. Там к сожалению нет раздела с артами или блогом, но зато есть кое-что более интересное. Например раздел "спальня":

Там буквально нарисована спальня и нажимая на определённые объекты можно открывать подразделы. Например нажав на стол, открывается информация "о себе", а нажав на кровать можно почитать дневник снов.

Ещё есть раздел "коробка с игрушками":

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

Далее раздел "книжная полка":

Это интеграция сайта https://bearblog.dev/ тут есть книги и в каждой книге - небольшие записки с соответствующей темой. Например в книге "code scraps" заметки по разным HTML тегам, как они работают, где использовать и т.д.

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

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

https://louispretends.com/

Перейдём к следующему сайту. Это у нас красивая, качественная страничка пиксельартера. Могла бы быть, но к сожалению автор забросил свой сайт в прошлом году судя по апдейтам. Тем не менее дизайн выглядит стильно и на главной странице сразу большая пиксельная анимация парящих островов. Если сайт подразумевался как портфолио которое не стыдно показать заказчикам, то он работает на 100%. Ну по крайней мере мог бы работать.

https://cloud-online.neocities.org/

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

https://pixeldew.nekoweb.org

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

Из интересного могу отметить разделы "Фото" и "Музыка". В разделе с фотками добавлены посты из инстаграма напрямую, а в разделе с музыкой виджеты из саундклауда.

Я такое раньше не видел на других инди сайтах, но вообще знал об их существовании. Кстати у телеграмма тоже есть такие встраиваемые виджеты, которые вы можете добавить на свой сайт.

https://rosedryad.com/

Просто интересный стиль розового рабочего стола. Сайт полностью пиксельный от рамок до шрифтов. Но слишком много пустых мест как по мне. Из интересного только то, что автор разрабатывает моды на Stardew Valley и Майнкрафт.

https://lostletters.neocities.org/pixel-clubs/

Это не совсем пиксельный сайт и дизайн тут не примечательный, но в разделе "webcore" очень много полезной инфы об инди вебе и пиксельарте. Например список Пиксель клубов с объяснением что это вообще такое или раздел "toy box" в котором есть объяснение почему он есть почти на всех сайтах.

https://seeone.neocities.org/

Самый пиксельный сайт от самого пиксельного пиксельартера. Вкладки тут сделаны в виде полноразмерных карточек. В разделе артов очень много пиксельартов, больше чем у всех предыдущих авторов. И самый прикол - это "Pickle Cards"

Это буквально интерактивный коллаб точь-в-точь как я делал в папке. Только этот сделан на сайте а не в миниапе и ссылки на авторов ведут в блюскай а не в тг. И причём сами карточки нарисованы круто и все участники очень скиловые.

https://velvetmoth.neocities.org/

Очень необычный начальный экран. Просто стена с картинами в рамке и каждая рамка открывает свой раздел. Из минусов - разделы откываеются в маленьком окошке по центру.

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

https://donjon.neocities.org/home

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

https://cherriford.com/

Ещё один сайт в стиле поинт энд клик квеста.

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

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

https://kickedinteeth.neocities.org

Максимально простой сайт. Тут нет никаких разделов. По сути это просто галерея пиксельартов с описанием. В правой колноке есть описания и стрелочки для перелистывания артов, а слева видны сами арты. Вариант для тех кто не хочет писать ничего о себе или своих проектах, а просто красиво и эстетично показать пиксели.

https://lintnaya.com/deepdive

Тут вообще нет ничего, что напоминало бы сайт, но это сайт. Тут объекты кликабельные и ведут в разные разделы. Из интересного - есть раздел с артами в котором достаточно красивые пиксельарты.

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

https://irony-machine.neocities.org/

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

https://ellesho.me/page/

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

Главная героиня идёт в то место по которому ты кликаешь мышкой. Если нажать на котика с вопросом на лбу то открывается туториал.

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

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

Ещё на полу есть старый стационарный телефон. Там можно набрать любые три цифры и откроется сайт по этому номеру. Принцип работы можете посмотреть вот тут https://internetphonebook.net/dial/

Кстати, если вы откроете этот сайт ночью как я. То персонаж будет спать в кровати и кнопки не будут работать пока вы не включите свет.

Итог

У меня осталось ещё много сайтов, про которые я не рассказал. Так что если эту статью кто-нибудь увидит и прочитает, то я выпущу вторую часть. На многих сайтах есть авторские туториалы по HTML и CSS и общие советы по созданию своих сайтов. Можете начать с обычной визитки в которой просто будут перечислены ссылки на ваши соц сети, потом добавить портфолио, потом завести блог если понравится. Надеюсь примеры которые я вам показал вас вдохновили.