Будучи разработчиком, желающим стать дизайнером, мне очень интересно узнать, как создавать первоклассный пользовательский интерфейс для веб-сайтов, мобильных приложений и т. Д. Однако я ничего не знаю о PhotoShop или о чем-либо, связанном с дизайном, кроме HTML и CSS.
С чего мне начать? Как мне научиться создавать красивые сайты и интерфейсы?
Есть ли книга, учебник и т. Д., Которые вы рекомендуете?
Спасибо!
Ответы:
Для пользовательского интерфейса я рекомендую использовать Fireworks поверх Photoshop. Photoshop отлично подходит для творческих и сложных иллюстраций (печатных или веб), но, на мой взгляд, слишком сложный инструмент для веб-интерфейса.
Fireworks специально разработан как веб-ориентированный инструмент разработки, в отличие от Photoshop. Набор инструментов для Fireworks ориентирован на создание веб-интерфейса, а не на сложную творческую работу, которую предлагает Photoshop.
Fireworks использует очень похожий набор инструментов для Photoshop, за исключением раздувания, поэтому вы можете делать все, что вам нужно для создания веб-интерфейса.
Fireworks также является частью Adobe Creative Suite, поэтому если у вас есть Photoshop, он также должен быть у вас.
Справочные материалы, не относящиеся к Fireworks, но к пользовательскому интерфейсу в целом;
http://www.jankoatwarpspeed.com/
Я очень рекомендую прочитать его статьи и посмотреть на его работу для вдохновения. У интерфейса есть две стороны, которые он очень хорошо освещает: интерфейс и опыт использования интерфейса. Также называется UI и UX.
Узнать, как использовать приложение, можно найти в онлайн-учебниках. У Envato есть отличная учебная сеть http://tutsplus.com/ , и их основной учебный сайт для веб-сайтов ориентирован на Photoshop, но большая часть того, что они делают в Photoshop, выполняется таким же или аналогичным способом в Fireworks.
Я также нахожу себя довольно часто на сайтах закладок, которые имеют уникальные черты дизайна или элементы пользовательского интерфейса, которые в будущем будут работать хорошо для проекта. Например, уникальная структура вкладок, аккордеонный стиль или даже пейджер.
Пользовательский интерфейс дизайна на базовом уровне разбит на области отображения данных. Поскольку у вас есть опыт работы с разработчиками, вы знаете, как представлять данные с логической точки зрения (меню, аккордеоны, вкладки и т. Д.). Теперь это действительно просто создание этого интерфейса с использованием этих элементов управления или модулей с визуальной точки зрения.
Некоторое дополнительное чтение на UX:
Имея опыт работы с разработчиками, я могу сказать, что когда я создаю свои приложения, первым шагом является создание пользовательского интерфейса, который, в свою очередь, определяет функциональность приложений. Моя созданная работа служит как художественной ценностью приложения, так и определением его функций. Я всегда строю свою логику вокруг законченного произведения искусства, а не наоборот. Это всегда означает, что я ставлю пользователя на первое место.
Я надеюсь, что это даст вам хотя бы отправную точку.
Тебе повезло. Многие люди пришли в мир веб-дизайна, задавая один и тот же вопрос. Часто вы увидите команду людей, состоящую по крайней мере из одного кодера и одного графического дизайнера. Хороший выбор с фотошопом - это то, что я придерживаюсь
С новой версией Adobe Photoshop, CS5, она стала чрезвычайно продвинутой - способной выполнять сложные задачи с помощью простых инструментов или даже более сложные задачи с помощью сложных инструментов. Но я предупреждаю вас, изучение всех интересных функций Photoshop может привести к нехватке питательных веществ. :)
Вот учебник, который охватывает основы, чтобы вы могли получить представление о вещах:
Как только вы получите все это вниз, я нашел в кучу из сайтов на Google , которые имеют некоторые действительно инновационные дизайнерские учебники.
Есть несколько техник, которые вам, возможно, придется освоить. Совет, блестящий, как правило, хороший шаг в эти дни. Чтобы получить действительно уникальный дизайн, найдите нужные вам функции в любом шаблоне веб-сайта, а затем используйте его по-своему.
Я надеюсь, что это помогло. Оставьте комментарий, если вам нужна дополнительная информация.