8 решений структурирования для улучшения дизайна


Содержание

20 шагов к идеальному дизайну сайта

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

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

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

1. В первую очередь изложите свои мысли на бумаге

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

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

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

2. Начинайте с эскизов элементов верхнего уровня

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

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

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

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

3. Используйте сетку в вашем PSD

Пример 978-разрядной сетки с базовой линией в 10 пикселей

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

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

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

4. Подбор шрифтов

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

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

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

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

5. Выбор цветовой гаммы

Используйте ограниченный набор цветов и тонов, чтобы избежать визуальной перенасыщенности

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

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

В качестве примера можно взять такие сайты, как Facebook , Twitter , Quora и Vimeo .

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

6. Разделяйте структуру сайта

Чем проще структура сайта, тем легче пользователям ориентироваться в ней

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

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

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

7. Переосмысление привычных элементов

Нужна ли нам кнопка «Поиск»? Практика показывает, что в большинстве случаев ответ будет отрицательным

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

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

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

8. Бросайте себе вызов

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

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

9. Уделяйте внимание деталям

Игра в стадии разработки: взгляд на детали

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

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

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

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

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

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

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

11. Работайте над четкостью и читаемостью элементов

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

Кроме эстетики, есть чисто практические причины обеспечивать четкость и корректность элементов.

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

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

12. Приводите в порядок ваши PSD

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

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


13. Рассчитывайте на лучшее, но будьте готовы к худшему

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

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

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

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

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

14. Углубляйтесь в проектирование так глубоко, пока это не будет вызывать у вас ненависть

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

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

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

15. Старайтесь как можно быстрее достигнуть общего видения с клиентом

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

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

16. Станьте лучшим другом для девелопера

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

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

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

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

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

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

18. Любите каждую свою идею, но не слишком увлекайтесь ею

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

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

19. Отслеживайте развитие своего дизайна в течение всего процесса жизнедеятельности сайта

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

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

20. Делитесь с общественностью информацией по ходу разработки вашего проекта

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

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

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

Данная публикация представляет собой перевод статьи « 20 steps to the perfect website layout » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

Повышение уровня работ, действенный метод

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

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

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

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

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

Привычка равна постоянному развитию

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

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

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

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

365 дней развития

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

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

Чем хорош этот метод поднятия уровня работ:

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

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

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

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

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

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

Одна из первых Классификаций «стилей» предметного мира, характерных для периода с конца 20-х до начала 60-х гг. прошлого века, предложенная Джиффордом Джексоном (1962г): пять последовательно сменявших друг друга стилей:

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


2. «обтекаемый» (воплощавший увлечение аэродинамическим формами);

3. «трапециевидный» («конусный»), отличавшийся скосами или сужением форм

4. «нормальный» («ящичный»), характеризуемый преобладанием формы параллелепипеда;

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

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

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

Модернизм: форма предмета следует за его функцией – это в свое время сказал Луис Салливен

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

Постиндустриализм: форма следует за эргономикой. Большие игры с современными технологиями.

Конструктивиизм– советский авангардистский метод, получивший развитие в 1920 – начале 1930 годов. Характеризуется строгостью, геометризмом, лаконичностью форм и монолитностью внешнего облика. Самым интересным моментом является в конструктивизме его рациональность. Без этого свойства конструктивизм не мыслим. конструктивизм является необходимой потребностью и постоянной принадлежностью всего уклада нашей жизни и что без конструктивных начал немыслимо разрешить большинство вопросов техники и искусства. Виды конструктивизма: внедрение, зажим, сцепление, скручивание, обхват).

Ар-деко, варианты: ар деко, арт деко — течение в декоративном искусстве первой половины XX века, проявившееся в архитектуре, моде и живописи.. Отличительные черты — строгая закономерность, этнические геометрические узоры, роскошь, шик, дорогие, современные материалы. (Лев Бакст-дизайнер, модельер варвара степанова).

Аэростиль. весной 1948 года, состоялся дебют первой из серии 62 модели Cadillac. С ее появления берет свое начало одно из наиболее радикальных направлений в автодизайне, именуемое аэростилем. Идея придать автомобилю самолетные черты родилась не на пустом месте. Америка переживала в то время экономический подъем. Вторая мировая война дала сильнейший толчок развитию новых технологий. На острие технологического прогресса, естественно, находилась военная авиация. С нею в послевоенной Америке ассоциировалось все самое передовое и совершенное. Авиация вошла в моду. В 1953 г в аэростиле появляется новое направление — ракетный стиль — соответственно более стремительное и агрессивное.

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

Цукерберг рекомендует:  Как стать успешным тестировщиком

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

Не нашли то, что искали? Воспользуйтесь поиском:

10 советов по улучшению дизайна сайта недизайнерами

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

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

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

3. Подчеркивайте все ссылки. Все, всегда, везде, без исключений. Редкие исключения допустимы только если вы до этого сделали 100 работающих сайтов с подчеркнутыми ссылками. И да, ссылки должны быть подчеркнутыми всегда. Удивительно идиотская мода убирать подчеркивание со ссылок при наведении, что противоречит логике: если текст — ссылка, то мы делаем его отличным от другого текста, а при наведении он перестает быть ссылкой?

4. Забудьте в вебе про Justify. Его при бумажной верстке-то чтобы использовать надо у мастеров лет 5 учиться и тратить на каждую строку минуты по 2, а на вебе он вообще недопустим.

6. Весь текст набирайте 14-ым ариалом (фотошоповская метрика), и делайте интерлиньяж

7. Подбирать цвета удивительно просто. Смотрите, делаете меню какого-то своего «фирменного» цвета (тыкайте в любой, главное, чтобы не ядовитый и достаточно контрастный был), наборный текст делайте черным (фон белым, конечно!), а ссылки делайте синими (#369 / #069) — это и привычно людям, и хорошо выделяет ссылку.

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

9. Говорите правду и следите за русским языком: Кому нужен заголовок раздела главного меню «Статьи с меткой „HTML“». Пишите проще и самую суть: «HTML». Да-да, это тоже дизайн (более того, именно это — дизайн).

10. Если есть исчисление некой величины (количество комментариев, в примере с WEBEW), то не указывайте того, чего нет: если комментариев пока нет, то не нужно писать «нет комментариев», достаточно не писать ничего.

PS: применив эти правила для Webew получим такой макет:

rotor

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

Пункт 4 зачем? Сами ведь используете. 24.06.2008, 19:13
Ответить

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

24.06.2008, 19:23
Ответить

isusibadi

Согласен,вполне неплохо)Спасибо.

14.07.2013, 17:21
Ответить

pepelsbey

> В теории сайту логотип не нужен

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

> Не озаглавливайте навигационный блок

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

> Подчеркивайте все ссылки

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

> Забудьте в вебе про Justify

Лучше «научитесь употреблять выключку по формату, но очень осторожно».

…какой-то странный top-10. Мне кажется, что категоричность сродни узколобости.

24.06.2008, 19:26
Ответить

tansky

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

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

>Есть хорошая практика — озаглавливать каждый блок в вёрстке, но прятать это в браузерном CSS
Да-да, но я не про CSS

>Однако, эффективно выделять ссылки можно не только подчёркиванием,
>а ещё и фоном, цветом и т.п. параметрами.
Во-первых, ссылки цветом выделять нельзя, потому что на сайте вообще-то может быть более одного (черного, например), цвета. То же самое и с фоном. А выделять ссылки нужно для того, чтобы не наводя на текст курсор мышки человек сразу понимал, что это ссылка (чтобы понять это, можно зайти на сайт http://zhizn.ru/ и мысленно попробовать предугадать где там ссылка, а где нет, а потом проверить, сколько у вас ошибок). И да, подчеркивание ввели не случайно. В типографской традиции нету подчеркивания, как выразительного средства, поэтому подчеркиванию не с чем конфликтовать, в отличие от цветовых выделений (конечно, лучше комбинировать, а еще назначать ховеры и визитид).

>Лучше «научитесь употреблять выключку по формату, но очень осторожно».
В вебе Justify невозможен, увы.

25.06.2008, 20:27
Ответить

pepelsbey

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

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

> можно зайти на сайт zhizn.ru

Некорректный пример. Там ссылки вообще никак не выделены, а дизайн рисовал какой-то идиот.

> В вебе Justify невозможен, увы.

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

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

25.06.2008, 22:49
Ответить

ayavryk

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

26.06.2008, 10:42
Ответить

antoxa

со многим не согласен, покритикую.

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

> Забудьте в вебе про Justify. Его при бумажной верстке-то чтобы использовать надо у мастеров лет 5 учиться и тратить на каждую строку минуты по 2, а на вебе он вообще недопустим.
justify имеет место на жизнь. не вижу причин от него отказываться.

> Весь текст набирайте 14-ым ариалом (фотошоповская метрика), и делайте интерлиньяж

1,4 пункта.
ну почему же Verdana, Tahoma, 12px очень даже неплохо смотрится.

> Подбирать цвета удивительно просто. Смотрите, делаете меню какого-то своего «фирменного» цвета (тыкайте в любой, главное, чтобы не ядовитый и достаточно контрастный был), наборный текст делайте черным (фон белым, конечно!), а ссылки делайте синими (#369 / #069) — это и привычно людям, и хорошо выделяет ссылку.
http://www.webmascon.com/topics/colors/12a.asp

> Если на своем сайте у вас есть input или textarea, не применяйте к ним стили, оставьте по умолчанию, тогда на разных системах у вас они будут выглядеть так, как естественно для пользователя, а не так, как «дизайнеру показалось красиво»
а почему дизайнеру может обязательно показаться хуже чем по умолчанию?

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

25.06.2008, 14:57
Ответить

tansky

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

25.06.2008, 20:30
Ответить

antoxa

А прокомментировать слабо? Или вар на пустом месте?

25.06.2008, 20:46
Ответить

tentoys

Статья имеет право на жизнь, бесспорно. Для «недодизайнеров», как Вы сказали. Но мне кажутся вполне разумные комментарии. К примеру, согласен, что если шрифт, то Arial. тогда уже Verdana, или просто — рубленые шрифты. Размеры 14, 12, мне кажется вобще неприменим, за исключением пиксельных дизайнов, почему б сразу не привести относительные величины?

28.06.2008, 21:51
Ответить

rgbeast

Использование относительных единицы кроме того требует стандарт WAI-WCAG, чекпоинт 3.4

29.06.2008, 04:19
Ответить

rgbeast

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

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

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

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

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

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

10. От этого старались избавиться. Осталось при перечислении сообщений («0 ответов»).

Для недизайнеров также будет полезны следующие советы:
A. Указывать альтернативный текст для всех рисунков
Б. Проверять html на валидность, с помощью валидатора W3C

27.06.2008, 03:42
Ответить

tansky

1. Недостаток CSS-логотипа (кроме отсутствия узнаваемости) в том, что используемого шрифта наверняка нет в Linux или Mac, а кроме того крупные шрифты в некоторых дистрибутивах Linux отображаются крайне криво.
Ошибочно мнение, что узнаваемость (особенно в вебе!) проекту дает нечто, что мы называем «логотипом», а не его окружение.

2. Если опустить слово «Метки» в заголовке раздела, то перестанет быть понятно, что это метки. На webew метки структурированы и выглядят не так, как традиционное облако меток, без заголовка их можно принять за меню сайта. Например, в ресторанах меню обычно озаглавлено и никого это не раздражает, да и на клетках с тигром часто пишут, что это «слон».
У нас с bur уже была дискуссия на тему этих самых меток на Вебью, подробно тут останавливаться не буду, но вот эти недометки в том виде, в котором они сейчас — это полный кошмар. Хоть там «Любимые авторучки:» напишите над ними, всё равно все будут считать, что это меню сайта и сходить с ума от отсутствия четкого пути на сайте (короче, по-другому надо сделать)

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

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

Для недизайнеров также будет полезны следующие советы:
A. Указывать альтернативный текст для всех рисунков
Б. Проверять html на валидность, с помощью валидатора W3C
А вот расскажите мне, почему типографские символы типа «, —, » и прочих невалидны?

17.09.2008, 10:11
Ответить

rgbeast

Интересная статья с обсуждением применимости justify: text-align: justify. Добро или зло?

04.07.2008, 22:32
Ответить

tansky

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

17.09.2008, 10:13
Ответить

Serg_pnz

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

Еще бы добавил от себя пункт:
11. Не больше 6-8 слов на строку.

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

Это перевод статьи Кирилла Стрельченкова «10 Responsive Design Problems and Fixes».

Благодаря адаптивным сайтам, быстро подстраивающимся под любое устройство и размер экрана, интернет меняется, чтобы предоставить пользователю наилучший опыт. Начиная с межнациональных корпораций, таких, как Sony, Microsoft и Nokia, и заканчивая мировыми техническими знаменитостями (Salesforce) и онлайн-гигантами для путешествий (Expedia), серьёзные игроки поворачиваются к адаптивному веб-дизайну, чтобы идти в ногу с современными тенденциями и достичь ещё более широкой аудитории.

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

1. Более проблематичный этап визуализации

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

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

2. Навигация

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

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

3. Качество фоновых изображений и иконок

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

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

4. Отображение данных на маленьких экранах

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

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

5. Быстрая загрузка на всех устройствах

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

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

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


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

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

7. Скрытие и удаление содержимого

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

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

8. Перевод фиксированных сайтов в адаптивные

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

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

9. Старые версии Internet Explorer не поддерживают CSS3 медиавыражения

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

Решение: хорошая практика — беспокоиться о пользователях Internet Explorer и предлагать им удобное решение. Используя JavaScript, опытный разработчик может легко изменить расположение на странице в зависимости от размеров окна браузера. Для поддержки оригинальных макетов решением является использование полифилов, то есть части кода обеспечивающей технологии, которые, как ожидает разработчик, браузер должен предоставлять изначально. Другим решением может быть подключение отдельных стилей для IE с простым оформлением. Можно вообще ничего не делать, если это выглядит допустимо. Всё зависит от потребностей конечного пользователя.

10. Не все понимают, зачем им использовать адаптивный дизайн

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

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

Заключение

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

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

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

01. Изучение теории дизайна

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

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

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

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

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

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

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

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

03. Начните сторонний проект

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

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

04. Экспериментируйте

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

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

Добавьте новый безумный шрифт. Попробуйте 3D, а не 2D. Возьмите новое программное обеспечение для дизайна. Сделайте эскиз шариковой ручкой или углем, а не карандашом. Нарушьте правило и посмотреть, что произойдет. Спросите себя: как бы к этому дизайну подошли в прошлом веке? Используйте иллюстрации, а не фотографии. Удвойте количество пробелов. Короче говоря, рискните и посмотрите, что из этого выйдет.

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

05. Поговорите с другими дизайнерами

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

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

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

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

06. Прочитайте книгу

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

Всем успешной работы и творчества!

5 способов улучшить дизайн вашего контента

Время чтения: 7 минут Нет времени читать? Нет времени?

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

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

Допустим, у вас идеальный контент…

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

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

1. Верстка под планшеты и мобильные устройства

По данным статистики Liveinternet.ru трафик с мобильных устройств растет… ну, короче, сами смотрите, как он растет:

На графике представлено количество переходов по данным статистики Liveinternet.ru с мобильных устройст на платформе Android и iOS. Очевидно, что игнорировать мобильных пользователей больше невозможно. Соответственно, верстка сайта должна быть адаптирована на просмотр сайта с планшетов и смартфонов. (Делать или нет мобильную версию сайта? Наш ответ: не делать, долго объяснять почему. Но если коротко, то адаптивная верстка решает все проблемы, и сайт корректно будет отображаться как на мобильных устройствах, так и на широкоформатных мониторах).

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

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

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

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

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

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


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

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

Сравните следующие изображения:

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

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

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

3. Стиль и размер шрифта

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

4. Свободное пространство

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

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

5. Цвета

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

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

8 решений структурирования для улучшения дизайна

Какие этапы у решения дизайнерской задачи?

(Часть вторая: этапы)

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

Карл Дункер. О решении задач. 1935, пер. на англ. 1945

He who merely searches his memory for a ‘solution of that -such problem’ may remain just as blind to the inner nature of the before him as a person who, instead of thinking himself, refers the problem to an intelligent acquaintance or to an encyclopedia. Truly, these methods are not to be despised; for they have a certain heuristic value, and one can arrive at solutions in that fashion. But such has little to do with thinking.» (p20)

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

Всё это рабочие методы. Но что если я попробовал их все, а решение до сих пор не найдено? Где именно я сдался раньше времени? Где недожал?

  • Решение задач
  • Ошибки
  • Этапы

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

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

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

Анализ задачи

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

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

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

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

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

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

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

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

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

Первое упоминание бюрошного подхода в совете о логотипе «Изюма»

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

Напомним, что направление вверх и вниз — это движение к надсистемам и подсистемам. Влево и вправо — в прошлое и будущее каждой из подсистем:

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

Например, чтобы выбрать ассортимент и дизайнеров свадебных платьев для свадебного салона «Мэри Трюфель», логично решать задачу на уровне самих платьев — одного из элементов свадьбы:

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

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

А на уровне свадьбы гораздо легче сделать яркое заявление, выделяющее среди других салонов:

— Мы не любим пошлые советские свадьбы с выкупами, столами буквой «П» и песней «Свадебные цветы». Это пытка для всех: гости фотографируются среди шариков в обшарпанном подъезде, катаются на микроавтобусе, слушают тамаду в кафтане. Кусаем каравай, бьём бокалы, собираем деньги в ползунки — бессмысленная чушь. Нет радостных воспоминаний, нет красивых фотографий, нет истории, которой хотелось бы поделиться. Упущенный шанс сделать праздник.


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

Обращение соавторов на главной странице сайта «Мэри Трюфель»

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

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

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

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

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

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

Правильно составленная функциональная иерархия напоминает хорошую инструкцию пользователя — какие полезные функции и сценарии есть в системе?

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

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

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

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

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

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

У объектов бывают разные состояния — определения. Например, канал может быть: в норме, низкомаржинальный, на проверке у контролёра.

Когда определены действующие лица, объекты и состояния, можно написать сценарии — предложения, описывающие связи между объектами, действия субъектов над объектами, изменения состояний объектов, например:

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

С каналами, маржинальность которых в норме либо договоры по которым были утверждены контролёром или аудитором (в статусах «в норме» и «утверждён» ниже) менеджеру ничего не нужно делать, но важно их просто увидеть. Он просматривает информацию о них и жмёт кнопку «Просмотрено».

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

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

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

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

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

Пользователи чекинятся в заведении, потому что завидуют чужому мэрству

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

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

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

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

Илья Бирман. Пользовательский интерфейс. Глава «Синтаксис»

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

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

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

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

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

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

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

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

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

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

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

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


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

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

Синтаксический анализ — это просто более общее и красивое название сценариев использования продукта ( use cases). Ну должен же я поумничать. Если серьёзно, то взаимодействие в системах не обязательно связано с пользователями или даже с использованием: например, взаимодействие программных интерфейсов или нежелательные столкновения сотрудников тоже можно описать формальным языком. Соответственно, синтаксический анализ пригодится для сложных многопользовательских сервисов, систем документооборота, сложных АПИ . Например, в бюро так описывали взаимодействие Бюробиллинга и Бюрокассы — для существующих и будущих продуктов бюро.

Модель решения

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

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

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

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

  • Карл Дункер называл модель решения «функциональным значением» или «функциональным смыслом». У любого конечного решения есть «функциональный смысл», благодаря которому это решение сработало или сработает аналогичное. Одна из задач в экспериментах Дункера — об облучении опухоли рентгеном. Нужно найти способ воздействовать на опухоль лучами так, чтобы не разрушить здоровые ткани. Люди предлагали варианты, которые складывались в три группы:
  • исключить контакт между лучами и здоровой тканью (пропустить лучи через естественные отверстия, защитный барьер, открытая операция);
  • уменьшить мощность лучей по пути, увеличить на опухоли (сконцентрировать несколько слабых лучей на опухоли);
  • уменьшить чувствительность тканей ( инъекцией).

Вторая модель решения имела техническое воплощение — это правильный ответ.

Поиск модели решения начинается с точной формулировки противоречия. «Хочу есть, но в холодильнике пусто» — это первоначальная формулировка проблемы. Хочу есть, но в холодильнике пусто → в доме нет еды → я не хочу выходить из дома. Сформулировать вредный фактор помогает приём — задавать подряд вопрос «почему», пока ответ не станет очевидным.

Cложно сформулировать противоречие, когда системы ещё нет. Например, перед бюро появилась задача «создать электронную книгу бюро». Нам помогли вопросы: что плохого и хорошего в бумажных книгах? Что плохого и хорошего в существующих электронных книгах? Одно из ключевых противоречий, которые мы сформулировали и разрешили в дизайне книги — «должна быть сплошная прокрутка, но книга должна быть поделена на адресуемые развороты, как бумажная листаемая книга». Другое противоречие: «книга должна быть доступна максимальному количеству людей, как сайт, но должна быть лёгкой и управляемой, как приложение». Эти противоречия предопределили почти всё в дизайне наших электронных книг.

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

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

Модель решения: вызвать еду на дом.

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

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

Если мы создаём новую систему, в модели решения должна создаваться или достраиваться полная формула системы.

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

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

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

Создать сайт с продуктами компании

В такой модели решения не хватает полезного действия — ради чего создавать сайт? Добавим пользу:

Повысить продажи компании, создав сайт с продуктами

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

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

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

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

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

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

Плохо Хорошо
Перед стоят две долгосрочные задачи: увеличить посещаемость и количество просмотров; повысить лояльность аудитории.
Чтобы упростить поиск платьев, которые понравились невесте в прошлые визиты, на сайте «Мэри Трюфель» появится возможность добавлять платья в избранное. В избранное можно добавить любое платье на сайте. Все избранные платья будут показаны на отдельной новой странице. Избранное должно быть доступно с любой другой страницы сайта.
Журналы «Юрист компании», «Финансовый директор» и «Генеральный директор» требуют обновления. Цель: повысить количество прочитываемых статей. Для этого Актион планирует освежить внешний вид журналов и ввести новые форматы, зарекомендовавшие себя в обновлённом «Главбухе».
  • Журналы «Юрист компании», «Финансовый директор» и «Генеральный директор» требуют обновления. Цель: повысить количество прочитываемых статей. Для этого:
  • Упорядочить одностраничные рубрики, которые легче и быстрее прочитать. Также одностраничные рубрики сработают как крючок: прочитал одну и проще решиться прочитать следующую.
  • Более явно и наглядно показать содержание номера, чтобы читатели находили полезные и интересные для себя статьи.
  • Чтобы поддерживать интерес читателя, подавать материалы в порядке от больших и сложных к простым и коротким.
  • Освежить и сделать макеты журналов современнее, чтобы читатели чувствовали, что в журналах пишут о созвучных им проблемах, а не о теориях вчерашнего дня.

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

Эта модель решения воплотилась в «Универсальный журнал ».

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

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

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

Решение

Модель решения — это только идея решения. На последнем этапе модель решения получает конкретную практическую форму.

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

На пути к запуску

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

Эшли Вэнс. Илон Маск: Тесла, Спейс Икс и дорога в будущее. , 2015

К сожалению, рецепта нет. На этапе решения нужны настойчивость и уверенность. У меня есть поучительная история.

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

С названием всё прошло на отлично. Мы придумали название One Two Trip, «-трип». Клиенту понравилось, и он даже выкупил у киберсквотеров домен в зоне .com

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

Я начал сомневаться в выбранном пути. И тут клиент пишет: у меня есть логотип. Оказывается, он одновременно работал с дизайнером Андреем Зубриловым. Андрей выдал отличный знак:

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

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


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

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

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

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

Повышение уровня работ, действенный метод

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

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

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

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

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

Привычка равна постоянному развитию

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

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

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

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

365 дней развития

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

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

Чем хорош этот метод поднятия уровня работ:

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

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

Веб-дизайн – что в моде? От чего стоит отказаться?

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

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

То, что вышло из моды

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

Стиль Web 2.0 и реалистичность

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

Стоковые фотоснимки

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

Заставки

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

Автопроигрывание аудио и видеороликов

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

Всплывающие окна

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

Разнообразие шрифтов и отсутствие читабельности

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

Непрактичные решения

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

Flash

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

Загадочные иконки

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

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

Текст в графическом виде

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

Огромное количество кнопок Like и Share

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

Что стало популярным

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

Простая расцветка

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

Минимализм

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

Новые шрифты

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

Большие шрифты

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

Блоки

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

Фоновые фотографии и видео

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

Инфографика

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

Завершение

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

Цукерберг рекомендует:  Javascript - Как в ST3 убрать табуляцию из нескольких выделенных абзацев
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих