ДизайнС чего начинается дизайн
Предисловие
Здравствуйте, дорогие друзья-соратники. Вот и открылась новая линейка статей, посвящённых дизайну.
Что же стало причиной создания оной? А причинка-то не одна, их, я бы сказал, толпа.
- Во-первых,сколько я не искал, шарил по необъятным просторам интернета и бегал по книжным, так и не нашёл книги/сайта, который бы вместил в себя достаточно полную инфу по теме. Интересные, а главное полезные заметки приходится искать буквально по крупицам. Вот я и поставил перед собой цель сделать удобный сборник статей, касающихся нашей тематики, который будет интересен не только молодым дизайнерам, но и матёрым ветеранам кисти.
- Во-вторых, люблю делиться своим опытом. Надеюсь, что он придётся кстати множеству начинающих дизайнеров, и они не будут наступать на грабли, которые не раз разбивали мне голову.
- В-третьих, я сам буду невольно прокачиваться, готовясь к выпуску новой статьи. Появиться стимул искать новый материал, да и ваши отзывы и комментарии будут, как нельзя кстати :)
- Ну и завершает наш список очередная корыстная причина. Надеюсь найти новые знакомства среди дизайнеров, которые помогут моему дальнейшему профессиональному росту. Да и я в долгу не останусь.
Ещё один момент. Всё то, о чём я тут буду говорить - это не истина в последней инстанции. Это исключительно мои мысли и идеи. Если с чем-то не согласны, или хотите меня дополнить, просто напишите мне об этом.
Да, хотелось выразить мою неимоверную благодарность Splash'ке, который так любезно предоставил мне полигон для публикации моих творческих изысканий и наблюдений.
Зачем это всё затеялось мы разобрались, теперь перейдём непосредственно к сути ;)
Подготовка
Что же нам понадобиться для того, чтобы творить? А в принципе-то ничего особенного. Для начала хватит фотошопа (желательно последней версии, на мой взгляд он самый удобный и приятный) и немного творческого мышления. Для установки Photoshop думаю отдельных пояснений не нужно, просто следуйте инструкциям установщика и всё будет окей.
Советовал бы сразу обзавестись тестовой группой человека в 3-4. Это могут быть абсолютно разные люди, который просто найдут время смотреть и оценивать ваши работы (об этом я упомяну чуть позже).
Photoshop стоит, рвение бьёт через край, и что дальше? С чего начать? Читай дальше и узнаешь ;)
Зачатие
Любой проект, каким бы сложным или лёгким он ни был, начинается с идеи. Так что если вы решили создать исключительно свой продукт, то самое время включить воображалку и выдать охренительную идею.
Но, как бы прискорбно не звучало, в большинстве случаев всю гениальность вырождает кто-то другой, а вам достаётся самое "лёгкое" - её воплощать :). Что делать в таком случае, ведь для того, чтобы внешний вид сайта/иконок/приложения соответствовал запросам заказчика, вам нужно мыслить как он. Тут есть 2 варианта: научиться читать мысли (хотя сколько я не пробовал, у меня так и не получилось), или же требовать ясных и чётких пояснений, выраженных в ТЗ. На самом деле внятное техническое задание - это уже половина успеха, ведь там можно почерпнуть много полезного, например: в какой цветовой гамме хотят видеть сайт, в каком стиле, можно даже увидеть примеры уже существующих работ, приглянувшихся нашему работодателю. Согласитесь,любая информация хороша, в сравнении с фразой "Сделай заебись!".
Допустим у нас есть заказ, более-менее внятное ТЗ и блеклый образ того, как приблизительно будет выглядеть наш сайт/магазин/прилага. Как же нам этот образ сделать более чётким и ясным? Ответы есть и на это.
Для начала постарайтесь побольше узнать о предметной области проекта. То бишь если делаете сайт для секс-шопа,то можете смело отправляться на секс форумы, читать извращённые статьи, смотреть порно с тёлочками в коже, а друзьям говорить: "Я не извращенец! Просто собираю материал!". Лучше даже сходить в такой магазин, проникнуться атмосферой. Это действительно помогает придать своей работе нужный настрой, да и может прикупите чего для своей половинки ;)
Отличным советом будет строить так называемые карты настроения.
В чём заключается вся фишка этого приёма. Просто в любом поисковике делаете запрос на свою тему, затем клацаете на пункт "Картинки" и вуаля, вы имеете в своём распоряжении бесчисленное множество идей и деталей, способных добавить нотки нужной вам темы в вашу работу. Понравившееся картинки просто закидываем в фотошоп, чтобы потом выбрать из них, что будет использовано, а что отправится в топку. Плюс, когда весь холст будет заполнен тематическими изображениями - это может вас вдохновить, и вы придумаете что-то своё.
Вот пример подобной карты, если бы дело касалось путешествий.
Рождение
Итак, образ сформировался, и вы уже ясно и чётко видите, как всё будет устроено. Быстро хватайте лист бумаги и карандаш! Сделайте грубые наброски блоков и изображений, не стремитесь вырисовать больше деталей, этим вы займётесь позже.Сейчас лучше просто поработать над композицией, размерами и пропорциональностью блоков.
Может получиться кривовато, нет, даже получиться криво!
Прикиньте количество колонок контента, напишите какие блоки хотите видеть на сайте,а потом карандашиком по бумажке их неаккуратно расположите :) В процессе грубого набрасывания начните думать о том, как эти блоки будут выглядеть, какой функционал они будут нести в себе и как расположить в них контент.
Набросок готов, пора приступать к самому процессу создания. Открываем фотошоп и создаём новый холст шириной 960 или 980 пикселей (почему выбираем именно из этих разрешений я расскажу позднее, когда дело в статьях дойдёт до модульных сеток). Высота холста выбирается с учётом размера контента и может быть любой.
Клацаем ОК, и перед нами предстаёт девственно-чистое белое пространство, но не спешите его порочить своими творческими выплесками. Сперва давайте взглянем на наш карандашный набросок. На сколько образных колонок вы можете его разбить?
Вот как это получилось у меня
Классическим видом является трёхколоночный макет. То есть "Слева блоки - в центре контент - справа блоки", но это отнюдь не значит, что нужно только его и использовать.
Посмотрели на рисунок? Посчитали виртуальные колонки? Отлично, теперь построим модульную сетку на нашем холсте.
Если вы никогда не работали с направляющими в Photoshop, вот тут я нашёл отличный и простой урок. О том, как грамотно и правильно строить сетки я напишу в одном из следующих уроков, так как в двух предложениях об этом не расскажешь. Сейчас же просто задайте ширину всех колонок, что вы с такой любовью выделили на своём карандашном наброске.
Это шестнадцатиколоночный вариант сетки. Но о нём потом.
"А нафига нам это нужно делать? Ведь можно рисовать и без них!"- скажите вы. А ответ прост как дважды пять: "Чтобы сделать качественный макет!" Направляющие позволяют создавать блоки одной ширины, что немаловажно, ведь если делать всё на глаз ,то зритель так или иначе заметит несоответствия, а это уже испортит впечатление о вашей работе. Да и верстальщикам легче определить, как оптимальнее сгруппировать элементы и какие отступы где задать.
Сетка готова, а мы двигаемся дальше. В процессе создания макета, я бы советовал действовать по правилу "от простого к сложному". Сперва нанесите приблизительные формы блоков. Для этого я использую стандартные формы фотошопа и нейтральный серый цвет.
Смотрится как франкенштейн :)
Просто предварительно оформите блоки, придерживаясь нашего любимого карандашного наброска. Создайте общую картину, поработайте над композицией. Если вы захотите что-то изменить, не бойтесь это сделать. На то он и предварительный набросок, что он может изменяться.
Затем определитесь с цветовой схемой (этот вопрос я тоже освящу в ближайших статьях) и раскрасьте блоки. Начинайте потихоньку их детализировать нанося всё больше уточнений, пока наконец не достигните желаемого качества детализации.
Наносим цвета, корректируем размеры.
Детализируем...
...детализируем. И получаем что-то на выходе.
Такой подход значительно экономит время на исправления, ведь значительно легче что-то поправить в композиции на этапе "серых прямоугольников", нежели перерисовывать всё по-новой, если вдруг захочется вставить прикольную плюшку.
Итак спустя некоторое время макет принимает законченный вид: все блоки смотрятся так, как вы того хотели, картиночки искрятся глянцем, дети счастливы, старики плачут. Всё? Как бы не так!
Есть у меня в загашнике ещё пара общих советов ;)
Какая же гадость, эта ваша заливная рыба
Вы никогда не задавались вопросом, почему готовые макеты новичка так сильно отличаются от произведений дизайнера со стажем? Может у мастера намётан глаз, он умеет подбирать вкусные цвета, красиво рисует и т.д. и т.п. Без сомнений, все эти факторы имеют место быть, но, на мой взгляд, одним из самых важных отличий является умение качественно и умело преподнести контент.
В большинстве случаев дизайнеры не слишком утруждают себя наполнением макета. "Ай, да ну! Буду я тут своё драгоценное время тратить! Когда сделают - сами наполнят!" Вот приблизительно такой ход мыслей я предполагаю в их головах. Вот и получается что-то типа: "тут будет текст тут будет текст тут будет текст тут будет текст тут будет текст..."
А ведь если потратить пару минут своего времени, найти немного информации по теме и вставить её в макет, то можно во-первых улучшить его внешний вид и репрезентативность, а во вторых выявить некоторые ошибки в проектировании (например заметить, что блок новостей слишком узкий и смотрится уёбищно). В любом случае, согласитесь, всегда приятнее наблюдать макет максимально приближенный к реальному его воплощению. А это значит и шансы, что придирок со стороны заказчика будет меньше, значительно увеличиваются.
Ну что, правильным контентом макет наполнили? Да капитан! Тогда настало время... нет, не отдавать его заказчику ;) Настало время протестировать его на живых особях человеческого вида (имеется ввиду наша тестовая группа, о которой я упоминал выше). Сохраняйте макет в джипеге, заливайте на ноут или в инэт, и вперёд, на встречу с нашими подопытными :)
Тестирование
А подопытными могут выступать абсолютно все. Очень желательно показать макет шарящему верстальщику, который здраво оценит вашу работу и тыкнет носом туда, где стоит внести изменения (спасибо Splesh :) ). Остальным же можно просто показать джипег и задать пару вопросов типа: "Что скажешь, как общее впечатление?" или "Чтобы ты тут исправил?", а можно "Ты бы посидел на таком сайте? Тебе было бы уютно?" и так далее и тому подобное.
Не советую надеяться на свою память, а все предложения записать. Могу поспорить, что список такой окажется не из 2х пунктов. Теперь нужно сесть и отфильтровать полученную информацию. Помните, всем не угодишь. У каждого человека своё мнение по поводу того, каким должен быть идеальный сайт, поэтому и взгляды могут кардинально различаться.
Однако при всём многообразии советов, наверняка найдётся такой, что встретился вам не раз. А это уже знак, что эта проблема наиболее актуальна и её решение приоритетнее остальных. Доверяйте своим ощущениям, в конце концов вы творец, а не все эти людишки, которые могут только критиковать ;).
Так макет выглядел на стадии тестированных улучшений.
Финал
Всё, теперь наконец мы можем отослать финальный вариант нашему дорогому заказчику. Но не сильно обольщайтесь, а скорее приготовьтесь. Работодатель он такой: вам может попасться грамотный человек, который по-достоинству оценит вашу работу, а поправки что он внесёт реально улучшат внешний вид. Но бывают и случаи, когда в ответ мы слышим: "Что за херня? Я совсем не это просил! А нука переделай всё быстро", хотя все пункты ТЗ были учтены в процессе создания, или "Моя бабушка нарисует лучше! А она у меня слепая старушка 41 года выпуска!", хотя все, кому вы показывали ваш проект были в полном экстазе.
Тогда нам ничего не остаётся кроме как... послать его нахер! Что? Вы думали я напишу "снова становиться за станок и начинать всё по-новой"? Конечно, если клиент крупный и данный заказ может реально помочь вам продвинуться, то естественно вы его не пошлёте. Но если вы не сильно дорожите заказчиком, то мой вам совет: берегите свои нервы, они очень долго восстанавливаются. Хотя не буду учить вас работать, как поступать со "всезнающими мега-дизигнерами" решать вам.
Эпилог
Вот и подошла к концу моя первая статья. Как вы могли заметить, она несла, скажем, ознакомительный характер. Я не заострял внимание на многих вопросах, которые очень хотел бы освятить. Может даже специально, должен же у меня быть туз в рукаве ;) Оставляйте свои комментарии внизу. Спрашивайте, что интересно, и исправляйте меня, если обнаружили ошибки. Буду рад любым ссылкам на интересные статьи по теме. В общем - пишите! :)
ЗЫ
Часто задают вопрос: "А что можно почитать, прошариться?". Отвечаю: универсальной литературы нет. Можете почитать Ководство Артемия Лебедева. Там много полезного, как и на Хабре. Посоветую пошариться по инэту в поисках портфолио дизайн студий. Посмотреть, что и как творят они. Творите, и всё придёт с опытом.
Всем спасибо, все свободны. :)
- Smouk
- 03.10.2011
- 12239
Комментарии
картинки то не кликабельны)
А проект ещё просто не готов, так что не хочу его палить перед выходом :)
В будущем буду делать кликабельными и большими-большими ;)
Возможно, глупый вопрос.
Кто-то практикует создание макета сразу в html/шаблон? Колонки на основе какого-нибудь 960gs.
Да, такое явление имеет место быть. Как-то даже видел статью на хабре. Такой подход имеет ряд достоинств(сразу виден результат кропотливой работы), но и недостатков (процесс планирования занимает очень большое время, потому как если захочется что-то переделать или добавить, придётся туговато) Лично для меня перевесили недостатки, потому я и работаю по старой доброй системе)
Используя drupal panels можно как раз быстро прототипировать страницы, но имхо рукой выходит быстрее
Честно не пробовал. )
Хорошая статья за ссылку тоже спасибо, много интересного!
классно написано, спасибо
У вас небольшая, я бы сказал, "проблемка" со списками... при наведении на пункт меню он меняется (в смысле как ссылка)... я думаю это не очень удобно в плане юзабилити. мне уже раз 5 хотелось нажать на них xD
Макет нарисовал, сверстал, дальше надо его повесить на движок. Как это делать?
Неплохая статья получилась. Главное что она написана с каким-то теплом что ли. Просто я к примеру прочел тонны материала по Друпал - кое-что пробовал..., может просто не увидел полезного зерна...а может так преподнесли...Три месяца пробился как головой о стену о Друпал...так и ничего не сделал. Имею знания html и CSS...понимаю как создать к примеру Rambler.ru :) А вот как это все в Друпал можно реализовать - не доходит хоть убей. Так что спасибо вам за ваш труд.
Комментировать