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

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

При этом, если вы хотите почитать об UI/UX/и т. д., я бы посмотрел на эту прекрасную ветку: « Обязательная к прочтению книга по пользовательскому интерфейсу?» Я думаю, что мой личный фаворит — «Не заставляй меня думать» Стива Круга, но я уверен, что со временем вы найдете свой собственный фаворит.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отсутствие гармонии делает ваши проекты дилетантскими.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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