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

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

Содержание

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

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

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

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

7 советов, которые помогут проектировать быстрее

И почему скорость важна.

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

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

Но сначала давайте поймем, почему вам нужно быть быстрым.

Почему?

Дизайнерам часто нужно время. Время, чтобы найти вдохновение, подумать, исследовать, провести мозговой штурм, помедитировать, проверить Dribbble, пролистать пару статей на Medium (но только взглянуть на картинки и прочитать названия)… Вы понимаете, всё это часть творческого процесса.

Как дизайнер, я не могу с этим поспорить.

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

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

По сути, если у вас жесткий дедлайн, скорость работы вам поможет.

Вы не спешите? Вы не медлите?

Ну, что же… Повезло вам!

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

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

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

Теперь давайте перейдем к советам.

1. Определите свою цель

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

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

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

2. Не ждите вдохновения

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

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

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

Эта история / эксперимент из книги Art & Fear прекрасно иллюстрирует этот момент. Если вкратце: учитель объявил своему классу, что они будут разделены на две группы, одна будет оцениваться исключительно по качеству, другая – по количеству. Когда дело дошло до оценки работ, то оказалось, что работы наивысшего качества были сделаны группой, которая должна была оцениваться по количеству.

Это означает, что количество ведет к качеству, поэтому вместо того, чтобы ждать, пока лучшая идея упадет с неба, ? ПРОСТО ? НАЧНИТЕ ? РАБОТАТЬ.

Это приводит нас к следующему шагу.

3. Делайте эскизы, эскизы и еще раз эскизы!

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

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

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

4. Поделитесь своим прогрессом

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

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

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

5. Слушайте

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

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

Слушать других не означает, что вы должны слепо делать то, что они предлагают, это просто означает, что не следует игнорировать их слова.

6. Проектируйте поэтапно

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

Это будет во многом зависеть от того, над чем вы работаете, но вот общие рекомендации:

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

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

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

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

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

7. Делайте перерывы

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

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

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

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

Вкратце…

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

Тем временем, в реальном мире…

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

Моя отправная точка

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

Итак, я начал с …

1. Определения цели

Я определил цели иллюстраций, в основном они заключались в следующем:

1 – В некотором смысле, они должны соответствовать сообщению / тексту.
2 – Они должны следовать логическому и непрерывному сценарию.
3 – Если пользователи не читают текст и смотрят только на визуальные эффекты, они все равно получают сообщение (насколько это возможно).
4 – В целом, они должны рассказать историю, связанную с приложением.

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

После этого…

2. и 3. Я не ждал вдохновения, а сразу начал делать наброски

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

3 этапа зарисовки первой иллюстрации

Мой подход – создать 5 иллюстраций и посмотреть, как они могут работать вместе. Сначала сделать ОЧЕНЬ грубые наброски, а затем довести их до более изысканных эскизов.

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

4. Поделиться работой

Наброски всего сценария

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

Как видите, я…

6. Проектировал поэтапно

Первым этапом была история, следующие два были стилем иллюстрации и переходами между экранами.

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

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

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

Первое предложение для стиля иллюстрации

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

После того, как я поделился работой еще раз, я получил фидбек, который я заслуживал, так что…

5. Я слушал

И вот таким был результат:

Первая итерация стиля иллюстрации

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

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

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

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

Мелочи, которые занимают много времени

Наш персонаж получил более стройное тело и больше волос на голове. Мы также добавили немного пара на иконку кофе. ☕️

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

Осталось упомянуть еще одну вещь, потому что в течение той недели я путешествовал и провел несколько встреч, которые я не мог пропустить, я был «вынужден»…

7. Делать перерывы

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

Есть немного лишнего времени? Используйте его!

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

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

Я учел это с самого начала при создании иллюстраций.

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

Чтобы донести это до разработчиков, я создал в Principle очень простой прототип.

Прототип, созданный в Principle

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

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

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

Фактическая реализация

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

Это был длинный рассказ, поэтому, если вы дочитали, вы заслужили …

Еще один дополнительный совет…

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

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

Поэтому установите ограничение по времени и после этого ПРИСТУПАЙТЕ К РАБОТЕ!

На этом все. Я надеюсь, вам понравилась статья. Если вы считаете ее полезной или интересной, ставьте лайки и поделитесь ею с коллегами.

Свободно пишите автору в Twitter или LinkedIn.

Как проектировать мобильные приложения для использования одной рукой

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

В январе 2007 года, мир стал умещаться в наших ладонях, когда три революционных продукта – iPod, телефон и интернет-коммуникатор – были объединены в смартфон, который мы знаем и любим сегодня.

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

Стив Джобс однажды сказал, что 3,5-дюймовый экран – это «идеальный размер для потребителей», а большие экраны – это глупость.

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

90% продаваемых сегодня смартфонов имеют дисплеи размером более 5 дюймов.

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

Например, приложение CNN было одним из немногих, кто получил ранний доступ к iPhone 5, представленному в 2012 году. Разработчики не только эстетически трансформировали его, но и создали удобный для восприятия визуально привлекательный опыт, выделив заголовки.

Из выступления Фила Шиллера на специальном мероприятии Apple в 2012 году

Из-за больших экранов страдает доступность

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

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

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

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

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

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

Исследования показывают, что в среднем пользователь проверяет свой телефон 58 раз в день, при этом 70% мобильных взаимодействий длятся менее 2 минут.

Мы используем наши телефоны в «короткие промежутки времени с рассеянным вниманием».

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

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

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

Как проектировать дизайн с учетом коротких интервалов использования смартфона одной рукой?

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

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

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

Старая навигация Spotify – гамбургер-меню

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

Spotify — Пользователи испытывали определенный уровень сложности и дискомфорта при взаимодействии с приложением

Это вынудило команду Spotify в 2016 году отказаться от гамбургер-меню и расположить основные функции (Home, Browse, Search, Radio и Library) в нижней части экрана, что привело к увеличению общего количества кликов на 9% и на 30% кликов по пунктам меню.

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

Зачем изобретать велосипед? Когда вы можете использовать проверенные UX-паттерны, которые работают. Многие дизайнеры уже учли варианты использования приложения одной рукой, в ​​качестве принципа дизайна.

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

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

  1. Навигация
    Например, строки меню, панели вкладок и жесты для легкого перемещения между наиболее важными разделами приложения;
  2. Действия
    Создание, редактирование, публикация, добавление, удаление и другие действия, которые пользователи предпринимают для использования основных функций приложения;
  3. Оформление покупок, транзакций, заказов
  4. Поиск, сортировка и фильтрация, когда пользователи хотят быстро найти или просмотреть контент;
  5. Ввод и взаимодействие
    Слайдеры, селекторы, выпадающие списки, заполнение форм, масштабирование, скроллинг – строительные блоки любого приложения;
  6. Прочие паттерны
    Воспроизведение мультимедиа, фотосъемка, редактирование фотографий и паттерны навигации по картам.

1. Проектирование навигации по приложению одной рукой

Что это?

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

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

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

Проблемы

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

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

Решение

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

  • Для обеспечения доступности и размещения более 5 пунктов, используйте всплывающее меню, а не полностраничное.
  • Расширенная панель вкладок, когда у вас больше контента.
  • Персонализированная панель вкладок для опытных пользователей, чтобы они могли быстро получить доступ к тому, что им нравится.
  • Используйте жесты, чтобы у пользователей выработалась привычка быстрого и удобного доступа.
  • Возврат и закрытие страницы также должно быть простыми.
  • Быстрый переход к разделам страницы с помощью UX-паттернов.

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

1.1 В чем проблема гамбургер-меню?

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

К счастью, у нас есть способ решить эту проблему.

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

1.2 Мобильные UX-паттерны для всплывающих меню (Видео: Joox)

Расширьте панель вкладок, если у вас много контента

Руководство Human Interface Guidelines рекомендует размещать не более 5 функций в нижней панели навигации. Здесь вам пригодится опция «Больше» (3 точки). Расположенная в нижней панели, она может скрыть другие функции и раскрыть их одним нажатием.

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

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

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

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

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

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

1.5 Навигация на основе жестов для доступа к функциям приложения

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

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

1.6 Использование жестов для навигации по нескольким экранам (Видео: Zenly)

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

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

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

1.7 Плавающие вкладки и жесты для перехода между разделами

2. Паттерны основных действий одной рукой: создание, редактирование, публикация, добавление, удаление и другие

Что это?

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

Проблемы

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

Решение

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

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

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

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

Например, Snapchat скрывает все и стимулирует пользователей выполнять только основную задачу – снимать фото и видео. Кроме того, кнопка «Отправить» предлагает пользователям поделиться своими историями.

2.1 Упрощение доступа к основным задачам с помощью жестов, всплывающих меню и плавающих панелей

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

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

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

Microsoft Word и WPS Office предлагают множество инструментов для редактирования и многоуровневые меню в пределах досягаемости большого пальца. Эти интуитивно понятные системы меню интеллектуальны и функциональны. Они позволяют пользователям выполнять сложные операции и выбирать несколько вариантов.

2.2 Размещение инструментов редактирования в нижней части экрана для быстрого внесения изменения

Простые функции обмена и отправки с учетом достижимости

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

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

2.3 UX-паттерны для обмена фотографиями, видео, музыкой и другим контентом одной рукой

Разделите на несколько шагов задачи создания или добавления 

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

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

2.4 Размещение иконок «Создать» и «Добавить» в пределах досягаемости большого пальца

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

Что это?

Согласно Kaspersky Cybersecurity Index, 50% покупок в Интернете осуществляется на мобильных телефонах. Добавьте к этому такие коммерческие транзакции, как бронирование поездки, авиарейса, гостиницы, билетов в кино и на концерты, и вы поймете, насколько важен дизайн мобильного оформления заказа. В отчете Института Баймарда сообщается, что 23% покупателей бросают корзину с товарами из-за сложного процесса оформления заказа. Особенно мобильные покупатели, для которых оформление заказа представляет собой многоэтапный процесс, а ввести данные не так просто.

Проблемы

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

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

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

  • При выборе таких вариантов, как размер, цвет, время, дата и др., они должны быть легко заметны и доступны.
  • Мы можем интегрировать платежные системы Google и Apple, или автозаполнение из менеджеров паролей, например, Keychain, 1password и LastPass, чтобы ввести имя, данные кредитной карты, адрес, одноразовые пароли.
  • Мы также должны свести к минимуму движения пользователя большим пальцем.

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

Логистика покупок в Интернете может быть упрощена до трех этапов: добавление товаров в корзину, выбор вариантов товара и завершение процесса оплаты.

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

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

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

3.1 Плавный процесс оформления заказа с возможностью добавления товаров и выбора их вариантов

3.1 Добавление товаров в корзину в приложении электронной коммерции и доставки по требованию.  Видео: Shopping Choose | WE+AR TRBL | Tasty Hamburger App

Использование электронных кошельков и менеджеров паролей для быстрой оплаты

В Отчете о методах оплаты за 2019 год указывается, что более 71% онлайн-транзакций осуществляется через электронные кошельки, такие как Apple Pay, Google Pay, Alipay, Fitbit, Samsung Pay, YandexMoney и другие. Эти кошельки не только считаются более быстрыми, но и более безопасными и простыми в использовании.

Процесс оформления заказа можно сделать более эффективным и понятным. Более того, вы также можете добавить опцию «свайп, чтобы оплатить» (swipe-to-pay) для повышения конверсии.

3.2 UX-паттерны для оплаты платежей в мобильных приложениях электронной коммерции. (Видео: SPACED Challenge (Travel + VR) | Checkout Promocode | Gamification Checkout)

4. Поиск, фильтрация и сортировка контента одной рукой

Что это?

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

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

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

В ходе исследования Института Баймарда «Списки продуктов и фильтрация», было обнаружено, что сайты со средним юзабилити списка продуктов демонстрировали частоту отказов 67–90%. Внесение небольших изменений в набор инструментов снижало процент отказов до 17–33% при поиске тех же продуктов. Это привело к увеличению числа лидов примерно в 4 раза.

Проблемы
  • Поиск на мобильном телефоне должен быть легко доступен. Например, Youtube, Amazon Prime, Slack, Google Maps затрудняют пользователям доступ к меню поиска, располагая его в правом верхнем углу.
  • Организация информационной иерархии фильтров, так как существует слишком много параметров и категорий, чтобы пользователи могли быстро найти то, что ищут.
  • Управление многоуровневой информацией в интерфейсе, особенно, когда есть много категорий, и каждая категория содержит множество элементов.
  • Изменение интерфейса на основе различных состояний, когда применен один или несколько фильтров.
  • Все это должно выполняться пользователями в пределах досягаемости большого пальца.
Решение
  • Используйте для поиска жесты или легко доступные кнопки. Когда пользователи переходят на экран поиска, предложите им варианты поиска, а также сразу открывайте текстовое поле.
  • Говорите на языке пользователей и помните о них при организации фильтров. Разместите фильтры / кнопку сортировки под рукой. Также сделайте открытие и закрытие меню фильтров одной рукой.
  • Для сложной информации, используйте двухэтапную или параллельную фильтрацию.
  • Применяйте фильтры немедленно. Сделайте фильтры интерактивными, на основе действий пользователей. Разрешите пользователям выбирать несколько вариантов. Измените категории фильтров в соответствии с применяемыми фильтрами.
  • Сначала покажите рекомендации, недавно использованную или наиболее часто используемую информацию.

Для многих приложений поиск входит в топ-5 самых популярных функций. Но многие дизайнеры приложений затрудняют доступ к иконке поиска. Смотрите интерфейсы Apple Maps и Google Maps,  Netflix иYoutube.

Сравнение доступности панели поиска – Apple Maps и Google MapsСравнение доступности панели поиска – Netflix и YouTube

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

4.1 Знакомство пользователей с контентом через страницу поиска

Удалите лишние шаги при поиске и фильтрации

Чтобы укорить процесс поиска, мы можем сделать так, чтобы при нажатии на иконку поиска на панели вкладок появлялась клавиатура. Тогда пользователи смогут сразу вводить свои запросы. Смотрите примеры Netflix и SpotHero ниже.

Многие приложения, такие как Amazon или Google Drive, размещают панель поиска в верхней части главной страницы. В таких случаях мы можем использовать жесты (свайп вниз). Например, в приложении Inshorts свайп вниз позволяет немедленно начать печатать, вместо того, чтобы тянуться вверх и нажимать на строку поиска.

4.2 Поиск и фильтрация, удобные для большого пальца

Двойное нажатие на иконку поиска, чтобы открыть клавиатуру

Если вы хотите использовать страницу поиска для отображения дополнительной информации, вы можете использовать двойное нажатие для открытия клавиатуры, как в приложениях Microsoft News, Spotify и Reddit Apollo.

4.3 Удобный доступ к клавиатуре с помощью двойного нажатия на иконку поиска

Меню фильтра в пределах досягаемости большого пальца должно ускорить поиск информации

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

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

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

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

4.4 Сортировка и фильтрация элементов в мобильных приложениях электронной коммерции Видео: Filters | Car Sharing with Friends

5. Элементы управления и ввода данных

Что это?

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

Такие вещи, как заполнение форм, ввод пароля, выбор даты / времени и т.д. необходимо правильно перевести на сенсорный интерфейс, не отказываясь от привычных метафор ПК.

Проблемы

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

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

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

Если все сделано правильно, то ввод данных не должен занимать много времени.

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

Исправление заполнения форм, начиная с регистрационных форм

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

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

5.1 Лучшие практики регистрации, разбитой на несколько экранов (Видео: Zenly & AirBnB)

Быстрый ввод информации с минимумом движений большим пальцем

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

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

5.2 Точное заполнение формы одной рукой (Видео: Periscope)

Умные мобильные паттерны для ввода данных

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

5.3 Ввод данных одной рукой в формы мобильных приложений (Видео: Peach | Zova Workout & Fitness | Square Order)

6. Прочие паттерны для воспроизведения мультимедиа, фотосъемки, редактирования фотографий и навигации по карте

В связи с тем, что в Google Store более чем 2 миллиона приложений, а в App Store 1,83 миллиона приложений, дизайнерам стало необходимо выделить свои приложения из общей массы. Один из способов – сделать общие функции веселыми и плавными, и этот последний раздел представляет собой подборку различных пользовательских взаимодействий.

6.1 Эти приложения позволяют пользователям увеличивать и уменьшать масштаб одним движением большого пальца.

6.1 Независимо от того, выбираете ли вы эмодзи, отправляете изображения или слушаете аудио, жесты могут добавлять такие взаимодействия. (Видео: Composer Concept | Gamification + Checkout)

Вывод

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

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

как проектировать металлоконструкции качественно и быстро

Денис Стаценко

Маркетинг-менеджер машиностроительного направления АСКОН

Один из советских агитационных плакатов гласил: «Больше металла — сильнее Родина!» Но мы будем мыслить конкретнее. Сегодня металлоконструкции незаменимы практически в любой отрасли. Из профильного металлопроката изготавливают рамные конструкции, антенные мачты и вышки, опоры, ограждения, эстакады, площадки, фермы… Так что, прямо скажем, больше металлоконструкций — сильнее промышленность, строительство, сельское хозяйство! И мы, как разработчики инженерного ПО, можем помочь конструкторам, которые занимаются созданием подобных изделий, упростить и ускорить процесс не только проектирования, но и подготовки производства металлоконструкций. Для этого им нужно лишь освоить новое приложение Оборудование: Металлоконструкции для КОМПАС­3D.

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

Как быстро?

Очень быстро. Руководители часто сталкиваются с ситуацией, когда выпустить документацию или изготовить оборудование нужно было «вчера». Поворачивать время вспять приложение Оборудование: Металлоконструкции, конечно, не может, но оперативно справиться с задачей сегодня, сейчас, вполне способно. Высокая скорость построения изделия достигнута за счет изменения механизма создания профилей металлоконструкции. Теперь профили конструкции проектируются в виде тел модели. Благодаря этому и дерево построения стало более компактным и простым в восприятии. Объекты и операции в нем отображаются специальными значками (рис. 1).

Рис. 1

Рис. 2

Рис. 3

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

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

Насколько удобно?

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

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

Рис. 4

А можно всё и сразу?

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

Рис. 5

Рис. 6

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

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

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

Проектирование в 3D сразу выдает возможные нестыковки в конструкции. По сути, Оборудование: Металлоконструкции позволяет избежать дополнительных затрат на материал, инструмент, а главное — не потерять драгоценное время.

Чем докажете?

Докажем и покажем. Параллельно с разработкой нового приложения Оборудование: Металлоконструкции шло его функциональное тестирование. Все возможности приложения проверялись путем построения реальных пользовательских проектов. На рис. 7, 8, 9, 10 представлены примеры конструкций, выполненных с помощью обновленного приложения.

Убедились? Новое приложение Оборудование: Металлоконструкции к вашим услугам! Ну а если вопросы все еще остались, просим вас обращаться к специалистам АСКОН и компаний­партнеров любым удобным способом.

Рис. 7

Рис. 8

Рис. 9

Рис. 10

САПР и графика 6`2015

Начинаем проектировать – Сделаем мебель сами

Здравствуйте!

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

Теперь, понимая общие принципы проектирования, нужно, наверное, переходить к практике.

Итак, предлагаю вам начать изучение ручной проектировки.

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

Да, это действительно так.

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

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

Это равносильно тому, что лучше ездить на кобыле, чем на автомобиле, и всего лишь потому, что езде на автомобиле нужно учиться. А учиться – «в лом» (других аргументов я просто не вижу).

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

Итак, начнем с самого простого – с проекта обычной тумбочки

Габаритные размеры этой тумбы будут таковы:

Ширина – 420 миллиметров

Высота – 700 миллиметров

Глубина – 370 миллиметров

Тумба должна быть изготовлена из ДСП толщиной 16 миллиметров.

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

Стоит заметить, что так считается почти вся мебель.

Как известно, пространство, в котором мы живем – трехмерное, то есть имеет три измерения.

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

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

Фронтальной – это когда мы смотрим на изделие спереди, «в лоб».

Боковой – когда мы смотрим сбоку.

Вид сверху – это когда мы смотрим сверху.

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

Мы будем считать традиционно – в проекциях.

Вернемся к “нашим баранам”.

Просчитаем ее по ширине

Как видно из чертежа, «нахлест» крышки тумбы по краям равен 10 миллиметров. Значит можно определить ширину самого короба:

420-10-10=400 (миллиметров)

Зная этот размер и толщину листа ДСП, из которого она состоит, можно высчитать ширину нижнего горизонта, корпусных планок и фальшпанели:

400-16-16=368 (миллиметров)

«Не отходя от кассы», рассчитаем ширину фасада.

Этой теме будет посвящена целая статья, поэтому мы не будем особо в это углубляться, а просто отнимем от ширины короба тумбы 2 миллиметра и получим:

400-2=398 (миллиметров)

Все детали во фронтальной плоскости (по ширине) мы рассчитали.

Теперь рассчитаем детали по глубине (вид сбоку)

«Нахлест» крышки относительно короба по переднему краю, равен 20 миллиметров (крышка должна перекрывать фасад, толщиной 16 миллиметров). Значит, глубина короба будет равна:

370-20=350 (миллиметров)

Полку «по глубине» сделаем на 10 миллиметров меньше глубины короба, то есть:

350-10=340 (миллиметров)

Для обычных по ширине коробов (350-700 миллиметров), глубину корпусных планок обычно берут 80 миллиметров.

И, наконец, просчитаем нашу тумбу по высоте

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

700-16=684 (миллиметра)

Высота фальшпанели (по чертежу), равна 80 миллиметров.

Высчитаем высоту фасада:

700-16-3-80=601 (миллиметр), где 16мм – толщина крышки, 3мм – зазор между крышкой и фасадом, 80мм – высота фальшпанели.

Ну, теперь можем записать результаты наших «мук», или деталировку тумбы (в миллиметрах):

Крышка – 420 на 370 (1шт)

Бок – 684 на 350 (2шт)

Корпусные планки, цоколь– 368 на 80 (3шт)

Полка – 368 на 340 (1шт)

Нижний горизонт – 368 на 350 (1шт)

Фасад – 601 на 398 (1шт)

Еще этой тумбе нужна задняя стенка, сделанная из ДВП (4 миллиметра толщиной). Она набивается на корпусную планку и нижний горизонт, поэтому ее размеры будут такими:

700-16-80=604 (миллиметра), где 16 мм – толщина крышки, 80 мм – высота цоколя.

А ширина задней стенки равна ширине короба (для удобства можно еще отнять 2 миллиметра):

400-2=398 (миллиметров)

Итак, задняя стенка – 604 на 398 (1шт)

Имея на руках деталировку, уважающий себя «мебельщик» делает «карту раскроя», на основе которой, будут распилены листы ДСП на детали.

Потом детали обрабатываются.

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

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

Ну что, будем «расти»?

Усложним наши задачи?

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

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

До встречи.

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

Архив


автор : Джек Ривз   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. Сотни разработчиков в команде. И большие бабки.

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

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

    <…>

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

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

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

    Как нужно проектировать города (и почему сейчас это делают неправильно): мнение архитектора

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

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

     

    Никто не проектирует фруктовые пироги, точно определяя координаты его ингредиентов.

     

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

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

    Пирожные массового производства никогда не станут такими премиальными, как, скажем, iPhone.

     

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

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

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

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

     

    Зачастую люди чувствуют себя более комфортно в органической среде, сформированной с течением времени по паттернам, чем в стерильном, явно спланированном дизайне. Джейн Якобс ясно это осознала и направила свои усилия на защиту органического характера района West Village на Манхэттене.

    Баланс между проектированием и рецептами

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

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

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

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

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

     

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

    Почему города промышленной эры не создавались по рецептам

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

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

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

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

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

     

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

     

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

     

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

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

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

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

    Паракеш Кристофера Хольца и Йоганна Ватцке. Прекрасный пример города, сделанного на основе рецепта. Вы не смогли бы спроектировать подобный город с нуля до появления повсеместных компьютерных вычислений по двум очень разным причинам: 1. это был бы невозможный лабиринт при использовании карты, вместо, скажем, смартфона. 2. Его дизайн требует компьютеров для вычисления визуального результата рецепта. Этот город был сгенерирован компьютером из нескольких правил о внутренних дворах и водных потоках. Конечный результат выглядит, как город-оазис среди пустыни (отсюда и название — обыгрывание слов параметрический и Марракеш) — хотел бы я здесь жить.

    Возвращение декораций в современную архитектуру без подделки под историю

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

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

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

     

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

     

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

     

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

    Декорации тесно связаны с понятием построенного по рецепту города по двум причинам:

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

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

    Смыслы в архитектуре — в отрыве от идеологии

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

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

     

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

     

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

     

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

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

     

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

    Материалы по теме:

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

    Design 101: 8 основ графического дизайна, которые вам нужно знать

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

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

    Изучите 8 основ графического дизайна

    • Пространство
    • Баланс
    • Иерархия
    • Линии и форма
    • Цвет
    • Типографика
    • Текстура
    • Брендинг

    Площадь

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

    Белое пространство в этом меню так же важно, как и другие элементы дизайна (и продукты питания!). Дизайн меню Marcy_McGuire.

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

    10 способов более эффективно использовать пространство

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

    5 правил оформления композиции и верстки

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

    Пространство в интерактивном дизайне

    Заинтересованы в UX и дизайне взаимодействия? Узнайте, как использовать пространство в цифровой среде.

    Грифельная графика и элементы дизайна

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

    Баланс и центровка

    Все элементы на этом плакате правильно сбалансированы, что усиливает общий эффект дизайна. Дизайн плаката — Швин.

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

    7 принципов проектирования

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

    5 правил композиции и верстки

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

    Иллюзия движения в графическом дизайне

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

    Иерархия

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

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

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

    Но визуальная иерархия — это нечто большее, чем просто «больше — лучше».

    6 принципов визуальной иерархии

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

    6 советов по улучшению типографской иерархии в веб-дизайне

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

    Использование шаблонов F и Z для создания визуальной иерархии в дизайне целевой страницы

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

    Линии и формы

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

    Закругленные логотипы, угловые логотипы и логотипы с вертикальными линиями создают совершенно другой бренд и дизайн. Разработка логотипов: bo_rad, olimpio, AC Graphics.

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

    Значение логотипов

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

    Что такое фирменный стиль? И как спроектировать и разработать отличный

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

    Цвет

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

    Дизайн упаковки от ve_sta

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

    Значения цвета и искусство использования психологии цвета

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

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

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

    Психология цвета в веб-дизайне

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

    Как выбрать идеальные цвета для визитки

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

    Типографика

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

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

    Как творчески использовать принципы типографики

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

    Ускоренный курс по типографской лексике

    Нужно освоить типографский жаргон? Пройдите этот ускоренный курс и выучите язык типографики.

    Как выбрать шрифты для веб-дизайна

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

    Как освоить адаптивную типографику

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

    14 типографских преступлений прекратить совершать

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

    Текстура

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

    Текстура делает графический дизайн живым. Проекты через Якопо Северитано, Гринблатт-Векслера и Павла Нольберта.

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

    Инновационные подходы к текстуре в графическом дизайне

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

    Брендинг

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

    Важность воплощения брендов в жизнь

    Начните здесь и узнайте, почему так важно воплотить свой бренд в жизнь (и как это сделать) из этой статьи.

    Как разработать стратегию брендинга для вашего бизнеса

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

    Брендинг, фирменный стиль и логотип: в чем разница?

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

    В отличном дизайне нет ничего «базового».

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

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

    15 способов разрабатывать лучше и быстрее —

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

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

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

    В поисках вдохновения

    Начать проекты с Google

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

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

    Благодаря Google проведение дизайнерских исследований никогда не было таким простым в истории человечества.

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

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

    Посмотрите, что делали другие до вас, и вы поймете, что делать дальше.

    Открыть счет Dribble

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

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

    Только не говорите своим клиентам, что вы это сделали.

    Следуй за правильными людьми

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

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

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

    Наполните свой ум новыми идеями

    Быстрый вопрос — всегда ли вы читаете одни и те же блоги, смотрите одни и те же фильмы и едите одни и те же продукты?

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

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

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

    Работаем умнее

    Используйте хорошие макеты

    Amazon имеет большую коллекцию книг, связанных с макетами.

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

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

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

    Сначала эскиз, второй эскиз

    Процесс разработки приложения для iPhone. Да, это начинается на бумаге.

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

    Я повторяю это снова и снова: рука с карандашом в сотни раз быстрее, чем рука с мышью. Если вы начинаете свои дизайнерские проекты в Photoshop или Illustrator, вы уже потеряли часы работы.

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

    Гарантировано, что вы завершите проекты вдвое быстрее.

    Определитесь со стилем дизайна заранее

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

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

    • Фотографии
    • На основе иллюстраций
    • Типовое

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

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

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

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

    Получите более быстрый и лучший компьютер

    Я надеюсь, что ваши инструменты обновлены до последней версии.

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

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

    Быстрый компьютер, большой экран и много памяти ДЕЙСТВИТЕЛЬНО делают вас лучшим дизайнером, независимо от вашего таланта.Ваше время, рассудок и удовлетворение от работы не менее важны, чем идеи в вашей голове и навыки в ваших руках.

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

    Отдыхай

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

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

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

    Отключите электронную почту, телефон и другие отвлекающие факторы

    Дизайнер Хантер Лэнгстон сделал эту замечательную иллюстрацию. При этом он не слишком отвлекался.

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

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

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

    Не используйте одновременно

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

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

    У вас один мозг и одна пара рук, так что делайте одно дело за раз.

    Особенно, если речь идет о графическом дизайне.

    Работа с клиентами

    Убедитесь, что клиенты подходят друг другу

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

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

    Квалификация включает в себя задание клиенту простого набора вопросов, например:

    • Вам нравится то, что вы видите в моем портфолио?
    • Каков ваш бюджет на этот проект? Обычно за этот вид работы я беру от X до Y.
    • Как скоро вы хотите начать? В настоящее время я работаю над X другими проектами, поэтому могу начать через Y дней / недель.
    • Можете ли вы нанять меня лично или вам нужно сначала узнать чье-то мнение?
    • Вы согласны с 50% первоначальным взносом?

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

    Если нет, двигайтесь дальше. В море много другой рыбы.

    Узнайте, чего хотят ваши клиенты

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

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

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

    Предоставьте клиентам выбор

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

    Это не вопрос хорошего обслуживания — это отличная экономия вашего времени.

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

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

    Сделайте это своей стандартной практикой, и вы будете счастливы, что сделали.

    Обращайтесь с жалобами как профессионал

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

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

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

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

    Заключение

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

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

    Каковы ваши лучшие практики при проектировании?

    Как стать дизайнером, не посещая школу дизайна — Карен X

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

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

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

    Это руководство по обучению дизайну.

    Обновление: я впервые опубликовал этот пост в блоге более года назад. С тех пор я получил сотни писем с просьбами о дополнительных рекомендациях и более простых действиях, и я наконец нашел одно: Designlab . Этого курса не было, когда я учился, но, черт возьми, я бы хотел, чтобы он был — это сделало бы весь процесс намного менее пугающим.Что мне действительно нравится в нем, так это то, что он дает вам задания по проекту, а затем связывает вас с наставником по дизайну, который дает вам обратную связь (у них есть действительно хорошие люди, которые работают в Facebook).

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

    Во-первых, научитесь рисовать.

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

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

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

    Изучите теорию графического дизайна

    • Начните с книги Picture This.Это сборник рассказов о Красной шапочке, но в то же время он научит вас основам графического дизайна.

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

    • Просматривайте несколько из этих руководств каждый день.

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

    Научитесь писать

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

    • Прочтите «Сделано на прилип», одну из моих любимых книг всех времен. Это научит вас втягивать своих читателей.

    • Voice and Tone — это веб-сайт, полный драгоценных камней с хорошими примерами письма.

    Шаг 2. Научитесь пользоваться Photoshop и Illustrator
    Ура! Теперь у вас есть довольно прочная основа — как визуальная, так и UX.Вы готовы изучить Photoshop. На самом деле, я рекомендую сначала начать с Illustrator, а потом переходить к Photoshop. Illustrator — это то, что дизайнеры используют для создания логотипов и значков.

    Learn Illustrator

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

    • Adobe Illustrator Classroom in a Book — Это скучно, но если вы прочтете хотя бы половину из них, вы будете хорошо разбираться в Illustrator. .

    • Базовое обучение работе с векторной графикой. Из этой книги вы узнаете, как сделать в Illustrator вещи, которые действительно хорошо выглядят.

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

    Изучите Photoshop

    Шаг 3. Изучите некоторые специальности
    Хотите разрабатывать мобильные приложения? Сайты? Инфографика? Изучите их все и выберите те, которые вам нравятся, чтобы улучшить их.

    Изучите дизайн логотипа

    • Узнайте, как сделать логотип, который не отстой: Logo Design Love

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

    Изучите дизайн мобильных приложений

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

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

    • Займитесь приложениями на своем телефоне. Критикуйте их. Что работает, а что нет?

    Изучите веб-дизайн

    А теперь вопрос о том, нужно ли вам знать HTML / CSS как дизайнер: это зависит от работы. Знание этого обязательно даст вам преимущество на рынке труда.Даже если вы не хотите быть веб-разработчиком, полезно знать некоторые основы. Таким образом вы будете знать, что возможно, а что нет.

    Есть так много замечательных ресурсов для изучения HTML и CSS:

    • Мой любимый бесплатный ресурс — это веб-дизайн Tuts.

    • Мой любимый платный дом (довольно доступный по цене 25 долларов в месяц) — Treehouse. Если вы начинаете с самого начала и хотите, чтобы кто-то объяснил вещи ясно и всесторонне, потратитесь на учебные пособия по Treehouse.

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

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

    • Придумайте глупые идеи для футболок.

    • Найдите веб-сайты с плохим дизайном и измените их дизайн.

    • Есть идея для приложения для iPhone? Смоделируйте это.

    • Присоединяйтесь к команде на Startup Weekend и станьте дизайнером в проекте выходного дня.

    • Примите участие в конкурсе 99 дизайнов, чтобы попрактиковаться в дизайне до брифа.

    • Выполните упражнения по графическому дизайну из книги «Творческая мастерская».

    • Найдите местную некоммерческую организацию и предложите дизайн бесплатно.

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

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

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

    Шаг 5. Получите работу дизайнера
    Когда я только начал изучать дизайн, я пошел на семинар по поиску работы для дизайнеров.Я вошел в комнату, полную дизайнеров, у которых было намного больше опыта, чем у меня — 5, 10, 15 лет опыта. Все они искали работу. Это было устрашающе. Я пытался научиться дизайну, зная, что конкурирую с этими опытными дизайнерами.

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

    Самый большой фактор для повышения вашего трудоустройства — это возможность работать с разработчиками.Изучите дизайн взаимодействия. Изучите основы HTML и CSS. Дизайнеры в сфере высоких технологий (дизайнеры взаимодействия, веб-дизайнеры, дизайнеры приложений) пользуются чрезвычайно высоким спросом и хорошо оплачиваются. Вот где сейчас работа.

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

    Создайте личный веб-сайт и сделайте свое портфолио центром внимания.

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

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

    Получив работу, продолжайте учиться.
    Я работаю в Exec уже год и многому научился на работе.Я ищу дизайнеров, которые намного более талантливы, чем я, и учусь у них. Я нахожу классы дизайна (хорошие онлайн-классы — это Skillshare, General Assembly, Treehouse и TutsPlus). Я работаю над сторонними проектами. Я увлекаюсь дизайном в книжных магазинах. Еще так много предстоит узнать и улучшить.

    Сохраняйте свои навыки и всегда продолжайте учиться.

    Как создать логотип: 11 шагов, чтобы создать логотип для вашего бизнеса

    8. Создайте свой логотип

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

    • Вы можете работать с дизайнерским агентством

    • Вы можете разработать логотип самостоятельно с помощью создателя логотипа

    • Вы можете нанять внештатного дизайнера логотипов

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

    №1. Создание логотипов

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

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

    Но это еще не все!

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

    № 2. Работа с внештатным дизайнером

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

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

    1. Сообщение о вашем бренде

    2. Компания

    3. Ваша целевая аудитория

    4. Тон и изображения, которые вы хотите передать

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

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

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

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

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

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

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

    Какой формат файла они предоставят? Большинство дизайнеров предлагают jpg, png, pdf, а некоторые предлагают .ai и.psd файлы. Самый важный файл, который вам нужен, — это векторный файл с прозрачным фоном.

    Что входит в их ценовые пакеты, а что НЕ включено? Если вы не видите чего-то важного для вас, спросите.

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

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

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

    Чего следует ожидать от дизайнера логотипов?

    Вот чего вам следует ожидать от дизайнера логотипов:

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

    • Временная шкала, когда они находятся в сети, по отношению к вашему часовому поясу.

    • Они должны предложить все файлы, которые вам нужны, чтобы вы могли использовать их в будущем. Сглаженные версии для Интернета и печати, а также исходные исходные изображения, которые обычно входят в формат Adobe Illustrator или Photoshop. Если вы не видите их в профиле, спросите.

    • Вы должны получить различные размеры (включая размеры значков), которые, очевидно, можно использовать в Интернете, в социальных сетях, в электронных письмах и т. Д.

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

    Найдите дизайнера логотипов на работу

    Как создать отличную графику без навыков дизайна

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

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

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

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

    Готовы превзойти свои дизайнерские навыки? Давайте начнем.



    Основные элементы дизайна

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

    Чарльз Имс, дизайнер

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

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

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

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

    Линия

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

    Взгляните на домашнюю страницу MailChimp. Линия отделяет меню вверху (также известное как панель навигации) от центра страницы. Под основным разделом у нас есть еще одна линия, представляющая Mailchimp Pro.Этот линейный макет позволяет посетителю понять, что происходит.

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

    Разные линии тоже вызывают разные чувства.

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

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

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

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

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

    Дополнительная литература:

    Форма

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

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

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

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

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

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

    Дополнительная литература:

    Цвет

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

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

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

    Холодные цвета , включая синий, зеленый и фиолетовый, более спокойные и успокаивающие.

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

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

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

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

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

    Дополнительная литература:

    Текстура

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

    По словам авторов Smashing Magazine Джона Сэвиджа и Саймона Х., «Текстура становится неотъемлемой частью дизайна. Она может направлять взгляд пользователя и подчеркивать важность ключевых элементов».

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

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

    На сайте, рекламирующем [Uncharted] ((http://uncharted.sunbrella.com/), документальный фильм об олимпийской сборной США по парусному спорту, текстурный аспект волн заставляет вас чувствовать себя частью сцены.

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

    Этот минимализм может показаться освежающим и современным.

    Например, посмотрите целевую страницу Make This Year. Благодаря анимации набора текста и яркой цветовой комбинации, этот дизайн определенно не требует текстуры, чтобы сделать его интересным.

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

    Дополнительная литература:

    Типографика

    Распространение вашего сообщения по вопросам. И типографика — или искусство и техника расположения букв и символов — имеет огромное влияние на то, понимает ли ваша аудитория это сообщение.

    Во-первых, давайте проясним разницу между «гарнитуром» и «шрифтом». Думайте о каждом шрифте как о семействе, а о шрифтах как о отдельных членах этого семейства. Например, в гарнитуре (или семействе) Helvetica шрифты (или члены семейства) включают Helvetica Regular, Helvetica Light, Helvetica Bold, Helvetica Compressed и Helvetica Rounded.

    Helvetica Light, Roman и Oblique

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

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

    Без засечек включает шрифты, на которых, как вы уже догадались, нет мелких декоративных знаков. В это семейство входят Helvetica, Arial, Futura и Franklin Gothic.Эти шрифты кажутся чище и современнее, но их труднее читать.

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

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

    • Отслеживание : сколько места между буквами. Чем больше места, тем удобочитаемее будет ваш шрифт.

    • Ведущий : сколько места существует между каждой строкой. Используйте ведущее значение, которое в 1,25–1,5 раза больше размера шрифта. Размер : размер шрифта — сложный вопрос, поскольку он меняется в зависимости от того, какое устройство использует кто-то, насколько велик экран, примененные настройки и т. Д.Якоб Нильсен, эксперт по удобству использования в Интернете, предлагает использовать размер шрифта не менее 10 пунктов или, возможно, увеличить его до 12 пунктов для лучшей читаемости.

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

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

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

    • Длина строки : Как следует из названия, длина строки определяет ширину текста по горизонтали. После подробного исследования того, как люди читают, оптимальная длина строки кажется примерно 45-85 символов.

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

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

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

    Дополнительная литература:


    Основные принципы дизайна

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

    Balance

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

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

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

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

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

    Everlane и InVision используют вертикальную и горизонтальную балансировку соответственно. Но баланс не обязательно должен быть вертикальным.

    Посетите домашнюю страницу Webydo для подтверждения. Разделите эту страницу между двумя iPad, и вы получите два почти одинаковых треугольника. (О, и помните, как диагональные линии передают энергию и волнение? Вы определенно можете уловить эту атмосферу здесь!)

    Хотите знать, как выглядит отсутствие равновесия? Правительство США славится своим непригодным для использования и устаревшим дизайном и, к сожалению, MyMoney.gov оправдывает эту репутацию.

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

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

    Дополнительная литература:

    Контраст

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

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

    Показательный пример: монетный двор.

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

    Дополнительная литература:

    Rhythm

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

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

    Чтобы показать, что я имею в виду, вот домашняя страница Product Hunt. Раздел продуктов «Tech» дублируется разделом «Games» внизу.Если вы продолжите прокрутку, вы найдете разделы «Подкасты» и «Книги» с одинаковым форматом.

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

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

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

    Дополнительная литература:

    Пробел

    Каждый раз, когда вы видите пустую или незаполненную часть дизайна, вы смотрите на пустое пространство. Белое пространство (также известное как негативное пространство) относится ко всему, что находится вокруг других элементов дизайна и между ними.И не думайте о пустом пространстве как о «потраченном впустую» пространстве; Как объяснил известный типограф Ян Чихольд, «пустое пространство следует рассматривать как активный элемент, а не как пассивный фон».

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

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

    Poppies Flowers также использует достаточно свободного места на своем сайте.

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

    Дополнительная литература:

    Как быстро создавать эффективный дизайн

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

    Шаг 1. Выбор фона

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

    Для наших целей существует два основных типа фонов: изображения и сплошные цвета.

    Изображения

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

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

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

    Это изображение горного хребта было бы отличным выбором.

    Где искать изображения

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

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

    • Death to the Stock Photo — это информационный бюллетень по электронной почте, который ежемесячно отправляет 10 новых изображений в ваш почтовый ящик.Выборки созданы для креативщиков, поэтому здесь много офисных и рабочих картинок.

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

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

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

    Если вы ищете универсальный магазин, обратите внимание на Pexels. В настоящее время он содержит более 10 000 стоковых фотографий (в том числе многие из Unsplash, Death to the Stock Photo и Gratistography), плюс около 1 500 новых добавляются каждый месяц.Воспользуйтесь преимуществами мощных фильтров поиска: вы можете исключить слово, поставив перед ним дефис (например, «офис — люди»), или выполнить поиск по цвету, включив «цвет:», за которым следует название цвета (например, «офис» цвет: красный «).

    Чтобы узнать о последних сайтах стоковых фотографий, следите за коллекцией стоковых фотографий на Product Hunt. Также стоит добавить в закладки: Дастин Сенос, бывший руководитель отдела дизайна Medium, ведет постоянный список источников стоковых фотографий.

    Сплошные цвета

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

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

    Help Scout отлично справился с этим. Его команда использует яркий монохромный фон для визуальных эффектов:

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

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

    Шестнадцатеричный код — это, по сути, числовое представление цвета. Например, шестнадцатеричный код Pantone Dark Blue C — # 00239c .

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

    Где найти цвета

    Цветовая палитра Google включает сотни основных и акцентных цветов, которые созданы для гармоничного сочетания. Google рекомендует выбрать основной основной цвет, например «Индиго» (или # 3F51B5), и использовать его в качестве основного цвета. Затем, если вы хотите добавить больше цветов, вы можете использовать предложенные акценты.

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

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

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

    Шаг 2. Выберите инструмент

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

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

    Designfeed, еще одно приложение для создания графики, похоже на то, что Пабло поднял до 11. Загрузите свое изображение, введите до трех уровней текста (заголовок, подзаголовок и кнопка) и выберите размер, оптимизированный для платформы (Facebook, Tumblr, Pinterest и др.).

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

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

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

    Если вы выходите за рамки базовой графики, Canva — лучший выбор. Он загружен шаблонами практически для любого мыслимого дизайна — от эскизов YouTube и обложек для Kindle до фотографий в Google+ и графики Tumblr.

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

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

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

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

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

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

    Поскольку Photoshop довольно сложен и требует крутого обучения — и начинается с 10 долларов в месяц, — я бы не рекомендовал его, если вас не интересуют другие его применения.

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

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

    Шаг 3. Выбор надстроек

    Тип и стиль шрифта

    Самая простая графика, которую только можно себе представить, — это фон + текст.

    Когда вы выбираете, какие шрифты использовать, нужно помнить о нескольких вещах: где будет жить этот рисунок и какие шрифты будут вокруг него?

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

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

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

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

    Вот что я сделал для этого рисунка. После того, как я выбрал Raleway в качестве заголовка, я просмотрел предложенные пары и остановился на Open Sans.

    Иконки

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

    Некоторые инструменты редактирования (например, Canva, Piktochart и Stencil) имеют встроенные библиотеки значков.Однако, если вы используете Pablo или Photoshop или вам не нравятся какие-либо доступные варианты, есть несколько высококачественных ресурсов значков.

    Noun Project, который позволяет загружать столько значков, сколько вы хотите, за 9,99 долларов в месяц (примечание: вы можете использовать большинство значков бесплатно, если вы укажете автора). Кроме того, вы можете подписаться на Icon Finder. Это примерно такая же цена, но вы ограничены 25 загрузками в месяц.

    Smashing Magazine также может использовать бесплатные наборы значков.Чтобы отсортировать параметры и найти значок, который можно использовать, потребуется некоторое время, но они качественные и бесплатные!

    Разное

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

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

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

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

    Возможно, у вас нет прозрачной версии вашего логотипа. К счастью, вы можете создать его в Photoshop или Canva for Work.

    Изучение дизайна дальше

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

    • Дизайн для основателей : эта коллекция из более чем 55 статей о дизайне нацелена на основателей, но любой, кто только начинает заниматься дизайном, извлечет выгоду из его тщательного изучения веб-дизайна.

    • Подводные камни дизайна : Подпишитесь на эту бесплатную рассылку по электронной почте, чтобы избежать «ошибок дизайнера n00b».

    • Designer Mill : воспользуйтесь потрясающими бесплатными предложениями, от значков и бесплатных шрифтов до шаблонов Illustrator и Sketch.

    • Crayon : Этот сайт, специально разработанный для маркетологов, содержит более 20 миллионов дизайнов, включая цены, команды, вакансии и пробные страницы.

    • GoodUI : сборник из 51 принципа интерфейса, обеспечивающий высокий коэффициент конверсии.Музыка для ушей каждого маркетолога!

    • Дизайн для стартапа : Этот набор адаптирован к базовым потребностям стартапа.


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    3. Идеи для набросков, основанные на этих словах

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

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

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

    4. Проверьте свои лучшие эскизы с персоной покупателя

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

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

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

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

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

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

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

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

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

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

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

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

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

    Изображение Jay Moye

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

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

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

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

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

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

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

    Логотипы

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

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

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

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

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

    Как создать веб-сайт в 2021 году: пошаговое руководство

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

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

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

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

    1. Установите цель

    2. Выберите конструктор веб-сайтов

    3. Определите свой макет

    4. Заявите о своем доменном имени

    5. Соберите свой контент

    6. Добавьте правильные страницы

    7. Выберите элементы дизайна своего веб-сайта необходимые профессиональные инструменты

    8. Сделайте его доступным для всех

    9. Оптимизация для мобильных устройств

    10. Повысьте эффективность своей SEO

    11. Взаимодействуйте с посетителями

    12. Спросите отзыв

    01.Установите свою цель

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

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

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

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

    02. Выберите конструктор веб-сайтов

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

    На рынке доступны десятки платформ. Не знаете, какой из них использовать? Wix.com занял первое место среди лучших разработчиков веб-сайтов в мире, и не зря. Вот несколько преимуществ Wix:

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

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

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

    Новичкам также может понравиться Wix ADI (Artificial Design Intelligence), первая платформа искусственного интеллекта, которая создает для вас веб-сайты. Это отличное решение для быстрого создания веб-сайта — ответив на несколько вопросов, вы получите готовый веб-сайт, который впоследствии можно будет настроить.

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

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

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

    Служба поддержки клиентов: Вы не одиноки в своем путешествии по разработке веб-сайта. Если вам понадобится помощь, вам всегда будет с кем поговорить благодаря круглосуточной службе поддержки Wix и страницам в социальных сетях.Если вы хотите прочитать советы по веб-дизайну, найти руководства по веб-дизайну и получить вдохновение, вы также найдете множество полезных материалов в Интернете. Чтобы расширить свои знания в области веб-дизайна, интернет-маркетинга, поисковой оптимизации и т. Д., Загляните в Блог Wix (искренне ваш) и Справочный центр.

    Готовы создать сайт? Вот как начать:

    1. Зайдите на Wix.com со своего компьютера или мобильного телефона.

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

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

    03. Определите свой макет

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

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

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

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

    04. Заявите о своем доменном имени

    Проще говоря, ваше доменное имя — это ваш адрес в Интернете. Это то, что ваши посетители увидят на панели своего браузера сразу после www.”

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

    Если доменное имя выбрано с умом, оно также помогает поисковым системам (например, Google и Bing) понять, о чем ваш веб-сайт. Это важно, потому что помогает привлечь больше трафика на ваш сайт.

    Итак, как выбрать доменное имя для своего бренда? Чтобы сделать его запоминающимся, сохраните его:

    • Краткое: Чем он длиннее, тем выше вероятность того, что посетители его неправильно написали.

    • Простой: Избегайте символов, специальных символов и цифр.

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

    • Вызывающий: Подсказка о том, что вы делаете в своем доменном имени, путем включения слов, имеющих отношение к вашему бизнесу.

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

    Совет для профессионалов : Выбор доменного имени также означает использование правильного расширения домена. От .org до .com и .net вы можете выбрать одно из 45 расширений домена верхнего уровня. Лучше всего использовать тот, который подходит вашему типу бизнеса и географическому положению.

    05. Соберите свой контент

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

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

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

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

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

    06. Добавьте нужные страницы

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

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

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

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

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

    Дополнительно (но настоятельно рекомендуется):

    Страница вашего продукта или услуги : Страница продукта (или страница услуги, в зависимости от вашей отрасли) — это то место, где ваши посетители узнают, что вы предлагаете, и если они Убедившись, достаньте кредитную карту и сделайте покупку.

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

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

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

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

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

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

    07. Создайте элементы своего веб-сайта

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

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

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

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

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

    Цвета: Психология цвета доказывает, что разные оттенки по-разному влияют на поведение человека, что делает их таким важным аспектом дизайна веб-сайтов. При выборе цветовой схемы своего веб-сайта, как правило, ограничивайтесь тремя оттенками: одним основным цветом (60% смеси), одним второстепенным цветом (30%) и одним цветом акцента (10%). Конечно, если вы уже разработали фирменные цвета для себя или своего бизнеса, их следует включить.

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

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

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

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

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

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

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

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

    Favicon: Favicon — это небольшой значок, который будет использоваться в браузере веб-сайта для «представления» вашего веб-сайта. Подождите секунду, чтобы взглянуть на эту вкладку в своем браузере, и вы увидите крошечный логотип Wix в левом углу — это значок.

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

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

    Совет от профессионала: Что художники, подобные Леонардо да Винчи, могут сказать о том, как создавать веб-сайт? Мы полагаем, что много. Некоторые из тех же правил, которые веками управляли искусством и дизайном, применимы и к Интернету. От баланса до симметрии: узнайте, как 7 фундаментальных принципов дизайна могут быть применены к веб-сайтам.

    08. Выберите профессиональные инструменты, которые вам нужны.

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

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

    Программное обеспечение для планирования: Если вы управляете сервисным бизнесом, ваш веб-сайт должен иметь возможность получать онлайн-бронирования и платежи 24/7.Программное обеспечение Wix для планирования именно это и делает. Он включает в себя самые изощренные возможности на рынке, от предоставления клиентам возможности записываться на прием через Интернет до возможности управлять календарями ваших сотрудников.

    Интернет-магазин: Хотите продавать свои товары в Интернете и получать постоянный доход? Интернет-магазин — это то, что вам нужно. От отслеживания заказов до использования Wix Payments для удобного получения платежей — вы сможете управлять всем из одного специального места.

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

    Music: Wix Music — это передовая платформа для музыкантов, которые хотят расширить свою аудиторию, сохраняя при этом полную свободу творчества. Это позволяет вам продавать музыку прямо на вашем веб-сайте и получать 100% прибыли. Одновременно он распространяет ваши мелодии в более чем 120 цифровых магазинах.

    Video Maker: Знаете ли вы, что видео могут увеличить органический поисковый трафик на ваш сайт на 157%? С помощью Wix Video Maker вы можете улучшить дизайн своего веб-сайта с помощью настраиваемых видео, чтобы привлечь внимание своей аудитории и улучшить посещаемость.Их можно использовать для продвижения ваших продуктов или услуг, обмена интересными обновлениями и многого другого.

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

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

    09. Сделайте его доступным для всех

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

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

    10. Оптимизация для мобильных устройств

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

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

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

    11. Усильте свой SEO

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

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

    • Проведите исследование ключевых слов : Исследование ключевых слов поможет вам найти ключевые слова, наиболее релевантные для вашего сайта. Как только они у вас появятся, выберите одно основное ключевое слово и пару второстепенных, но не более того.Разместите ключевые слова в стратегических местах вашего сайта (заголовок и описание для SEO, домашняя страница и т. Д.), Но не переусердствуйте. Поисковые системы наказывают сайты, которые неестественно «вбивают» ключевые слова в свой контент.

    • Включить на странице SEO: Речь идет о том, чтобы сообщить поисковым системам, что содержат ваши страницы. На каждой странице конструктор вашего сайта попросит вас ввести метаданные. Сюда входит URL, SEO-заголовок (синяя ссылка, которую вы видите на странице результатов Google) и описание.Хотя посетители могут не замечать эти элементы, они важны для ранжирования.

    • Добавьте замещающий текст: Альтернативный текст относится к описаниям, которые вы даете своим изображениям. Они не будут видны вашим посетителям, но они дают Google четкое указание на то, о чем идет речь в СМИ. У Google много знаний, но он не может «видеть» фотографии или GIF-файлы (пока!). Альтернативный текст поможет вашему визуальному содержанию отображаться на страницах результатов Google. Кроме того, написание альтернативного текста, оптимизированного для поисковых систем, для ваших изображений также является важной практикой в ​​улучшении доступности вашего сайта.

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

    12. Взаимодействие с посетителями

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

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

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

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

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

    13. Спрашивайте отзывы

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

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

    14. Публикация и обновление

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

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

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

    Джонатан Ситбон

    Эксперт по писательству в Wix

    Дженна Романо

    Эксперт и писатель по веб-дизайну

    .

    Previous PostNextNext Post

    Добавить комментарий

    Ваш адрес email не будет опубликован.