Я разработчик. Я не дизайнер. У меня нет опыта работы дизайнером. Я никогда не читал книг о дизайне. И, тем не менее, годами я учился созданию веб-приложений и сайтов, которые бы выглядели профессионально.
Под катом список вещей, которые, на мой взгляд, важны чтобы набить руку в дизайне когда за вашими плечами прошлое разработчика.
DISCLAIMER: Оригинальная статья написана программистом, так что дизайнеры могут посчитать часть ниже написанного полной ересью, и это их право. ЦА статьи — разработчики, которым нужно заниматься дизайном.
Тренируйте ваш эстетический вкус
Учитесь распознавать хороший дизайн и определять специфический моменты, которые делают дизайн хорошим. Вероятно, есть множество способов развить свой эстетический вкус, но мой метод в один шаг — я просто смотрю на популярные дизайны. И все. Через время вы начнете находить те мелкие детали, которые отделяют хороший дизайн от плохого.
Для этого есть множество сайтов, но вот некоторые из моих любимых:
- awwwards.com – посмотрите на сайты дня и сайты месяца
- unmatchedstyle.com – отзывы весьма полезны
- dribbble.com
- patterntap.com
Выделяйте время
Когда бы я не создавал приложение или сайт, я трачу на дизайн столько же времени, сколько и на код. Хороший дизайн занимает время и вам придется пройти через несколько этапов прежде чем вы добьетесь успеха в дизайне, который работает и выглядит хорошо.
Перед тем как я начинаю проект, у меня почти всегда есть идея основного макета. Как только я определил макет у себя в голове, я работаю над дизайном и кодом одновременно. Я делаю дизайн небольшой части функциональности и затем пишу код для того чтобы заставить работать эту часть функциональности. Я не совсем уверен, самый ли это эффективный процесс, но он позволяет мне делать тысячи мелких итераций в проекте во время работы.
Воруйте
«Секрет креативности заключается в умении прятать свои первоисточники» — Альберт Эйнштейн.
«Хорошие художники копируют, великие художники воруют» — Пабло Пикассо.
Это совсем не новый совет и, возможно, самый главный в этом списке. Когда вы только начинаете и у вас нет нужных навыков для создания привлекательного дизайна самостоятельно, вы можете «имитировать» признанных дизайнеров или просто позволить себе сильно вдохновиться их работой.
Это мой способ: я ищу веб-приложения с хорошим на мой взгляд дизайном и макетом аналогичным тому, который я хотел бы реализовать для своего проекта. Я определяю элементы, которые бы отлично подошли к приложению, дизайн которого я делаю. Затем я пересоздаю эти элементы в моем приложении. Нет, не копирую напрямую html/css, если вы будете так делать, то вы не научитесь тому, что вы делаете. Просто ориентируясь на внешний вид элемента пишите собственный код. Когда вы получите больше опыта, вы сможете начать создавать эти элементы полностью самостоятельно.
Не используйте Photoshop.
Если вы такой же как и я, вы не знаете как им пользоваться, а значит Photoshop будет просто замедлять работу. Используйте вашу силу (код) и создавайте дизайн прямо в браузере. Я использую Photoshop очень редко и только для нестандартных иконок, логотипов и скриншотов моих приложений. Я никогда не создавал дизайн полностью в Photoshop и не думаю, что когда либо буду.
Освойте CSS
Создания дизайна прямо в браузере предполагает освоение CSS. Если вы вооружены мощным пониманием CSS и креативностью – все, что может быть создано в Photoshop может быть создано прямо в браузере.
Не так давно было много разработчиков, которые жаловались, какой изломанный css, вместо того чтобы выучить его. Лично я не согласен с этим утверждением; CSS – один из самый простых «языков» из всех, что я когда-либо учил. За исключением вертикального центрирования и равных по высоте колонок, все в css работает отлично. Конечно же есть множество правил. Конечно же есть несколько клевых вещей – margin:auto для центрирования. Но в том и суть, когда вы выучите, что margin:auto – способ центрирования блочного элемента с заданной шириной, то вы будете знать как центрировать элементы всю оставшуюся жизнь. И если вы по какой-то причине забыли, Google и MDN всегда рядом.
Не смотря на то, что вы думаете о CSS, он простой и мощный и вам надо разбираться в нем, если вы планируете создавать дизайн какого-либо рода в браузере. Когда вы выучили CSS, следующий шаг – выучить препроцессор вроде LESS или SASS, который может сильно ускорить вашу работу
Front End Фреймворки – ваши друзья
Создание сайта или приложения с чистого листа – довольно сложная задача, особенно если вы не знакомы с Front End разработкой. На сегодняшний день, каждый проект, который я создаю использует фреймворк. Zurb Foundation и Bootstrap – самые популярные, но есть еще много вариантов для выбора.
Если вы используете фреймворк, то вы должны уделить время изменению стандартной темы для придания вашему проекту уникальности. Взгляните на использующий Foundation сайт duetapp.com. Если бы я вам не сказал об этом, вы бы сами смогли определить? Вероятно, нет, потому что фреймворк был сильно изменен под мои потребности. Взгляните на демо для Duet с использованием bootstrap. Вы бы догадались? Изменение вашего Front End фреймворка улучшит ваш сайт и даст другим возможность научиться.
Фреймворки:
- Zurb Foundation – мой любимый фреймворк
- Bootstrap — самый популярный, но по-моему слишком раздутый
- Pure — никогда его не использовал, но выглядит круто
Иконки неожиданно важны
Прошло достаточно много времени, пока я понял, насколько важны иконки для хорошего дизайна; Это не так очевидно. Они улучшают навигацию, добавляют цвет и помогают донести смысл. Только иконки не могут сделать дизайн великолепным, но если вы используете не те иконки, вы можете испортить свой дизайн.
В зависимости от проекта я использую иконки-шрифты и svg иконки. Иконки-шрифты очень просты в использовании, особенно если вы создаете дизайн в браузере. Используя большинство шрифтов иконок очень просто добавить иконку элементу – все, что вам нужно – добавить класс. Например, используя иконки Themify если вы добавите класс «ti-heart» к html элементу, в элементе будет отображаться иконка сердца.
Также иконки-шрифты хороши тем, что они масштабируемы и изменять размер иконки так же легко как и размер шрифта используя свойство font-size. Изменение цвета иконки также аналогично тексту – свойством color.
Вот несколько наборов иконок, которые мне нравятся:
Повторяйте. Это очень важно.
Метод проб и ошибок – весьма ценный инструмент. Многое из того, что вы попробуете сделать не будет выглядеть хорошо и подходить к вашему общему дизайну. Это нормально. Каждый раз, когда вы ошибаетесь, сделайте шаг назад и попробуйте снова. Я прошел через тысячи мелких повторений для интерфейса Duet прежде чем я пришел к текущему дизайну.
Сфокусируйтесь на простоте и удобстве использования
Дизайн — это не просто как приложение выглядит. Дизайн — это еще и то, как оно работает и как просто его использовать. (измененная цитата Стива Джобса – пер.).
На самом деле, все, что вам надо сделать, чтобы создать удобное в использовании приложение – убедиться, что вы используете приложение, которое создаете. Используйте его постоянно. Если вы ощущаете, что что-то не так, значит исправьте это. Доверьтесь вашему инстинкту. Интуитивно вы должны уметь отличить, когда процесс непонятный или слишком сложный. Возможно, слишком много шагов? Возможно, к функции слишком сложно получить доступ? Возможно, основное действие требует слишком много кликов? Или может быть вы иногда забываете где находится какая-либо часть функциональности?
В чем бы ни была проблема удобства использования, я верю, что если вы используете это приложение, вы сможете распознать наличие проблемы и исправите её.
Очевидно, этот метод не идеален. Вы не такой же как каждый пользователь и ваш способ использования приложение может отличаться от способа, которым использует приложение среднестатистический пользователь, но мой опыт показал, что большинство проблем удобства использования могут быть найдены этим методом. Когда я запустил Duet, никто до этого, кроме меня, им не пользовался и не видел. Несмотря на это, проект был воспринят положительно и множество людей хвалили его простоту и удобство использования. Конечно же, были моменты, которые я упустил, но по большому счету я смог запустить приложение с отличным опытом взаимодействия с пользователем используя только мою интуицию.
Типографика важнее, чем вы думаете
Типографикой тоже очень сложно овладеть, потому что это сложнее чем просто подобрать правильный шрифт. Вам также надо учитывать вертикальный ритм, насыщенность, начертание, и т. д. Честно говоря, в последнее время я сделал очень мало решений по типографике самостоятельно. У меня нет знаний или опыта и изучение этого займет очень много времени. Однако, с тех пор как я тренирую «мой эстетический вкус», я могу определить, когда у сайта хорошая типографика, добавить его в закладки и использовать как пример позже. Также, у большинства Front End фреймворков есть прекрасные решения «из коробки».
Вот мои самые частоиспользуемые источники отличной типографики:
- Foundation — если я не планирую использовать весь фреймворк, я просто использую файл стилей типографики прямо из исходников
- Twitter Bootstrap — использую таким же образом как Foundation, но не так часто
- Brick
- HelloHappy
- Typecast
Выбирайте правильные изображения/стоковые фото
Хорошие изображения сложно найти. Особенное если у вас ограничен бюджет для стоковых фотографий. Я тратил целые дни на поиск нужного изображения для моего дизайна.
Вот список сайтов, с которых я часто беру высококачественные бесплатные изображения:
Обратная связь
Честно говоря, я действительно плох в этом, но я понимаю важность обратной связи. Большинство моих проектов построены в «вакууме» и я не получал обратной связи до их запуска.
В попытке начать получать обратную связь на этапе разработки проекта, я начал использовать эти онлайн-ресурсы:
Итог
Если вы не знаете что вы делаете – простота, возможно, лучше. Много белого пространства, очень легкие тени и т.д. Процесс становления в дизайне – очень медленный и займет время. Возможно, гораздо больше, чем вам бы хотелось, но если вы уже возьметесь за это – вы несомненно улучшите свои навыки.
P.S. Это мой первый перевод статей такого типа, так что если у вас есть предложения по улучшению или вы нашли ошибку, напишите мне, пожалуйста.
Автор: bbmm
