Правила графического дизайна
Правила графического дизайнаСкачать файл - Правила графического дизайна
Базовые знания , Статьи. Графический дизайн связывает искусство и технологии в едином творческом процессе. Как и любое другое направление дизайна, он ориентирован на передовые технологии и материалы, веяния моды и технические достижения. Произведения дизайна всегда созвучны своему времени. Но насколько бы передовыми не были технологии и насколько бы хорошо ими не владел графический дизайнер, они являются всего лишь инструментами в его руках. Знание технологий не является залогом успешной работы, так как деятельность дизайнера-графика опирается на образное, художественное мышление. А также уметь использовать эти знания в своей работе. Композиция — это организация, расположение и связь различных графических элементов, искусство их размещения, важнейшая составляющая художественной формы, сердце графического дизайна. Нет композиции — нет дизайна. Важнейшая задача композиции — систематизация и организация, акцентирование внимания зрителя или читателя. Работа будет казаться цельной только в том случае, если все ее элементы взаимосвязаны, согласуются друг с другом и подчинены одной идее. Окружающая среда воздействует на человека и отражается в его сознании в виде образов. Но так как органы чувств у людей устроены одинаково, то существуют общие закономерности восприятия. Необходимо понимать, какие факторы влияют на восприятие, почему незначительные изменения формы, цвета или размера объектов вызывают совершенно неожиданную реакцию зрителя. Поиск цветового решения — один из главных вопросов, стоящих перед дизайнером. Восприятие изображения по большей части определяется именно цветом. Он передает настроение, придает значение форме, делает ее выразительной. Звуки, эмоции, настроение имеют свою цветовую характеристику. Цвет может передать тепло или холод, ободрять или угнетать. Поэтому даже начинающий дизайнер обязан знать основные сведения о цвете и свете: Многие начинающие дизайнеры пренебрегают изучением типографики, думая: Увидев какую-либо рекламную продукцию, мы получаем первое впечатление о ней, даже не читая текст. Внешний вид продукции создает определенный образ, в формировании которого огромную роль играет оформление текстовой информации. Так же как и цвет, буквы имеют свою эмоциональную окраску, их графическое оформление может усиливать или ослаблять смысл передаваемого сообщения, передавать настроение. Шрифт — основа графического дизайна. Надеюсь, у меня получилось убедить вас в необходимости изучения перечисленных выше фундаментальных знаний, на которых основывается вернее должна основываться вся работа дизайнера. Где почерпнуть эти знания? Посоветую обратиться к нескольким книгам. Каждая глава, помимо теоретического материала, включает в себя вопросы для повторения и практические задания которые я очень советую выполнять, либо на листе бумаги, либо в графическом редакторе. На примере классических работ известных мастеров, учебных работ студентов и своих собственных, автор раскрывает в соответствии с образовательным стандартом все секреты правильной композиции для художников, работающих в разных жанрах. C наступлением компьютерной эры в книгоиздательском деле видимая простота применения шрифтов, а также возможность неограниченного выбора привели к тому, что оказались забыты основные практические и эстетические правила применения шрифтов. Проведен обзор особенностей дизайна web-страниц, проанализированы визуальные средства рекламы, даны рекомендации по разработке фирменного стиля. На примере классических произведений рассмотрены основные приемы, используемые в графическом дизайне. Прилагается компакт-диск, содержащий более файлов с цветными иллюстрациями по всем разделам книги и примеры выполнения упражнений. Теория и практика, составляющие профессиональное мастерство, содержатся в трех частях, каждая из которых могла бы быть выпущена отдельной книгой. В основу книги положен собственный летний опыт творческой и педагогический деятельности автора, опыт его коллег. Визуальный ряд, тщательно подобранный из работ студентов, ярко и образно иллюстрирует каждый раздел книги. Книга предназначена для студентов высших учебных заведений, изучающих графический дизайн. Она будет полезна практикующим дизайнерам в том числе начинающим и тем, кто только мечтает стать дизайнером графиком , преподавателям профильных учебных заведений, арт-директорам, рекламистам, художникам и архитекторам, всем ценителям прекрасного. Он состоит из 6 разделов, которые подробно освещают 6 ключевых тем графического дизайна:. Общие законы формальной композиции, конкретные правила компоновки работы. Структура рекламного текста, элементы дизайна рекламы и правила их размещения. Шрифты, их классификации, их строение, использовании шрифтов в графическом дизайне в целом и в дизайне рекламы в частности. Примеры использования шрифтов и советы, как найти оптимальное решение при создании макетов рекламы. Правила составления цветовых гармоний и применение различных типов цветового контраста. Нахождение и создание рекламного образа, какие рекламные образы можно считать удачными. Основные креативные методы с примерами. Техники генерации креативных идей — с мозговым штурмом и с картой мышления. Использование карты мышления при создании качественной креативной рекламы. Но запомните, прохождение видео-курса не является исчерпывающей формой обучения. Не пренебрегайте прочтением книг, чтобы более подробно разобраться в отдельных областях дизайна. И еще один совет по поводу книг — лучше всего покупать печатные издания. Читать их намного приятнее, чем отсканированные в плохом качестве страницы, да и, если быть честными с самими собой, про файлы на компьютере мы просто забываем. Ваш e-mail не будет опубликован. Я — Света, графический дизайнер, фрилансер и начинающий иллюстратор. Мой блог — это дневник самоучки, которая очень любит делиться полезностями и мыслями, и хочет сделать этот мир чуточку ярче: Главная Adobe Adobe Illustrator Adobe InDesign Adobe Photoshop Статьи Базовые знания Веб-дизайн Фирменный стиль Верстка Профессия дизайнера Фриланс и стоки Интересное Иллюстрация Обучение Курсы Лекции Фильмы Free Исходники Дополнения Книги Шрифты Вдохновение Journal Menu. Немного подробнее о них: Композиция Композиция — это организация, расположение и связь различных графических элементов, искусство их размещения, важнейшая составляющая художественной формы, сердце графического дизайна. Зрительное восприятие Окружающая среда воздействует на человека и отражается в его сознании в виде образов. Колористика теория цвета Поиск цветового решения — один из главных вопросов, стоящих перед дизайнером. Типографика Многие начинающие дизайнеры пренебрегают изучением типографики, думая: Он состоит из 6 разделов, которые подробно освещают 6 ключевых тем графического дизайна: Композиция Общие законы формальной композиции, конкретные правила компоновки работы. Дизайн рекламы Структура рекламного текста, элементы дизайна рекламы и правила их размещения. Типографика Шрифты, их классификации, их строение, использовании шрифтов в графическом дизайне в целом и в дизайне рекламы в частности. Колористка Правила составления цветовых гармоний и применение различных типов цветового контраста. Иллюстрация и рекламный образ Нахождение и создание рекламного образа, какие рекламные образы можно считать удачными. Креатив Основные креативные методы с примерами. Предыдущая запись Следующая запись. Добавить комментарий Отменить ответ Ваш e-mail не будет опубликован. Ваш личный почтовый голубь. Запрещается копирование и использование материалов сайта.
Правила графического дизайна
Только полноправные пользователи могут оставлять комментарии. TM Feed Хабрахабр Geektimes Тостер Мой круг Фрилансим. Хабрахабр Публикации Пользователи Хабы Компании Песочница. Я люблю ИП 67,55 Всё для начинающих предпринимателей. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу design iloveip. Вступление Сначала о главном. Это руководство не для всех. Это руководство прежде всего для: Если вы ходили в художественную школу или считаете себя хорошим дизайнером интерфейсов, то скорее всего это руководство покажется вам а скучным, б неправильным или даже в вызывающим раздражение. Просто закройте эту вкладку и двигайтесь дальше. А пока давайте я расскажу, что вы найдёте в этой статье. Раньше я был UX-дизайнером без каких-либо навыков графического дизайна. Я обожал просто проектировать интерфейсы, но вскоре я понял, что есть куча причин научиться делать это ещё и красиво: Моё портфолио выглядело ужасно и едва отражало мой рабочий процесс и ход мыслей. Клиенты, с которыми я работал, с большей готовность заплатили бы тому, кто умеет рисовать не только прямоугольники и стрелочки. Хотел ли я в какой-то момент присоединиться к стартапу на ранней стадии? Тогда лучше мне освоить эти навыки уже сейчас. Я всегда находил себе оправдание: Я ничего не понимаю в эстетике. Я закончил инженерно-технический факультет. Я не должен делать вещи красивыми. В конце концов, я научился дизайну так же, как и любому другому мастерству: Я тратил по 10 часов на проект, а брал деньги всего за час. Остальные 9 я учился. Отчаянно разыскивая в Google, Pinterest и Dribbble то, что можно скопировать. Итак, обращаюсь к занудам: В этой статье нет теории. Здесь вы ничего не найдёте о золотом сечении или теории цвета. Только то, чему я научился сам. Дзюдо развивалось сотни лет на основе японских традиций в боевом искусстве и философии. Если вы возьмёте уроки дзюдо, вы будете не только драться, но услышите очень много о гармонии и движении энергии. А есть крав-мага, которую изобрели евреи в борьбе против нацистов на улицах Чехословакии в х годах. На уроках крав-маги вы научитесь тычкам в глаза с помощью ручки. Эта статья — крав-мага для экранов. Сначала черное и белое. Изучите принципы наложения текста на картинки. Научитесь выделять и утапливать текст. Используйте только хорошие шрифты. Тени лучше всего помогают мозгу понять, на какой элемент интерфейса мы смотрим. Пожалуй, это самое важное неочевидное правило , которое нужно усвоить в дизайне интерфейсов: В жизни свет чаще всего падает с неба или сверху. Если это не так, то это выглядит странно. Когда свет падает сверху, он освещает верхнюю часть и отбрасывает тень на нижнюю. Верх будет светлее, а низ темнее. Обычно мы не особо замечаем тень на нижних веках, но если их осветить, то перед вами предстанет девочка, похожая на демона. То же самое и в дизайне интерфейсов. Как внизу каждой черты лица, так и внизу практически любого элемента интерфейса есть тень. Наши экраны плоские, но мы прилагаем все усилия, чтобы любой элемент на нём выглядел трёхмерными. В ненажатом состоянии вверху у неё тёмный нижний край. Ведь туда не падает солнечный свет. Верхняя часть ненажатой кнопки чуть светлее, чем нижняя. Это потому что она имитирует слегка изогнутую поверхность. Как, чтобы увидеть солнечный свет, вам нужно было бы направить зеркало вверх, так и изогнутая поверхность отражает чуууууть больше солнечного света. Ненажатая кнопка слегка отбрасывает тень — её можно увидеть в увеличенном виде. Нажатая кнопка сверху темнее, чем снизу. Потому что она находится на уровне экрана, и на неё попадает меньше солнечного света. В реальной жизни нажатые кнопки тоже темнее, потому что мы блокируем свет рукой. Это всего лишь кнопка, но на ней уже есть 4 небольших эффекта от света. Это и есть главный урок. А теперь мы будет применять его ко всему. Она немного устарела, но может многому нас научить. Верхняя часть контрольной панели inset control panel отбрасывает небольшую тень. Он имеет вогнутую форму, поэтому нижняя часть отражает больше света, чем верхняя. Видите яркий участок в верхней части иконок? Он представляет собой поверхность перпендикулярную к солнечному свету, следовательно, он поглощает и отражает его. У разделителя divider notch тень там, где не попадает солнечный свет, и наоборот. Вот ещё один пример из моей старой работы. Элементы, которые обычно имеют вогнутую форму: Элементы, которые обычно имеют выпуклую форму: Теперь когда вы знаете, вы будете везде это замечать. А как же дизайн в стиле flat? Он в буквальном смысле плоский. В нём нет никаких углублений или выступов — только линии и фигуры сплошного цвета. Я, как и все, люблю чистый и простой дизайн , но я не думаю, что этот тренд на долго. Легкие трёхмерные эффекты в интерфейсах выглядят слишком естественно, чтобы от них полностью отказаться. Скорее всего, в ближайшем будущем мы увидим полу-плоские интерфейсы именно в них я рекомендую вам развиваться профессионально. Такие же чистые и простые, но с небольшими тенями, подсказывающими, что можно нажать или кликнуть. В то время как я пишу эту статью, Google выпустила Material design. Это единый визуальный язык для всех продуктов компании, который, по своей сути, пытается имитировать физический мир. Эта иллюстрация из руководства Material design показывает, как передать разную глубину с помощью разных теней. Именно в этом направлении будет развиваться дизайн. Используя тонкие подсказки, чтобы передать информацию. Ключевое слово здесь — тонкие. Нельзя сказать, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн года. В нём нет текстур, градиентов или отблесков. А дизайн в стиле flat — это просто часть истории. Сначала чёрное и белое Создавая дизайн в чёрно-белой палитре, до добавления цвета, вы сможете максимально упростить самые сложные визуальные элементы и сфокусироваться на макете и расположении. Это значит проектировать страницы и взаимодействия для мобильных устройств до больших экранов с ретиной. Такой вид ограничений прекрасен. Вы начинаете с более сложной проблемы удобное приложение на маленьком экране , а затем адаптируете решение к проблеме полегче удобное приложение на большом экране. Вот вам ещё одно похожее ограничение: Начните с более сложной проблемы — сделать красивое и удобное приложение без помощи цвета. Добавляйте цвет в самую последнюю очередь, и то только с определённой целью. А обилием цветов в разных местах его, наоборот, очень легко испортить. Чёрно-белый дизайн заставляет вас сфокусироваться на расстояниях, размерах и макете. Именно это является основой хорошего дизайна. Есть ситуации, когда такой подход не слишком полезен. Делать дизайн для остальных гораздо сложнее. Как добавить цвет Самое простое — это добавить только один цвет. Один цвет на чёрно-белом сайте просто и эффективно притягивает взгляд. Можно пойти ещё дальше и добавить два цвета или несколько оттенков одного тона. Коды цветов на практике — что такое тон hue? В большинстве случаев на вебе используются HEX-коды цветов модели RGB. Для нас они являются абсолютно бесполезными. RGB плохо подходит для подбора цветов. Лучше использовать HSB почти тоже самое что HSV или HSL. HSB лучше, чем RGB, потому что эта модель ближе к тому, как мы воспринимаем цвет, и мы можем предсказывать, как изменение значений HSB повлияет на цвет. Если вы впервые об этом слышите, то вот хороший путеводитель по HSB цветам. Изменяя насыщенность и яркость одного и того же тона, можно создать палитру из множества цветов — тёмных, светлых, для фона, выделения и привлечения внимания. При этом они не будут рябить в глазах. Использовать несколько оттенков одного или двух основных цветов — это самый лучший способ подчеркнуть или утопить отдельные элементы в дизайне, не испортив его. Ещё несколько заметок о цвете Цвет — это самая сложная часть графического дизайна. И хотя большинство статей о цвете недалёкие и вряд ли помогут вам в работе, есть несколько очень полезных инструментов: Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру. Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире. Увеличьте белое пространство Чтобы интерфейс выглядел красиво, позвольте ему дышать. Теперь пришло время поговорить собственно о макете. Если вы когда-нибудь писали HTML-страницу с нуля, то скорее всего знакомы с тем, как HTML выглядит по умолчанию. Если коротко, то всё сбито к верху экрана. Шрифт мелкий, между строчками нет никакого пространства. Между абзацами расстояние чуть-чуть побольше, и они растянуты на весь экран независимо от того, сколько он пикселей, или 10 С точки зрения эстетики, это выглядит ужасно. Если вы хотите, чтобы интерфейс выглядел красиво, вам нужно добавить много белого пространства. Иногда даже слишком много. Белое пространство, HTML и CSS Если вы, как и я, привыкли форматировать в CSS, где по умолчанию нет белого пространства , то пришло время отучиться от этой ужасной привычки. Начните думать, что белое пространство — первично. В самом начале есть только оно, и вы уменьшаете его, добавляя элементы на сайт. Я думаю, именно поэтому люди продолжают делать наброски. Начать с чистого листа значит начать именно белого пространства. Думайте об отступах и полях с самого начала. Всё, что вы рисуете, — это ваше сознательное решение по уменьшению белого пространства. Если вы начнёте с кучи неотформатированного HTML, то о белом пространстве вы будете думать в последнюю очередь. Вот концепт музыкального плеера от Piotr Kwiatkowski. Обратите внимание на меню слева. Вертикальное пространство между ссылками в меню в два раза больше самого текста. Это шрифт размером 12px, с такими же отступами сверху и снизу. Или посмотрите на заголовки списков. Это больше, чем высота заглавной буквы шрифта! Я уже молчу о 25px между самим списками. В верхнем правом углу тоже достаточно пространства. У иконок похожие пропорции. Пётр сознательно добавил сюда много белого пространства, и это окупилось сполна. Хотя это просто концепт, но в плане дизайна этот интерфейс мог бы посоперничать с лучшими музыкальными плеерами, которые сейчас есть. Даже такие интерфейсы, как форумы, могут выглядеть красивыми и простыми благодаря белому пространству. Конечно, можно поспорить, что такому редизайну не хватает функциональности. Но это хорошее место для старта. Добавьте белое пространство между линиями. Добавьте белое пространство между элементами. Добавьте белое пространство между группами элементов. Анализируйте, что работает, а что нет. В следующей части я расскажу об остальных 4 правилах красивых интерфейсов: Как накладывать текст на картинки. Как выделять и утапливать текст. Добавить в закладки Я люблю ИП рейтинг 67, Метки лучше разделять запятой. Вот для примера страница: С свободным пространством явно перебор. Сколько там для текста пикселей оставили? Смело можно было до вполне комфортных дотянуть, да и меню ну слишком уж воздушные, опять забываем про информацию, лишь бы картинка смотрелась. Понятно, что концепция и готовый дизайн не одно и то же. Но я растянул на на дюймовом мониторе, показалось, что ширины вполне достаточно: Тут сложно спорить, конечно, это не самый популярный размер всего второй по полуярности: Мне кажется, что на данный момент ширину сайта можно ограничить на px — почти всегда этого достаточно, и почти у всех столько есть. Вот тут я соглашусь, как эскиз оно, конечно, очень хорошо. Приятно и в большинстве своем правильно. Если с чем-то не согласны, напишите, будет интересно почитать. Хочется добавить, что тапая на кнопку видно, что она нажимается. Из под пальца видны углы нажатой кнопки. В плоском дизайне часто любят делать просто глиф, и при нажатии, когда глиф подсвечен, под пальцем не видно нажалось или нет. От себя бы добавил — постоянно штудировать информацию по сабжу, о трендах, подходах в проектировании интерфейсов. Тот же UXPin читать. Нынче в тренде делать дизайн сайтов и программ с парой строк текста и километровыми отступами: За такое нужно пальцы болгаркой отрезать на глазах у семьи. И совсем не передрала визуальную составляющую metro от Microsoft, забыв остальные концепции, благодаря которым как раз и делается уклон в сторону содержания вместо дизайна. Гуманизм — не наш метод. Полировальная машина, мелкая наждачка, стачивать на низких оборотах. Скорее всего, в ближайшем будущем мы увидим полу-плоские интерфейсы… с небольшими тенями, подсказывающими, что можно нажать или кликнуть. Не согласен, и вот почему. Отказ от скевоморфизма, а в дальнейшем и от псевдо-3д — закономерность. Пользователи давно привыкли что почти всё что выделяется — кликабельно. Так же как ранее считалось ссылкой всё что подчеркнуто что теперь тоже не обязательно. Тут даже иллюстрация непоследовательна: Так и есть, пользователи и так догадываются, что почти все слова там кликабельны, а Favorites и Devices — нет. Всё для того чтобы пользователь не боялся получать опыт через метод обратимых проб. Он же скрыл ранее повторяющиеся кнопки управления элементами в списках писем, чего угодно. А может доведут до ума экраны с изменяющейся поверхностью и кнопки станут кнопками? Придется размечать тени с помощью дополнительных css-аттрибутов, позволяющих регулировать выступаемость элементов над поверхностью экрана? Может и наоборот, всё станет плоским, зато прозрачным ;. И по поводу ссылок тоже согласна. Все правильно автор написал — мода подобна колебаниям биржевых индексов, где за резким поворотом тренда всегда сделает коррекция, частично откатывающая рынок обратно. Скевоморфизм в iOS6 действительно был сильно перетяжелен, но вот так резко менять его на диаметрально-противоположное… Многие мысли были правильны, но многое и раздражает. Уже скоро наиграются и трехмерность обратно вернется, только в гораздо более легком виде. Собственно, первые росточки этого уже сейчас видно по продуктам самих же яблочников. Ссылка на оригинал medium. Да, статья с конца прошлого года. В таком виде Хабр почему-то не давал поставить ссылку. Пришлось делать через bit. Работал и на px и на px. Полагаю что речь про ширину. В чем проблема, сверстать c max-width? Не пахнет челленджем тоже: Хм, ну вот пожалуйста, пусть авторы предъявят свой вариант, чтобы лучше чем у Apple получилось и работало везде: Не понимаю о чем вы. Цитировали про картинку с HTML оформленным CSS по-умолчанию. Ну вот пусть и показали бы. Но я вообще перечитал заголовок еще раз — статья о красоте. А на вкус и цвет все фломастеры разные. Так что спорить отказываюсь: Я, например, терпеть не могу белый фон, поскольку часто сижу в полумраке или в темноте и всегда использую тёмную тему. С сайтами-то ещё ничего, решается собственными css, а вот с приложениями тяжко. Whitespace In computer science, whitespace is any character or series of whitespace characters that represent horizontal or vertical space in typography. When rendered, a whitespace character does not correspond to a visible mark, but typically does occupy an area on a page. Дата основания 22 июня Локация Москва Россия Сайт iloveip. Как платить налоги и взносы ИП или зачем мы сделали бота-бухгалтера в Telegram 13,8k Интересные публикации Хабрахабр Geektimes. Астробиологи из Эдинбургского университета считают, что жизни на Марсе нет из-за токсичных химических соединений GT. Нейросети диагностируют проблемы с сердцем более точно, чем врачи GT. За какие заслуги Kingston любят центры обработки данных? Вещи, которые мне надо было знать прежде, чем создавать систему с очередью. Обработка многократно возникающих SIGSEGV-подобных ошибок. Как у Словакии украли национальный домен верхнего уровня. Разделы Публикации Хабы Компании Пользователи Песочница. Информация О сайте Правила Помощь Соглашение Конфиденциальность. Услуги Реклама Тарифы Контент Семинары.
«7 плюс-минус 2» - важное правило графического дизайна
Правила хорошего дизайна: как грамотно использовать изображения и видео с фотостоков
Магазин house каталог одежды 2016 официальный сайт