Сайт

Сайты минимализм: Вдохновение: 50 минималистичных сайтов

12.12.1981

Содержание

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

Сколько раз говорили об ожирении софта и сайтов, а воз и ныне там. Ситуация совершенно не улучшается. В 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.

Fashion в веб-дизайне (минимализм) — Дизайн на vc.ru

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

1466 просмотров

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

Я решил разобраться в этой теме, потому что сейчас fashion-стиль в вебе все ещё крайне популярен. Ниже я поделюсь тем, что выяснил и буду искренне рад, если эта небольшая статейка поможет кому-то ещё. Замечания и дополнения попрошу оставить в комментариях — если напишу вторую часть, то обязательно возьму это во внимание.

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

Шрифты

Начнем с базовых элементов, по нарастающей.

Шрифты — одна из самых важнейших составляющих визуала этого стиля. Как правило, в fashion-стиле используются шрифты декоративные. Наборный всегда без засечек, helvetica-подобный, а заголовочный чаще с засечками, чем без. Также стоит заметить и то, что размеры шрифта контрасты: заголовки огромные, а наборные до 18 (если речь идет о контейнере размером в 1200-1440px).

Вот немного примеров шрифтовых пар:

Бесплатные:

Playfair — Manrope
Ivy Mode — Poppins
Cormorant Garamond — Montserrat
Prospectus — Sailec
Proxima Nova — Raleway

Платные:

Saol Display — Aktiv Grotesk
Avenir — Didot
Made mirage — Work Sans

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

Цвета

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

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

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

Приёмы, текст, медиа-контент

Скажу честно, это мой самый любимый пункт.

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

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

Плавно переходим к тексту. Заголовки всегда большие и часто наезжает на изображение. Обычно заголовки в 2-3 строки и содержат до 7-8 слов. Это важный момент, ведь так страница смотрится визуально менее нагруженная. Наборный текст всегда короткий. В случаях когда текста много, дизайнеры выстраивают сторителинг короткими урывками. Самый длинный текст, что я встречал, был в 9-10 строк и шириной 400-450 пикселей и всегда рядом идет медиа-контент. Шрифты в данном случае небольшие: 14-18 пикселей, но тут сразу замечание: в тренды входят большие размеры шрифтов и можно встретить текст параграфа кеглем в 24-28 пикселей. Это все выстраивается по ситуации и на вкус дизайнера, просто держу в курсе.

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

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

Примеры

talia.su

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

ivantoma.com

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

rino-pelle.exoape.com

Rino Pelle — наверное лучший коммерчиский сайт в плане визуала что я видел. Пожалуй, самый лучший пример fashion-стиля.

curenails.co

Немного устаревший, но все ещё стильный интернет-магазин. Необычные визуальные решения и типографика (NoeDisplay — Northwell — Poppins) придают уникальности. Медиа-контент тоже не отстает. Рекомендую ознакомиться.

en.maradji.com

Снова e-commerce. Крайне качественный сайт. Лёгкий, правильный, минималистичный.

Резюмирую.

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

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

Надеюсь статья оказалась полезной. Спасибо за прочтение!

P.s. О моем кейсе (не обязательно к прочтению)

Когда я делал этот мини-проект, я опирался на то, что написано выше и пришел к тому, что всего этого все равно не достаточно и вот почему:

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

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

Буду раз вашим комментариям.

30+ Лучшие минималистские сайты для вдохновения

Ищете идеи минималистских сайтов для своего портфолио? Здесь собраны некоторые из лучших минималистских сайтов, чтобы дать вам вдохновение для дизайна!

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

Почему минимализм важен в дизайне веб-сайта?

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

Минималистские веб-сайты более интуитивно понятны для навигации

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

    Единый центр внимания на веб-странице лучше

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

      Минималистские веб-сайты загружаются быстрее

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

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

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

          Минималистская цветовая палитра легка для глаз

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

            Минимализм обеспечивает ясность цели

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

              Минималистские веб-сайты выглядят более профессионально

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

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

                Готовы создать свой профессиональный сайт с помощью Pixpa?

                Начать бесплатное испытание

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

                Вот 30+ лучших примеров минималистских сайтов, которые вдохновят вас!

                Михей Джонсон

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

                Ким Деро

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

                Лулу и Изабель

                Оань Тран — дизайнер, создавший Lulu & Isabelle. Она иллюстратор, фотограф и графический дизайнер. На своем минималистичном сайте она выбрала легкий подход к тексту, чтобы подчеркнуть изображения. Это сразу привлекает внимание зрителя, а также подчеркивает ее работы, которые она хочет сделать центром внимания.

                Мария Мака

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

                Бенни Куппини


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

                Анеев Рао

                Красивый минималистский веб-сайт Анева Рао напоминает страницу из старинного фотоальбома. Портрет в профиль на сдержанном темно-синем фоне занимает центральное место на его целевой странице, а ссылки на его портфолио расположены сбоку. Это отлично справляется со своей задачей — как произвести впечатление, так и познакомить нас с его работами.

                Маленький Пекин

                Если вы искали примеры минималистских веб-сайтов, чтобы узнать, как минимализм может быть полезен для бизнес-сайтов, посмотрите дальше. Сайт ресторана Little Peking — чистый, незагроможденный и понятный. Большие кнопки также служат изображениями и привносят на целевую страницу яркий цвет и живость. Фотография владельца находится впереди и в центре, внося элемент человечности, что очень важно для всех бизнес-сайтов. 

                Марсель Штайнеггер

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

                Не беспокойтесь, гражданин

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

                Джой Шрангхамер

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

                Коллектив «Саваг

                Сайт компании Savag Collective является примером того, как использование простых форм и цветовых схем может придать минималистским сайтам остроту. Целевая страница сайта проста и использует сильные черные линии и жирные шрифты. Это помогает им лучше передать видение своего бренда.

                Студия Нидо

                Studio Nido — архитектурное бюро в районе залива Сан-Франциско, которым руководит архитектор в третьем поколении Бабак Доан. Главное изображение на целевой странице изображает камин внутри дома, который создает ощущение тепла и домашнего очага, что является философией архитектуры Бабака. Если вы ищете примеры минималистских сайтов для вдохновения, сайт Studio Nido — это то, что вы должны увидеть.

                Эрдем Аккая

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

                Эван Тетро

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

                Ашиш Чавла

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

                Наина Сет

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

                Икин Юм

                Сайт лондонского фотографа Икина Юма — еще один прекрасный пример того, как минималистичные сайты максимизируют визуальную иерархию. Галереи находятся в центре страницы, а навигационные элементы — по бокам. Это позволяет посетителям сразу же найти то, что они ищут, и в то же время позволяет им легко переходить к другим разделам сайта для получения дополнительной информации.

                Симона Смит

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

                Грейлон Эверетт

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

                Студия «Зимик

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

                Май Хеджири

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

                Михал Данис

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

                Аураа

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

                Кристиан Боуден

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

                Рокко Данте Менна

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

                Графика хмеля

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

                Стефано Греко

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

                Нтчвайдумела Томас

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

                Сора Кан

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

                Даниэль Эспирито

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

                Хасс Кристенсен

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

                Заключение

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

                Знаете ли вы, что создание сайтов сегодня невероятно просто, доступно и доступно каждому? С таким конструктором сайтов, как Pixpa, вы можете создать красивый, профессиональный сайт, даже не написав ни строчки кода! Pixpa делает все это проще простого. Вы можете прямо сейчас подписаться на полнофункциональную 15-дневную бесплатную пробную версию, чтобы испытать Pixpa и ее платформу. Для регистрации не требуется кредитная карта и никаких скрытых платежей. Зарегистрируйтесь сейчас, чтобы начать создание сайта своей мечты!

                 

                Креатив vs минимализм: делаем лаконичный сайт нескучным

                Креатив vs минимализм: делаем лаконичный сайт нескучным

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

                Веб-дизайн

                14 дек. 2021

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

                Минимализм — скучно, а креатив — сложно?

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

                Важно не перестараться в стремлении избавиться от лишнего, иначе может оказаться, что:

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

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

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

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

                Объединяем креативные решения с минимализмом

                «Подружить» креатив с минимализмом в веб-дизайне помогут несколько проверенных приемов.

                «Чистые» цвета

                Минимализм подразумевает ограниченную цветовую палитру. Однако яркие цвета в этом стиле не запрещены. Главное —использовать их в «чистом» виде, без градиентных переходов, 3D-эффектов и т. д. Тогда получится выделить объект и привлечь внимание пользователя к важному контенту. Для этого цвет должен создавать выраженный контраст между фоном и изображением.

                Графика в едином стиле

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

                1. Все изображения должны быть выполнены в одной стилистике.
                2. Фотографии желательно отбирать максимально простые, но качественные, без мелких деталей, отвлекающих внимание.
                3. Выделить продукт и создать единую композицию помогут изображения без фона.
                4. Иконки, кнопки, формы и другие элементы интерфейса лучше сделать плоскими, без теней, бликов и прочих визуальных эффектов.
                5. Фотографии и иллюстрации должны создавать заметный контраст с фоном, чтобы на них обратили внимание.

                Визуальная иерархия и теория близости

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

                • 2-3 разных размера шрифта
                • разную насыщенность одного цвета
                • расстояния разной ширины между объектами

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

                Сбалансированное расположение

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

                Не обязательно, чтобы расположение было симметричным или чтобы с каждой стороны оси было одинаковое число объектов. Важнее, чтобы занимаемая ими площадь была примерно равной.

                Заключение

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

                Узнать еще больше секретов создания красивых стильных сайтов можно на курсе «Мир веб-дизайна». Здесь вы освоите основные программы, научитесь мыслить как дизайнер, узнаете, где черпать идеи для вдохновения и получите все необходимое, чтобы стартовать в новой профессии. Ждем вас на курсе!

                Читайте другие статьи

                Модальное или немодальное окно: как выбрать?

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

                Веб-дизайн

                5 янв. 2021

                Удаленка или фриланс: с чего дизайнеру начать карьеру?

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

                Веб-дизайн

                20 окт. 2020

                Лучшие плагины Figma 2020

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

                Веб-дизайн

                8 сент. 2020

                Минимализм как стиль жизни

                как стиль жизни

                Последние статьи

                Что такое минимализм

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

                Минимализм — это про упрощение жизни на всех её уровнях

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

                Ради возможности сконцентрироваться на самом важном. На том, что привносит в вашу жизнь вдохновение, пользу и смысл.

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