Путь от разработчика до дизайнера: как

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

С чего мне начать? Как мне научиться создавать красивые сайты и интерфейсы?

Как бывший разработчик, который стал дизайнером, я бы предложил несколько вещей. Прежде всего, начните работать над проектами! Если у вас есть такая возможность, найдите наставника, который уже является дизайнером UI / UX, и начните работать с ними над проектами. Я обнаружил, что узнал больше, работая над проектами и получая знания от людей, которые занимались этим годами, чем когда-либо, читая книги.

При этом, если вы хотите читать UI / UX / и т. Д., Я бы взглянул на эту замечательную ветку: Must-read User Interface Book? Я думаю, что мой личный фаворит - «Не заставляй меня думать» Стива Круга, но я уверен, что в конце концов ты найдешь свой собственный фаворит.

Наконец, в отношении таких инструментов, как Photoshop, Illustrator и т. Д., Не беспокойтесь об этом! В конечном итоге вы найдете инструменты, которые работают лучше всего для вас. Лично я начинаю с карандашных и бумажных макетов, затем, в зависимости от проекта, перейду к чему-то в Balsamiq или Axure , а иногда и к прямому HTML и CSS - это действительно зависит от размера, масштаба проекта и т. Д. самый удобный для вас. В конце концов, все, что имеет значение, это то, что вы четко доносите свое видение своего дизайна, а не то, какой инструмент вы использовали для этого.

Я давно смешиваю дизайн и разработку. Но в первые дни я тратил больше времени на изучение инструментов редактирования, чем на хороший дизайн. Можно найти множество учебных пособий, чтобы научиться использовать Photoshop, Illustrator, Fireworks и т. Д. Но приятно иметь некоторый смысл и направление дизайна. Это то, что я все еще хочу стать лучше.

Одним из моих вдохновляющих идей является парень по имени Робби Ингебретсен, потому что он очень хорошо занимается как разработкой, так и дизайном. Его сайт находится по адресу nerdplusart.com .

Я бы посмотрел на него несколько вещей ...

• Мой (очень) краткий список обязательных книг для дизайнеров
• Основы дизайна для разработчиков
• 10 способов решить проблему дизайна и выйти победителем

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

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

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

Неофициально, приступай к работе! ;) Лучший способ учиться - это просто делать это.

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

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

Я бы начал с чтения книги «Head First Web Design» от Watrall & Siarto (изданной O'Reilly). Это довольно глупо, легко усваивается и рассказывает обо всем, что должен учитывать дизайнер. Это не углубленное исследование, но оно поможет вам понять, на какие вопросы вам нужно ответить в следующий раз. Он охватывает навигацию, организацию, макет, написание, цвет и доступность.

Кроме того, прежде чем переходить в Photoshop, Adobe Illustrator и т. П., Создайте каркас вашего дизайна, чтобы убедиться, что все в нужном месте, прежде чем выделять дополнительное время, чтобы он выглядел красиво. Вы можете сделать набросок на бумаге или доске или использовать инструмент. Инструмент, который я нашел, действительно помогает в этом шаге - Balsamiq Mockups . Это позволяет вам думать об организации сайта и его макете в первую очередь.

На самом деле я использовал противоположный подход от UX Designer к UI Developer, однако при выборе Design рекомендовал бы начать с нескольких областей:

Я бы взглянул на книгу "Не заставляй меня думать!" Стив Круг , который, я думаю, является отличной книгой по проектированию для проектирования в Интернете.

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

Я также хотел бы взглянуть на понимание принципов HCI, если вы хотите стать UX Designer.

Удачи и счастливого проектирования!

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

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

Одним из ключей к красивому визуальному дизайну является гармония .

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

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

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

Как встроить гармонию в дизайн сайта

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

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

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

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

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

Глядя на это, я бы выбрал H1 равным 2.815em, H2 - 1.994em, а H3 - 1.412em. Первые 3 числа больше, чем размер основного шрифта. Легко-peasy, верно? Основной текст будет 1em (в моем случае 19px). Затем я бы выбрал размер H4-H6 в 1em и использовал контраст (различный вес шрифта или стиль), чтобы отличить их от основного текста.

Итак, попробуйте это сейчас:

1. Создайте свою собственную модульную шкалу
2. Получить простой HTML-документ (реальный контент, пожалуйста, не Lorem Ipsum)
3. Используйте шкалу для определения размера заголовков.
4. Затем попробуйте использовать шкалу для других решений по размеру (поля, отступы и т. Д.)

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

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

PS: вам действительно нужно много читать

Как уже говорили другие, читайте:

• Элементы графического дизайна от Александра Уайта
• Элементы типографского стиля Роберта Брингхерста
• Не заставляй меня думать, Стив Круг

Кроме того, вот огромный список интернет-ресурсов, таких как блоги и сообщества, за которыми нужно следить: enboard.co/webdesign/