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

17

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

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

Дональд
источник
1
Вы хотите быть дизайнером пользовательского интерфейса или графическим дизайнером? Судя по вашему вопросу, вы говорите о графическом дизайне. Если это так, то вам лучше заняться этим на GraphicDesign.SE .
Смотрите также: stackoverflow.com/a/58947/568458
user56reinstatemonica8
Это ответ, на который другой собеседник
Рассел Леггетт,

Ответы:

6

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

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

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

Сообщество
источник
1
Я согласен со всем, что ты сказал. «Не заставляй меня думать» - отличная книга. И важно помнить, что в значительной степени работа веб-дизайнера заключается в создании полезного веб-сайта.
Стив Уортам,
3

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

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

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

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

Стив Уортэм
источник
Я зашел на веб-сайт, и первое, что я увидел, было «Сбой Silverlight, перезагрузите компьютер, чтобы повторить попытку» - и это было единственное. Извлеченный урок: должен предоставить резервную копию, если вы зависите от плагина. Как только я освежился, я понимаю, почему тебе нравится этот парень.
Берин Лорич
2

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

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

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

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

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

DA01
источник
1

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

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

Берин Лорич
источник
1

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

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

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

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

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


источник
0

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

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

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

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

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

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

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

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

Один из способов, который я лично предпочитаю, - это использовать модульную шкалу для согласования размеров элементов сайта. Вот сайт, который может помочь вам создать модульную шкалу: 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/

rsdimitrov
источник