Простота в хорошем веб-дизайне

Автор оригинала: Cameron Chapman
  • Перевод
Простота в дизайне сайта не обязательно должно означать минималистическую эстетику. В простых сайтах просто убираются все ненужные элементы из дизайна, содержимого и кода. В то время как минималистические сайты в основном соответствуют этим критериям, существуют много сайтов, которые никак нельзя отнести к минималистическим, но они все же являются простыми.



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

Преимущества сайтов с простым дизайном



1. Более легкая навигация

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

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

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


2. Простой дизайн загружается быстрее

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

3. Контент более легкий для восприятия

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

Одно исследование показало, что 79% пользователей прошлось по страницам сайта, но лишь 16% пользователей прочло все от начала до конца. Лучше всего работать с этими пользователями, которые просто прошлись по сайту, чем пытаться бороться с ними. Ставя контент на первом плане и в центре страницы, сделает его более легким для восприятия пользователей. Эти пользователи посчитают ваш сайт более удобным для пользователя и вероятнее всего посетят и в будущем.



4. Простые сайты легче создавать

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

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

5. Простой код легче отладить

Если ваш код упрощен, в нем легче найти ошибки. Если у вас есть список стилей с 300 разными свойствами, будет намного труднее определить в чем именно проблема чем если бы у вас было всего 30 свойств.

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

6. Чем меньше размеры файлов, тем меньше места они займут на сервере

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

Как упростить свои сайты





Удалите ненужные декоративные элементы

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

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

Спросите у себя – этот элемент действительно такой важный?

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

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

Убедитесь в том, что ваш код настолько же прост как и дизайн

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

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

Превосходные примеры простых дизайнов сайтов



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






















Средняя зарплата в IT

110 000 ₽/мес.
Средняя зарплата по всем IT-специализациям на основании 8 431 анкеты, за 2-ое пол. 2020 года Узнать свою зарплату
Реклама
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее

Комментарии 54

    +3
    хм, ну вот например blog.belvoirfruitfarms.co.uk … весит 1,5 Мб… это нельзя назвать легким сайтом

    и вообще… разве еще не приелись сайты-блоги?
      0
      Да, тоже хотел про него сказать, еще про www.designobserver.com/ — гдеж там простота?

      Пмсм, от того, что дизайнер уберет лишних картинок, но на их место вставит какой-нибудь текст становится только хуже, ваш же пример: www.montylounge.com/ — в нём совершенно невозможно отличить заголовки, эпиграфы, контент и еще много всякой лишней инфомрации.
      • НЛО прилетело и опубликовало эту надпись здесь
        +1
        А чем персональный сайт по сути отличается от блога? Скорее, просто разные наименования одного и того же. Раньше были «домашние страницы», теперь сайты-блоги — тот же инструмент для выражения мыслей, только называется по другому. Плюс, элементы обратной связи стали более явно выраженными (комментарии и т.д.).
        –3
        В одном из примеров (One day without Google) разработчик зашёл слишком далеко: позабыл даже задать цвет фона страницы.

        А ведь если у кого он по умолчанию не белый, то  —  —  —
          –1
          Да, без белого фона у посетителя сайт не смотрится.
          А Вы по умолчанию задали не белый фон?
            0
            Я веборазработчик, так что у меня беспрестанно задан не белый фон, чтобы отлавливать в том числе вот такие оплошности.
              0
              У меня тоже был не белый, потом я просто устал от огромного количества сайтов, у которых не прописан цвет фона (например, ebay, некоторые страницы google и т.п.).

              Вернул белый фон по-умолчанию.
                –1
                Если вам нравится цвет фона #XXX, и вы выставляете его в дефолтный, то вам должно быть по кайфу наблюдать его на всех сайтах.
                Я не пониаю, чем вы возмущаетесь.
                  +2
                  Неприятно наблюдать, что графические элементы не совпадают с фоном, или текст нечитаем.

                  No background color set

                  О том, что надо указывать цвет для body пишут во всех нормальных учебниках по CSS/HTML, и на сайте w3c www.w3.org/QA/Tips/color

                  Не указанный цвет фона — это ошибка.

                    +1
                    >Неприятно наблюдать, что
                    Ну так оставьте дефолтные настройки и будет вам счастье.
                    Если себя контролируете — так пользуйтесь ластиком меера (http://meyerweb.com/eric/tools/css/reset/) и не парьтесь.

                    >пишут во всех нормальных учебниках по CSS/HTML
                    1. Вы читаете очень древние пособия времен Netscape Navigator 3.0 в нем цвет фона был именно такой, как указано на вашей картинке. В Опере и IE дефолтный цвет был белым. В те же времена формат png не использовался. Отсюда вылезли эти рекомендации.

                    2. Во всех учебниках по юзабилити считается пишут что очень желательно оставлять дефолтные настройки пользователя (шрифты, контролы, цвета и т.п.). Если пользователь не поленился залезть в настройки и поставил себе серый фон (как у вас на картинке) — значит он хочет смотреть сайт на сером фоне. Он так любит. Он так хочет. У него 100 доводов в пользу серого цвета фона. Зачем вы за него думаете?
                    Я совершенно этого не понимаю.
                      0
                      В CSS Reset ничего с цветами не делается.

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

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

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

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

                          Хотя бы одну ссылку приведите.
            0
            Уже белый. :)
            –7
            «Очень многие дизайнеры фокусируются на дизайне и не обращают должного внимания на код шаблона.»

            Дизайнер не должен вникать в код страницы, это не его заботы.
              +3
              хороший дизайнр — иногда хороший верстальщик, не? Было бы лучше, если бы дизайнер понимал, когда «творит»…
                –1
                Другое дело, если говорить о дизайнере-верстальщике, тогда эта его работа.
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  Я лично знаком с многими очень талантливыми дизайнерами, но при этом в верстке они знают только азы, тем не менее им это не мешает делать высокого уровня работы. В моем случае на достаточном уровне владение xhtml+css и в итоге неплохие сайты. Но, я не уверен что в большинстве случаев один дизайнер сможет заменить обеих специалистов. Каждый развивается в своем направлении, вот так правильно и так будет всегда.
                  • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  Интересно, почему эта реплика вызвала негативную оценку хабра?
                    0
                    Дизайнер — нет, веб дизайнер — да :)
                    +3
                    Меня унесло на сайт www.onedaywithoutgoogle.org.
                      +1
                      По моему не хватает ссылки на сайт, с которого сделаны скрины.
                        0
                        Кликай по картинке. К.О.
                          0
                          Она была не кликабельна.

                          Автору спасибо)
                          0
                          мне тоже интересно
                            0
                            упс, не в ту ветку написал
                            0
                            Все хватает. На Cameron Chapman нажмите.
                              0
                              Ааа. Теперь до меня дошло о чем вы, извините :)
                            0
                            Ха! Сёмме из Ставангера!
                            Извините, выравалось.
                              0
                              Понял, где его дом/офис находится. Смогу сфоткать его, но не раньше ноября.
                                0
                                Блин, он там в офисном здании многоэтажном сидит, не так интересно.
                                Вот картинка
                              –2
                              А помойму, примеры которые приведены ниже, их не назовешь простыми сайтами… Там есть пару сайтов, где достаточно лишних изображений и графики… Простым на мой взгляд является «хабр» :)
                              +1
                                0
                                Сразу бросился в глаза логотип с www.gugazine.com/. Что в нём есть от www.gskinner.com/. Или наоборот.
                                  0
                                    +1
                                    minimalsites.com
                                      0
                                      1. Приведенные примеры сайтов не являются примерами простого дизайна сайтов.
                                      2. Простой дизайн сложнее продать.
                                        0
                                        >2. Простой дизайн сложнее продать.

                                        Вы совершенно правы!
                                        Заказчик делает большие круглые глаза и: «Чо за хня? Чо за белый лист? Я за что деньги плачу?»
                                        Доказывать что-то бесполезно.
                                        0
                                        Целью дизайна надо ставить хороший дизайн, а не простой дизайн.
                                          0
                                          Одно вовсе не исключает другое.
                                          0
                                          Да, отличная тема!

                                          Простота — во всём лучше: легче для загрузки, и легче для восприятия, технически легче при реализации, меньше вероятность ошибок и сбоев.
                                          Сделать просто и понятно — мастерство.
                                          Есть только опасение, что простой дизайн сложнее продать, по достойной цене.

                                          Автору, респект!
                                          Ф
                                            0
                                            > Создание простого дизайна в основном приводит к небольшим размерам файлов
                                            В примерах пловина сайтов содержит огромные картинки на полэкрана. К тому же в основном это блоги и портфолио, которые и не требуют сложной структуры.
                                              +1
                                              Как всегда российские сайты не упомянули потому что перевод. :) А ведь тот же lookatme выглядит не хуже, а функционально намного богаче.

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

                                                0
                                                Как? Начать думать! :-)))
                                                  0
                                                  www.designobserver.com/ — Это неудачный пример. На мой взгляд, подача информации оставляет желать лучшего, чувства простоты не возникает, читать текст набранный таким мелким шрифтом лично мне сложно.
                                                    0
                                                    главное чтобы было просто и со вкусом.главное чтобы было просто и со вкусом.
                                                      0
                                                      > Простые сайты не содержат ненужную информацию. Это делает навигацию по сайту более легкой по двум причинам: в основном сайты будут иметь меньше страниц и разделов

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

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

                                                          Самое читаемое