Как проектировать: Создание архитектуры программы или как проектировать табуретку / Хабр

Содержание

Создание архитектуры программы или как проектировать табуретку / Хабр

Взявшись за написание небольшого, но реального и растущего проекта, мы «на собственной шкуре» убедились, насколько важно то, чтобы программа не только хорошо работала, но и была хорошо организована. Не верьте, что продуманная архитектура нужна только большим проектам (просто для больших проектов «смертельность» отсутствия архитектуры очевидна). Сложность, как правило, растет гораздо быстрее размеров программы. И если не позаботиться об этом заранее, то довольно быстро наступает момент, когда ты перестаешь ее контролировать. Правильная архитектура экономит очень много сил, времени и денег. А нередко вообще определяет то, выживет ваш проект или нет. И даже если речь идет всего лишь о «построении табуретки» все равно вначале очень полезно ее спроектировать.

К моему удивлению оказалось, что на вроде бы актуальный вопрос: «Как построить хорошую/красивую архитектуру ПО?» — не так легко найти ответ. Не смотря на то, что есть много книг и статей, посвященных и шаблонам проектирования и принципам проектирования, например, принципам SOLID (кратко описаны тут, подробно и с примерами можно посмотреть тут, тут и тут) и тому, как правильно оформлять код, все равно оставалось чувство, что чего-то важного не хватает. Это было похоже на то, как если бы вам дали множество замечательных и полезных инструментов, но забыли главное — объяснить, а как же «проектировать табуретку».

Хотелось разобраться, что вообще в себя включает процесс создания архитектуры программы, какие задачи при этом решаются, какие критерии используются (чтобы правила и принципы перестали быть всего лишь догмами, а стали бы понятны их логика и назначение). Тогда будет понятнее и какие инструменты лучше использовать в том или ином случае.

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

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

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

Хорошая архитектура

это прежде всего

выгодная

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

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

Гибкость системы. Любое приложение приходится менять со временем — изменяются требования, добавляются новые. Чем быстрее и удобнее можно внести изменения в существующий функционал, чем меньше проблем и ошибок это вызовет — тем гибче и конкурентоспособнее система. Поэтому в процессе разработки старайтесь оценивать то, что получается, на предмет того, как вам это потом, возможно, придется менять. Спросите у себя: «А что будет, если текущее архитектурное решение окажется неверным?», «Какое количество кода подвергнется при этом изменениям?». Изменение одного фрагмента системы не должно влиять на ее другие фрагменты. По возможности, архитектурные решения не должны «вырубаться в камне», и последствия архитектурных ошибок должны быть в разумной степени ограничены. «

Хорошая архитектура позволяет ОТКЛАДЫВАТЬ принятие ключевых решений» (Боб Мартин) и минимизирует «цену» ошибок.

Расширяемость системы. Возможность добавлять в систему новые сущности и функции, не нарушая ее основной структуры. На начальном этапе в систему имеет смысл закладывать лишь основной и самый необходимый функционал (принцип YAGNI — you ain’t gonna need it, «Вам это не понадобится») Но при этом архитектура должна позволять легко наращивать дополнительный функционал по мере необходимости. Причем так, чтобы внесение наиболее вероятных изменений требовало наименьших усилии.

Требование, чтобы архитектура системы обладала гибкостью и расширяемостью (то есть была способна к изменениям и эволюции) является настолько важным, что оно даже сформулировано в виде отдельного принципа — «Принципа открытости/закрытости» (Open-Closed Principle — второй из пяти принципов SOLID):

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

Иными словами: Должна быть возможность расширить/изменить поведение системы без изменения/переписывания уже существующих частей системы.

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

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

Тестируемость. Код, который легче тестировать, будет содержать меньше ошибок и надежнее работать. Но тесты не только улучшают качество кода. Многие разработчики приходят к выводу, что требование «хорошей тестируемости» является также направляющей силой, автоматически ведущей к хорошему дизайну, и одновременно одним из важнейших критериев, позволяющих оценить его качество: «Используйте принцип «тестируемости» класса в качестве «лакмусовой бумажки» хорошего дизайна класса. Даже если вы не напишите ни строчки тестового кода, ответ на этот вопрос в 90% случаев поможет понять, насколько все «хорошо» или «плохо» с его дизайном» (Идеальная архитектура).

Существует целая методология разработки программ на основе тестов, которая так и называется — Разработка через тестирование (Test-Driven Development, TDD).

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

Хорошо структурированный, читаемый и понятный код. Сопровождаемость. Над программой, как правило, работает множество людей — одни уходят, приходят новые. После написания сопровождать программу тоже, как правило, приходится людям, не участвовавшем в ее разработке. Поэтому хорошая архитектура должна давать возможность относительно легко и быстро разобраться в системе новым людям. Проект должен быть хорошо структурирован, не содержать дублирования, иметь хорошо оформленный код и желательно документацию. И по возможности в системе лучше применять стандартные, общепринятые решения привычные для программистов. Чем экзотичнее система, тем сложнее ее понять другим (Принцип наименьшего удивления — Principle of least astonishment. Обычно, он используется в отношении пользовательского интерфейса, но применим и к написанию кода).

Ну и для полноты критерии плохого дизайна:

  1. Его тяжело изменить, поскольку любое изменение влияет на слишком большое количество других частей системы. (Жесткость, Rigidity).
  2. При внесении изменений неожиданно ломаются другие части системы. (Хрупкость, Fragility).
  3. Код тяжело использовать повторно в другом приложении, поскольку его слишком тяжело «выпутать» из текущего приложения. (Неподвижность, Immobility).

Не смотря на разнообразие критериев, все же главной при разработке больших систем считается задача снижения сложности. А для снижения сложности ничего, кроме деления на части, пока не придумано. Иногда это называют принципом «разделяй и властвуй» (divide et impera), но по сути речь идет об иерархической декомпозиции. Сложная система должна строится из небольшого количества более простых подсистем, каждая из которых, в свою очередь, строится из частей меньшего размера, и т.д., до тех пор, пока самые небольшие части не будут достаточно просты для непосредственного понимания и создания.

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

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

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

  • Масштабируемость (Scalability)
    возможность расширять систему и увеличивать ее производительность, за счет добавления новых модулей.
  • Ремонтопригодность (Maintainability)
    изменение одного модуля не требует изменения других модулей
  • Заменимость модулей (Swappability)
    модуль легко заменить на другой
  • Возможность тестирования (Unit Testing)
    модуль можно отсоединить от всех остальных и протестировать / починить
  • Переиспользование (Reusability)
    модуль может быть переиспользован в других программах и другом окружении
  • Сопровождаемость (Maintenance)
    разбитую на модули программу легче понимать и сопровождать

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

некие конструктивные решения, которые после их принятия с трудом поддаются изменению

» (Мартин Фаулер «Архитектура корпоративных программных приложений»). Поэтому большинство определений в той или иной форме сводятся к следующему:

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

«Архитектура — это организация системы, воплощенная в ее компонентах, их отношениях между собой и с окружением.
Система — это набор компонентов, объединенных для выполнения определенной функции.«

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


1. Иерархическая

Не стоит сходу рубить приложение на сотни классов. Как уже говорилось, декомпозицию надо проводить иерархически — сначала систему разбивают на крупные функциональные модули/подсистемы, описывающие ее работу в самом общем виде. Затем, полученные модули, анализируются более детально и, в свою очередь, делятся на под-модули либо на объекты.

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

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

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

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

2. Функциональная

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

Модуль = Функция + Данные, необходимые для ее выполнения.

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

Модуль — это не произвольный кусок кода, а отдельная функционально осмысленная и законченная программная единица (подпрограмма), которая обеспечивает решение некоторой задачи и в идеале может работать самостоятельно или в другом окружении и быть переиспользуемой. Модуль должен быть некой «целостностью, способной к относительной самостоятельности в поведении и развитии» (Кристофер Александер).

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

3. High Cohesion + Low Coupling
Самым же главным критерием качества декомпозиции является то, насколько модули сфокусированы на решение своих задач и независимы. Обычно это формулируют следующим образом: «Модули, полученные в результате декомпозиции, должны быть максимально сопряженны внутри (high internal cohesion) и минимально связанны друг с другом (low external coupling).«

  • High Cohesion, высокая сопряженность или «сплоченность» внутри модуля, говорит о том, модуль сфокусирован на решении одной узкой проблемы, а не занимается выполнением разнородных функций или несвязанных между собой обязанностей. (Сопряженностьcohesion, характеризует степень, в которой задачи, выполняемые модулем, связаны друг с другом )

    Следствием High Cohesion является принцип единственной ответственности (Single Responsibility Principle — первый из пяти принципов SOLID), согласно которому любой объект/модуль должен иметь лишь одну обязанность и соответственно не должно быть больше одной причины для его изменения.

  • Low Coupling, слабая связанность, означает что модули, на которые разбивается система, должны быть, по возможности, независимы или слабо связанны друг с другом. Они должны иметь возможность взаимодействовать, но при этом как можно меньше знать друг о друге (принцип минимального знания).

    Это значит, что при правильном проектировании, при изменении одного модуля, не придется править другие или эти изменения будут минимальными. Чем слабее связанность, тем легче писать/понимать/расширять/чинить программу.

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


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

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

Делая декомпозицию системы желательно проверять ее качество задавая себе вопросы: «Какую функцию выполняет каждый модуль?«, “Насколько модули легко тестировать?”, “Возможно ли использовать модули самостоятельно или в другом окружении?”, “Как сильно изменения в одном модуле отразятся на остальных?

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

Для наглядности, картинка из неплохой статьи «

Decoupling of Object-Oriented Systems

«, иллюстрирующая основные моменты, о которых будет идти речь.

1. Интерфейсы. Фасад

Главным, что позволяет уменьшать связанность системы, являются конечно же

Интерфейсы

(и стоящий за ними принцип

Инкапсуляция + Абстракция + Полиморфизм)

:

  • Модули должны быть друг для друга «черными ящиками» (инкапсуляция). Это означает, что один модуль не должен «лезть» внутрь другого модуля и что либо знать о его внутренней структуре. Объекты одной подсистемы не должны обращаться напрямую к объектам другой подсистемы
  • Модули/подсистемы должны взаимодействовать друг с другом лишь посредством интерфейсов (то есть, абстракций, не зависящих от деталей реализации) Соответственно каждый модуль должен иметь четко определенный интерфейс или интерфейсы для взаимодействия с другими модулями.

Принцип «черного ящика» (

инкапсуляция

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

абстрактной

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

взаимозаменяемость

модулей/объектов с одинаковым интерфейсом, или «один интерфейс, множество реализаций» (подробнее

тут

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

Благодаря интерфейсам и полиморфизму, как раз и достигается возможность модифицировать и расширять код, без изменения того, что уже написано (Open-Closed Principle). До тех пор, пока взаимодействие модулей описано исключительно в виде интерфейсов, и не завязано на конкретные реализации, мы имеем возможность абсолютно «безболезненно» для системы заменить один модуль на любой другой, реализующий тот же самый интерфейс, а также добавить новый и тем самым расширить функциональность. Это как в конструкторе или «плагинной архитектуре» (plugin architecture) — интерфейс служит своего рода коннектором, куда может быть подключен любой модуль с подходящим разъемом. Гибкость конструктора обеспечивается тем, что мы можем просто заменить одни модули/«детали» на другие, с такими же разъемами (с тем же интерфейсом), а также добавить сколько угодно новых деталей (при этом уже существующие детали никак не изменяются и не переделываются). Подробнее про Open-Closed Principle и про то, как он может быть реализован можно почитать тут + хорошая статья на английском.

Интерфейсы позволяют строить систему более высокого уровня, рассматривая каждую подсистему как единое целое и игнорируя ее внутреннее устройство. Они дают возможность модулям взаимодействовать и при этом ничего не знать о внутренней структуре друг друга, тем самым в полной мере реализуя принцип минимального знания, являющейся основой слабой связанности. Причем, чем в более общей/абстрактной форме определены интерфейсы и чем меньше ограничений они накладывают на взаимодействие, тем гибче система. Отсюда фактически следует еще один из принципов SOLID — Принцип разделения интерфейса (Interface Segregation Principle), который выступает против «толстых интерфейсов» и говорит, что большие, объемные интерфейсы надо разбивать на более маленькие и специфические, чтобы клиенты маленьких интерфейсов (зависящие модули) знали только о методах, которые необходимы им в работе. Формулируется он следующим образом: «Клиенты не должны зависеть от методов (знать о методах), которые они не используют» или “Много специализированных интерфейсов лучше, чем один универсальный”.

Итак, когда взаимодействие и зависимости модулей описываются лишь с помощью интерфейсов, те есть абстракций, без использования знаний об их внутреннем устройстве и структуре, то фактически тем самым реализуется инкапсуляция, плюс мы имеем возможность расширять/изменять поведения системы за счет добавления и использования различных реализаций, то есть за счет полиморфизма. Из этого следует, что концепция интерфейсов включает в себя и в некотором смысле обобщает почти все основные принципы ООП — Инкапсуляцию, Абстракцию, Полиморфизм. Но тут возникает один вопрос. Когда проектирование идет не на уровне объектов, которые сами же и реализуют соответствующие интерфейсы, а на уровне модулей, то что является реализацией интерфейса модуля? Ответ: если говорить языком шаблонов, то как вариант, за реализацию интерфейса модуля может отвечать специальный объект — Фасад.

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

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

Замечание: Хотя большинство программистов понимают важность интерфейсов при проектировании классов (объектов), складывается впечатление, что идея необходимости использовать интерфейсы также и на уровне модулей только зарождается. Мне встретилось очень мало статей и проектов, где интерфейсы бы применялись для ослабления связанности между модулями/слоями и соответственно использовался бы паттерн «Фасад». Кто, например, видел «Фасад» на схемах уже упоминавшегося «архитектурного шаблона» Модель-Вид-Контроллер, или хотя бы слышал его упоминание среди паттернов, входящих в состав MVC (наряду с Observer и Composite)? А ведь он там должен быть, поскольку Модель это не класс, это модуль, причем центральный. И у создателя MVC Трюгве Реенскауга он, конечно же, был (смотрим «The Model-View-Controller (MVC ). Its Past and Present», только учитываем, что это писалось в 1973 году и то, что мы сейчас называем Представлением — Presentaition/UI тогда называлось Editior). Странным образом «Фасад» потерялся на многие годы и вновь обнаружить его мне удалось лишь недавно, в основном, в обобщенном варианте MVC от Microsoft («Microsoft Application Architecture Guide»). Вот соответствующие слайды:

А разработчикам, к сожалению, приходится заново «переоткрывать» идею, что к объектам Модели, отвечающей за бизнес-логику приложения, нужно обращаться не напрямую а через интерфейс, то есть «Фасад», как например, в этой статье, откуда для полноты картины взят еще один слайд:

2. Dependency Inversion. Корректное создание и получение зависимостей

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

Инвертирования зависимостей

(

Dependency Inversion

— последний из пяти принципов SOLID):


  • Модули верхнего уровня не должны зависеть от модулей нижнего уровня. И те, и другие должны зависеть от абстракций.
  • Абстракции не должны зависеть от деталей. Реализация должна зависеть от абстракции.

У этого принципа не самая очевидная формулировка, но суть его, как и было сказано, выражается правилом: «

Все зависимости должны быть в виде интерфейсов

». Подробно и очень хорошо принцип инвертирования зависимостей разбирается в статье

Модульный дизайн или «что такое DIP, SRP, IoC, DI и т.п.»

. Статья из разряда must-read, лучшее, что доводилось читать по архитектуре ПО.

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

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

В каком-то смысле такое решение следует Принципу единственного выбора (Single Choice Principle), который говорит: «всякий раз, когда система программного обеспечения должна поддерживать множество альтернатив, их полный список должен быть известен только одному модулю системы«. В этом случае, если в будущем придется добавить новые варианты (или новые реализации, как в рассматриваемом нами случае создания новых объектов), то достаточно будет произвести обновление только того модуля, в котором содержится эта информация, а все остальные модули останутся незатронутыми и смогут продолжать свою работу как обычно.

Ну а теперь разберем подробнее, как это делается на практике и каким образом модули могут корректно создавать и получать свои «зависимости», не нарушая принципа Dependency Inversion.

Итак, при проектировании модуля должны быть определены следующие ключевые вещи:

  • что модуль делает, какую функцию выполняет
  • что модулю нужно от его окружения, то есть с какими объектами/модулями ему придется иметь дело и
  • как он это будет получать

Крайне важно то,

как модуль получает ссылки на объекты, которые он использует в своей работе

. И тут возможны следующие варианты:

  1. Модуль сам создает объекты необходимые ему для работы.

    Но, как и было сказано, модуль не может это сделать напрямую — для создания необходимо вызвать конструктор конкретного типа, и в результате модуль будет зависеть не от интерфейса, а от конкретной реализации. Решить проблему в данном случае позволяет шаблон Фабричный Метод (Factory Method).

    «Суть заключается в том, что вместо непосредственного инстанцирования объекта через new, мы предоставляем классу-клиенту некоторый интерфейс для создания объектов. Поскольку такой интерфейс при правильном дизайне всегда может быть переопределён, мы получаем определённую гибкость при использовании низкоуровневых модулей в модулях высокого уровня».

    В случаях, когда нужно создавать группы или семейства взаимосвязанных объектов, вместо Фабричного Метода используется Абстрактная Фабрика (Abstract factory).

  2. Модуль берет необходимые объекты у того, у кого они уже есть (обычно это некоторый, известный всем репозиторий, в котором уже лежит все, что только может понадобиться для работы программы).

    Этот подход реализуется шаблоном Локатор Сервисов (Service Locator), основная идея которого заключается в том, что в программе имеется объект, знающий, как получить все зависимости (сервисы), которые могут потребоваться.

    Главное отличие от фабрик в том, что Service Locator не создаёт объекты, а фактически уже содержит в себе инстанцированные объекты (или знает где/как их получить, а если и создает, то только один раз при первом обращении). Фабрика при каждом обращении создает новый объект, который вы получаете в полную собственность и можете делать с ним что хотите. Локатор же сервисов выдает ссылки на одни и те же, уже существующие объекты. Поэтому с объектами, выданными Service Locator, нужно быть очень осторожным, так как одновременно с вами ими может пользоваться кто-то еще.

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

    Вообще говоря, Service Locator иногда называют антипаттерном и не рекомендуют использовать (главным образом потому, что он создает неявные связности и дает лишь видимость хорошего дизайна). Подробно можно почитать у Марка Симана:
    Service Locator is an Anti-Pattern
    Abstract Factory or Service Locator?

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

    Это так и называется — Внедрение Зависимостей (Dependency Injection). Обычно требуемые зависимости передаются либо в качестве параметров конструктора (Constructor Injection), либо через методы класса (Setter injection).

    Такой подход инвертирует процесс создания зависимости — вместо самого модуля создание зависимостей контролирует кто-то извне. Модуль из активного элемента, становится пассивным — не он делает, а для него делают. Такое изменение направления действия называется Инверсия Контроля (Inversion of Control), или Принцип Голливуда — «Не звоните нам, мы сами вам позвоним».

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

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

Более подробно и с примерами о способах создания и получения зависимостей можно почитать, например, в этой

статье

(только надо иметь ввиду, что хотя автор пишет о

Dependency Inversion

, он использует термин

Inversion of Control

; возможно потому, что в русской википедии содержится ошибка и этим терминам даны одинаковые определения). А принцип

Inversion of Control

(вместе с

Dependency Injection

и

Service Locator

) детально разбирается Мартином Фаулером и есть переводы обеих его статей: «

Inversion of Control Containers and the Dependency Injection pattern

» и “

Inversion of Control

”.

Не будет преувеличением сказать, что использование интерфейсов для описания зависимостей между модулями (Dependency Inversion) + корректное создание и внедрение этих зависимостей (прежде всего Dependency Injection) являются центральными/базовыми техниками для снижения связанности. Они служат тем фундаментом, на котором вообще держится слабая связанность кода, его гибкость, устойчивость к изменениям, переиспользование, и без которого все остальные техники имеют мало смысла. Но, если с фундаментом все в порядке, то знание дополнительных приемов может быть очень даже полезным. Поэтому продолжим.

3. Замена прямых зависимостей на обмен сообщениями

Иногда модулю нужно всего лишь

известить

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

Связь модулей через обмен сообщениями является гораздо более слабой, чем прямая зависимость и реализуется она чаще всего с помощью следующих шаблонов:

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

    Организация взаимодействия посредством рассылки сообщений имеет дополнительный «бонус» — необязательность существования «подписчиков» на «опубликованные» (т.е. рассылаемые) сообщения. Качественно спроектированная подобная система допускает добавление/удаление модулей в любое время.

  • Посредник (Mediator). Применяется, когда между модулями имеется зависимость «многие ко многим. Медиатор выступает в качестве посредника в общении между модулями, действуя как центр связи и избавляет модули от необходимости явно ссылаться друг на друга. В результате взаимодействие модулей друг с другом («все со всеми») заменяется взаимодействием модулей лишь с посредником («один со всеми»). Говорят, что посредник инкапсулирует взаимодействие между множеством модулей.

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


Дополнение: Модули могут пересылать друг другу не только «простые сообщения, но и объекты-команды. Такое взаимодействие описывается шаблономКоманда

(

Command

).

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

4. Замена прямых зависимостей на синхронизацию через общее ядро

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

Ядро-посредник может как знать о модулях-клиентах и управлять ими (пример — архитектура apache ), так и может быть полностью, или почти полностью, независимым и ничего о клиентах не знать. В сущности именно этот подход реализован в «шаблоне» Модель-Вид-Контроллер (MVC), где с одной Моделью (являющейся ядром приложение и общим хранилищем данных) могут взаимодействовать множество Пользовательских Интерфейсов, которые работают синхронно и при этом не знают друг о друге, а Модель не знает о них. Ничто не мешает подключить к общей модели и синхронизировать таким образом не только интерфейсы, но и другие вспомогательные модули.

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

5. Закон Деметры (law of Demeter)


Закон Деметры

запрещает использование неявных зависимостей: «

Объект A не должен иметь возможность получить непосредственный доступ к объекту C, если у объекта A есть доступ к объекту B и у объекта B есть доступ к объекту C

«.

Java-пример

.

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

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

6. Композиция вместо наследования

Одну из самых сильных связей между объектами дает наследование, поэтому, по возможности, его следует избегать и заменять композицией. Эта тема хорошо раскрыта в статье Герба Саттера — «

Предпочитайте композицию наследованию

».

Могу только посоветовать в данном контексте обратить внимание на шаблон Делегат (Delegation/Delegate) и пришедший из игр шаблон Компонет (Component), который подробно описан в книге «Game Programming Patterns» (соответствующая глава из этой книги на английском и ее перевод).

Статьи в интернете:


Замечательный ресурс —

Архитектура приложений с открытым исходным кодом

, где «

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

«. Одна из статей полностью была опубликована на хабре — «

Масштабируемая веб-архитектура и распределенные системы

».

Интересные решения и идеи можно найти в материалах, посвященных разработке игр. Game Programming Patterns — большой сайт с подробным описанием многих шаблонов и примерами их применения к задаче создания игр (оказывается, есть уже его перевод — «Шаблоны игрового программирования», спасибо strannik_k за ссылку). Возможно будет полезна также статья «Гибкая и масштабируемая архитектура для компьютерных игр» (и ее оригинал. Нужно только иметь ввиду что автор почему-то композицию называет шаблоном «Наблюдатель»).

По поводу паттернов проектирования:

Есть еще принципы/паттерны GRASP, описанные Крэгом Лэрманом в книге «

Применение UML 2.0 и шаблонов проектирования

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

хабре

(самое ценное в комментариях).

Ну и конечно же книги:

Архитектура 4.0. Как проектировать научно-производственные комплексы

25 ноября 2019 г.

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

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

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

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

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

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

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

Например, научно-технический отель «Дайхтор» в Гамбурге – проект группы «Боте, Рихтер, Тегерани». В отеле разместились компании, занимающиеся ведущими инновационными исследованиями и разработками. 11-этажное здание с двумя подземными уровнями находится в центре города. Его архитектурный облик – яркая иллюстрация разнообразия научной деятельности компаний внутри. Комплекс представляет собой треугольник, группирующий 3-4-уровневые офисные блоки. Пространства научно-технического отеля с гибкой планировкой легко могут быть трансформированы и переоборудованы. Лифты, лестницы, санузлы, комнаты совещаний сконцентрированы в вертикальных шахтах. В плане инженерного оснащения особое внимание архитекторы направлено на автономные системы вентиляции и кондиционирования. Сдаваемые в аренду секции энергетически автономны.

 «Дайхтор», Германия, @haditeherani.com

Научно-производственный центр «Инспирия» в норвежском Остфолде (проект группы AART) представляет собой архитектуру высокого качества. Главной частью здания площадью 6500 кв.м является центральный атриум. Чтобы создать иллюзию слияния внутреннего пространства здания с природой, в проекте используется обширное остекление в ограждениях. Архитектура центра символична: строение имеет вид трилистника вокруг циркульного атриума, что отражает идущий по спирали процесс обучения, исследований и рождения идей.

«Инспирия», Норвегия, @aart.dk

Здание Института исследований леса «Метла» университета г. Йоэнсуу в Финляндии построено по проекту группы SARC. Оно расположено недалеко от центра города и имеет в составе университетские лабораторные и учебные помещения. В институте ведутся исследования в области национальных лесных ресурсов, разработки новых материалов на основе дерева. Своей формой здание похоже на огромную деревянную шкатулку. На трёх этажах расположены офисы и лаборатории, обращённые в уютный двор, где находится здание конференц-зала округлой формы. Оно напоминает перевёрнутое деревянное судно. Перекрытие вестибюля поддерживается наклонными деревянными опорами.  Гибкая планировка позволяет трансформировать перегородки, а также ограждения фасадов. Все лаборатории и помещения с мокрыми процессами размещаются на нижнем этаже. Тонкие конструкции каркаса обеспечивают в здании много света, создают уютную атмосферу.

«Метла», Финляндия, @sarc.fi

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

Новое инженерное здание, Великобритания, @grimshaw.global

В России также есть достойные примеры уже реализованных проектов научно-производственных центров. В 2018 году в Москве по проекту нашего архитектурного бюро «Крупный план» построили НПК «Крунит» – офисное пространство для наукоёмких и исследовательских производств.  Необычная округло-вытянутая форма здания, напоминающая корабль, обусловлена сложным рельефом участка, близостью сложившейся жилой застройки и коммуникаций. В здании расположены офисы компаний, работающих в сфере медицины, энергетики, нанотехнологий, робототехники, приборостроения. На каждом этаже находятся и офисные, и производственные помещения.  В отдельной зоне размещены грузовые лифты для перевоза производственных материалов и оборудования. В здании запроектированы высокие потолки (4,2 м) и широкие коридоры для перемещения габаритных грузов и езды на электрокаре, созданы особо прочные полы во всех производственных помещениях.

Можно почитать:

Ленинградский модернизм — 9. «Научный стиль». Комплексность

Ленинградский модернизм — 7. «Научный стиль». Вертикаль

Ленинградский модернизм. «Научный стиль» — 2. Фасады

Ленинградский модернизм. «Научный стиль» – 1

Мэрия Калининграда определилась, как проектировать велодорожки и какими они должны быть — Новости Калининграда

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

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

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

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

Ширина велополосы при устройстве дорожек на тротуарах шириной менее 4,5 м должна быть не менее 1,3 м., в иных случаях — не менее 1,5 м. Ширина разделительной полосы между автомобильной дорогой и велосипедной дорожкой должна быть не менее 1,5 м. В стесненных условиях допускается разделительная полоса шириной 1 м, возвышающаяся над проезжей частью не менее чем на 0,15 м, с окаймлением бордюром.

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

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

Компьютерра: Как проектировать ПО?

Архив

автор : Джек Ривз   05.05.2005

Техники объектно-ориентированного программирования (ООП) и, в частности, C++, похоже, взяли мир разработки ПО штурмом.

Статья впервые была напечатана в «C++ Journal» осенью 1992 года и любезно предоставлена Джеком Ривзом для публикации в «Компьютерре». Перепечатка или распространение статьи возможны только с письменного разрешения автора.
«What is software design», ©1992 by Jack W. Reeves.

Техники объектно-ориентированного программирования (ООП) и, в частности, C++, похоже, взяли мир разработки ПО штурмом. Появилось множество статей и книг, рассказывающих, как применять новые техники программирования. На смену сомнениям, не являются ли техники ООП очередным модным поветрием, пришел вопрос, как получить результат с минимумом издержек. ООП появилось не вчера, но его взрывная популярность выглядит не совсем обычной. Откуда столь внезапный интерес?

Тому есть несколько объяснений, но, возможно, единой причины просто не существует. Может быть, некая комбинация факторов достигла, наконец, критической массы — и понеслось. Тем не менее, похоже, что именно сам язык C++ сыграл в происходящем не последнюю роль. Это, разумеется, вызвано своими причинами, но я хотел бы посмотреть на происходящее под другим углом и предложить свой ответ: C++ обрел популярность, потому что в одно и то же время легко позволяет проектировать ПО и программировать.

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

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

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

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

Одно из следствий перевешивает все остальные. Оно так важно и так очевидно, что остается белым пятном для большинства софтверных компаний: создание программного обеспечения — дешевый процесс. Его даже нельзя назвать недорогим, так он дешев. Да что там — практически бесплатен. Если считать проектом ПО исходный код, то создание («постройка») программного продукта осуществляется компиляторами и компоновщиками. Есть даже подходящий термин для этого — сделать билд. Инвестиции в оборудование для создания программных конструкций невысоки — все, что действительно нужно, это компьютер, редактор текста, компилятор и компоновщик. И на собственно производство программы нужно совсем немного времени. Может показаться, что, допустим, компиляция программы, написанной на C++ и состоящей из 50 тысяч строк, занимает вечность, но подумайте, сколько времени у вас уйдет на создание аппаратуры того же уровня сложности.
Еще одним следствием из нашего предположения, что исходный код и есть проект программы, является тот факт, что проектирование программ с механической точки зрения — процесс несложный. На написание (то есть проектирование) типичного программного модуля длиной в 50–100 строк кода обычно уходит пара дней (отладка такого модуля — это совсем другая история, но об этом позже). Хочется спросить: существует ли любая иная инженерная специализация, в которой на подготовку проектов такой сложности уходило бы столь же мало времени, но сперва мы должны определить, как определять и сравнивать сложность. Тем не менее, очевидно, что программные проекты довольно быстро «набирают объем».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

К примеру, я сейчас работал над проектом, в котором между внутренностями модуля А и модулем Б была обнаружена временная зависимость. К несчастью, абстракция модуля А не предусматривала возможности корректного включения вызова модуля Б. Естественно, когда мы это обнаружили, менять абстракцию модуля А было уже поздно. Как вы понимаете, чтобы решить эту проблему, нам пришлось внести массу поправок во внутренности модуля А. Мы еще не установили версию 1.0, но уже были уверены, что проект «посыпался». Каждая новая поправка мешала одной из предыдущих. Это нормальная практика. В конце концов, я и мои коллеги потребовали внесения изменений в проект, но чтобы убедить в этом руководство, пришлось попотеть в нерабочее время. Разумеется, бескорыстно.

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

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

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

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

Так может, лучше позволить настоящим проектировщикам сразу описывать проект в настоящем коде, а не заниматься позднейшей трансляцией языконезависимого проекта? Что нам нужно — так это унифицированная проектная нотация, подходящая для проектирования всех уровней. Другими словами, нам нужен язык программирования, на котором можно заниматься и проектированием концепций верхнего уровня. И такой язык есть. C++ — язык программирования, подходящий для реальных приложений —является также ясным языком для описания проекта. C++ позволяет нам напрямую выражать высокоуровневую информацию о составляющих проекта, что облегчает производство и дальнейшую доводку до ума. Строгая проверка типов позволяет легко обнаружить ошибки. В результате мы получаем более ясный — а по существу, более технический, более инженерный — проект.

В конечном счете, программный проект должен быть представлен на каком-то языке программирования, а затем проверен и доведен до ума с помощью циклов билд/тестирование. Остальное — от лукавого. Давайте посмотрим, какие средства или технологии разработки ПО получили популярность. Структурные языки были настоящим прорывом в свое время. Для их популяризации был создан Pascal, который и сам стал популярным. ООП — это новый виток развития, в центре которого лежит С++. А теперь давайте подумаем о том, что не сработало? CASE-средства? Популярны? Да. Универсальны? Нет! Структурные схемы? То же самое. Как и диаграммы Уорнера-Орра, диаграммы Буча, объектные диаграммы и т. д. У всех вышеперечисленных технологий есть свои сильные стороны и один общий недостаток — они не имеют прямого отношения к разработке. На самом деле, единственная действительно популярная нотация — это PDL и его аналоги.

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

Отметьте также, как меняется процесс разработки. Раньше разработка была подобна водопаду(Имеется в виду водопадная модель программирования — линейная модель жизненного цикла проекта разработки программ, состоящая из четко определенных этапов: сбор требований, проектирование, кодирование, тестирование и эксплуатация. Каждый их них должен быть завершен до начала следующего. Возвраты к предыдущему этапу допускаются). Сегодня мы говорим, что она идет по спирали, о быстром создании прототипов. И хотя такие техники частенько сопровождаются терминами типа «снижение риска» и «сокращенные сроки поставки продукта», на самом деле речь идет о кодировании с самого начала жизненного цикла проекта. И это хорошо. Это позволяет запустить цикл билд/тестирование раньше, а также повышает вероятность того, что детализацию проекта будут делать те же программисты, которые разрабатывали его архитектуру.

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

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

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

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

Итак, к чему мы пришли:

  • Настоящее ПО запускается на компьютерах. Оно представляет собой последовательность из единиц и нулей, сохраненных на каком-то магнитном носителе. Это не листинг программы на С++ или любом другом языке программирования.
  • Листинг программы — это проектный документ. Сами программы создаются компиляторами и компоновщиками.
  • Производить настоящее ПО очень дешево (а по мере развития компьютерных мощностей будет еще дешевле).
  • Проектировать настоящее ПО безумно дорого. Это так, потому что программы невероятно сложны и практически все этапы развития программного продукта можно отнести к проектированию.
  • Программирование есть вид проектирования. Хорошие проектировщики поняли это и кодируют всегда, когда нужно.
  • Кодировать нужно чаще, чем многим кажется. Зачастую процесс воспроизведения проекта в коде выявляет недостатки проекта и приводит к дополнительной доработке. Чем раньше это случится, тем лучше окажется проект.
  • Раз уж производить ПО так дешево, то формальные инженерные методы проверки работоспособности проектов не слишком востребованы. Гораздо легче и дешевле построить проект, а потом уже тестировать его, чем пытаться доказать его корректность.
  • Тестирование и отладка — это тоже проектирование (точнее, софтверный эквивалент утверждения проекта и его доводки в других инженерных дисциплинах). При правильно поставленном процессе разработки важность этих этапов не принижается.
  • Есть и другие виды проектирования ПО (проектирование архитектуры, проектирование модулей, структурное проектирование и т. д.). Эти методы тоже могут быть полезны.
  • Все виды проектирования взаимосвязаны. Правильная постановка процесса разработки предусматривает — порой радикальные — изменения проекта, если на каком-то этапе проектирования выясняется, что это необходимо.
  • В процессе разработки вы можете использовать разнообразные нотации (как для вспомогательной документации, так и в средствах для облегчения проектирования). Однако эти нотации не являются частью разработки.
  • Разработка ПО в большей мере искусство, нежели инженерная дисциплина. В основном это происходит из-за недостатка жесткости в критических процессах утверждения и улучшения проекта.
  • В конечном счете, успехи разработок программного обеспечения зависят от успешного развития техник программирования, что, в свою очередь, означает усовершенствование языков программирования. Подобным усовершенствованным языком можно считать C++, который завоевал популярность, потому что был мэйнстримовским языком программирования, напрямую поддерживающим лучшее проектирование.
  • С++ — шаг в правильном направлении, но этого мало.
Конвейер. Линия 1

Разумеется, Джек Ривз далеко не единственный человек, который задумывался над тем, насколько Настоящие Программисты похожи на Настоящих Инженеров. В 2002 году Уоттс С. Хамфри (Watts S. Humphrey), известный ученый, почти тридцать лет проработавший в IBM, посвятил этой проблеме несколько выпусков своей колонки «Watts New». Правда, Уоттса заинтересовала более общая постановка задачи: насколько вообще отлаженные инженерные методики разработки проектов пригодны для создания программного обеспечения? По мнению Уоттса, ничто и никто не мешает программистам использовать опыт инженеров из других областей. Никто, кроме них самих.

Как и Ривз, Уоттс отмечает, что между софтверной индустрией и промышленностью есть значительные различия. Однако они не столь велики, чтобы программисты могли с чистой совестью отказаться от создания жестких планов разработки и четкого следования им. Конечно, затраты на производство программ, пишет Уоттс, отличаются от затрат на производство экземпляра продукта, но если приплюсовать к стоимости компиляции (здесь я использую терминологию Ривза. — В.Г.) затраты на постпродажное обслуживание, то окажется, что программы вовсе не так дешевы, как можно было бы подумать.
Собственно говоря, конфликт между свободолюбивыми программистами и настырными менеджерами проектов не является уникальной чертой софтверной индустрии. Просто в промышленности все эти страсти уже давно улеглись, однако еще сто лет назад всерьез обсуждалось, кто эффективнее: талантливые Кулибины, иногда выдающие гениальные продукты, или заполненные серыми костюмами конструкторские бюро, которые выдают не бог весть что, зато регулярно. К сожалению, бизнесу в целом гораздо важнее предсказуемость, и, наверное, любой читатель понимает, что продукты, его окружающие, созданы коллективами, а не гениями-одиночками.

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

Конвейер. Линия 2

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

В колонке «Поучимся у железячников: планирование» Уоттс задает себе два вопроса и сам же на них отвечает. На вопрос «Подходят ли стандартные инженерные методики к разработке программного обеспечения?» он дает утвердительный ответ. А вот на вопрос «Должны ли эти методики быть жесткими и принудительными?» четко ответить затрудняется и долго объясняет, что любые методики, мол, нужно применять с умом. Тем не менее, разумное применение общепринятых методов разработки в контексте разработки программного обеспечения позволит, по его мнению, значительно повысить вероятность того, что проект будет сдан в срок, не вылезет за рамки отведенного бюджета и будет достаточно качественным.
Очевидно, что только такими методами радикально проблему качества ПО не решить, поэтому в следующей колонке Уоттс снова возвращается к теме «инженеров» и «программистов», чтобы предложить в качестве панацеи — лучшее документирование. Это, утверждает Уоттс,

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

    Конвейер. Линия 3

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

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

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

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

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

    Одно из свидетельств тому — выступление Грега Костикяна (www.costik.com) на конференции разработчиков компьютерных игр GDC 2005. Местами Грег перегибает палку, но зато объясняет, почему старые игрушки мы помним до сих пор, а о новых забываем, вынув диск из лотка.

    Конвейер. Линия 4

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

    Но теперь этого нет.

    Не далее как в 1992 году средний бюджет ПК-игры составлял 200 тысяч долларов. Сегодня типичный бюджет игры класса А — 5 млн. долларов. На следующем витке бюджеты будут порядка 20 млн. долларов. С увеличением вложений издатели становятся невероятно консервативными, и шансов у нетривиальных проектов все меньше и меньше. Вот мы и получим Driver 69. Бесконечный Grand Theft Auto. Дребедень за дребеденью. Сегодня вы не можете издать новационную игру. Если, конечно, вас зовут не Райт[Уилл Райт (Will Wright) — основатель компании Maxis (Sim City, The Sims)] или Миямото[Сигеру Миямото (Shigeru Miyamoto) — главный игровой дизайнер Nintendo, автор Donkey Kong].

    Многие из вас были на выступлении Microsoft?

    Не знаю, как вам, а мне было страшно. Эра высокого разрешения. Больше. Громче. Более реалистичное 3D. Сотни разработчиков в команде. И большие бабки.

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

    Новые бюджеты, новые команды означают смерть новаторского подхода.

    <…>

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

    С такими ставками — не рискуют. Но без риска не будет новаторства, а именно новаторство — сердце игровой индустрии.

    Грег Костикян

    Как спроектировать базу данных, чтобы в будущем не пришлось её переписывать — базовые советы

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

    А если вы знакомы с SQL и вас не остановили предыдущие термины, на всякий случай напомним, что:

    • атомарность предполагает, что значение нельзя разделить на несколько атрибутов;
    • под кортежем понимается запись (строка) в таблице базы данных;
    • атрибут — это колонка таблицы;
    • неключевой атрибут — это атрибут, не входящий в состав никакого потенциального ключа.

    ***

    Есть минимум два требования, которые должны быть соблюдены при проектировании структуры БД:

    1. Сохранить всю информацию после разделения её на таблицы.
    2. Минимизировать избыточность того, как эта информация хранится.

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

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

    • используйте хотя бы третью нормальную форму;
    • создавайте ограничения для входных данных;
    • не храните ФИО в одном поле, также как и полный адрес;
    • установите для себя правила именования таблиц и полей.

    Используйте хотя бы третью нормальную форму

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

    Нормальных форм существует целых 6 штук, однако обычно соблюдают всего лишь 3 и для начала этого более чем достаточно.

    Первая нормальная форма

    Для примера будем использовать отношение сотрудники_отделы_проекты. В нём есть информация о номере сотрудника, его фамилии, номере отдела, в котором он работает, номере телефона отдела и так далее.

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

    • в отношении нет одинаковых кортежей;
    • кортежи не упорядочены;
    • атрибуты не упорядочены и различаются по наименованию;
    • все значения атрибутов атомарны.

    Вторая нормальная форма

    В нашем случае у таблицы выше имеется сложный (составной) ключ {Н_СОТР, Н_ПРО}. От части ключа Н_СОТР зависят неключевые атрибуты ФАМ, Н_ОТД, ТЕЛ. От части ключа Н_ПРО зависит неключевой атрибут ПРОЕКТ. А вот атрибут Н_ЗАДАН зависит от всего составного ключа, так как сотрудник может выполнять одно задание в одном проекте.

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

    Наконец, третья нормальная форма

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

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

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

    Используйте проверочные ограничения

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

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

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

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

    Стоит убедиться, что обязательность заполнения (NOT NULL) проверяется для полей, которые строго не должны оставаться пустыми.

    Используйте CHECK, чтобы убедиться, что значения входят в диапазон (например чтобы цена не была отрицательной).

    Не храните ФИО в одном поле, также как и полный адрес

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

    Установите для себя правила именования таблиц и полей

    Сложно работать с данными, которые выглядят как-то так: user.firstName, user.last_name, user.birthDate. Конечно, каждый программист в праве сам выбирать для себя стиль наименования, но для SQL рекомендуется выбрать наименование с подчёркиванием. Потому что не все SQL-движки одинаково работают с заглавными буквами, а помещать всё в кавычки бывает утомительно.

    Ещё нужно определиться как будут называться таблицы — во множественном числе (users) или в единственном (user). Каждая базовая структура в БД обычно настроена на множественное число, поэтому и именовать таблицы стоит соответственно.

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

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

    Перевод статьи «A humble guide to database schema design»

    Как проектировать поток действий пользователей – статьи про интернет-маркетинг

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

    Начните с пользователя

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

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

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

    Привяжите потоки действий пользователей к воронкам конверсии

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

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

    Вот несколько типичных потоков пользователей:

    • Платная реклама. Пользователь пришёл по баннеру или через рекламу в той или иной рекламной сети (Google AdWord, РСЯ).
    • Соцмедиа. Пользователь пришёл из постинга своего знакомого в социальной сети.
    • Электронная почта. Пользователь пришёл из рассылки или по реферральному приглашению.
    • Поисковая выдача. Пользователь пришёл со страницы с результатами поиска.
    • Новость. Пользователь встретил упоминание вас в новости или в постинге блога.

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

    Вглубь воронки: как приобретается клиент

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

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

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

    • С пользователями какого типа вы хотите работать?
    • Что именно они делают: активно ищут решение проблемы или бесцельно лазят по сайтам?
    • Какую проблему они пытаются решить?
    • Как лучше всего завладеть их вниманием?
    • Как вы соотноситесь с пользователем?
    • Какой посыл найдёт отклик у пользователя?
    • Есть ли у пользователя болевая точка, давление на которую ваш продукт или сайт может снять?
    • Как вы можете чётко и быстро сформулировать это решение?
    • Какие призывы к действию действительно будут работать для ваших целевых пользователей?

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

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

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

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

    Для того, чтобы обеспечить это продвижение, используйте следующие методы:

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

    Свяжите потоки для обеспечения полного взаимодействия с пользователем

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

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

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

    В рассматриваемом примере совокупная воронка состоит из воронки приобретения покупателя и потока управления взаимоотношениями с клиентом (CRM).

    Выстраивание многоуровневых воронок создаёт связанный цикл взаимодействия с посетителем сайта. Таким образом мы получаем следующую воронку: рекламный баннер -> страница приземления -> подписка -> получение рассылки -> посещение страницы продукта -> покупка.

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

    В этом потоке вам необходимо рассмотреть все элементы стратегии CRM и потока покупки на сайте, включая:

    • взаимодействие с подписчиком по почте;
    • страницы, на которые подписчик приходит при возвращении на сайте,
    • поток от внутренних страниц к странице завершения покупки.

    При проектировании цепочки от подписчика к покупателю имеет смысл обратить внимание на следующие ключевые моменты:

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

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

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


    Выводы

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

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

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

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

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

    Статья основана на публикации Моргана Брайана  «Stop Designing Pages And Start Designing Flows»  в издании Smashing Magazine.

    Как научиться правильно проектировать архитектуру будущего приложения

    Вопрос. Как правильно проектировать грамотную и легко поддерживаемую архитектуру приложения?

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

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

    Требования к будущему ПО

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

    Понимать те цели, которые поставлены перед клиентом и его компанией. Уметь увидеть всю картину целиком и предоставить под это ИТ решение. Другими словами — мыслить стратегически.

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

    1. Что мы делаем?
    2. Как мы это должны сделать?
    3. Зачем мы это делаем?
    4. Сколько примерно пользователей планируется?
    5. Какой результат у нас должен быть на выходе?
    6. Какая степень деградации системы возможна?
    7. Как часто будут выходить обновления системы?

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

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

    Архитектурные паттерны

    Нужно знать какие архитектурные шаблоны (SOA, N-tier и т.д.) есть, в чем плюсы и минусы каждого. К примеру, понимать когда лучше использовать монолит, а когда лучше использовать микросервисы. Так же предусмотреть варианты горизонтального и вертикального масштабирования ПО.

    Работа с базами данных

    Вне зависимости от того, какой это будет проект, новый или уже существующий, вам нужно хорошо знать базы данных. Как проводить проектирование, как нормализовать, денормализовать и когда это нужно делать. Когда нужно использовать репликацию и балансировку на серверах. Уметь тюнинговать ту или иную базу данных под проект и возрастающие нагрузки. Понимать, где лучше использовать реляционную СУБД (РСУБД), а где NoSQL.

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

    Что получается в итоге

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

    Но существует ли та самая грамотная и правильная архитектура проекта?

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

    Как создать логотип [Пошаговое руководство]

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

    Но что такого в логотипе, что заставляет вас узнавать его? Что такого в дизайне, что может вызвать воспоминания или даже определенные эмоции?

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

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

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

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

    Как создать логотип бесплатно

    1. Начните со своей истории
    2. Придумайте слова, которые описывают ваш бренд
    3. Эскизные идеи, основанные на этих словах
    4. Протестируйте свои лучшие эскизы с помощью образа покупателя
    5. Уточните выбранный эскиз
    6. Разработайте макет вашего логотипа на бесплатной платформе дизайна
    7. Выберите универсальные варианты цвета
    8. Выберите шрифт
    9. Обеспечение масштабируемости

    Как создать логотип для бизнеса, компании или личного логотипа

    Изображение через Coca-Cola

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

    1. Начните со своей истории

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

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

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

    2. Придумайте слова, описывающие ваш бренд

    Теперь, когда у вас есть история, пришло время перенести черновой вариант логотипа из истории в сеттинг. Откройте Thesaurus.com и введите термин, который лучше всего описывает ваш продукт, в строку поиска.

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

    Изображение с Thesaurus.com

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

    3. Набросайте идеи, основанные на этих словах

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

    При наброске концепции логотипа помните о следующих советах:

    • Сохраняйте форму простой. Если вы можете набросать наиболее символические компоненты за семь секунд или меньше , вы в хорошей форме. Вы должны абсолютно избегать любых популярных графических изображений или общих символов, таких как земной шар, звезда или подобные значки, которые люди слишком легко узнают из других мест.Они легко забываются с первого взгляда. Чем более творчески вы проявите себя на этом этапе, тем лучше будет ваш окончательный логотип. Ваш логотип — это то, что ваши потребители запомнят больше всего. Будьте честны в этом произведении.
    • Цвета могут быть как вашими лучшими друзьями, так и злейшими врагами. Вы должны включить цвет в свой логотип, но будьте избирательны в том, какие цвета вы используете. Помните о текущих цветовых тенденциях, которые уже используются сегодня и на вашем целевом рынке. Как правило, не выбирают более трех цветов .Выберите цвет или группу цветов, которые помогут вам выделиться среди конкурентов. Но, пожалуйста, из любви к маркетингу, не используйте всю радугу!

    4. Протестируйте свои лучшие наброски с помощью образа покупателя

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

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

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

    5. Уточните выбранный эскиз

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

    Чтобы приступить к доработке логотипа, вернитесь к терминам, которые вы определили при первом использовании Thesaurus.com на шаге 2. Теперь посмотрите на выбранный эскиз и спросите себя: какие термины еще не отражены в этом эскизе? Используйте их для дальнейшего развития вашего эскиза и добавьте черты, которые вам больше всего понравились в проектах, которые вы не выбрали для уточнения.

    6. Разработайте макет вашего логотипа на бесплатной платформе дизайна

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

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

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

    7. Выберите универсальные варианты цвета

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

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

    Изображение Джей Мойе

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

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

    8. Выберите шрифт

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

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

    Держитесь подальше от универсальных шрифтов, которые входят в стандартную комплектацию каждого текстового процессора.Некоторыми примерами общих шрифтов являются Times New Roman, Lucida Handwriting и Comic Sans. Эти шрифты будут работать только против вас и вашей компании, делая вас менее запоминающимся.

    9. Обеспечение масштабируемости

    Логотипы

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

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

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

    Когда вы закончите свой логотип, как вы узнаете, выиграли ли вы? Легко: используйте наш Logo Grader, чтобы оценить устойчивость и эффективность вашего нового логотипа.

    В соавторстве: Рэйчел Бегг, Джули Хруска и Бритт Шварц

    10 шагов для повышения вовлеченности пользователей

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

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

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

    Загрузить электронную книгу: Создайте свой первый веб-сайт за 9 простых шагов

    Вот шаги по разработке веб-сайта:

    1. Определите цель вашего веб-сайта.
    2. Найдите вдохновение для веб-дизайна
    3. Выберите платформу веб-сайта
    4. Выберите тему
    5. Настройте свой сайт
    6. Настройте страницы
    7. Оптимизируйте навигацию вашего сайта
    8. Сделайте веб-сайт удобным для мобильных устройств и протестируйте свой сайт
    9. 2 запустить его
    10. Следите за своим сайтом и улучшайте его по мере продвижения

    В этой статье вы узнаете, как создать веб-сайт без каких-либо технических навыков или знаний.

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

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

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

    Кроме того, веб-дизайн может оказать существенное влияние на покупательский путь.

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

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

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

    Как создать веб-сайт за 10 шагов

    В этом разделе будет показано пошаговое руководство по созданию веб-сайта.

    1. Определите цель вашего веб-сайта

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

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

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

    Если вам нужна помощь в определении цели вашего веб-сайта, вот несколько наводящих вопросов: 

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

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

    2. Исследования для вдохновения веб-дизайна

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

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

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

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

    3. Выберите правильную платформу веб-сайта

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

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

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

    В Hostinger наши планы виртуального хостинга стоят от 1,99 долларов США в месяц до 4,99 долларов США в месяц . Все подписки включают гарантию безотказной работы 99,9% , бесплатный SSL-сертификат и регулярное резервное копирование для обеспечения безопасности файлов.

    клавиатура_стрелка_влево клавиатура_стрелка_право

    Если вам понадобится помощь в настройке, наша служба поддержки 24/7 будет готова помочь вам в чате.

    Вот основные преимущества использования WordPress:

    • Удобство использования. Интерфейс WordPress на основе меню прост в использовании для пользователей любого уровня навыков, от новичков до разработчиков веб-сайтов.
    • Высокая универсальность. Обширная коллекция плагинов WordPress позволяет добавлять пользовательские функции поверх основного программного обеспечения.Таким образом, вы можете создавать различные типы веб-сайтов в несколько кликов.
    • Масштабируемость. Поскольку пользователи контролируют свой веб-хостинг, они могут выбрать обновление своего плана, когда им потребуется больше ресурсов для поддержки своего сайта WordPress.
    • Доступно. За исключением хостинга, WordPress бесплатен, как и многие его плагины и темы.

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

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

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

    Ниже приведены некоторые преимущества использования Zyro Website Builder:

    • Управляемый облачный хостинг. Этот создатель веб-сайта позаботится о настройке и обслуживании серверной части для своих клиентов.
    • Бесплатные инструменты искусственного интеллекта. Эти функции могут помочь вам провести мозговой штурм вашего личного бренда или визуальной идентификации компании, начиная от названия компании и заканчивая логотипом и слоганом. Генератор контента AI также отлично подходит для создания шаблонов веб-копий.
    • Встроенные инструменты SEO. В отличие от WordPress, нет необходимости устанавливать расширение для оптимизации вашего сайта для поисковых систем.Zyro Website Builder оснащен функциями редактирования замещающего текста изображения, изменения URL-адреса страницы и вставки метаданных для страниц результатов поисковой системы (SERP).
    • Универсальные возможности интернет-магазина. Отслеживание заказов, управление запасами, применение скидок и несколько вариантов онлайн-платежей доступны для пользователей Zyro eCommerce и eCommerce plus. Кроме того, создатель сайта не взимает комиссию.

    Планы Zyro Website Builder варьируются от $1.99/месяц и $13,99/месяц . Все подписки поставляются с бесплатным SSL-сертификатом , удалением рекламы, стоковыми фотографиями через Unsplash и настраиваемым значком для брендинга вашего сайта.

    Помимо Zyro, другие популярные конструкторы веб-сайтов на рынке включают Squarespace, Weebly и Webflow.

    После выбора создателя веб-сайта обязательно получите доменное имя, которое представляет собой URL-адрес, который посетители вставляют в свой браузер, чтобы открыть сайт, например, example.com.

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

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

    Не забудьте выбрать подходящее расширение доменного имени. Обычно используется TLD .com , который является обычным для коммерческих веб-сайтов. Цена начинается с $8,99/год .

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

    4. Выберите тему веб-сайта, соответствующую вашей цели

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

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

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

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

    Стоимость одной темы обычно начинается от $40/лицензия и выше до сотен долларов.

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

    • Набор функций. Лучше всего выбрать тему с функциями, подходящими для целей вашего сайта. Например, те, кто владеет интернет-магазином, могут захотеть использовать тему с готовой страницей магазина, а также макеты для бестселлеров и товаров со скидкой.
    • Варианты настройки. Проверьте варианты шрифта, цвета и макета, предоставляемые темой. Некоторые разработчики могут также включать несколько готовых страниц и наборов значков.
    • Оперативность. Проверьте, может ли тема веб-сайта адаптироваться к размерам экранов компьютеров, планшетов и мобильных устройств.
    • SEO. Разработчики темы могут заявлять, что их продукт имеет чистый и легкий HTML-код, который отлично подходит для производительности и SEO. Один из способов убедиться, что это правда, — проверить файл с помощью службы проверки разметки.
    • Совместимость с расширениями. Используйте тему, которая хорошо работает с подключаемыми модулями WordPress, которые вы планируете использовать, чтобы не нарушить работу веб-сайта.
    • Совместимость с браузером. Тема должна хорошо выглядеть и правильно работать во всех основных браузерах, таких как Google Chrome, Safari и Firefox.
    • Рейтинги и отзывы. Они могут указать, правильно ли работает тема и какие проблемы с ней возникали у предыдущих клиентов.
    • Последнее обновление. Желательно, чтобы команда разработчиков обновляла продукт каждые шесть месяцев. Использование устаревшей версии может сделать ваш сайт уязвимым для проблем с безопасностью.
    • Служба поддержки клиентов. Посмотрите, какие каналы предлагает разработчик, чтобы помочь с темой. Многие предлагают руководства пользователя, документацию или поддержку по электронной почте.

    Что касается разработчиков веб-сайтов, таких как Zyro или Squarespace, шаблоны обычно предоставляются бесплатно в специальной библиотеке.

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

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

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

    После того, как вы установили тему веб-сайта, переходите к следующему шагу — настройке дизайна.

    5. Настройка веб-дизайна

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

    Для тех, кто использует WordPress в качестве своей платформы, откройте Theme Customizer , перейдя на Dashboard -> Appearance -> Customize .

    Имейте в виду, что настраиваемость вашего веб-сайта зависит от темы.

    Например, собственный Twenty Twenty-One WordPress позволяет редактировать цвет фона и изображение, но нет встроенных настроек для изменения шрифта. Однако для этого можно вставить собственный код CSS.

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

    Те, кто использует Zyro Website Builder, могут перейти на Dashboard -> Edit Website. Это даст вам доступ к редактору перетаскивания, где вы можете изменять стили дизайна и добавлять новые элементы сайта с боковой панели.

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

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

    Ниже приводится краткое объяснение того, что передают все основные цвета:

    • Красный. Символизирует любовь, аппетит или силу. Известные бренды, использующие этот цвет, включают Coca-Cola, Netflix и Target.
    • Оранжевый. Символ дружелюбия или осторожности. Amazon использует этот цвет в своем логотипе.
    • Желтый. Относится к ясности и молодости. Также часто используется для привлечения внимания. Энергетическая компания Shell использует этот цвет в своем бренде.
    • Зеленый. Часто ассоциируется со здоровьем, деньгами и природой. Spotify, Starbucks и Whole Foods — некоторые известные бренды, использующие этот цвет.
    • Синий. Символизирует безопасность и доверие. Это также популярный выбор среди технологических брендов, таких как Facebook и Microsoft.
    • Фиолетовый. Демонстрирует царственность, мудрость и красоту. Вы можете найти этот цвет в конфетах таких брендов, как Cadbury и Milka.

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

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

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

    Сайт

    Ritual — отличный пример удачной цветовой гаммы.

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

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

    Если вам нужна помощь в создании подходящей цветовой схемы для веб-сайта, используйте такие инструменты, как Coolors или Paletton.

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

    Согласно Canva, существует три основных типа шрифтов: 

    • С засечками. Известные примеры включают Times New Roman и Cambria. Эти шрифты имеют декоративные окончания на штрихах. Поскольку они обычно символизируют авторитет и формальность, они более популярны среди финансовых, государственных или юридических агентств.
    • Без засечек. Helvetica и Arial — известные представители этого типа шрифта.Штрихи имеют ровную ширину и не имеют концов. Технологические и стартап-бренды обычно используют их, поскольку эти шрифты обычно передают модернизм.
    • Скрипт. Эти шрифты имеют рукописный и курсивный стиль. Как правило, они символизируют творчество или элегантность. Таким образом, они более широко используются в сфере моды, продуктов питания или напитков.

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

    Сайт Great Jones — отличный пример такой практики. Он использует Cooper Black для логотипа и заголовков, а Hope Sans зарезервирован для подзаголовков, ссылок и цитат.

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

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

    После настройки цветовой схемы и шрифтов перейдите к следующему разделу.

    6. Настройка основных страниц

    Как правило, сайт содержит следующие веб-страницы: 

    • Домашняя страница.
    • О странице.
    • Контактная страница.
    • Страница блога.
    • Страница продукта или услуги.

    Чтобы создать веб-страницу на WordPress, перейдите в Страницы -> Добавить новый в панели администратора.Вот как выглядит интерфейс, если вы используете редактор Gutenberg:

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

    Для пользователей Zyro Website Builder щелкните значок Страницы и навигация в верхнем левом углу. Вы можете отредактировать существующую страницу или добавить новую, выбрав готовый или пустой макет.

    Давайте посмотрим, как должна выглядеть каждая веб-страница: 

    Домашняя страница

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

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

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

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

    Компания Mirror, занимающаяся домашними тренажерами, делает это с помощью полноразмерного видеобаннера на своей домашней странице. Размещение этого элемента над сгибом гарантирует, что он с самого начала привлечет внимание посетителей.

    О странице 

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

    Например, на странице «О зубной пасте Bite» есть УТП компании, фотография основателя и ознакомительное видео.

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

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

    Контактная страница 

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

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

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

    Вот несколько советов по созданию страницы контактов:

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

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

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

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

    Страница блога

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

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

    Куки и веб-сайт Кейт — хороший пример этой структуры:

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

    В более длинных сообщениях вместо этого может быть оглавление, чтобы упростить навигацию для читателя, как в этом примере из «Моя жена уволилась с работы»:

    Сегодня многие веб-сайты блогов, такие как The Blonde Abroad, используют сетку или макет галереи, которые представляют фрагменты статей в интерактивных карточках.

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

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

    Страница продукта или услуги

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

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

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

    Тем не менее, вот несколько общих советов, которым вы можете следовать:

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

    Если вам нужны ссылки на страницы продуктов, BHLDN — отличный веб-сайт для просмотра.

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

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

    7. Оптимизация взаимодействия с пользователем

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

    Навигация

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

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

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

    Вот пример с ASOS:

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

    Веб-сайт Damn Good Beauty является отличной демонстрацией этого:

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

    Pinch of Yum имеет отличную панель поиска, которую можно использовать в качестве справочной информации.Он занимает всю ширину экрана, предоставляя больше места для визуального отображения результатов поиска. Существует также система фильтрации, чтобы сузить ответы.

    Визуальная иерархия

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

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

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

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

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

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

    Скорость страницы

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

    Размер элементов веб-дизайна может существенно повлиять на время загрузки сайта. Например, если изображение больше 1 МБ, скорее всего, пострадает скорость. Google рекомендует, чтобы размер каждой страницы веб-сайта не превышал 500 КБ.

    Вот как с точки зрения веб-дизайна можно повысить скорость загрузки страницы:

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

    Исследования показывают, что когда веб-сайт недоступен, 71% людей с ограниченными возможностями покинут его.Только в США проживает более 61 миллиона человек с ограниченными возможностями, поэтому неспособность удовлетворить эту демографическую группу может значительно повлиять на ваш веб-трафик.

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

    Чтобы сделать веб-сайт более доступным, обязательно сначала прочитайте WCAG. Это стандарты, которые определяют, легко ли пользоваться сайтом всем людям.

    Вот несколько способов улучшить доступность веб-сайта:

    • Включить замещающий текст для изображений. Помимо того, что они отлично подходят для SEO, они также полезны для приложений, которые переводят веб-контент в речь или шрифт Брайля для слабовидящих людей.
    • Помните о доступности клавиатуры. Некоторые физические недостатки затрудняют использование мыши или трекпада для навигации. Убедитесь, что каждый интерактивный элемент на веб-сайте можно использовать с помощью клавиши Tab, например ссылки, кнопки призыва к действию и формы.
    • Используйте удобочитаемые и понятные URL-адреса. Еще одна хорошая SEO-практика, улучшающая доступность.Убедитесь, что ссылка и ее якорный текст содержат достаточно информации о веб-странице.
    • Используйте средство исправления специальных возможностей. Такие инструменты могут предоставлять все функции, необходимые для удобства использования веб-сайта людьми с ограниченными возможностями. Модный бренд Zara использует услугу EqualWeb, как показано ниже:

    8. Сделайте свой сайт мобильным

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

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

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

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

    9. Протестируйте свой веб-сайт и запустите его

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

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

    Как вариант, проведите A/B-тестирование. Это метод тестирования удобства использования, при котором дизайнер создает две версии одного веб-сайта и назначает их разным группам пользователей. К концу исследования они могут сравнить два варианта, чтобы увидеть, какой из них работает лучше.

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

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

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

    10. Отслеживайте и настраивайте свой сайт по ходу работы

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

    Google Analytics — отличный инструмент для этого. Он может предоставить различные показатели производительности веб-сайта, такие как:

    • Просмотры страниц. Показывает, сколько страниц просматривает пользователь после перехода на веб-сайт.
    • Средняя продолжительность сеанса . Этот показатель показывает, сколько минут человек проводит на веб-сайте после его первого посещения. Как правило, хорошее число, к которому нужно стремиться, составляет от двух до трех минут.
    • Курсы конвертации. Процент посетителей веб-сайта, которые выполняют желаемое действие, например покупают продукт или подписываются на рассылку новостей по электронной почте.
    • Показатели отказов. Доля пользователей, которые покидают сайт, не предприняв никаких действий.Контрольный показатель для интернет-магазина составляет 20%-45% , в то время как на веб-сайте, не связанном с электронной коммерцией, это 35%-60% посетителей.
    • Источники трафика. Люди могут посещать сайт через поисковые системы, социальные сети, электронную почту, онлайн-рекламу или ссылающиеся веб-сайты. Знание этого может помочь выяснить, какие маркетинговые каналы наиболее эффективны для вашего бизнеса.
    • Демография аудитории. Может определять пол, возраст и интересы посетителей сайта. Такая информация может помочь разработать более целенаправленную маркетинговую стратегию.

    Google Analytics предоставляется бесплатно, и для начала работы требуется только учетная запись Google. Пользователи WordPress могут вручную добавить идентификатор отслеживания в файл functions.php или использовать плагин для подключения инструмента к своему веб-сайту.

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

    Что делает дизайн веб-сайта эффективным?

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

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

    .
    • Удобство использования. Все функции и элементы должны быть доступны и просты в использовании.
    • Организованная структура. Организация страниц должна быть логичной, чтобы облегчить пользователю поиск нужной информации.
    • Читаемость. Шрифты, цвета и макет должны обеспечивать удобство сканирования содержимого.
    • Эстетическая однородность. На всех веб-страницах должны использоваться одни и те же элементы дизайна для сохранения визуальной гармонии, фирменного стиля и простоты использования.
    • Оптимизация скорости. Каждая особенность дизайна должна иметь функцию, которая приносит пользу пользователю и цели веб-сайта. Не может быть избыточности, которая могла бы повлиять на время загрузки.

    Теперь, когда вы знаете, как создать веб-сайт, давайте обсудим некоторые дополнительные инструменты, которые могут вывести сайт на новый уровень:

    • Наборы значков или иллюстраций. Они отлично подходят для того, чтобы сделать любой веб-сайт более привлекательным. В DrawKit есть несколько бесплатных наборов для различных отраслевых категорий. Многие доступные художники также доступны на дизайнерских площадках, таких как Fiverr или Upwork.
    • Стоковые фотографии. Выбирайте фотографии с человеческими лицами, так как при правильном использовании они вызывают доверие.Unsplash — отличное место для бесплатного поиска таких изображений. Обязательно выбирайте только качественные изображения, чтобы поддерживать доверие.
    • Плагин конструктора страниц . Этот тип инструмента предназначен для пользователей WordPress, которые хотят внедрить опыт использования конструктора веб-сайтов с перетаскиванием в CMS. Известный пример — Elementor.
    • Производитель логотипов . Рассмотрите этот инструмент, если у вас еще нет брендинга для вашего бизнеса и вы не хотите нанимать дизайнера.Он может создать профессионально выглядящий логотип за считанные минуты.
    • Канва . Это бесплатное программное обеспечение для дизайна отлично подходит для создания баннеров для веб-сайтов и избранных изображений для сообщений в блогах. Он также отлично подходит для редактирования фотографий в последнюю минуту и ​​маркетингового контента в социальных сетях.

    Как создать веб-сайт: резюме

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

    Вкратце, вот шаги по созданию веб-сайта:

    1. Определите цель вашего веб-сайта.
    2. Ищите вдохновение для веб-дизайна, чтобы визуализировать результат.
    3. Выберите платформу веб-сайта, соответствующую вашим навыкам, бюджету и назначению сайта.
    4. Выберите тему, соответствующую назначению сайта.
    5. Настройте цветовую схему и шрифт в соответствии с вашим брендом.
    6. Настройте основные страницы: домашнюю страницу, страницу сведений, страницу контактов, страницу блога и страницу продуктов или услуг.
    7. Оптимизация системы навигации веб-сайта, визуальной иерархии, скорости страницы и доступности.
    8. Сделайте веб-дизайн удобным для мобильных устройств.
    9. Протестируйте свой веб-сайт с помощью инструментов тестирования удобства использования и запустите его.
    10. Следите за своим веб-сайтом и вносите изменения по ходу работы.

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

    Автор

    Майша Рахмат

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

    10 лайфхаков по графическому дизайну, которые за одну ночь сделают вас профессиональным дизайнером!

    Когда-то создавал образ и думал про себя:

    «Чувак… Хотел бы я иметь навыки графического дизайна, чтобы сделать это изображение ПОТРЯСАЮЩИМ!»

    Не волнуйтесь.Мы все были там!

    И, к счастью для нас, Canva только что представила простую, как пирог, новую онлайн-школу дизайна, которая позволяет каждому освоить ПОТРЯСАЮЩИЕ навыки графического дизайна.

    Да, это для таких же людей, как мы — компании и бренды, общающиеся через социальные сети!

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

    Итак, если вы хотите стать лучшим визуальным коммуникатором, вот несколько мощных лайфхаков по графическому дизайну, которым вы научитесь в Школе дизайна Canva.

    10 советов по графическому дизайну, которые за одну ночь сделают вас профессиональным дизайнером!

    1. Пара контрастных шрифтов

    Какие шрифты хорошо смотрятся вместе, а какие нет?

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

    >> Нажмите, чтобы твитнуть <<

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

    В этом примере шрифт Sifonn использовался для слова «Гавайи» и шрифт Arvo для вспомогательного текста:

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

    2. Сочетайте цвета в дизайне

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

    >> Нажмите, чтобы твитнуть <<

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

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

    Шестнадцатеричные коды

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

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

    Также была добавлена ​​прозрачная фигура в качестве держателя текста для удобства чтения.

    3. Используйте сетки для ваших изображений

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

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

    Сетки

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

    4. Добавить прозрачные значки

    Изучение того, как создавать фоны в Canva, — это то, где ваши творческие соки действительно начинают течь.

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

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

    5. Иллюстрируйте информацию фигурами и значками

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

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

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

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

    6. Исправьте проблемы с цветом в ваших изображениях

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

    Один из способов сделать это — увеличить или уменьшить насыщенность изображения. Насыщенность относится к интенсивности цвета в изображении.

    Когда цвет полностью насыщен — он кажется живым и ярким!

    >> Нажмите, чтобы твитнуть <<

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

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

    7. Обрезка изображений для увеличения пространства для копирования

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

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

    8. Выберите согласованные элементы для улучшения вашего бренда

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

    Эти 3 дизайна имеют согласованный макет, который проявляется в повторяющемся размещении текста, использовании шрифтов и цветовой палитры.

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

    9. Дизайн визуальных ресурсов для социальных сетей

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

    Визуальные принципы применимы к социальным сетям точно так же, как и ко всем остальным.

    В приведенном выше примере обложка Facebook и изображение профиля дополняют друг друга. Цвет фиолетового логотипа соответствовал фоновому изображению.

    10. Дизайн тематических презентаций

    Вам нужно создавать презентации на работе или в школе?

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

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

    Изменение размера текста также помогло создать типографскую иерархию, которая относится к порядку чтения текста.

    Как вы можете применить эти навыки

    Визуальная коммуникация так же важна, как и грамотность на рабочем месте!

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

    Так что вы думаете? Как то, что вы видите?

    Потрясающе!… Теперь пришло время погрузиться глубже!

    Получите копию нашей бесплатной электронной книги по визуальному маркетингу ниже.

    Вы будете рады, что сделали это!

    Как создать логотип (даже если вы не дизайнер)

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

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

    Мы разбили процесс разработки логотипа на пять шагов:

    1. Изучите свой бренд
    2. Узнайте о дизайне логотипа
    3. Получите идеи цвета, шрифта и символов 
    4. 2 Создайте логотип
    5. Тестирование и окончательная доработка

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


    Шаг 1: Изучите свой бренд

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

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

    Кто мой идеальный клиент? Какие бренды им нравятся?

    Выяснение вашего идеального клиента и целевого рынка поможет вам лучше понять ваши сообщения и видение логотипа.

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

    Что делают мои конкуренты?

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

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

    Какие 3-5 прилагательных описывают мой бренд?

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

    • Инновационный, дружелюбный, простой в использовании
    • Сострадательный, с превосходным обслуживанием клиентов
    • Остроумный/умный маркетинг и #killingit в социальных сетях

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

    Как называется моя компания? Буду ли я использовать слоган?

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

    Использование генератора названий компаний — это простой и увлекательный способ придумать идеи для названия компании. Генератор бизнес-названий Looka поможет вам найти подходящее название бренда за считанные минуты. Мгновенно проверяйте доступность домена и создавайте логотипы для своего нового бизнеса

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

    1. Является ли оно оригинальным?
    2. Это перспективно? (а.к.а. Будет ли он развиваться вместе с вашим бизнесом?)
    3. Насколько он удобен и прост в написании?
    4. Доступно (домен, социальные каналы и т.д.)?
    5. Люблю ли я это?

    Если ответ на каждый из этих вопросов «ДА!»,  тогда вы на один шаг ближе к тому, чтобы начать свое путешествие по дизайну логотипа!

    Где я буду чаще всего использовать свой логотип?

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

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

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

    • В Интернете: Заголовки и значки веб-сайтов, подписи электронной почты, счета-фактуры и квитанции
    • Социальные сети:  Фото профиля, обложки, посты с изображениями, реклама
    • Печать :  Визитные карточки, брошюры, плакаты, автомобильные наклейки, одежда, упаковка 

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


    Шаг 2. Узнайте о дизайне логотипа

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

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

    Что делает логотип хорошим?

    Хотя качество логотипа субъективно, есть определенные элементы, которые делают логотип либо хорошим, либо плохим.

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

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

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

    Тот, что справа, творческий и веселый, но очень сложно понять, чем вообще занимается компания!


    Что такое визуальная иерархия?

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

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

    Почему? Название — это то, как люди будут относиться к вашему бренду, тогда как ваш слоган — это броское дополнение, помогающее описать ваш бренд.


    Три основных типа логотипов

    Дизайн логотипа можно разделить на две категории: логотипы, состоящие только из текста (обозначающие название или инициалы компании), и логотипы, содержащие как текст, так и символ.

    Вот разбивка трех наиболее распространенных типов логотипов — есть еще несколько, но мы хотим, чтобы они были простыми!

    1.Словесный логотип

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

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

    2. Логотип монограммы

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

    В случае известных торговых марок словесный товарный знак опускается: например, P&G для Procter and Gamble, VW для Volkswagen или LV для Louis Vuitton. Но большинство новых предприятий сохранят свое название под монограммой или рядом с ней, чтобы повысить узнаваемость имени!

    3. Комбинированный логотип

    Комбинированные логотипы — это именно то, на что они похожи: сочетание словесного знака и символа.

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


    Формы логотипа и варианты компоновки

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

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

    Что такое контейнер?

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

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


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

    • Круги: защита, безопасность и безопасность.Они лучше всего подходят для более коротких имен или монограмм и должны использоваться с сильным шрифтом, чтобы обеспечить разборчивость при увеличении и уменьшении масштаба.
    • Квадраты + прямоугольники:  Перевести на чувство стабильности и равновесия в человеческом разуме. Эта более традиционная форма хороша для длинных имен и популярна среди крупных корпораций.
    • Треугольники:  Считается более агрессивной формой, ассоциирующейся с силой, конфликтностью и скоростью. Их можно использовать для обозначения направления и движения или замены букв «А» и «В».’
    • Вертикальная/горизонтальная ориентация:  Вертикальные линии и формы ассоциируются с агрессией, силой, мужеством и доминированием, тогда как горизонтальные формы создают ощущение спокойствия и умиротворения.
    • Органические формы:  Эти формы кажутся естественными и излучают тепло и комфорт, чего нельзя достичь с другими формами!

    Другие варианты компоновки логотипа

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

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


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


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



    Шаг 3. Получите идеи цвета, шрифта и символов

    Наконец-то пришло время погрузиться в создание логотипа!

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

    Цвета логотипа

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

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

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

    • Черный: Сила и изысканность. Он также может демонстрировать элегантность, формальность или таинственность.
    • Синий: Профессионализм и успех. Обычно используется в корпоративных логотипах, но работает во многих отраслях.
    • Оранжевый: Радость и оптимизм. Вызывает восторженные и возбужденные познавательные ассоциации, а также отлично привлекает внимание.
    • Зеленый: Равновесие и спокойствие. Обычно используется, когда бренды хотят подчеркнуть связь с окружающей средой, благополучие, здоровье и спокойствие.
    • Розовый: Женственный и заботливый. В зависимости от оттенка может оказывать мягкое и успокаивающее действие, вызывая когнитивные ассоциации с безопасностью и заботой. Однако другие оттенки чаще вызывают ассоциации с любовью, флиртом и женственностью.
    • Фиолетовый: Королевский и духовный.На протяжении всей истории пурпур считался царственным цветом. Связь с королевской властью привела к когнитивной ассоциации пурпурного цвета с богатством, благородством и роскошью.
    • Красный: Уверенность и амбиции. Часто используется для обозначения мужской энергии и стимулирует аппетит и энергию.
    • Желтый: Счастье и позитив. Часто очень яркий и часто приковывает взгляд. Предназначен для повышения самооценки и, как и красный цвет, стимулирует аппетит и увеличивает энергию.
    • Белый: Чисто и просто. Традиционно ассоциируется с чистотой, чистотой, невинностью и простотой.
    • Серый: Классический и серьезный. Становясь все более популярным стилем, серый — отличный цвет, который можно использовать, если вы хотите добиться зрелого вида.

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

    Совет: Хотите использовать определенный цвет в своем логотипе? Вам нужно будет узнать точный HEX-код (строка цифр и букв, представляющая этот цвет).Вы можете копировать HEX-коды в редактор Looka при работе над дизайном логотипа!

    Сколько цветов я должен использовать в своем логотипе?

    Большинство брендов используют от 2 до 3 цветов, один из которых черный или белый. Конечно, есть некоторые компании (такие как Google, eHarmony и Slack), логотипы которых имеют множество цветов.

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

    Создайте собственный логотип бесплатно.Платите только если вы на 100% довольны!

    Шрифты для логотипов

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

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

    1. Шрифты с засечками

    Шрифты с небольшими «ножками» по краям называются шрифтами с засечками.Это вневременные, высококачественные, классические шрифты, связанные с традициями и приличиями. Самый известный шрифт с засечками — Times New Roman. Из-за своей вневременности его часто используют для привлечения более зрелой аудитории.


    2. Шрифты без засечек

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


    3.Рукописные шрифты

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


    4. Современные шрифты

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


    5. Экранные шрифты

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


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


    Символы логотипа

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

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

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


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

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


    Шаг 4. Создание логотипа

    «Вы хотите сказать, что я наконец-то могу приступить к разработке своего логотипа?»

    Да, да. Не знаете, как получить свой дизайн? Вот три варианта «сделай сам»:

    Вариант №1: Создайте свой логотип с нуля

    Если у вас уже есть некоторый опыт в дизайне и у вас есть доступ к таким программам, как Adobe Illustrator или Photoshop, тогда вы можете создать свой собственный логотип с нуля.

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

    Вариант №2: Купить шаблон логотипа и настроить его

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

    Две возможные проблемы с этим методом: 1) Эти шаблоны могут быть не очень настраиваемыми, и 2) Могут быть сотни (а может даже тысячи) других компаний с почти идентичным дизайном логотипа.

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

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

    Вариант № 3. Воспользуйтесь онлайн-конструктором логотипов

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

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

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


    Шаг 5. Тестирование и окончательная доработка

    После того, как вы разработали логотип (или несколько!), пришло время провести стресс-тестирование. Вот несколько вопросов, на которые вы должны ответить, прежде чем завершить дизайн логотипа вашей компании:

    Можно ли масштабировать мой логотип?

    Наличие масштабируемого логотипа означает, что вы можете отображать его где угодно и где угодно (ну, почти везде).Хотите разместить его на огромном билборде? Как насчет ваших визитных карточек?

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

    Еще одно обязательное условие для масштабируемого логотипа: векторный файл.

    Векторные файлы необходимы, так как они действуют как мастер-файлы, которые можно бесконечно масштабировать, редактировать или отправлять дизайнеру или принтеру.Они создаются в таких программах, как Adobe Illustrator, а затем могут быть преобразованы в любой другой формат файла, который вам нужен, например PNG или JPG. Примерами векторных файлов являются SVG, EPS и PDF.

    Мой логотип хорошо выглядит полностью черным или полностью белым?

    Необходимо иметь полностью черно-белую версию логотипа с прозрачным фоном. Почему? Потому что это позволяет вашему логотипу быть более универсальным и работать в различных визуальных средах.

    Когда фон вашего логотипа прозрачен, вы можете разместить свой логотип на любом цветном фоне, включая изображения и видео!

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

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

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

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

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

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

    Есть ли у меня разные варианты логотипа для разных целей?

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

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

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

    • Изображение профиля и баннер в социальных сетях
    • Заголовок и значок веб-сайта
    • Подпись электронной почты
    • Визитные карточки
    • Наклейки
    • Упаковка
    • Invoice
    • Канцелярские товары и квитанции
    • Футболки, кепки, кружки и различные сувениры

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

    Есть ли у меня рекомендации по бренду?

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

    • Титульную страницу
    • Руководство по логотипу
    • Цветовые палитры
    • Типографику
    • Примеры использования

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

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

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

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

    Как создать логотип за 7 шагов (мы делаем его с нуля)

    Подумайте о самом худшем логотипе, который вы когда-либо видели, — что приходит на ум? Если у вас возникли проблемы с мыслью об одном, это не удивительно.

    Хорошая наклейка с логотипами. Плохих нет.

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

    Некоторые из лучших логотипов наименее сложны — подумайте о галочке Nike или золотых арках McDonald’s. Тед Кэй из Североамериканской вексиллологической ассоциации говорит, что рисунки флагов должны быть достаточно простыми, чтобы ребенок мог рисовать их по памяти . То же самое и с логотипами.

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

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

    Для чего нужен логотип компании?

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

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

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

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

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

    Как создать логотип с нуля: пошаговое руководство

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

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

    1.Разработайте фирменный стиль

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

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

    • Почему вы начали свой бизнес?
    • Какие ценности важны для вас как компании?
    • Что отличает вас от конкурентов?

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

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

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

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

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

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

    Благодаря нашей интеллект-карте мы смогли разработать концептуально сильный бренд, упростив ответы на вопросы, которые помогли бы нам понять, что отличает наш бренд от конкурентов:

    Почему мы начали свой бизнес?

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

    Какие ценности важны для нас как компании?

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

    Что отличает нас от конкурентов?

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

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

    Фото Райана Брюса из Burst.

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

    2. Ищите вдохновение для дизайна

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

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

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

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

    Если вы ищете места, где можно посмотреть отличные дизайны логотипов, вот список: 

    • Logoed: простая одностраничная прокрутка Logoed позволяет просматривать часто обновляемую коллекцию потрясающих логотипов.
    • Logospire: эта обширная коллекция дизайнов логотипов, представленных пользователями, поможет раскрыть ваш творческий потенциал.
    • Brand New: Brand New — это блог, посвященный дизайну и редизайну новых и известных брендов во всех отраслях.
    • LogoLounge: этот блог позволяет графическим дизайнерам загружать свои последние логотипы. LogoLounge, пожалуй, наиболее известен публикацией серии книг, демонстрирующих произведения искусства, представленные на сайте.
    • Logo Design Love: Графический дизайнер Дэвид Эйри курирует этот блог о дизайне, в котором рассматриваются логотипы и маркетинговые проекты со всего мира.

    Хэштеги, связанные с дизайном. Многие сообщества социальных сетей используют специальные хэштеги, связанные с дизайном, для демонстрации своих работ в области графического дизайна.Инстаграм для этого особенно хорош, учитывая визуальный характер сайта. В следующий раз, когда вы будете просматривать грамм, проверьте некоторые из наиболее популярных хэштегов дизайна: #logo, #logodesigns, #logodesigner, #graphicdesign, #graphicdesigner.

    3. Выберите цвета, которые отражают ваш бренд

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

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

    Имея это в виду, давайте рассмотрим психологическое воздействие определенных цветов:

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

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

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

    Упаковка сока Lumi, ориентированная на апельсин, напоминает игристое освежение в жаркий летний день.

    Желтый: Родственный цвет оранжевого цвета с высокой насыщенностью, желтый, также излучает свет, энергию и тепло. Но если тепло оранжевого цвета — это пылающий камин, то желтое — это интенсивный жар полуденного солнца, излучающего баронский десерт. Желтый имеет тенденцию вызывать счастливые чувства, но используйте его с осторожностью. Немного желтого может добавить нотку оптимизма надежному бренду, но многое может быть маниакальным.

    Магазин парфюмерии Happiness Abscissa (Ha) использует желтый цвет, чтобы добавить оптимизма и радости.

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

    Бренд кормов для собак v-dog использует зеленый цвет, чтобы выразить свой подход к корму для собак.

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

    Нежно-розовый логотип Mignon создает ощущение любви и заботы.

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

    KKW Beauty Ким Кардашьян Уэст использует смелый красный оттенок, чтобы придать бренду страстный вид.

    Фиолетовый:  Цветной Распутин⁠, фиолетовый — загадочный незнакомец, обладающий почти магическим магнетизмом. Учитывая, что пурпурные красители исторически были редкими и дорогими, нет ничего удивительного в том, что фиолетовый стал ассоциироваться с богатством, излишествами, мистикой, магией и снисходительностью.

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

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

    Надежный синий — идеальный цвет для создания ощущения комфорта и безопасности в линейке защитных чехлов для телефонов Quad Lock.

    Черный, серый, белый: Иногда лучший цвет для вашего бренда — это полное отсутствие цвета.Оттенки черного, белого и серого, как правило, вызывают ощущение спокойствия, баланса или ясности.

    Schoolhouse сочетает оттенки серого с мягкими приглушенными цветами, чтобы придать своему бренду домашнего декора ощущение спокойствия.

    Использование нескольких цветов

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

    Логотип FedEx обычно отображается синим и оранжевым цветом. Однако компания создала альтернативные цветные логотипы для определенных отделов.

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

    Как вы создаете цветовые комбинации для своего логотипа?

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

    • Paletton: цветовой круг Paletton позволяет создавать цветовые схемы с помощью простых интерактивных ползунков.
    • Coolors: Coolors позволяет создавать случайные цветовые гармонии, блокировать цвета, которые вы хотите сохранить в своей палитре, и совместно настраивать другие цвета для создания полностью настраиваемой палитры. Вы также можете создавать палитры из загруженных изображений.
    • Colormind: Colormind особенно удобен для веб-дизайнеров, поскольку он включает в себя простой в использовании инструмент для достижения удобочитаемости и цветовой гармонии на веб-страницах путем предварительного просмотра цветовых комбинаций на той же странице в режиме реального времени по мере внесения корректировок в палитру.
    • ColorSpace: ColorSpace лучше всего подходит для разработчиков, поскольку он автоматически генерирует код CSS для включения цветовой палитры, которую вы создаете на своей веб-странице.
    • Генератор цветовой палитры Canva: Canva генерирует цветовые схемы случайным образом или из изображений. Но что делает инструмент Canva уникальным, так это его способность искать цветовые палитры по ключевым словам.

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

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

    Из одной и той же фотографии можно извлечь множество вариантов оттенков.Оригинальное фото Скотта Уэбба из Burst.

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

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

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

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

    Первоначально выбор зеленого цвета казался легким, но после нескольких часов экспериментов стало казаться, что мы вообще не приняли решение. «Зеленый» может означать зеленый лайм, зеленый цвет морской пены или зеленый цвет леса⁠, но какой зеленый цвет является зеленым LawnPure? Сказав «нет» стольким оттенкам, мы наконец наткнулись на именно тот зеленый, который искали.

    LawnPure green (шестнадцатеричный код #00b151) — более чистый, мягкий зеленый, не слишком насыщенный, не слишком темный, с легким оттенком синего⁠ — едва заметным, но достаточным, чтобы вызвать в воображении образ пышного поля под ярко-синим небо. Это был бренд LawnPure как цвет.

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

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

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

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

    4. Выберите шрифт

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

    Гарнитура
    и шрифт

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

    Четыре основных стиля шрифта и когда их использовать

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

    Стили с засечками

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

    • Характеристики: Засечки часто ассоциируются с историей, традициями и древностью и используются для обозначения богатства, элегантности и авторитета.
    • Когда их использовать: Шрифты с засечками могут сделать привлекательный акцидентный шрифт и традиционно используются для основного текста в печатных материалах, таких как газеты, книги и журналы.Роскошные бренды, ориентированные на состоятельную аудиторию, также часто используют стили с засечками.
    • Использование в брендинге: Старые и переходные засечки кажутся более «классическими». Современные и «плоские» засечки (шрифты с более толстым штрихом с засечками) кажутся более современными, инновационными и креативными.
    SLH.com использует шрифт с засечками, чтобы изобразить роскошь и современность. Изображение предоставлено Campaigns of the World.

    Начертания без засечек

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

    • Характеристики: Шрифты без засечек чаще ассоциируются с простотой, современностью и минимализмом. С точки зрения дизайна, они хорошо работают с обилием отрицательного пространства и создают глянцевый, изысканный вид.
    • Когда его использовать: Шрифты без засечек универсальны и хороши для экранных копий и заголовков.Бренды обычно используют шрифты без засечек, пытаясь передать ощущение современной элегантной простоты.
    • Использование в брендинге: Шрифты без засечек, как правило, более разборчивы на экране, чем в печати, поэтому они чаще используются в основном тексте на веб-сайтах, чем в журналах и газетах. Вообще говоря, шрифты без засечек придают более неотерический вид и чаще используются брендами, пытающимися передать ощущение инноваций и современности.
    McDonald’s использует шрифт без засечек, чтобы передать упрощенную современность.Изображение предоставлено Campaigns of the World.

    Стили сценариев 

    Шрифты

    Script получены из почерка или каллиграфии. Шрифты более гибкие, чем стили без засечек и без засечек, и часто используются в более причудливых контекстах. Стили шрифтов универсальны и могут использоваться как формальными, так и повседневными брендами⁠.

    • Характеристики: Будучи производными от почерка, шрифты имеют тенденцию «очеловечивать» текст. Рукописные шрифты часто имеют большую индивидуальность, поэтому они особенно хороши для изменения настроения вашего текста.
    • Когда использовать: Скрипты следует использовать с осторожностью. Они плохо подходят для длинного расширенного основного текста, потому что обычно менее разборчивы. Однако в сочетании со шрифтом с засечками или без засечек шрифты могут быть очень эффективным инструментом для выделения.
    • Использование в брендинге: Официальные шрифты создают ощущение роскоши, романтики и страсти. Неофициальные сценарии могут придать вашему бренду более народный и непритязательный вид. Скрипты могут лучше подчеркивать слова и короткие фразы, особенно если это слово, на котором вы хотите, чтобы ваш клиент сделал паузу.
    HBO использует шрифт для выделения. Предоставлено кампаниями мира.

    Декоративные шрифты

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

    • Характеристики: Декоративные шрифты могут быть очень сложными, поскольку они стилистически разнообразны, но, как правило, их труднее читать, что делает их плохими для основного текста. Заголовки могут выглядеть лучше в декоративном стиле шрифта, но даже здесь дизайнеры должны быть осторожны: чрезмерное использование почти любого декоративного шрифта имеет тенденцию выглядеть безвкусно. Декоративные шрифты также быстро устаревают, поскольку они, как правило, цепляются за эстетические тенденции.
    • Когда использовать: Рекомендуется избегать чрезмерного использования декоративных шрифтов.Отдельные символы могут быть хороши для адаптации или включения в логотипы, но убедитесь, что у вас есть лицензионные права на использование символа в вашем логотипе.
    • Использование в брендинге: Декоративные шрифты бесконечно разнообразны, поэтому невозможно сузить их до единственного использования. Декоративные шрифты обычно используются в логотипах, и крупные бренды обычно создают целые наборы шрифтов только для собственного использования. Несимвольные шрифты (например, смайлики) также обычно используются для привлечения молодых клиентов.

    McDonald’s рассказывает историю, используя только смайлики. Изображение предоставлено Ads of the World.

    Что мой шрифт говорит о моем бренде?

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

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

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

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

    1. Линии : толстые и тонкие

    Жирные, толстые шрифты, такие как асимметричные плоские засечки, имеют тенденцию вызывать авторитет и стабильность. Более тонкие шрифты, как правило, передают более сильное чувство элегантности и прогресса.

    2. Напряжение: диагональное и вертикальное

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

    3. Контраст: низкий против высокого

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

    4. Настроение: формальное и неформальное, классическое и современное, драматичное и спокойное

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

    5. Создайте несколько черновых версий

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

    Мы решили поиграть со спокойными современными шрифтами, чтобы посмотреть, что у нас получилось: 

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

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

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

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

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

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

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

    Когда мы закончили, шрифт, который, по нашему мнению, лучше всего отражал ценности нашего бренда, был Rhino Sans.

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

    Одна вещь, которая нам не понравилась, это буква «W», которая была шире, чем другие буквы. Именно здесь мы решили объединить нашу идею травяного сценария с Rhino Sans. Мы проверили кое-что: 

    И здесь мы снова столкнулись с проблемой.Чем больше мы изменяли букву «W», чтобы она выглядела как трава, тем менее разборчивой она становилась. Здесь важно подчеркнуть часы проб и ошибок, которые могут уйти на создание даже того, что кажется простым логотипом.

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

    Именно тогда мы решили, что будет лучше разработать собственную букву «W», чтобы она выглядела как трава.Если вам удобнее рисовать свой логотип от руки, смело выбирайте этот путь. Нашим личным предпочтением был инструмент «Перо» в Photoshop.

    6. Получить отзыв

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

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

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

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

    Вот несколько вариантов вопросов, которые можно задать при получении отзыва:

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

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

    После того, как мы повозились с логотипом LawnPure, у нас был готовый дизайн для обратной связи:

    7. Отполируйте свой выигрышный дизайн

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

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

    Это случилось с нашим дизайном. Мы так долго пытались сделать логотип травы более похожим на траву, что забыли сделать его похожим на букву «W». Наиболее частые отзывы, которые мы получили о нашем первом наброске, заключались в том, что было неясно, как произносится «LallnPure». Мы вернулись к чертежной доске, чтобы расширить возможности.

    Второй отзыв был связан с кернингом последней буквы «e» в LawnPure. Мы использовали интервал шрифта по умолчанию, но, поскольку размер и размеры были значительно изменены, буква «е» выглядела слишком далеко.

    Мы учли отзывы, внесли предложенные изменения, и, наконец, наш отполированный логотип был готов: 

    Сколько должен стоить дизайн логотипа?

    Теперь, когда мы рассмотрели, как выглядит процесс разработки логотипа, возникает очевидный вопрос: следует ли создавать собственный логотип или нанять дизайнера?

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

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

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

    Следует ли нанять дизайнера или разработать собственный логотип?

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

    У меня есть бюджет? Дизайн логотипа может стоить от нуля, если вы используете бесплатный онлайн-конструктор логотипов, до десятков тысяч долларов, если вы работаете с профессиональным дизайнером или агентством.Будьте готовы заплатить от 50 до 300 долларов в нижней части, чтобы нанять достаточно опытного дизайнера.

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

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

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

    Наем дизайнера

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

    1. Shopify Experts: Если вы ищете дизайнера, который знает электронную коммерцию как свои пять пальцев, просмотрите нашу торговую площадку Shopify Experts.Shopify Эксперты могут помочь со всеми видами настройки дизайна и могут быть отфильтрованы, чтобы найти эксперта в вашем ценовом диапазоне или с опытом работы в вашей отрасли.
    2. Upwork: глобальная онлайн-платформа для фрилансеров, которая удаленно связывает компании с фрилансерами. Upwork включает совместное расписание и чат, что позволяет легко отслеживать прогресс вашего фрилансера.
    3. Фрилансер: Фрилансер уникален тем, что потенциальные наниматели «делают ставку» на вакансии, которые вы публикуете, что позволяет вам найти лучшего дизайнера по самой низкой цене.
    4. Fiverr: двусторонний рынок для покупки и продажи различных цифровых услуг, таких как написание текстов, графический дизайн, редактирование видео и программирование. Fiverr предлагает фиксированные цены на услуги независимо от времени работы, что упрощает планирование дизайна логотипа.
    5. Dribbble: сообщество дизайнеров для демонстрации своих творческих работ и общения с работодателями. Dribble работает не только как место, где можно найти дизайнера, но и как место для изучения новых креативных дизайнов для вдохновения, если вы решите создать свой собственный логотип.

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

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

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

    • Проведите проверку биографических данных и позаботьтесь о безопасности. Подавляющее большинство пользователей фриланс-сайтов — великие художники, которые хотят зарабатывать деньги, занимаясь любимым делом. Но в редких случаях соискатели-мошенники отвечают на объявления о вакансиях с намерением обмануть пользователей. Всегда проверяйте страницу учетной записи фрилансера на наличие его портфолио и отзывов от предыдущих работодателей, чтобы убедиться в качестве их работы.Всегда общайтесь письменно. Никогда не сообщайте фрилансеру личную финансовую информацию или пароли от учетных записей.
    • Предоставьте примеры логотипов и как можно больше подробностей. Если вы хотите подражать определенному внешнему виду, приведите пару примеров. Графические дизайнеры, как правило, учатся визуально, а это означает, что будет проще показать им то, что вы хотите, а не рассказать им .
    • Укажите реалистичные временные рамки. Уважайте творческий процесс и помните, что конечный продукт может потребовать нескольких черновиков и сеансов обратной связи, прежде чем он будет раскрыт. Указание коротких временных рамок приведет к тому, что логотип будет казаться поспешным и незавершенным.
    • Дайте четкий, краткий, конкретный и честный отзыв. Наименее полезная вещь, которую вы можете сказать о черновике, это то, что он «хороший» или «плохой», потому что ни один из них ничего не говорит о том, что работает в дизайне, а что нет. Не делайте расплывчатых запросов вроде «Можете ли вы сделать это более модным?» или поставьте абстрактные цели, например: «Постарайтесь уловить вневременной дух нашего бренда.Вместо этого постарайтесь определить, что больше всего запоминается в дизайне, а что из него можно убрать.
    • Не управляйте своим дизайнером на микроуровне. Запланируйте достаточно времени для разработки логотипа, отзывов и изменений. Нет необходимости связываться с вашим дизайнером между черновиками или контролировать их, пока они работают. Постоянная связь с фрилансером создает впечатление, что вы не доверяете ему в обеспечении качественной работы или не уважаете его опыт дизайнера.
    • Не ждите, что они сделают любую работу бесплатно. Не просите фрилансеров «подать заявку» с оригинальной работой, если вы не планируете им платить. Не просите «бесплатных образцов», «быстрых доработок» или «небольших услуг». Не рассчитывайте, что заплатите за «разоблачение», «опыт» или «возможность создать отличное портфолио». Такой подход неэтичен и почти всегда приводит к некачественной работе.

    Создание логотипа бесплатно (или дешево)

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

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

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

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

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

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

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

    1. Canva: бесплатный набор инструментов графического дизайна Canva включает в себя множество шаблонов логотипов, которые можно настроить с помощью интуитивно понятного редактора перетаскивания. Canva отлично подходит для практических пользователей⁠, особенно для тех, кто ищет полную творческую свободу.Тем не менее, безграничные варианты дизайна могут быть ошеломляющими для новичков. Если у вас меньше опыта в дизайне, возможно, вам подойдет более доступный конструктор логотипов из этого списка.
    2. LogoMakr: LogoMakr предлагает оптимизированный пошаговый процесс создания логотипа, который легко освоить даже новичкам. С базой данных из более чем миллиона графических объектов с возможностью поиска, текстовой панелью инструментов и упрощенной, простой в организации системой слоев, аналогичной инструменту «Слои» в Photoshop и других более сложных программах для дизайна.
    3. Ucraft: конструктор логотипов Ucraft отлично подходит для создания минималистичных логотипов в условиях дефицита времени.Ucraft предлагает три варианта элементарного дизайна — текст, значки и фигуры⁠ — наряду с интерфейсом перетаскивания для удобной настройки логотипов. Хотя варианты дизайна ограничены, простота Ucraft делает его отличным инструментом, если вам нужен логотип в крайнем случае.
    4. MarkMaker: генератор логотипов MarkMaker имеет очень ограниченные возможности настройки, но он компенсирует это тем, что является одним из самых простых генераторов логотипов для начинающих. Его уникальный процесс похож на создание робота для графического дизайна с искусственным интеллектом.Markmaker предоставляет вам бесконечную прокрутку мгновенно сгенерированных логотипов, спрашивает, какие логотипы вам нравятся, а затем создает больше дизайнов на основе ваших предпочтений.

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

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

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

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

    Фото Сары Пфлуг из Burst.

    Как избежать распространенных ошибок при разработке логотипа

    Если и есть что вынести из всего этого, так это то, что не следует недооценивать важность вашего логотипа.

    Логос субъективен. Хотя нет правильного или неправильного способа сделать это, есть распространенные ошибки и полезные методы, о которых нужно знать: 

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

    НЕ НЕ усложняйте дизайн. Не упаковывайте слишком много иконок в один логотип. Простые фигуры гораздо легче передать, чем сложные сцены, и они с большей вероятностью запомнятся. Подумайте о стойкости культового дизайна Apple или симметричного логотипа Volkswagen «VW».

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

    НЕ создавайте слишком разные варианты. Избегайте перестановки слишком большого количества элементов и не меняйте дизайн.

    DO Исследуйте логотипы и вдохновляйтесь другими брендами, особенно в вашей отрасли.

    НЕ слишком близко имитировать логотипы. Это не только плагиат, но и лишит ваш логотип шансов выделиться.

    DO будь современным. Даже если ваш бренд носит более «классический» характер⁠, ему все равно придется конкурировать в современном мире.Тонны брендов опираются на классические атрибуты дизайна, но полное пренебрежение десятилетиями теории дизайна будет отталкивающим.

    НЕ быть слишком модным. Логотипы, созданные в эпоху одержимости определенными цветами, дизайном или эстетикой, быстро устаревают. Например, оригинальный логотип «Торонто Рэпторс» был задуман в 1994 году, когда яркие пастельные тона, острые угловатые узоры и Парк Юрского периода были на пике популярности. Первоначальные продажи товаров были высокими, но логотип быстро устарел, и после нескольких незначительных изменений его выпуск был окончательно прекращен в 2014 году.

    Если слишком сильно полагаться на текущие тенденции, логотип может очень быстро устареть.

    Создайте логотип, который вам нравится

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

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

    Иллюстрации Евгении Мелло

    12 бесплатных способов научиться дизайну

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

    1. Изучите свою историю

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

    2. Понимание основной терминологии

    Сделайте себе одолжение и изучите это. Это базовый глоссарий для начала знакомства с отраслевым жаргоном.

    3. Навигация по блогосфере дизайна

    У тебя уже есть фора в этом. Creative Market — лишь один из множества блогов о дизайне, которые стоит прочитать. Найдите время и выберите блоги, которые говорят о вас и вашей эстетике. Мы рекомендуем DesignTaxi и Smashing Magazine.

    @psahre — владелец одной из самых влиятельных дизайнерских фирм в стране.

    Дизайнеры, скажите это вместе со мной: «Нет»

    — Пол Сахре (@psahre) 5 марта 2015 г.

    @timothyogoodman — преподаватель Нью-Йоркской школы визуальных искусств

    Встречи — смерть творчества.

    — Тимоти Гудман (@timothyogoodman) 21 апреля 2015 г.

    @jessicawalsh получила несколько наград за свою дизайнерскую работу.
    Мудрость дизайна:

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

    5. Исследуйте великих

    Найдите время, чтобы понять мысли и взгляды великих дизайнеров прошлого. У гениев, сформировавших нашу область, есть чему поучиться, поэтому внимательно изучайте их. Начните с этих первопроходцев: Сола Басса, Паулы Шер и Дэвида Карсона.

    6. Изучите работы других дизайнеров на онлайн-рынках

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

    7. Используйте бесплатные альтернативы Adobe

    Если вы провели в этом пространстве достаточно времени, есть одна истина, с которой вам в конечном итоге придется смириться: программное обеспечение для проектирования недешево. Пока вы не можете позволить себе профессиональные инструменты, используйте множество доступных бесплатных альтернатив. Pixlr — отличная альтернатива Photoshop. Inkscape ближе к Illustrator/InDesign. Snapseed (iPhone) и Snapseed (Android) — это потрясающие мобильные инструменты для дизайна на вашем портативном устройстве.

    8. Пройдите бесплатные онлайн-курсы

    Школа дизайна может очень дорого. Сэкономьте немного денег, научившись программировать и проектировать онлайн. CodeHS и Code.org — два отличных места для бесплатного обучения.

    9. Смотрите YouTube-каналы с великолепным дизайном

    Здесь ключевое слово «Великолепно». Есть много плохо сделанных видеороликов о дизайне, которые только научат вас тому, чего делать нельзя. Ищите жемчужины, такие как TastyTuts или Learn Digital Design.

    10. Посмотрите TED Talks on Design

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

    11. Попрактикуйтесь, воссоздавая свою любимую работу

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

    12. Сделай что-нибудь новое

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


    Чего ты ждешь? Теперь, когда деньги вас не сдерживают, начните прямо сейчас. С некоторой решимостью, терпением и этим замечательным списком советов вы в кратчайшие сроки станете дизайнером как профессионал.


    Товары, показанные в этом посте:


    Начать рисовать от руки?

    Бесплатные листы для написания букв

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

    Скачать сейчас!

    Google Дизайн

    08.04.2021

    Акции солидарности

    Для этого поста мы передали клавиатуру директору по пользовательскому интерфейсу и руководителю группы дизайна Google Маргарет Ли.Ранее в этом месяце я поделился своей историей о том, как преодолеть несоответствие между личным воспитанием и профессиональными ролями. Чего я не поделился, так это степени предвзятости, сексизма и расизма, с которыми я сталкивался на протяжении всей своей жизни. Я по-прежнему глубоко возмущен стрельбой в Атланте, в результате которой погибли восемь человек, в том числе шесть женщин азиатского происхождения, — неизбежное крещендо года растущего насилия и ненависти к американцам азиатского происхождения, жителям тихоокеанских островов и азиатским сообществам. Я скорблю и стою рядом с ними в знак солидарности и в борьбе с расизмом и ненавистью.Как поделилась Ева Цай, директор по маркетинговой аналитике и операциям Google, в недавнем эссе для Keyword: «Убегать и игнорировать несправедливость больше нельзя». Мы не можем позволить себе молчать. Мы не можем не заниматься. Несколько месяцев назад Google Design поделился ресурсами по дизайну для справедливости, и сегодня я хотел бы продолжить этот разговор с ресурсами, ориентированными на действие. Наша команда нашла способ отобрать наши соответствующие каналы для принятия мер. Здесь мы разбили их на четыре части: учиться, практиковать, праздновать и поддерживать.Мы надеемся, что эта коллекция ссылок даст каждому из нас много способов сделать шаг вперед — независимо от того, где вы находитесь в этом путешествии — и достичь разных культур, чтобы поддержать друг друга. — Маргарет Ли, директор по UX-сообществу и культуре.   Начните с обучения и прослушивания. Послушайте откровенный разговор двух американских дизайнеров азиатского происхождения о том, как они использовали свою идентичность на работе. где ведущие передают свои микрофоны азиатско-американским коллегам, друзьям и слушателям, чтобы узнать об их опыте борьбы с расизмом. Узнайте имена азиатских женщин-лидеров, которых книги по истории, возможно, пропустили через учетную запись Instagram @17.21womenПосмотрите рекламную рекламу Титании Тран, Хамона Сина и Мими Муньос и усвойте вопрос: «Что вы скажете, если не можете сказать, что не знали?» Узнайте, почему наше нынешнее определение лидерства не работает. соответствовать лозунгу разнообразия, справедливости и инклюзивности от директора Google UX Маргарет ЛиПоищите личный опыт борьбы с расизмом и дискриминацией в качестве американки азиатского происхождения, как это размышление директора Google Евы Цай Практика – лучший союзник Критически относитесь к стереотипам в дизайне, и как их сломать Запишитесь на тренинг по вмешательству свидетелей через Hollaback! и американцы азиатского происхождения, продвигающие справедливость, или узнайте о стратегиях деэскалации и Upstander от Центра образовательного анти-насилия, чтобы реагировать на антиазиатские преследования. Сделайте свой союз межкультурным, узнав о солидарности чернокожих и азиатов в прошлом и настоящем. Сообщите об инцидентах антиазиатского насилия. противостоять ненависти и остановить ненависть AAPIОзнакомьтесь с набором инструментов NYC Stop Asian HateПоддержите новое поколение начинающих дизайнеров BIPOC с помощью Office Hours, глобальной серии наставничества для креативщиков, которые идентифицируют себя как чернокожие, коренные и цветные людиДелайте заметки и применяйте тактики из Доклад Татьяны Мак: «Создание социально инклюзивных систем дизайна» Отметьте креативы AAPI+ Возьмите экземпляр журнала Banana — журнала о дизайне, страницы которого стирают восточные и западные границы, создавая коллективный голос современной азиатской культуры. Семейство шрифтов Pan-CJK от Adobe Type и Google Fonts, которое позволяет дизайнерам смешивать китайский, J японский и корейский алфавиты с легкостью (и стилем!) Нанимайте талантливых людей из каталога жителей азиатских и тихоокеанских островов, которые занимаются дизайном. Читайте голоса AAPI и добавляйте их книги на свою книжную полку или в учебные планы.Мы рекомендуем Minor Feelings от Кэти Пак Хонг, The Making of Asian America: A History, Pachinko от Min Jin Lee и Yolk от Mary HK Choi. Поддержите творческие азиатские компании и производителей, таких как Omsom, Wing On Wo & Co., Virginia Sin, Eny Lee Parker, Poketo, O-M Ceramics и познакомьтесь с создателями Create to Stop Hate, аукциона художников AAPI. Окажите свою поддержку 18MillionRising.org, работающей над активизацией Азиатской Америки с помощью технологий и популярной культуры. Фонд сообщества AAPI, кампания, возглавляемая активистами и лидерами культуры, выдающими гранты доверенным организациям, работающим над устранением расового неравенства в нашем обществе. AAPI Women Lead, организация, создающая пространство для Женщины азиатских и тихоокеанских островов рассказывают свои истории. Asian Americans Advancing Justice, организация, защищающая гражданские права и права человека американцев азиатского происхождения. неблагополучные сообществаУважаемая азиатская молодежь, группа азиатской молодежи, стремящаяся поднять маргинализированные сообщества посредством образования, активности и празднования. Пожертвуйте напрямую семьям жертв антиазиатского расизма и насилия. через искусство, конв. и общая любовь к едеЧто-то еще, что вы хотели бы, чтобы мы включили? Напишите нам в Твиттере @googledesign.

    .

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

    Ваш адрес email не будет опубликован.