• Оставайтесь простыми . Сначала не пытайтесь делать что-то слишком причудливое или авантюрное. Сначала освойте основы, а затем приступайте к экспериментам. Не пытайтесь подражать компьютерному интерфейсу Star Trek.
• Будьте последовательны . Последовательный дизайн является частью основы хорошего дизайна. Следите за своими полями, размерами и размещением и сохраняйте их на протяжении всего дизайна.
• Удалить беспорядок . Включите только те элементы, которые необходимы для дизайна. Удалите все остальное.
• Расставьте приоритеты . Какова основная цель дизайна? Подчеркните эту цель. Сделайте это очевидным.
• Использовать пробелы — разрешить правильные поля. Большие блоки текста с небольшими полями или без полей плохо читаются. То же самое для других элементов дизайна.
• Используйте цветовую палитру . Всего не следует использовать более 4-5 цветов.
• Согласованные шрифты . Придерживайтесь одного или двух шрифтов. Используйте их последовательно, обычно один для заголовков, один для текста абзаца. Рассчитывайте и поддерживайте согласованные размеры шрифта, высоту строки и межстрочный интервал. Не используйте Comic Sans, если вы не можете отбиваться от бешеных зомби-велоцирапторов.
• Дизайн прежде всего. Дизайн не должен быть второстепенным; он должен быть первоклассным участником стадии планирования. Дизайн — это то, как ваши пользователи взаимодействуют с вашими программами, и они в первую очередь будут формировать свое мнение, в значительной степени основанное на вашем дизайне. Придайте дизайну должное значение.

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

• Разрушительный журнал
• PSD Туты
• Абузидо
• UX стенд
• я люблю типографику
• Джейсон Санта-Мария

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

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

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

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

Virtuosi Media перечисляет много хороших ресурсов (сеть Tutsplus в целом великолепна, а журнал Smashing Magazine обязателен к прочтению для любого веб-разработчика/дизайнера), к которым я бы добавил:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net — содержит портфолио многих дизайнеров мирового класса, из которых можно черпать вдохновение

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

• Книга Робина Уильямса по дизайну для недизайнеров. Эта книга охватывает основы графического дизайна.
• Рисование правой стороны мозга Бетти Эдвардс: книга для развития навыков рисования.
• «Гуманный интерфейс» Джефа Раскина: эта книга наталкивает на некоторые мысли о дизайне пользовательского интерфейса.

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

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

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

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

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

Узнайте много нового о типографике.

Из классики …

^{Ян Чихольд}

Не клоуны …

^{Дэвид Карсон}

Стратегическая и эффективная типографика — одно из наиболее часто отсутствующих качеств в этой области (и так было всегда).

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

Хорошим (бесплатным) началом является эта подробная адаптация важного ресурса от Роберта Брингхерста для приложения в Интернете.

^{Элементы типографского стиля, Брингхерст}

Это более широкое соображение , касающееся взаимодействия шрифта и макета.

^{Сеточные системы в графическом дизайне, Брокманн}

1. Критически относитесь к проектируемым объектам вокруг вас

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

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

2. Думайте о дизайне как о способе удовлетворить потребность или решить проблему

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

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

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

3. Практикуйтесь в визуальном общении.

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

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

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

4. Узнайте, как создаются вещи

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

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

5. Найдите хорошие источники информации

   В дополнение к журналам по дизайну ищите книги о процессе, принципах и методах дизайна.

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

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

6. Развивайте свои дизайнерские способности

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

7. Делайте ошибки быстро

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

8. Всегда будьте готовы ловить идеи.

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

Книги и материалы

http://www.alistapart.com

http://webdesignledger.com

Разрушительный журнал

PSD Туты

Абузидо

UX стенд

Несколько моментов, о которых следует помнить:

1. Каждый дизайн решает проблему

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

Когда вы создаете веб-сайты, это означает, что в самом широком смысле вы решаете бизнес-задачу .

Веб-сайт существует для реализации бизнес-цели .

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

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

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

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

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

2. Именно повторение делает вещи красивыми .

Вот что такое последовательность.

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

Вот матч: Фарнхем и Бентон Санс.

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

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

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

Повторение вносит гармонию в дизайн. А гармония делает дизайн красивым.

Но, как видите, Farnham и Benton Sans также контрастируют : Farnham — шрифт с засечками, а Benton — шрифт без засечек.

Зачем нужен контраст? Мы хотим ввести сходство в дизайне, верно?

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

Лекарство — контраст.

3. Контраст помогает пользователю найти свой путь

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

Чем важнее элемент, тем больше он должен контрастировать с окружающей средой.

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

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

Все это приятно знать, но... все равно не поможет вам создать свой следующий веб-сайт, верно?

Что ж, у меня есть решение и для этого .

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

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

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

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

Затем выполните этот процесс, чтобы создать свой собственный дизайн:

1. Определите проект. Погрузитесь в проект и узнайте больше о:

   1. Его цель, предполагаемые результаты

   2. Его (будущие) пользователи
   3. Предполагаемый опыт для пользователей/посетителей
   4. Брендинг позади проекта
2. Приобретайте необходимые ресурсы. Получите в свои руки (образец) контент (заимствуйте с аналогичных сайтов)

3. Придайте форму содержанию

   1. Выберите шрифт для набора контента (выберите тот, который соответствует настроению и посылу сайта)
   2. Выберите размер шрифта для основного текста
   3. Создайте модульную шкалу (таблицу пропорциональных гармонических размеров) из размера шрифта основной копии (используя шкалу типов — визуальный калькулятор)
   4. Эскиз различных макетов в зависимости от требований проекта
   5. Создайте макет (в HTML и CSS) с помощью модульной шкалы: ширина столбца, высота строки, размеры заголовков, нижние поля, столбцы (при необходимости)
   6. Нанесите цвет в соответствии с рекомендациями бренда

Подробнее о каждом шаге этого процесса можно прочитать здесь .

Еще несколько:

1. Просмотрите вдохновляющие коллекции веб-сайтов в поисках идей. Коллекция Motherload of Inspirational Website Collections содержит довольно много коллекций. Еще два хороших сайта — это siiimple.com и minimalsites.com .

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

3. Если все это становится немного ошеломляющим, подумайте о покупке шаблона.

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

• Дизайн для хакеров (печатная книга)
• Принципы дизайна пользовательского интерфейса (сайт)
• Пошаговый дизайн пользовательского интерфейса (электронная книга)
• Форма дизайна (бесплатная онлайн-версия)

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

Вам действительно нужно поискать работы других замечательных дизайнеров. Для этого вам следует подписаться на замечательных дизайнеров на Dribbble . Также очень важно регулярно просматривать последние дизайны на сайтах css-галерей, таких как www.minimalistgallery.com или других.

Желаем всего самого наилучшего!!!

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

Пробелы, поля и выравнивание.

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

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

Подпишитесь на http://sidebar.io/ для получения ежедневных информационных бюллетеней. Каждая статья будет так или иначе полезна. Еще один отличный способ самостоятельного изучения дизайна — dribbble .

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

Книга о дизайне для не дизайнеров