Все записи автора admin

k2b_zooexpress_3-2B-E2-80-94-2B-D0-BA-D0-BE-D0-BF-D0-B8-D1-8F

5 секретов работы с Заказчиком, не определившим свои требования

          Сколько творческих мук доставляют дизайнерам и руководителям проектов заказчики, которые имеют видение задачи, но не имеют сформулированных требований к дизайну. В моей профессиональной практике я сталкиваюсь со сложностями в формулировках брифа в каждом третьем проекте. Интересно, что наиболее креативные и интересные решения по дизайну интерфейсов и систем подсказок пользователю, были созданы именно в процессе работы с такими заказчиками, — в ходе обсуждений и диалогов, а так же в ходе опросов пользователей, к которым мы прибегали, когда не могли достигнуть консенсуса. 
     Многие профессионалы предпочитают отказаться от работы с людьми, которые расплывчато формулируют свои требования, активно участвуют в процессе создания дизайна путем иногда навязчивых рекомендаций и требуют вносить изменения в оформленный концепт. Позиция правильная, она позволяет экономить время и выполнять ясные задачи, делать прогнозируемые по времени и трудозатратам проекты. Однако, если вам не чужд поиск, и вы хотите расширять число клиентов, рекомендую не отсекать сразу подобные проекты. Тот опыт, который может быть получен окупится, а нестандартные решения, которые могут быть рождены в диалоге вы сможете использовать в дальнейшем, расширяя список своих конкурентных преимуществ и обогащая портфолио.
               Публикую пять секретов, используя которые вы сможете «в споре рождать истину», приходить к соглашению и приобретать лояльных заказчиков, которые будут в дальнейшем доверять вам. 
    Секрет первый. 
    Демонстрируйте не прототип макета, а концепции. 
          Итак, проект начат, задача, хоть и не детально, но сформулирована, вы предлагаете заказчику свои варианты дизайна. Допускаю, что, вы сделали макет, который, на ваш взгляд, кажется наиболее подходящим, остальные варианты лишь показывают его плюсы. Однако, заказчик не может определиться какой из вариантов он желает детально прорабатывать. Чтобы ситуация не сложилась как бесконечная разработка разноплановых драфтов, все больше расширяя выбор заказчика и тем самым затрудняя выбор еще больше, рекомендую сразу представить по 6-7 версий трех рабочих макетов. Это даст вам аргументацию для диалога, заказчик же будет иметь 18-30 вариантов, соответственно, принять одну из трех рабочих концепций ему будет проще. Вот пример двух концепций интерактивного терминала по торговле кормами для животных.

    Секрет второй. 
    Образное мышление — путь к совместному творчеству. 
              Часто заказчик не может сформулировать не только пожелания, что должно быть изображено, но даже требования к цветовой гамме. Как правило, цветовая гамма это «яблоко раздора» потому, что заказчик может требовать вносить локальные изменения, которые разрушают всю концепцию, или, например, сделать фон интерфейса веб — сайта в красных цветах логотипа, что не приемлемо, т.к. преобладание красного будет раздражать пользователя. Как профессионал, вы не будете выполнять это требование, т.к. это сделает проект неудачным, но как исполнителю вам нужно удовлетворить требования заказчика. 
                В качестве решения могу предложить попросить заказчика максимально подробно описать ассоциации, которые он хотел бы, чтобы интерфейс или логотип вызывал. Приведу пример. В ходе работы над электронным стендом для одной из епархий Русской Православной Церкви, встал вопрос о цветах дизайна. Заказчик хотел «сдержанных, аскетичных тонов». Однако использовать черный было нерационально ввиду аппаратной составляющей, — сенсорная матрица искажала бы глубокий черный, а светлые тона не нравились заказчику. Мы запросили ассоциации и получили ответ:  радость, жизнь, весна. Таким образом, было найдено нестандартное решение использовать зеленый. 

    Секрет третий.
    Используйте опросы, это недорого и эффективно. 
             Бывает, что заказчик при выборе решения руководствуется мнением сторонних людей, своих родственников, коллег, стоящих выше по служебной лестнице. Дизайнер сталкивается с трудоемкой задачей, — предложить нечто, что учитывало бы пожелания разных людей, не вникающих в суть проекта. Или, заказчик хочет, чтобы «было как у такого-то бренда», но с рядом изменений, что делает требования заведомо невыполнимыми. 
            Сузив выбор, предложите провести интернет-голосование, что выберут пользователи, и вы сможете представить аргументированный результат, ссылаясь на мнения независимых людей. 
          Например, в ходе работы над интерфейсом кассы самообслуживания встал вопрос, какого персонажа выбрать в системе подсказок. Диалог был сведен к двум персонажам — лисенку и персонифицированному пакету. Встал вопрос о том, что «Пакет» — не отражает миссию помогать пользователю, а «Лисенок» — хитрый персонаж, может вызывать недоверие. Опрос 50 пользователей определил выбор в пользу «Лисенка». 
 
   
   Секрет четвертый 
   Общайтесь! 
                 Коллеги, конечно же все мы хотим решать вопросы удаленно, но живое общение с заказчиком это путь к компромиссу. Показ концепции «из собственных рук» снижает количество возражений в два раза. Потому, что комментируя показ работы лично, вы даете заказчику пояснения, почему вы выбрали именно такое решение и как оно соответствует задачам заказчика. Высылая первые концепты на почту, пусть даже с комментариями, вы множите число вопросов. Если есть возможность личной встречи, встречайтесь, если нет — используйте общение по Skype или, как минимум, сопроводите телефонные переговоры голосом. 

   Секрет пятый. 
   «Пакет безлимитный» — как предложение сложному клиенту. 
                  Предложите заказчику вариант «безлимитного пакета», вы будете искать ему решение столько, сколько понадобится по срокам и вариантам, но он оплачивает определенную сумму. Если заказчик готов на такие условия — у вас есть поле для оплачиваемых экспериментов, если нет — согласовывайте количество концепций и объем вносимых изменений. 
   
   
   
2014-12-24-2B10-54-41-2BAdvokat72-2B-E2-80-93-2B-D0-B8-D0-BD-D1-84-D0-BE-D1-80-D0-BC-D0-B0-D1-86-D0-B8-D1-8F-2B-D0-BE-2B-D0-B4-D0-B8-D0-B7-D0-B0-D0-B8-CC-86-D0-BD-D0-B5-D1-80-D0-B5-2B-E2-80-93-2BDizkon.ru_

Дизайнер года — Гамзат Ахмедов, адвокат логотипов

Гамзат Ахмедов: «Все хотят перламутровые пуговицы, а для меня принципиально работать элегантно, в минимуме»
Еще недавно Гамзат Ахмедов работал в юридической сфере, а теперь входит в тройку лучших дизайнеров в рейтинге Дизкона, и об адвокатской карьере напоминает только его ник Advokat72. Но ему его новое поприще нравится — за 10 месяцев он принял участие в сотнях конкурсов и выиграл 15 из них. Мы учли как достигнутый результат, так и то, что Гамзат ранее дизайном не занимался, и выбрали его Дизайнером года. О том, как уйти из адвокатуры в дизайн, где черпать вдохновение и каким должен быть идеальный логотип Гамзат рассказал в интервью
Ваши работы очень разные, но в то же время просматривается что-то общее. Как бы вы охарактеризовали свой фирменный стиль?
Я охарактеризовал бы его как универсальный, здесь видите ли речь все-таки о продаже идет, не только о творчестве. А там уже кто-то хочет так, кто-то сяк, кому-то свиной хрящик (смеется), стараешься как-то угодить, но когда начинаешь по-своему работать, как ты сам видишь, часто попадаешь мимо.

А каким в таком случае должен быть идеальный логотип?
Мой идеальный логотип, как я вижу это у Майкла Джексона — такие скрещенные ноги в мокасинах – вот на мой взгляд это всем логотипам — логотип. Я бы хотел также элегантно, в минимуме работать – это принципиально. Но к сожалению редко пока так удается, даже я бы сказал пока не удавалось! (Смеется)
Ну конечно всем же хочется в глаза бросаться, чтобы были перья, стразы — получается Киркоров, а не Майкл Джексон!
Перламутровые пуговицы все хотят. (Смеется)
Какой работой вы гордитесь или какая работа была наиболее интересной?
Ох, ну вы же видели сколько было конкурсов… Мне запомнился один конкурс, для меня он был вторым, там такая зеленая ветка с вопросом. (конкурс от компании Succession.Ru – прим.ред) Вот мне понравилось там работать: и идея как-то пришла в голову сразу, я ее минут за 10 сделал и заказчик попался такой глубокий.
Где вы ищете вдохновение для ваших логотипов?
Да это такая вещь – у каждого бывает по-разному.  Берешь описание посмотришь, и на пустой страничке уже решаешь круг, квадрат или треугольник, что-то внутрь помещаешь и начинаешь кромсать то так – то так. Ну и, конечно, Google — это муза у дизайнера, я так понимаю, не я один такой.  Посмотришь по логотипам – у кого как,  необязательно, что ты копируешь или что-то похожее делаешь, наоборот, он может навеять что-то совершенно новое, дать толчок к  творчеству! Так что Google  - спасибо! Это моя главная муза, я не стесняюсь! (смеется)
Вам помогает пошаговая схема Дизкона где заказчик описывает, что он ждет от логотипа?
Ну конечно хотелось бы, чтобы заказчики как-то подробнее описывали свои предпочтения, потому что некоторые вообще как Зоя Космодемьянская. Лучше бы конечно, если бы заказчики комментировали глубже, звездочками отмечали общее направление для дизайнера, а то там разброд и шатание! Посередине свалки заказчику тоже сложно будет что-то отыскивать.
Какие преимущества дает вам Дизкон в работе? Какие новые возможности?
Вот регистрируюсь на другом сайте для дизайнеров, как в каком-то лабиринте после Дизкона, и там неудобно и тут неудобно, я Вам серьезно говорю без подхалимажа, на Дизконе интерфейс и общение с заказчиком куда проще, на других я буксую, и работа как-то не идет!
Когда Дизкон появился вы с недоверием отнеслись к новой площадке или наоборот решили, что это новые возможности?
Вы знаете я работал по-другой специальности, а тут стало интересно, я набрал  «как заработать в интернете» и попался Дизкон, это было еще в феврале.  Я тогда понятия не имел, что такое логотип, с чем его едят, как  его рисуют, для меня логотип это было что-то вроде упаковки и там что-то сверху. Потом на Дизконе я стал выяснять, стал интересоваться, что это такое, основы, заглянул в разные источники. Художник я конечно никакой, если ручкой рисовать, но компьютер это заменяет!
Вы говорите, что пришли из другой сферы, ваш бизнес был как-то связан с дизайном?
Даже не бизнес, я вообще-то в адвокатуре работал, закончил юридический, но потом судьба меня свернула с этой дороги, работы не было. Ну я не то чтобы на хлебе и воде конечно, просто нашел альтернативный способ и мне такая работа нравится, я сейчас хочу прокачаться, до конца понять, изучить программы и посмотрим может сам что-то затею, но вот Дизкон я все равно оставлю! (смеется)
То есть можно сказать, что Дизкон вам помог?
Можно сказать, что Дизкон во мне открыл что-то творческое вообще!
Очень часто фрилансеры не воспринимаются всерьез, как вы считаете, у фриланса есть будущее? И помогают ли такие сайты ему развиваться?
Не вижу тут какой-то конкуренции. На мой взгляд это два разных рынка. Та клиентура, которая приходит в определенные агентства и для которой важно самоутвердиться, я мол именно это агенство выбираю, а не в какое-то там подешевле – к фрилансерам явно обращаться не будет. То, что вижу я: есть например дизайнер, занимается профессионально этой работой лет 15, за это время у таких профессионалов теряется полет, такая знаете девственность, идеи которые идут из души. Начинается механика – стабильная, на 4+, но все равно чего-то не хватает. А у фрилансера, особенно который только начинает, в таком расцвете, как я (смеется), я бы сказал еще что-то теплится, мозговые ресурсы еще не израсходованы, это другие совершенно ресурсы! Есть агентства которые родились, расцвели и засохли, а фриланс будет всегда – это рынок. Наверное так.
А чтобы вы посоветовали дизайнерам, которые не уверены стоит ли участвовать в конкурсах на Дизконе или считают, что это не оправдано?
Я когда первый раз участвовал в конкурсе, я думал: ну как у нас, не может же все гладко, обязательно сейчас какой-нибудь обман, лоховство. Смотришь комментарии, спрашивают «а что там правда деньги дают», я их понимаю, самому не верилось, а когда мне прислали выигрыш я, честно сказать, был приятно удивлен. Надо бы как-то это продвинуть – что бояться нечего – и здесь реально дают деньги за работу! Если у тебя есть время, если ты чувствуешь, что ты можешь попробовать, ну почему нет  - это же не мешки таскать! Фотошоп попробовать каждый может, у кого-то получается, у кого-то нет. Мы вот в рейтинге рядом с Маратом, (Марат Исмагилов – прим ред.)мы и помимо Дизкона с ним общаемся – он в здравоохранении работает, в Министерстве. Ну как говорится, где Министерство здравоохранения, а где Дизкон? Ну и посмотрите, что он делает – он убивает просто (смеется).
А как вы считаете в связи с нынешней кризисной ситуацией изменится ли как-то ситуация на сайте? Будет ли меньше заказов?
Не думаю! Во-первых, у вас цены несмертельные, во-вторых, как раз в этот период, как мне кажется, люди наоборот начинают дрожать за бизнес, начинают затыкать щели своей лодки, где что протекает, и в том числе, если у них логотип непривлекательный  - они тоже стараются как-то это исправить! Но в целом 50/50  - ситуация непредсказуема конечно.
 Беседовала Алина Мартьянова
1402400570small__3519404549

Шесть золотых правил дизайна в ИМ

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

Большинство сайтов создаются с целью превратить посетителей в клиентов, но эта цель малодостижима, если процедура покупки товара и оформления заказа плохо реализована.

Потенциальный покупатель, зайдя на сайт магазина, хочет найти серьезного партнера, который знает, что предлагает и как это делать.

Честно говоря, я сам не раз уходил с сайта, не купив нужный товар, только лишь потому, что простая покупка превращалась в ненужный допрос, отсутствовала навигация или индикация шагов оформления заказа.

Если вы не хотите терять потенциальных покупателей, то вам стоит всерьез задуматься и пересмотреть свой подход в отношении дизайна вашего интернет-бизнеса.

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

1. Делайте корзину проще



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

Несмотря на бесчисленное множество всяких элементов оформления, например значка корзины, разнообразных надписей на кнопке и т.д., в первую очередь необходимо сделать так, чтобы ваша кнопка с иконкой или надписью «Заказать» была заметна. Самое лучшее решение — когда кнопка или иконка корзины попадается нам на глаза в течение первых 5 секунд пребывания на странице с товаром. Для этого кнопку заказа можно разместить, например, в правом верхнем углу.

Также необходимо учитывать, чтобы кнопка корзины имела нормальный размер —  не была слишком большой или, наоборот, слишком маленькой. И не стоит здесь перегибать палку с дизайном и различными наворотами — это делу не поможет. Просто запомните, что кнопка должна быть максимально простой и заметной.

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

2. Детализация покупок

Когда дело доходит до покупок, большое значение имеет то, как представлена информация о товаре —  это описание продукта, фото и видео. На самом деле 92,6% покупателей принимают решение о приобретении товара именно на основании визуального представления товара.

О чем это говорит?

Это говорит о том, что оформление и представление товара имеет довольно важное значение. Фотографии, которые вы используете, либо способствуют продаже, либо наоборот отталкивают от покупки, не говоря уже об их отсутствии.

Чаще всего потенциальный покупатель захочет добавить товар в корзину, если он видит несколько фотографий продукта.

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

Кроме фотографий и видео вы также должны быть уверены в том, что каждому товару соответствует название и описание. Клиенты хотят знать что они покупают, и что это именно то, что им нужно. Это фактор, который поможет вызвать доверие со стороны покупателя.

Наряду с описанием товара нужно предусмотреть такие опции, как выбор цвета, размера и другие параметры.

Корзина должна быть построена таким образом, чтобы была возможность удалять и изменять количество товаров.

Что касается отображаемой информации — помимо цены товара должна указываться цена доставки и итоговая сумма, включающая налоги.

Вы же не хотите преподнести сюрприз клиенту скрытыми ценами и тарифами — это верный путь избавиться от покупателя.

3. Предоставьте пользователю возможность настроек



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

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

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

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

4. Внушить доверие



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

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

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

5. Соблюдайте линейность процесса покупки

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

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

Полезным будет наличие индикатора, который показывает, на каком этапе процесса покупки находится клиент.

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

6. Используйте простые формы



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

В то же время, есть основные моменты при создании форм, которые всегда должны быть реализованы на практике.

Каждое поле формы должно иметь описание и, если необходимо, пояснение. Это легко сделать, добавив в конце каждого поля интерактивный вопросительный знак, при нажатии на который будет появляться детальная информация.
Названия полей должны быть однозначными и понятными, в противном случае необходимо добавить разъяснения, чтобы избежать двусмысленности или непонимания.

Убедившись в том, что ваши формы имеют правильные названия и описания, нужно также удостовериться в том, что поля расположены в логическом порядке. Все должно быть последовательно и логично — сначала контактная информация, затем информация о доставке и платежная информация. Это стандартный порядок, знакомый всем покупателям интернет-магазинов.

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

Вывод

Несомненно, принципов, которыми стоит руководствоваться при оформлении интернет-магазина, гораздо больше чем 6 представленных выше, но, следует отметить, что приведенные рекомендации, безусловно, помогут задать правильное направление при разработке страниц оформления заказа.

Оригинал статьи на англ.: http://www.sitepoint.com/ecommerce-checkout-design-fundamentals/ 

header

Как создать простой эффект «схлопывания» шапки сайта

Две недели назад я размещал статью, в которой мы посмотрели 25 примеров сайтов с так сказать «умными» хедерами. Общий смысл заключался в том, что при прокручивании, заголовок страницы и баннер постепенно сокращали свою видимую область и в итоге исчезали. В этой статье я предлагаю разобрать как сделать такой классный эффект, который мы сможем использовать при разработке своих сайтов.

Эффект схлопывания/исчезновения хедера
На самом деле, как говорится все гениальное — просто. Данный эффект создается всего лишь двумя строками кода в CSS, а именно:
1. Нам необходимо зафиксировать позицию элементов header и banner с помощью свойства position:fixed.
2. И задать значение свойства z-index, которое и позволит получить такой вот необычный эффект «схлопывания» шапки сайта при прокручивании веб-страницы.
Итак, как это делается.

Начнем с того, что зафиксируем позицию шапки сайта в CSS. Также, хочу заметить, что подобные эффекты на сайтах лучше всего смотрятся, когда изображение на сайте занимает всю видимую область, поэтому первым делом нам необходимо установить значение ширины для хедера 100%: width:100%. Чтобы зафиксировать шапку нам необходимо прописать для нее свойство position: fixed. Подобное определение стиля позволит элементу оставаться на своем месте, в то время как остальная часть страницы будет прокручиваться «под нее»:
header {
            height: 100px;
            background: #bdbdbd;
            position: fixed;
            width: 100%;
            z-index: 10;
}
Следующим элементом в коде сайта у нас идет блок с баннером. Именно этот блок div banner у нас и будет восприниматься «схлопывающимся», хотя на самом деле, ничего необычного с ним мы не делаем. Положение этого блока нам также необходимо зафиксировать с помощью свойства position: fixed;. Для того, чтобы блок banner не прилипал к верхней части окна браузера зададим ему отступ от верхнего края в 100рх:
#banner {
            width: 100%;
            height: 300px;
            position: fixed;
            top: 100px;
            background: #707070;
}
Итак, мы подходим с завершающей стадии. Давайте окончательно зададим стиль для последнего блока content.
Первые два элемента header и banner у нас зафиксированы с помощью свойства position: fixed и стоят на своих местах. Поэтому для блока content нам необходимо задать относительное позиционирование и задать небольшой отступ от верхнего элемента.
#content {
            width: 100%;
            position: relative;
            top: 400px;
            background: #ebebeb;
            height: 1500px; /* Demo purposes */
}
И наконец, для получения эффекта «исчезновения» зададим свойства z-index для всех элементов. Для шапки сайта z-index должен иметь самое высокое значение по сравнению со всеми элементами — за счет этого, шапка сайта у нас остается все время видимой. А z-index для banner должен иметь самое низкое значение. Т.е., если резюмировать, то наша область с контентом content должна иметь значения свойства z-index, большее чем у баннера (за счет этого он его и перекроет), но меньшее чем у шапки (это позволит шапке оставаться все время видимой).
После того, как мы настроили позиционирование и прописали все свойства для наших элементов, можно заняться наведением красивостей, размещением текста и добавлением другой полезной информации. В частности, в данном примере, я добавил немного текста и прописал фото ночного неба над городом в область с баннером, взятое с Flickr (отдельное спасибо Кевину Дули!) — его я прописал в свойстве background и добавил свойство background-size: cover; для того, чтобы изображение заняло всю видимую область страницы в браузере.
Оригинал статьи: http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect 

01

Оформляем дизайн канала на YouTube

Если у вас есть свой канал на YouTube и вы не хотите мириться с невзрачным оформлением, которое предлагается по умолчанию, с помощью данного урока мы решим эту проблему и создадим свою крутую тему.
Для примера мы будем создавать дизайн для оформления  моего нового игрового канала в темных тонах с использованием атрибутики, присущей военной тематике.
Как и большинство социально направленных сайтов YouTube позволяет настраивать оформление вашей страницы. Для того, чтобы наш дизайн максимально подошел по размерам для своей работы мы будем использовать шаблон. Для этого, скачайте шаблон, который я уже разработал ранее для одного из своих проектов.
  
Для фона мы возьмем бесшовную текстуру «камуфляж». Текстуру вы можете скачать с сайта Blog.SpoonGraphics

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


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


Зажимаем клавишу CMD и щелкаем по слою Palettes в нашем шаблоне для того, чтобы создать выделение. Заливаем выделение на слое Palettes черным цветом и немного понижаем прозрачность, чтобы сквозь черный цвет немного просвечивался наш фон с текстурой.


Далее, создаем новый слой, кликаем правой клавишей мышки на рамке выделения и из контекстного меню выбираем Stroke — т.е. залить обводку. Устанавливаем толщину нашей обводки 1рх и задаем белый цвет обводки. Нажимаем ОК и меняем режим наложения для нашего слоя на Soft Light.


Используя мягкую резинку с непрозрачностью 50% случайным образом стираем получившуюся обводку, для усиления эффекта гранжа нашего меню.

Поскольку мы выбрали военную тематику оформления нам понадобятся пушки! Огромное количество стволов разного калибра и убойной силы. Вы можете найти фотографии оружия на любом известном вам фотостоке. Если вы не хотите искать или у вас нет времени, можете скачать готовый шаблон постера, который я делал для урока на сайте Expendables Movie poster tutorial и взять оружие из этого файла.


Открываем каждое изображение, которое нам понравилось, обесцвечиваем его и выделяем волшебной палочкой (Magic Wand) белые области вокруг объекта.

Далее идем в Image — Selection — Contarct и выставляем значение в 2рх. В итоге, область выделения у нас расширится на 2рх, в результате чего, мы сможем избавиться от белого фона начисто, наш экземпляр пистолета, автомата или ножа станет чистым, без каких-либо ненужных пикселей. Удаляем выделенные белые пиксели.

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

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

Маленькие виды оружия такие как пистолеты и ножи также дублируем, поворачиваем и размещаем в нижней части нашего «крыла» для придания больше выразительности.

Таким образом, ножи должны закончить наше крыло в нижней точке, чтобы создалось впечатление крыла, развернутого на 180 градусов. «Пробелы» между объектами нас тоже не устраивают, поэтому при необходимости надо будет надублировать еще несколько объектов, чтобы закрыть все пустоты.


Когда «крыло» будет полностью готово, группируем все объекты и перетаскиваем в наш шаблон с YouTube темой.
Подгоняем по размеру и помещаем позади главного окна с контентом. Желательно также учитывать различные разрешения мониторов, которые могут быть у пользователей — посетителей вашей страницы. Для этого ориентируемся на разноцветные вертикальные полоски. Для 100%-й уверенности, что наша картинка будет видима для всех пользователей, ориентируемся на область бежевого цвета.


Для усиления эффекта, также можно затонировать наше крыло холодным синим цветом.

Дублируем нашу группу, отражаем по горизонтали и получаем второе крыло.


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

Кадрируем окончательно наше изображение, и сохраняем для Интернета используя функцию Save For Web. Сохраняем наше изображение в формате JPEG. При этом, настраивая качество конечного файла, не забываем, что максимальный размер файла, который можно загрузить на YouTube — 256кБ.

Готово! Заходим в свой профиль на YouTube и выбираем «Редактировать». Загружаем наше изображение в качестве фона и снимаем галочку «Повторять (замостить)». Далее настраиваем фон, текст, цвета ссылок и т.д. Окончательно не забываем выставить прозрачность родного фона YouTube на 100%, чтобы ваша тема, которая будет лежать снизу стала видна.

Посмотрите как получилось это у меня на моем канале http://www.youtube.com/chrisjspooner. Обратите внимание, как отлично смотрится мой шаблон, особенно для игрового портала, по сравнению с обычным YouTube’овским контейнером.

Посмотреть окончательный результат.

Оригинал статьи: http://line25.com/tutorials/how-to-design-a-custom-youtube-background 

Краудсорсинг дизайна – качественный, быстрый и доступный результат

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

КРАУДсорсинг является одним из наиболее эффективных систем реализации задач. Являясь логичным и органичным развитием аутсорсинга, он позволяет достигать качественного результата в предельно короткие сроки при невысоких затратах.

Итак, о чем этот краудсорсинг:
·       Реализация проекта осуществляется большой группой независимых друг от друга специалистов;
·       Как правило, все работы проводятся дистанционно, что позволяет использовать профессионалов со всего мира;
·       Возможность привлечения неограниченного количества людей позволяет реализовывать даже сверхмасштабные проекты в минимальные сроки;
·       Заказчик оплачивает только конечный результат, удовлетворяющий его запросы.

Наиболее ярким примером успешного краудсорсинг-проекта является Википедия. В нем на июнь 2014 г. приняли участие 21.5 млн авторов.

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

Специализированные краудсорсинговые площадки для дизайнеров, как DizKon в рунете, или http://99designs.com/ на Западе, предлагают возможность заказа дизайна сайтов, фирменного стиля, визиток и любых других графических продуктов.

Главное преимущество для заказчика в краудсорсинге дизайна – конкурсный формат, когда заказчик публикует конкурс, указывая свои требования и бюджет, после чего ему необходимо только принимать варианты.

Быстрый рост Dizkon, как по числу дизайнеров, так и количеству публикуемых конкурсов, говорит о том, что технология краудсорсинга в дизайне будет востребована и в России, и мы увидим множество классных работ, выполненных, по сути, коллективно.