Красиво оформленное веб-приложение не только привлекает пользователя, но и увеличивает шансы того, что он снова посетит сайт, потому что профессиональный внешний вид вызывает чувство доверия. Большинство произведений искусства завораживают, они привлекают наше внимание и заставляют нас смотреть на них, и когда мы смотрим, наши глаза не просто удивляются, но сами произведения искусства направляют нас в отношении того, на что мы смотрим.
Такие красивые изделия не просто созданы снаружи, они основаны на определенных принципах. Это называется принципами дизайна. Мы можем применить все или некоторые из этих принципов дизайна к нашему веб-приложению, чтобы помочь нам создать этот профессиональный вид. Это 7 принципов дизайна. Однако это разные варианты этих принципов в зависимости от того, что вы разрабатываете, и в случае веб-дизайна я составил следующий список: Контрасты, Баланс, Типографика, Иерархия, Гармония, Повторение и Теория цвета.
Принципы дизайна
Чтобы помочь нам лучше понять, как мы можем применить эти принципы к нашему веб-приложению, мы будем использовать пример плохо спроектированного веб-приложения, а затем попытаемся улучшить его внешний вид, применив к нему принципы дизайна. Сайт ниже плохо спроектирован:
Теперь давайте попробуем сделать его намного лучше, используя некоторые принципы. Я постараюсь очень легко объяснить эти принципы, поэтому не ждите модных словечек.
1. Контрасты
Контраст означает, что предметы, сложенные вместе, выглядят совершенно по-разному. Примером может быть белый текст на черном фоне или квадрат и круг, помещенные вместе.
Почему важен контраст?
Контрастность позволит пользователям четко видеть разные разделы вашего приложения и читать без проблем. Представьте, если бы эта статья была на сером фоне; вам будет трудно читать.
Как применить контраст
Если мы посмотрим на домашнюю страницу нашего приложения и верхнюю панель навигации, текст будет трудно разглядеть. Так что мы можем сделать их более ясными, сопоставив текст и фон. На сайте ниже показаны результаты контраста:
2. Баланс
Баланс - это принцип дизайна, который подразумевает, что элементы на странице должны иметь одинаковый визуальный вес. Что это вообще значит? Проще говоря, если вы проведете воображаемую линию сверху вниз, элементы слева должны выглядеть сбалансированными с элементами справа. Вы можете иметь одинаковые элементы слева и справа, чтобы добиться сбалансированного внешнего вида, или вы можете иметь разные элементы разного размера и формы, но расположенные таким образом, чтобы они были выглядеть сбалансированным.
Почему важен баланс?
Баланс гарантирует, что ни один элемент не превосходит другой, тем самым позволяя пользователю видеть другие элементы на вашей странице, а не только один выделяющийся элемент.
Как мы можем пополнить баланс
Если мы посмотрим на наш раздел продукты приложения; изображение продукта и его описание не выглядят сбалансированными. Мы можем применить баланс, как показано ниже:
3. Типография
Моя любимая типографика. Тип имеет значение и индивидуальность, поэтому решение, какой шрифт использовать, является одним из наиболее важных решений; это потому, что неправильный шрифт может передать неправильное сообщение. Принцип типографики здесь заключается в том, что вам нужно использовать шрифты, которые хорошо смотрятся вместе, и не используйте более двух типов шрифтов в одном приложении.
Я использую простой трюк: для заголовков я использую шрифт sans-serifs, а для большого текста я использую шрифт serifs именно так, как написана эта статья. Иногда бывает сложно решить, какие шрифты работают вместе, но благодаря google fonts мы можем выбрать, какой шрифт нам нравится, и Google может предложить те, которые с ним хорошо работают. Выбирая шрифт, нужно помнить об одном: он должен не только хорошо выглядеть, но и быть более читабельным.
Почему типографика важна?
Наличие нескольких типов шрифтов, которые хорошо смотрятся вместе в приложении, создает этот профессиональный согласованный вид.
Как применить типографику
Как видите, в настоящее время в нашем приложении используется более двух шрифтов, и они не очень хорошо выглядят. Поэтому мы улучшим его внешний вид, используя разные варианты всего одного шрифта для всего приложения. Вот результат:
4. Иерархия
Если вы внимательно посмотрите на приложение, заголовок «Наши продукты» выглядит почти такого же размера, как и заголовок под ним, а другие заголовки также слишком мелкие. Мы можем исправить это с помощью иерархии. Иерархия означает, что вы увеличиваете элементы, которые должен видеть пользователь первым, и немного уменьшаете то, что вы хотите, чтобы они увидели дальше. Таким образом, вы продолжаете уменьшаться до того, что вы хотите, чтобы они видели в последний раз.
Почему важна иерархия?
Человеческий мозг не может придавать одинаковый уровень важности каждому элементу на странице. Скорее, он имеет тенденцию придавать большее значение первым элементам, которые он воспринимает. Таким образом, вы можете направлять внимание пользователей на то, что важно на вашей странице.
Как применить иерархию
Мы исправим заголовки, которые выглядят меньше. Результаты можно увидеть ниже:
5. Повторение
Повторение означает повторное использование шаблонов, текста, изображений или графических элементов в приложении для создания ощущения согласованности и единства в вашем приложении.
Почему важно повторение?
Как уже упоминалось, это создает ощущение согласованности, пользователи могут легко запомнить приложение и легко предвидеть, как самостоятельно перемещаться по определенным разделам вашего приложения, шаблоны также визуально привлекательны.
Как применить повторение
Оказывается, наше приложение уже использует повторение. Посмотрите на изображение продукта и описание, у нас есть несколько повторяющихся шаблонов.
6. Гармония
Когда я слышу, что приходит в голову, гармония работает вместе. Гармония означает поддержание схожего внешнего вида в нашем приложении, различные элементы должны казаться связанными друг с другом, и все должно быть неуместным, бесполезным или случайным. Различные элементы работают вместе согласованно.
Почему важна гармония?
Когда все находится в нужном месте, навигация по приложению становится проще и удобство использования.
Как добиться гармонии
Вернувшись к нашему приложению, вы увидите, что некоторые кнопки и текст имеют разные цвета. Для создания гармонии воспользуемся цветами. Логотип нашего приложения имеет красивый синий цвет; мы можем поддерживать один и тот же цвет во всех элементах нашего приложения, например, в синем оверлее на фоновом изображении домашней страницы. Мы можем попробовать сделать это и для других частей приложения, но будьте осторожны, чтобы не злоупотреблять цветом. Вот результат:
7. Теория цвета
Цвет при эффективном использовании может мгновенно вызвать у кого-то определенные эмоции или мысли об определенном бренде. Вот почему так важно выбирать цвета, которые передают правильное сообщение. Независимо от того, какой цвет вы выберете, цветовой принцип гласит, что нам нужно использовать цвета, которые хорошо смотрятся вместе. Но как найти подходящие цвета? Есть способ, нам нужно знать только две вещи:
- Цветовой круг
- Типы цветовой гармонии
Цветовой круг
По сути, это колесо, в котором все цвета образуют круг. Ближе к середине круга цвета менее чистые. По внешнему краю круга они более чистые и насыщенные.
Типы цветовой гармонии
Это в основном комбинации, которые вы можете использовать на цветовом круге, чтобы найти подходящие цвета. Типы гармоний включают: Аналогичные, Монохроматические, Триадные, Дополнительные, Составные и Оттенки. Я расскажу лишь о некоторых.
Дополнительные
Цвета, расположенные напротив друг друга на цветовом круге, считаются дополнительными цветами. Эти цвета хорошо контрастируют и хорошо смотрятся вместе.
Триада
В трехцветной цветовой схеме используются цвета, равномерно распределенные по цветовому кругу.
На случай, если вам интересно, почему ХАЛК носит фиолетовые штаны, его цвета являются частью гармонии Триады:
Аналогичные
В аналогичных цветах используются цвета, расположенные рядом друг с другом на цветовом круге.
Использование цветового круга может быть трудным, но хорошая новость заключается в том, что Adobe Color упростил нашу жизнь, создав цветовое колесо, которое мы можем легко использовать. Все, что вам нужно, это предоставить ему базовый цвет и выбрать тип гармонии, тогда он будет генерировать цвета, которые хорошо сочетаются друг с другом. Вот почему мне пришлось объяснить лишь некоторые из них.
Почему важна теория цвета?
Хорошее сочетание цветов создает очень привлекательный вид, пользователи могут использовать приложение без ущерба для плохих цветовых сочетаний.
как применить теорию цвета
Для этого приложения я выбрал оттенки, то есть разные оттенки синего, причем цвет логотипа был основным цветом. Но мы можем добавить в приложение еще один цвет, на этот раз я воспользуюсь дополнительными цветами, чтобы определить цвет. Я буду применять цвет только к заголовкам разделов. Вот результат:
Наконец-то
Мы подошли к концу исправления нашего приложения, теперь мы можем посмотреть на то, что было до и после.
До
После
В этом сила принципов дизайна. Вы можете увидеть, насколько чисто выглядит наше приложение. Таким образом, независимо от того, являетесь ли вы разработчиком полного стека, фронтенд-разработчиком или только начинаете веб-разработку, эти принципы при правильном использовании могут помочь вам создавать красивые и профессиональные веб-приложения.
Эта статья - одна из тем, которую я собираюсь осветить в учебном лагере переднего плана Hackers Guild.
Надеюсь, вам понравилось читать эту статью, и если вы все-таки дадите ей столько хлопков, и поделитесь ею с другими, которые могут найти ее полезной.
