Сайты простые: Простые сайты снова в моде. Минимализм возвращается / Хабр

Содержание

Простые сайты снова в моде. Минимализм возвращается / Хабр

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

Такая ситуация напрягает и самих веб-разработчиков. Приходится тратить кучу времени на оптимизацию, тестирование новомодных фич в разных браузерах, осваивать сложные CMS. Зачем? На самом деле HTML и CSS — исключительно мощные инструменты, если ими умело пользоваться.

Сайт в одном файле

В реальности вообще весь сайт вообще можно поместить в одном HTML-файле. Вот пример. Про то, как создать свой личный «Архив интернет», мы писали тут.

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

Однако в реальности все разделы находятся на одной странице. Просто не видны сразу. Каждая ссылка ведёт на сноску #anchor.

<a href="#home">Home</a>
<a href="#about">About</a>

Селектор :target скрывает и отображает разделы, когда пользователь кликает по ссылкам. Создаётся иллюзия перехода по веб-страницам.

section:target { display: block; }

Можете скачать чистые index.html и style.css и приспособить для своих нужд. Например, добавляем раздел с контактной информацией:

<section>
Почта:
Телеграм:
</section>

И ссылку на новый раздел:

<a href="#contact">Мои контакты</a>

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

Отличный хак, правда? Получается что-то вроде SPA, но на классическом стеке и без JS.

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

Примечание 2. Формально этот сайт состоит из нескольких файлов: есть ещё CSS и картинки. Но это лишь формальность, потому что никто не мешает их встроить в основной HTML-файл как блобы.

Задержки

Кстати, о задержках. Вот интересная табличка с временем отклика в компьютерах 1977-2017 гг (задержка между нажатием клавиши и отображением символа в консоли).

Компьютер	Отклик (мс)	Год	Тактовая частота	Кол-во транзисторов
Apple 2e	30	1983	1 МГц	3,5 тыс.
TI 99/4A	40	1981	3 МГц	8 тыс.
Haswell-E 165 Гц	50	2014	3,5 ГГц	2 млрд
Commodore Pet 4016	60	1977	1 МГц	3,5 тыс.
SGI Indy	60	1993	0,1 ГГц	1,2 млн
Haswell-E 120 Гц	60	2014	3,5 ГГц	2 млрд
ThinkPad 13 ChromeOS	70	2017	2,3 ГГц	1 млрд
iMac G4 OS 9	70	2002	0,8 ГГц	11 млн
Haswell-E 60 Гц	80	2014	3,5 ГГц	2 млрд
Mac Color Classic	90	1993	16 МГц	273 тыс.
PowerSpec G405 Linux 60 Гц	90	2017	4,2 ГГц	2 млрд
MacBook Pro 2014	100	2014	2,6 ГГц	700 млн
ThinkPad 13 Linux chroot	100	2017	2,3 ГГц	1 млрд
Lenovo X1 Carbon 4G Linux	110	2016	2,6 ГГц	1 млрд
iMac G4 OS X	120	2002	0,8 ГГц	11 млн
Haswell-E 24 Гц	140	2014	3,5 ГГц	2 млрд
Lenovo X1 Carbon 4G Win	150	2016	2,6 ГГц	1 млрд
Next Cube	150	1988	25 МГц	1,2 млн
PowerSpec G405 Linux	170	2017	4,2 ГГц	2 млрд
Пакет вокруг света	190
PowerSpec G405 Win	200	2017	4,2 ГГц	2 млрд
Symbolics 3620	300	1986	5 МГц	390 тыс.

Результаты отсортированы от самых быстрых к самым медленным. Если несколько ОС на одном компьютере, то название ОС отмечено жирным. В случае, когда тестировались разные частоты, текущая частота указана курсивом.

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

То же замедление интерфейсов происходит на мобильных устройствах (здесь замеряли отклик прокрутки в браузере):

Устройство	Отклик (мс)	Год
iPad Pro 10,5″ Pencil	30	2017
iPad Pro 10,5″	70	2017
iPhone 4S	70	2011
iPhone 6S	70	2015
iPhone 3GS	70	2009
iPhone X	80	2017
iPhone 7	80	2017
iPhone 6	80	2014
Gameboy Color	80	1989
iPhone 5	90	2012
BlackBerry Q10	100	2013
Huawei Honor 8	110	2016
Google Pixel 2 XL	110	2017
Galaxy S7	120	2016
Galaxy Note 3	120	2016
Nexus 5X	120	2015
OnePlus 3T	130	2016
BlackBerry Key One	130	2017
Moto E (2G)	140	2015
Moto G4 Play	140	2017
Moto G4 Plus	140	2016
Google Pixel	140	2016
Samsung Galaxy Avant	150	2014
Asus Zenfone3 Max	150	2016
Sony Xperia Z5 Compact	150	2015
HTC One M4	160	2013
Galaxy S4 Mini	170	2013
LG K4	180	2016
Пакет	190
HTC Rezound	240	2011
Palm Pilot 1000	490	1996
Kindle Paperwhite 3	630	2015
Kindle 4	860	2011

Для справки указано время путешествия пакета данных по интернету из Нью-Йорка обратно в Нью-Йорк через Лондон и Токио.

I can send an IP packet to Europe faster than I can send a pixel to the screen. How f’d up is that?
— John Carmack (@ID_AA_Carmack) April 20, 2012

На самом деле пользователю всё равно, на каком фреймворке сделан сайт и какие красивые там анимации. Если из-за этого появляются лаги и джиттер — это уже не прогресс, а деградация UI.

Для коммерческого сайта каждые 100 мс задержки означают потерю аудитории. Добавили красоту — потеряли деньги. Прямая зависимость.

Ожирение всего

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

This is, in real time, how long it takes for Google Inbox running in Google Browser to open an email. Not the shortest one, but still, it’s just text and pictures! Go Web Stack go! pic.twitter.com/CvqsFiIUuc
— Niki Tonsky (nikitonsky) February 28, 2018

Типичные примеры — Electron и React Native Desktop, «революционные новые способы» разрабатывать десктопные приложения, которые бесконечно пожирают память, тормозят и крашатся. Посмотрите на Slack, Viber, Skype и так далее… В реальности это не прогресс, а скорее деградация UI.

Единственное преимущество Electron и React Native Desktop — что даже двухлетний ребёнок может сляпать простое приложение. Речь идёт об удешевлении разработки. Другими словами, миграция на Electron — это решение менеджера, а не инженера. Экономическая логика, а не приоритет качества. Из разряда запланированного устаревания техники, пластиковой посуды и «Идиократии». Ну что же делать, если так выгоднее.

Что тут говорить, если просто обновление Windows занимает восемь часов! Что-то абсолютно невероятное.

За это время можно полностью отформатировать SSD, установить свежий билд с нуля — и ещё останется семь с половиной часов свободного времени.

Система Android без приложений занимает примерно 6 ГБ. Приложение клавиатуры Google съедает 150 МБ. Для сравнения, вся ОС Windows 95 занимала всего 30 МБ.

То же самое происходит в вебе, где поверх HTML нагромоздили несколько уровней абстракции. Node, NPM, Webpack, Babel, фреймворк для разработки SPA, фреймворк CSS, транспилятор CSS, приложение для запуска тестов, библиотека функций тестирования и ещё куча всяких мелочей — минимальный стартовый набор самых необходимых инструментов, чтобы запустить простенький сайт с небольшой интерактивностью. И мы ещё не говорим о безумии с контейнерами, которое начинается при попытке внедрить API. Куча сложных инструментов создавались для того, чтобы упростить разработку. Как мы дошли до такой жизни?

Раньше простенький сайт писали за пять минут в блокноте.

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

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

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

Дошло до того, что появились консультанты, специализация которых — удаление JavaScript с сайтов. Жизнь сразу становится лучше в 99% случаев, если всё переписать с нуля без лишнего мусора.

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

Сайт web0

А вот сайт в стиле web0, написанный на базовом HTML. Простая страничка размером 2 КБ. Но её авторы надеются, что «web0» станет новым трендом.

Вы спросите, что это за стиль такой «web0»? Такого термина раньше не существовало. Действительно, он появился только в 2021 году, после появления хайпа вокруг web3.

Конечно, в этом есть своеобразная ирония…

Ведь что такое web3? Децентрализация, пиринг, бессерверные протоколы, самохостинг — это и есть та самая основа, на которой создавался Интернет изначально. Электронная почта, торренты, IRC, RSS — всё это появилось во времена «web0», а сейчас продаётся в новой упаковке как web3. Да что там говорить, на рынке уже появились криптовалютные проекты типа BBS Network и RSS3. Станции BBS и фиды RSS — это технологии 90-х, но сейчас их упаковали в современную обёртку — с блокчейном и криптографией. Вот вам и Веб 3.0.

Всё развивается по спирали, и мы возвращаемся к тому, с чего начинали. Только на новом уровне.

Минималистические сайты без JS дают несколько преимуществ:

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

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

См. актуальный список легковесных сайтов, включая облегчённые версии популярных сервисов. На них очень мало или вообще нет JavaScript, а размер главной страницы меньше 1 МБ (обычно намного меньше).

Из типичных примеров: Википедия, агрегатор новостей Hacker News, поисковик DuckDuckGo Lite, конструктор сайтов Minwiz. И, конечно, Motherfucking Website, извините за выражение.

Дизайн личного блога

Блог на маркдауне как репозиторий Git

Если информация попадает в интернет, удалить её уже невозможно. Так говорили раньше, во времена идеализма. Суровая реальность показала, что даже Wayback Machine сохраняет лишь малую часть ссылок. Значительная часть контента из интернета 90-х годов пропала безвозвратно. Посмотрите в своей старой подборке RSS-каналов, сколько их них продолжают обновляться?

Авторы забрасывают свои блоги, а блоги навсегда исчезают из интернета со всем архивом старых статей. Это очень печально.

Вот простой совет для будущих блогеров, как сохранить свой контент на века. Запускайте блог на любом стеке, будь это произвольная CMS, генератор статических сайтов типа Hugo или Gatsby, или что угодно. Неважно. Самое главное:

Сохраняйте весь контент в самых простых форматах, в которых возможно. Оптимальный вариант — Markdown и Git. А уж отдельный фронтенд может представить этот контент любым удобным способом. Сделайте исходники общедоступными на Github или любом другом надёжном хосте, а лучше продублировать на несколько облаков. Git очень гибкий и удобный в этом плане: можно копировать и перемещать репозитории куда угодно по мере необходимости.
Это не имеет особого значения в первые месяцы или годы, но через десятилетия вы скажете себе спасибо, что приняли такое решение.
Доступ к контенту сохранится даже после того, как сайт исчезнет. Никто этого не планирует, но в конечном итоге это всегда происходит.

Репозиторий контента brandur.org, включая скрипты для компиляции сайта и деплоя на S3

Можно сразу писать контент на HTML или же на маркдауне, как привычнее. Существует ряд конвертеров для преобразования Markdown в статический HTML.

Что же получается? Для самых простых сайтов лучшая CMS — это блокнот. VS Code или Sublime Text отлично подходят. Хостинг любой: Github Pages, Glitch или ненужный смартфон. Сайт можно поднять даже с 3,5″ дискеты на стареньком 386 компьютере (Windows 3.11, веб-сервер Xitami). Хотя это уже экстремальный случай, чисто для доказательства концепции.

В любом случае никаких фреймворков, препроцессоров и транспиляторов. Даже JavaScript не обязателен. Минимализм снова в моде.

НЛО прилетело и оставило здесь промокоды для читателей нашего блога:

— 15% на все тарифы VDS (кроме тарифа Прогрев) — HABRFIRSTVDS.

— 20% на выделенные серверы AMD Ryzen и Intel Core — HABRFIRSTDEDIC.

Чем простые сайты лучше остальных?

Более того «типичные» сайты с простым для восприятия дизайном были оценены, как наиболее привлекательные по всем параметрам.

При изучении сотрудниками Google в августе 2012, исследователи обнаружили не только то, что пользователей привлекают сайты, загрузка которых займет 0,02–0,05 секунды, но также то, что «сложные для восприятия» сайты соответственно расцениваются как менее привлекательные, чем их более простые копии.
Более того «типичные» сайты — те, которые содержат компоненты, в целом связанные с сайтами этого уровня – с простым для восприятия дизайном были оценены, как наиболее привлекательные по всем параметрам.
Другими словами при изучении выяснилось, что чем проще оформление, тем лучше.

Но почему?

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

Что такое «типичный» веб-сайт?

Если бы я сказал «мебель», какой образ всплыл бы в вашей голове? Если вы относитесь к 95% людей, вы думаете о стуле. Если я спрошу какой цвет символизирует «мальчик» вы думаете «голубой», девочка = розовый, автомобиль = седан, птица = малиновка и т.д.
«Типичный» — это фундаментальное мысленное отражение, которое создает ваш мозг для того, чтобы классифицировать все с чем вы взаимодействуете. От мебели до веб-сайтов ваш мозг создал шаблон того, как следует видеть и воспринимать объекты.
«Типичный» сайт разбивается на меньшие категории. У вас есть отличающийся, но определенный мысленный образ для социальных сетей, мест электронной комерции и блогов – и если любой из тех особых веб-сайтов упускает что-то из вашего мысленного образа вы отвергаете его на сознательном и подсознательном уровнях.
Если бы я сказал «Интерактивный интернет-магазин одежды для модных 20 – «неважно чего»», то вы могли бы предположить что-то подобное:

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

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

Что вы подразумеваете под когнитивной беглостью?

Основная идея, которая стоит за когнитивной беглостью заключается в том, что мозг предпочитает думать о тех вещах, о которых легко думать. Вот почему для вас предпочтительнее посещение сайтов, на которых вы инстинктивно понимаете, где все находится, и знаете, какие действия вам полагается совершить.
«Беглость приводит наше мышление в такие состояния, в которых мы не имеем представления о том, что это работает и затрагивает нас в любой ситуации, в которой мы взвешиваем информацию. » — сайт Uxmatters.
Когнитивная беглость – это основа очередной области поведения, известная как Простой эффект воздействия, который по существу излагает то, что чем больше раз вы подвержены раздражителю, тем больше вы его предпочитаете.

Еще раз, эти правила одинаково применимы к онлайн.
Это «знакомо» для блогов содержать opt-in (ы) на правой боковой панели или для коммерческих сайтов размещать изображение высокого разрешения с захватывающим внимание заголовком и эмблемой компании в верхней части левой стороны экрана.
Если ваши посетители, сформированные определенными особенностями являющимся стандартом для отдельной категории сайта, отклоняющиеся от этого, они могли бы подсознательно поместить вас в «менее привлекательную» категорию.
Здесь представлена «горстка» коммерческих сайтов. Посмотрите, заметите ли вы какие-нибудь сходства.

Внимание: что бы вы ни сделали, ради Божьей любви, не воспринимайте то, что я преподношу как «делайте то, что делают все». Таким образом, если вы не внимательные, вы могли бы навредить себе.
Важно понимать, что выборы дизайна — «prototypical» для сайта в твоей категории, но куда более важно найти доказательство, которое подтвердит правильность выборов дизайна результирующего в некотором роде подъем.
Многие проектировщики выбирают плохие альтернативы. Без проведения исследования, вы могли бы поступить аналогично. Например, многие коммерческие сайты используют автоматические слайдеры изображения для того, чтобы показать продукты, но изучение за изучением показывает то, что автоматические слайдеры отрицательно сказываются на обращениях.

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

В трех вышеуказанных изображениях все, что вы могли бы ожидать от коммерческих сайтов, расположено на своих местах. Даже если вы никогда не были на сайте вам свойственно «доверие» его дизайну.
С высоким уровнем беглости, сайт будет наполнен знакомым достаточно для, того чтобы посетителям не нужно было расходовать мысленные усилия для внимательного изучения и вместо этого они могли сосредоточиться на том, для чего посетили ваш сайт в первую очередь.
Когда восприятие замедленное, однако, вы чувствуете это немедленно
Вот пример розничного онлайн-магазина галстуков Skinnyties, который в действительности не выглядел как коммерческий сайт до изменения оформления в октябре 2012 года.

До:

После:

Немного ключевых изменений, которые ведут к огромным результатам:

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

Здесь представлены варианты редизайна сайта впечатляющие, как для двух с половиной недель, после начала работы:

Редизайн сам по себе пока, в значительной степени не представляет ничего особенного. Он точно оперирует ожиданиями того, каким следует быть современному, розничному онлайн-продавцу одежды. Это “раскрывается” отзывчивым, и располагает последовательным языком дизайна на протяжении всех страниц продукции.
Но в сравнении со старым сайтом, очевидно, что недостаток этих простых элементов отрицательно сказывался на желании покупателей делать покупки на этом сайте.

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

В совместном изучении Гарвардом, университетами Мэриленда и Колорадо, исследователи выявили сильную математическую взаимосвязь между “приятным с эстетической точки зрения” для различных категорий населения — например, участникам, связанным с профессиональной диагностикой аппаратуры не понравились насыщенные цветами веб-сайты – но не было никаких рекомендаций для создания универсальной привлекательности.
Единственное, что было универсальным, так это то, чем более сложный для восприятия веб-сайт, тем ниже его визуальная притягательность.

Почему простота с научной точки зрения проще для обработки

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

“… глаз получает зрительную информацию и преобразует ее в нейронную активность, которая возвращается в мозг, где она хранится и «кодируется». Эта информация может использоваться другими частями мозга связанными с умственной деятельностью, такой как, восприятие и внимание.” – сайт Simplypsychology.

Каждый элемент передает едва уловимую информацию

Вот почему важно, оформляя веб-сайт помнить каждую деталь – оформление, эмблема и выбор цвета – передают едва уловимую информацию о бренде.
Когда эти элементы не выполняют их работу, вебмастер часто компенсирует это добавлением ненужной копии и/или изображений, таким образом, добавляя визуальную сложность веб-сайта и отнимая общую эстетичность.
Оптимизация страницы с целью представления информации в наглядном виде – особо упрощающая информационное «путешествие» от глаза к мозгу – это что-то вроде передачи максимума от того, что вы можете, в столь малом количестве элементов насколько это возможно.
Когда они решили заставить бренд расти, они не добавили обычное “Мы делаем электронную почту с 2001 года, 3 миллиона человек доверяют нам, вот почему мы клёвые, бла бла бла”.

Вместо этого, они сократили объем написанного, упростили веб-сайт – главный заголовок просто читается “Отправь лучшее письмо” – и добавили еще более простую анимацию базовой идеи продукта (продукт с позиции основной выгоды, ради которой потребитель покупает товар).

До:

После:

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

”Кратковременная память” и Святой Грааль преобразования

Вся эта простота ведет к тому, что информация в наглядном виде сразу находит свой путь к мозгу.
Согласно знаменитому исследованию психолога Джорджа А Миллера в Принстоне, среднестатистический взрослый мозг способен хранить между 5 и 9 “порциями” информации в течение короткого промежутка времени в кратковременной памяти.
Кратковременная память это часть вашего мозга, которая временно, в течение нескольких секунд, хранит и обрабатывает информацию. Это то, что дает вам возможность фокусировать внимание, сопротивляться тому, что его отвлекает, и самое важное, позволяет вам принять решение.

Все о чем мы говорили вплоть до этого момента это уменьшение количества «шума», который попадает в кратковременную память.
Вот так простой сайт и дает 5-9 “порций”, которые кратковременная память пытается обработать — это что-то вроде гарантий, описаний продукта, цен или предложений. Когда кратковременная память сможет сфокусироваться на решении проблемы, она будет пытаться решить ее настолько быстро, насколько это возможно.

Отклонение приводит к отторжению

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

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

Заключение

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

простых веб-сайтов — 348+ лучших идей простого веб-дизайна 2023

Пожалуйста, нажмите «Сохранить избранное», прежде чем добавлять другие понравившиеся дизайны

Вы посмотрели 99 дизайнов и хотите еще один кусочек?

по ET

Поиск идей для веб-сайтов

Простые веб-сайты не подходят? Попробуйте что-нибудь еще:

Веселые сайты

Классные сайты

Креативные сайты

Красивые сайты

Эстетические сайты

Чистые сайты

Отличные сайты

Роскошные сайты

Уникальные сайты

Инновационные сайты

Сайты-победители

Премиум-сайты

Сайты разработки

Веб-сайты электронной коммерции

Веб-сайты с иконками

Сайты дизайнерских фирм

Веб-сайты курсов

Темные сайты

Сайты одежды

Сайты интернет-магазинов

Как создать свой простой дизайн сайта

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

Начать конкурс

Дизайнеры со всего мира предлагают вам свои идеи. Вы предоставляете отзывы, оттачиваете свои фавориты и выбираете победителя.

Начать конкурс

Начать проект

Найдите идеального дизайнера, соответствующего вашему стилю и бюджету. Затем сотрудничайте один на один, чтобы создать собственный веб-сайт.

Начать проект

Узнайте больше о дизайне веб-страниц

4,6 в среднем от 2355 отзывы клиентов о веб-дизайне

Что делает хороший простой веб-сайт?

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

Типы веб-сайтов
Существует 8 различных типов веб-сайтов. Узнайте, что они из себя представляют, чтобы решить, какие из них будут соответствовать вашим потребностям… Продолжайте читать

Как создать сайт
Создание веб-сайта может быть сложным. Это руководство шаг за шагом проведет вас через процесс создания веб-сайта… Продолжайте читать

Цвета веб-дизайна
Выбор правильных цветов веб-сайта может подчеркнуть сильные стороны вашего бизнеса и помочь вам привлечь нужных клиентов… Продолжайте читать

Дополнительные советы по веб-дизайну

простых и минималистичных веб-сайтов: 25+ вдохновляющих примеров (2023 г.

) простых и минималистичных веб-сайтов: 25+ вдохновляющих примеров (2023 г.)

Последнее обновление 2 января 2023 г.

Автор Juhil Mendpara

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

В основе создания «минимального веб-сайта» лежит вычитание ради фокуса⁠. Речь идет о представлении контента и функций таким образом, чтобы как можно меньше отвлекаться от основного контента⁠ — «основной контент» в этом контексте — это все, что либо посетители хотят найти на вашем веб-сайте, либо вы хотите, чтобы они увидели.

На практике приверженность минимализму означает рассмотрение каждого элемента интерфейса и устранение ненужного. Здесь «элемент интерфейса» может быть изображением, пунктом меню, текстом, текстурой, шрифтом, цветом, значком, анимацией или чем угодно на веб-странице.

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

Примечание: Я объяснил, почему каждый пример веб-сайта соответствует списку «вдохновляющих простых и минимальных примеров веб-сайта», но только для первых десяти, чтобы избежать повторения.

Сделано с помощью Squarespace

Бенджамин — фотограф, делающий фантастические снимки суровых условий, от одного взгляда на которые у вас мурашки по коже. Его работа часто завершается в Исландии; вы можете найти изображения красивых пейзажей и животных, которые живут в дикой природе.

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

Давайте посмотрим на это с точки зрения его потенциальных клиентов: Потенциальные клиенты фотографа хотят увидеть их работы, связаться с ними или узнать о них больше ⁠— именно в таком порядке. Так что все, кроме этих трех, является отвлечением.

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

Made With Squarespace

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

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

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

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

В целом, Melula’s — отличное вдохновение для дизайна, если вы хотите использовать минимализм для своего интернет-магазина.

Сделано с помощью Squarespace

Oishii — японская компания, выпускающая Omakase Berry. Компания гордится качеством, а не количеством выращиваемых ягод, доступных в их местах в Нью-Йорке, Лос-Анджелесе или Нью-Джерси.

Первое, что вы видите при входе на сайт Oishii, это полноразмерное высококачественное фоновое видео, которое завораживает красотой их ягоды. Далее вы видите пунктов меню — Магазин, Обучение, Рецепты, и Подарочные карты . Каждый пункт меню ведет вас на страницу, которая является своего рода частью их воронки продаж, а затем содержимое страницы переносит вас на следующий этап воронки продаж.

Сделано с Wix

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

Его веб-сайт — отличный пример минимального личного веб-сайта и веб-сайта-портфолио. Обратите внимание на то, что вы видите при входе на сайт:

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

Made With Squarespace

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

Для своего веб-сайта они использовали шаблон Squarespace Trémont и внесли небольшие изменения в соответствии со своими потребностями. «ЕШЬТЕ НАПИТКИ ВИЗИТ» действует как своего рода слоган, а также призывы к действию — EAT перенаправляет посетителей на страницу меню, НАПИТОК на страницу напитков, а ПОСЕЩЕНИЕ на страницу местоположения и бронирования. И на каждой подстранице нет других деталей, кроме обещанных и нужных, что является ядром любого минималистского начинания.

Сделано с помощью Squarespace

Скотт Снайдер (Scott Snyder) — предметный фотограф из Коста-Меса, Калифорния. Его фотографии четкие и первоклассного качества, как видно из его минимального веб-сайта портфолио.

В некотором смысле его сайт более минималистичный и стильный, чем у Бенджамина (первый сайт в этом списке). На главной странице представлены отличные фотографии с большим количеством негативного пространства; он использует легко читаемые шрифты; анимация прокрутки на высоте; есть небольшой раздел «обо мне»; есть правильно размещенные CTA.

Тем не менее, я нахожу веб-сайт Бенджамина лучше, потому что он ссылается на раздел «О программе» прямо в строке меню. Кроме того, в отличие от Скотта, Бенджамин не описывает подробно свои проекты и позволяет своим фотографиям делать работу, которую я считаю более минимальной. (Это не означает, что подробные описания проектов не нужны)

Сделано с Wix

Венди Джу — UI/UX-дизайнер, которая превращает наблюдения из реальной жизни в рассказывание историй и решение проблем.

Очевидно, она разбирается в UI, UX и дизайне, и это видно из ее минималистского подхода к созданию своего веб-сайта. Если вы внимательно не посмотрите на все элементы (анимацию и т. д.), визуальная иерархия веб-сайта будет следующей:

Текст Hello/Hi/Niaho
Кнопки действий UI/UX, Graphic Design и About для навигации
Значки электронной почты и LinkedIn
Краткая биография/о разделе
Ее портфолио

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

Сделано с Squarespace

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

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

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

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

На первый взгляд, вы не найдете никакого упоминания о психотерапии, но большое изображение с двумя стульями, расставленными как на сеансе психотерапии, и вопрос «Если не сейчас, то когда?» текст намекает на это. Конечно, прокрутив страницу вниз, вы найдете больше информации о Керри-Лин и ее практике.

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

Сделано с WordPress

Visual Soldiers — креативное агентство из Атланты, специализирующееся на стратегии, брендинге и создании отличных веб-сайтов.

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

Сделано с Squarespace

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

Made With Squarespace

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

Сделано с Squarespace

Шай Альтер — фотограф, проживающий в настоящее время в Канаде. The Hyphenated Canadians фокусируется на его фотографиях и интервьюировании людей, иммигрировавших в Канаду так же, как и 30 лет назад.

Сделано с Squarespace

Как вы видите на главной странице сайта, Fat Choy находится в Нью-Йорке и смешивает китайские и веганские вкусы. Они предлагают обедать в ресторане, на вынос и на открытом воздухе для своей клиентской базы прямо с веб-сайта.

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

Сделано с Squarespace

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

Сделано с Squarespace

Фотограф и ретушер из Лос-Анджелеса, работающий в сфере красоты и ухода за кожей. У нее есть несколько известных клиентов, таких как Smashbox Cosmetics и Urban Decay, которые предоставляют первоклассные фотографии и ретушь, часто основанные на знаменитостях.

Made With Squarespace

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

Примечание : Projects использует Squarespace для веб-сайта и Shopify для электронной коммерции.

Сделано с помощью WordPress

Eiktyrne — норвежский бренд виски, известный своим высочайшим качеством. Сайт тоже качественный.

Сделано с Squarespace

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

Сделано с Squarespace

Стивен О’Нил и Мэри Ланган основали O’Neil Langan Architects в 1996 году и с тех пор расширились до компании со штатом 50 сотрудников, базирующейся на Манхэттене. Их веб-сайт настолько прост, насколько это возможно ⁠ — он очень похож на первый веб-сайт в списке.

Сделано с помощью Webflow

Заголовок из пяти слов ⁠ — «Найдите свой следующий любимый джин» ⁠ — рассказывает посетителям все о бизнесе Ginventory. Призывы к действию в Apple App Store и Google Play Store предполагают, что Ginventory — компания-разработчик приложений, а это (минимальный) веб-сайт приложения.

Сделано с помощью Webflow

Рафика (Rafikah) — менеджер по продуктам в сфере B2B SaaS из Сан-Франциско. Он увлечен и имеет опыт в области стратегии выхода на рынок, роста, принятия решений на основе данных и многого другого.

Made With Carrd

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

Сделано с Squarespace

Casa Mami — это красивое уединение, расположенное в пустыне на 5 акрах. Его можно забронировать в частном порядке через сайт Airbnb или арендовать для специальных мероприятий и фотосессий.

Сделано с Shopify

Компания Hobbe, основанная в 2014 году Самантой Хоббелен, предпринимателем и мамой троих детей, производит красивые кресла-качалки, пуфики и стильный декор для детской и дома.

Made With Format

Минимальный веб-сайт портфолио Хариса Нюкема, на котором можно продемонстрировать его портретные и фэшн-фотографии, а также продать их репродукции.

Сделано с помощью Squarespace

В 2015 году Apollo Peak создала самые первые напитки Cat Wine и Dog Wine. Сегодня они продают несколько версий одного и того же по всему миру.

Сделано с Squarespace

Флориан и Матиас — основатели Florian Matthias, агентства дизайна, отмеченного международными наградами, которое создает простые, но эффективные бренды для клиентов и клиентов своих клиентов.

Часто задаваемые вопросы

Как создать минималистичный веб-сайт?

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

Какой лучший конструктор сайтов для создания минимального сайта?

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

Простой сайт лучше?

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

Что такое минималистичный веб-сайт?

Минималистский веб-сайт — это веб-сайт в его простейшей возможной форме ⁠, на котором нет ненужных элементов (или отвлекающих факторов) в интерфейсе.

Чем хорош минималистский дизайн?

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

Простые сайты снова в моде. Минимализм возвращается / Хабр

Сайт в одном файле

Задержки

Ожирение всего

Сайт web0

Блог на маркдауне как репозиторий Git

Чем простые сайты лучше остальных?

Что такое «типичный» веб-сайт?

Что вы подразумеваете под когнитивной беглостью?

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

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

Почему простота с научной точки зрения проще для обработки

Каждый элемент передает едва уловимую информацию

”Кратковременная память” и Святой Грааль преобразования

Отклонение приводит к отторжению

Заключение

простых веб-сайтов — 348+ лучших идей простого веб-дизайна 2023

Простые веб-сайты не подходят? Попробуйте что-нибудь еще:

Как создать свой простой дизайн сайта

Что делает хороший простой веб-сайт?

простых и минималистичных веб-сайтов: 25+ вдохновляющих примеров (2023 г.

Часто задаваемые вопросы

Как создать минималистичный веб-сайт?

Какой лучший конструктор сайтов для создания минимального сайта?

Простой сайт лучше?

Что такое минималистичный веб-сайт?

Чем хорош минималистский дизайн?

Добавить комментарий Отменить ответ

Рубрики