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

Предисловие

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

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

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

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

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

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

Подготовка

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

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

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

Зачатие

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

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

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

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

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

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

Рождение

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

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

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

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

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

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

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

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

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

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

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

serye-bloki.jpg
Смотрится как франкенштейн :)

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

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

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

utochneniya-2.jpg
Детализируем...

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

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

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

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

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

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

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

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

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

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

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

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

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

Финал

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

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

Эпилог

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

ЗЫ

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

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

Комментарии

Аватар пользователя xandeadx
xandeadx написал:

картинки то не кликабельны)

04.10.2011 18:15
Аватар пользователя Smouk
Smouk написал:

А проект ещё просто не готов, так что не хочу его палить перед выходом :)
В будущем буду делать кликабельными и большими-большими ;)

04.10.2011 18:21
Аватар пользователя unic
unic написал:

Возможно, глупый вопрос.

Кто-то практикует создание макета сразу в html/шаблон? Колонки на основе какого-нибудь 960gs.

06.10.2011 09:31
Аватар пользователя Smouk
Smouk написал:

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

06.10.2011 20:44
Аватар пользователя andypost
andypost написал:

Используя drupal panels можно как раз быстро прототипировать страницы, но имхо рукой выходит быстрее

10.10.2011 23:01
Аватар пользователя Smouk
Smouk написал:

Честно не пробовал. )

11.10.2011 20:41
Аватар пользователя Гость
Гость написал:

Хорошая статья за ссылку тоже спасибо, много интересного!

02.11.2011 02:28
Аватар пользователя test
test написал:

классно написано, спасибо

10.11.2011 17:49
Аватар пользователя Тоха
Тоха написал:

У вас небольшая, я бы сказал, "проблемка" со списками... при наведении на пункт меню он меняется (в смысле как ссылка)... я думаю это не очень удобно в плане юзабилити. мне уже раз 5 хотелось нажать на них xD

10.02.2012 22:30
Аватар пользователя Andron
Andron написал:

Макет нарисовал, сверстал, дальше надо его повесить на движок. Как это делать?

07.08.2012 18:09
Аватар пользователя Александр
Александр написал:

Неплохая статья получилась. Главное что она написана с каким-то теплом что ли. Просто я к примеру прочел тонны материала по Друпал - кое-что пробовал..., может просто не увидел полезного зерна...а может так преподнесли...Три месяца пробился как головой о стену о Друпал...так и ничего не сделал. Имею знания html и CSS...понимаю как создать к примеру Rambler.ru :) А вот как это все в Друпал можно реализовать - не доходит хоть убей. Так что спасибо вам за ваш труд.

14.08.2012 23:34

Комментировать