вход

Линии в дизайне

Линии в дизайне

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

#1: Используйте линию подчеркивания

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

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

Как же еще можно избежать этой проблемы? Очевидно не использовать буквы с нижними элементами. То есть, составлять заголовки так, что бы их не было. Хотя лично мне это кажется не реально. Любое ограничение всегда вызывает трудности. Еще как вариант, сделать все буквы заглавными. Такой прием очень часто можно встретить на сайтах, подчеркнутые заголовки в верхнем регистре. Ну что ж, это тоже имеет право на жизнь, но лично мне это не очень нравиться. Или скажу так, я приемлю это на коротких заголовках. Если линию не удается опустить, то единственный способ избежать пересечения с буквами, это разорвать линию в этих местах.

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

Продолжая линию подчёркивания

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

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

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

#2: Используйте линии разрываемые текстом.

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

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

#3: Разграничите заголовок

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

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

#4: Используйте вертикаль

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

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

#5: Используйте диагональ

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

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

Диагональный эффект очень хорош для ретро дизайнов. Как например на образце выше.

#6: Станьте фанатом линий

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

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

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

Вдохновение

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

Вывод

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

Интересное видео

Планета Земля

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

Статья → Линии в дизайне

  1. Андрей:

    Полезная статья, спасибо.

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

Статья → Линии в дизайне

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.