ДизайнС чего начинается дизайн

Предисловие

Здравствуйте, дорогие друзья-соратники. Вот и открылась новая линейка статей, посвящённых дизайну.

Что же стало причиной создания оной? А причинка-то не одна, их, я бы сказал, толпа.

• Во-первых,сколько я не искал, шарил по необъятным просторам интернета и бегал по книжным, так и не нашёл книги/сайта, который бы вместил в себя достаточно полную инфу по теме. Интересные, а главное полезные заметки приходится искать буквально по крупицам. Вот я и поставил перед собой цель сделать удобный сборник статей, касающихся нашей тематики, который будет интересен не только молодым дизайнерам, но и матёрым ветеранам кисти.
• Во-вторых, люблю делиться своим опытом. Надеюсь, что он придётся кстати множеству начинающих дизайнеров, и они не будут наступать на грабли, которые не раз разбивали мне голову.
• В-третьих, я сам буду невольно прокачиваться, готовясь к выпуску новой статьи. Появиться стимул искать новый материал, да и ваши отзывы и комментарии будут, как нельзя кстати :)
• Ну и завершает наш список очередная корыстная причина. Надеюсь найти новые знакомства среди дизайнеров, которые помогут моему дальнейшему профессиональному росту. Да и я в долгу не останусь.

Ещё один момент. Всё то, о чём я тут буду говорить - это не истина в последней инстанции. Это исключительно мои мысли и идеи. Если с чем-то не согласны, или хотите меня дополнить, просто напишите мне об этом.

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

Зачем это всё затеялось мы разобрались, теперь перейдём непосредственно к сути ;)

Подготовка

Что же нам понадобиться для того, чтобы творить? А в принципе-то ничего особенного. Для начала хватит фотошопа (желательно последней версии, на мой взгляд он самый удобный и приятный) и немного творческого мышления. Для установки Photoshop думаю отдельных пояснений не нужно, просто следуйте инструкциям установщика и всё будет окей.

Советовал бы сразу обзавестись тестовой группой человека в 3-4. Это могут быть абсолютно разные люди, который просто найдут время смотреть и оценивать ваши работы (об этом я упомяну чуть позже).

Photoshop стоит, рвение бьёт через край, и что дальше? С чего начать? Читай дальше и узнаешь ;)

Зачатие

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

Но, как бы прискорбно не звучало, в большинстве случаев всю гениальность вырождает кто-то другой, а вам достаётся самое "лёгкое" - её воплощать :). Что делать в таком случае, ведь для того, чтобы внешний вид сайта/иконок/приложения соответствовал запросам заказчика, вам нужно мыслить как он. Тут есть 2 варианта: научиться читать мысли (хотя сколько я не пробовал, у меня так и не получилось), или же требовать ясных и чётких пояснений, выраженных в ТЗ. На самом деле внятное техническое задание - это уже половина успеха, ведь там можно почерпнуть много полезного, например: в какой цветовой гамме хотят видеть сайт, в каком стиле, можно даже увидеть примеры уже существующих работ, приглянувшихся нашему работодателю. Согласитесь,любая информация хороша, в сравнении с фразой "Сделай заебись!".

Допустим у нас есть заказ, более-менее внятное ТЗ и блеклый образ того, как приблизительно будет выглядеть наш сайт/магазин/прилага. Как же нам этот образ сделать более чётким и ясным? Ответы есть и на это.

Для начала постарайтесь побольше узнать о предметной области проекта. То бишь если делаете сайт для секс-шопа,то можете смело отправляться на секс форумы, читать извращённые статьи, смотреть порно с тёлочками в коже, а друзьям говорить: "Я не извращенец! Просто собираю материал!". Лучше даже сходить в такой магазин, проникнуться атмосферой. Это действительно помогает придать своей работе нужный настрой, да и может прикупите чего для своей половинки ;)

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

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

Рождение

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

Может получиться кривовато, нет, даже получиться криво!

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

Набросок готов, пора приступать к самому процессу создания. Открываем фотошоп и создаём новый холст шириной 960 или 980 пикселей (почему выбираем именно из этих разрешений я расскажу позднее, когда дело в статьях дойдёт до модульных сеток). Высота холста выбирается с учётом размера контента и может быть любой.

Клацаем ОК, и перед нами предстаёт девственно-чистое белое пространство, но не спешите его порочить своими творческими выплесками. Сперва давайте взглянем на наш карандашный набросок. На сколько образных колонок вы можете его разбить?

Вот как это получилось у меня

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

Посмотрели на рисунок? Посчитали виртуальные колонки? Отлично, теперь построим модульную сетку на нашем холсте.

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

Это шестнадцатиколоночный вариант сетки. Но о нём потом.

"А нафига нам это нужно делать? Ведь можно рисовать и без них!"- скажите вы. А ответ прост как дважды пять: "Чтобы сделать качественный макет!" Направляющие позволяют создавать блоки одной ширины, что немаловажно, ведь если делать всё на глаз ,то зритель так или иначе заметит несоответствия, а это уже испортит впечатление о вашей работе. Да и верстальщикам легче определить, как оптимальнее сгруппировать элементы и какие отступы где задать.

Сетка готова, а мы двигаемся дальше. В процессе создания макета, я бы советовал действовать по правилу "от простого к сложному". Сперва нанесите приблизительные формы блоков. Для этого я использую стандартные формы фотошопа и нейтральный серый цвет.

Смотрится как франкенштейн :)

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

Затем определитесь с цветовой схемой (этот вопрос я тоже освящу в ближайших статьях) и раскрасьте блоки. Начинайте потихоньку их детализировать нанося всё больше уточнений, пока наконец не достигните желаемого качества детализации.

Наносим цвета, корректируем размеры.

Детализируем...

...детализируем. И получаем что-то на выходе.

Такой подход значительно экономит время на исправления, ведь значительно легче что-то поправить в композиции на этапе "серых прямоугольников", нежели перерисовывать всё по-новой, если вдруг захочется вставить прикольную плюшку.

Итак спустя некоторое время макет принимает законченный вид: все блоки смотрятся так, как вы того хотели, картиночки искрятся глянцем, дети счастливы, старики плачут. Всё? Как бы не так!
Есть у меня в загашнике ещё пара общих советов ;)

Какая же гадость, эта ваша заливная рыба

Вы никогда не задавались вопросом, почему готовые макеты новичка так сильно отличаются от произведений дизайнера со стажем? Может у мастера намётан глаз, он умеет подбирать вкусные цвета, красиво рисует и т.д. и т.п. Без сомнений, все эти факторы имеют место быть, но, на мой взгляд, одним из самых важных отличий является умение качественно и умело преподнести контент.

В большинстве случаев дизайнеры не слишком утруждают себя наполнением макета. "Ай, да ну! Буду я тут своё драгоценное время тратить! Когда сделают - сами наполнят!" Вот приблизительно такой ход мыслей я предполагаю в их головах. Вот и получается что-то типа: "тут будет текст тут будет текст тут будет текст тут будет текст тут будет текст..."

А ведь если потратить пару минут своего времени, найти немного информации по теме и вставить её в макет, то можно во-первых улучшить его внешний вид и репрезентативность, а во вторых выявить некоторые ошибки в проектировании (например заметить, что блок новостей слишком узкий и смотрится уёбищно). В любом случае, согласитесь, всегда приятнее наблюдать макет максимально приближенный к реальному его воплощению. А это значит и шансы, что придирок со стороны заказчика будет меньше, значительно увеличиваются.

Ну что, правильным контентом макет наполнили? Да капитан! Тогда настало время... нет, не отдавать его заказчику ;) Настало время протестировать его на живых особях человеческого вида (имеется ввиду наша тестовая группа, о которой я упоминал выше). Сохраняйте макет в джипеге, заливайте на ноут или в инэт, и вперёд, на встречу с нашими подопытными :)

Тестирование

А подопытными могут выступать абсолютно все. Очень желательно показать макет шарящему верстальщику, который здраво оценит вашу работу и тыкнет носом туда, где стоит внести изменения (спасибо Splesh :) ). Остальным же можно просто показать джипег и задать пару вопросов типа: "Что скажешь, как общее впечатление?" или "Чтобы ты тут исправил?", а можно "Ты бы посидел на таком сайте? Тебе было бы уютно?" и так далее и тому подобное.

Не советую надеяться на свою память, а все предложения записать. Могу поспорить, что список такой окажется не из 2х пунктов. Теперь нужно сесть и отфильтровать полученную информацию. Помните, всем не угодишь. У каждого человека своё мнение по поводу того, каким должен быть идеальный сайт, поэтому и взгляды могут кардинально различаться.

Однако при всём многообразии советов, наверняка найдётся такой, что встретился вам не раз. А это уже знак, что эта проблема наиболее актуальна и её решение приоритетнее остальных. Доверяйте своим ощущениям, в конце концов вы творец, а не все эти людишки, которые могут только критиковать ;).

Так макет выглядел на стадии тестированных улучшений.

Финал

Всё, теперь наконец мы можем отослать финальный вариант нашему дорогому заказчику. Но не сильно обольщайтесь, а скорее приготовьтесь. Работодатель он такой: вам может попасться грамотный человек, который по-достоинству оценит вашу работу, а поправки что он внесёт реально улучшат внешний вид. Но бывают и случаи, когда в ответ мы слышим: "Что за херня? Я совсем не это просил! А нука переделай всё быстро", хотя все пункты ТЗ были учтены в процессе создания, или "Моя бабушка нарисует лучше! А она у меня слепая старушка 41 года выпуска!", хотя все, кому вы показывали ваш проект были в полном экстазе.

Тогда нам ничего не остаётся кроме как... послать его нахер! Что? Вы думали я напишу "снова становиться за станок и начинать всё по-новой"? Конечно, если клиент крупный и данный заказ может реально помочь вам продвинуться, то естественно вы его не пошлёте. Но если вы не сильно дорожите заказчиком, то мой вам совет: берегите свои нервы, они очень долго восстанавливаются. Хотя не буду учить вас работать, как поступать со "всезнающими мега-дизигнерами" решать вам.

Эпилог

Вот и подошла к концу моя первая статья. Как вы могли заметить, она несла, скажем, ознакомительный характер. Я не заострял внимание на многих вопросах, которые очень хотел бы освятить. Может даже специально, должен же у меня быть туз в рукаве ;) Оставляйте свои комментарии внизу. Спрашивайте, что интересно, и исправляйте меня, если обнаружили ошибки. Буду рад любым ссылкам на интересные статьи по теме. В общем - пишите! :)

ЗЫ

Часто задают вопрос: "А что можно почитать, прошариться?". Отвечаю: универсальной литературы нет. Можете почитать Ководство Артемия Лебедева. Там много полезного, как и на Хабре. Посоветую пошариться по инэту в поисках портфолио дизайн студий. Посмотреть, что и как творят они. Творите, и всё придёт с опытом.

Всем спасибо, все свободны. :)