Благодаря Интернету графический дизайн и программирование становятся все более и более пересекающимися областями.

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

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

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

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

• Smashing Magazine
• PSD Tuts
• Abuzeedo
• 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% истории правильно в резюме.

Хороший (бесплатно) старт это подробная адаптация из сущностного ресурса от Брингхёрста для применения в Интернет.

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

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

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

1. Думайте критически о проектируемых объектах вокруг вас

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

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

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

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

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

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

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

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

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

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

4. Узнайте, как все сделано

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

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

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

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

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

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

6. Развитие ваших дизайнерских навыков

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

7. Быстро ошибаться

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

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

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

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

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

PSD Tuts

Abuzeedo

UX Бут

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну, у меня тоже есть решение .

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

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

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

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

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

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/ для ежедневных рассылок. Каждая статья будет полезна тем или иным способом. Еще один отличный способ самостоятельного изучения дизайна - это дриблинг .

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

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

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

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

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

Не Дизайнерская Книга Дизайна