Примеры работ Студии Артемия Лебедева.

[web-design]

Все вы видели (кто-то восхищается, кто-то плюется), но ниразу не обсуждали?
Примеры работ Студии Артемия Лебедева.
Желающие высказаться, добро пожаловать в комментарии

Смотреть работы (без превью)

Сайты студии Лебедева

@темы: Известные люди, Работы

---

23 совета по фрилансу

[web-design]

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

1). Соблюдайте режим.

Заставьте себя засыпать в полночь и вставать в 8:00. В 9:00 вы должны быть готовы начать работать с ясным сознанием. Прежде всего, составьте ваш to-do лист, в котором перечислите те вещи, которые нужно сделать за сегодня.

2). Убейте IM-месенджеры.

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

3). Будьте реалистом, а не оптимистом.

Вот - хороший пример:

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

- “Плохое” Вы: Нет, это плохая идея, что это даст?

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

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

- Вы: Но это будет хорошей формой рекламы, она вежлива и целенаправлена.

- “Плохое” Вы: Вы псих? Вы потратите 2 дня, делая этот проект, вы потратите деньги на распечатку и рассылку рекламы людям, которые уже являются вашими клиентами?

- Вы: Возможно, вы правы. Я думаю, что я только пошлю им электронную почту.

- “Плохое” Вы: Это гораздо лучше!

4). 25% клиентов не знают, чего хотят.Например, большинство людей хочет иметь вебсайт по многим ложным причинам. Поскольку их конкуренты сделали вебсайт, потому что они читают на журнале, что они должны иметь вебсайт. То же самое касается других отраслей, таких, как издания, графического дизайна и маркетинга. В результате они могут в любое время решить, что они хотят что-то совсем другое, или даже вообще отказаться от ваших услуг. Если они заплатят немного денег, им будет трудней отказаться от заказанного проекта.

Не тратьте ни секунды на проект, за который вы не получили деньги (конечно, если это не Demo-версия или предварительный просмотр). Я беру 30% заранее и большинство людей, которых я знаю, берут 35 %, таким образом, 25% должны быть минимумом для каждого профессионала, который уважает себя.

5). Никаких терминов.Если вы попытаетесь объяснить кому-нибудь неосведомленному, почему они должны использовать MySQL вместо PHP, ASP, скорее всего, что они ничего не поймут. Представьте, что вы клиент и слушаете что-то вроде этого: We use the best γλώσσες προγραμματισμού, and are in the position to offer great υποστήριξη με τη χρήση καινοτόμων τεχνολογιών όπως η μπλα μπλα και η μπλα μπλα που μας επιτρέπει να ενσωματώνουμε μηχανισμούς ασφαλείας. Вот-вот!… Вы угадали, это по греческому Вместо технологий и методологии надо говорить о преимуществах и результатов. Это то, что им действительно нужно услышать, это то, что вы должны предоставить им.

6). Будьте готовы остаться в одиночестве.Работа дома в два раза сложнее, чем в офисе. Будьте готовы потерять связь с друзьями и подругами, но знайте, что когда-нибудь, так или иначе это одиночество закончится.

7). Курение и еда.

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

8). Будьте готовы терпеть неудачу.

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

Если клиент звонит вам ночью или в воскресенье утром, с просьбой устранить проблему, скажите ему вежливо, чтобы он перезвонил завтра утром. Если они настаивают, скажите что не можете сейчас разговаривать и положите трубку. Если они начинают сердиться, скажите им на следующее утро, что вы не можете работать 24 часа и 7 дней в неделю. Если они продолжают настаивать, рассмотрите вариант «перестать работать на этого клиента». Клиент, который хочет, чтобы вы работали 24/7, ничем не лучше чем босс.

9). Очистите ваши контакты.

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

10). Будьте готовы к плохому отношению.

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

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

11). Планируйте заранее.

Полный план должен ответить, по крайней мере, на следующие вопросы.

* Каковы ваши навыки?

* Какие проекты, продукты и услуги вы можете предложить?

* Какой из этих продуктов и услуг даст больше всего денег?

* Какие навыки вы не имеете, но позволили бы вам предлагать намного лучшие услуги?

* Сколько из вашего рабочего времени вы можете посвятить в приобретении этих новых навыков? Не спешите, чтобы ответить «2 часа каждый день», потому что вы это не сможете.

* Каковы ваши расходы и ваши источники дохода? Спланируйте бюджет в течение следующих 6 месяцев и пытайтесь обновлять его каждый месяц.

Вы должны планировать свои неудачи и дополнительные расходы исходя из вашего опыта. Если у вас нет опыта попытайтесь рассчитать по следующим правилам. 1) 20% ваших проектов будут терпеть неудачу. 2) Добавьте 30% к вашим расходам. 3) 80% ваших идей никогда не будут достигать зрелой стадии производства.

12). Не держите в ваших карманах крабов (греческое выражение, означающее кого - то кто плохо обращается с деньгами).

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

13). Не отдыхайте за компьютером.

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

14). Определите игровой компьютер.

Определите компьютер для работы и удалите все развлечения из него. К развлечениями относятся игры, забавные видео, winamp и т.д. Если Вы любите видеоигры, попробуйте держать их на другом компьютере или даже купите Nintendo wii, если Вы не можете позволить себе другой PC.

15). Организуйте себя.

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

16). План аварийного восстановления.

А если ваш жесткий диск сломался? Что если ваш компьютер просто прекратил работать? Что если ваша широкополосная сеть прекратила работать?

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

* Сделать список того, чего надо делать резервные копии.

* Сделайте резервные копии.

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

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

17). Не используйте наушники.

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

18). Заботьтесь о здоровье.

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

19). Разделяйте ваш R от D

R&D = Научные исследования. Очень важно держать себя информированным о новых технологиях связанный с вашей работой. Постарайтесь развивать свои навыки в первой половине дня, а исследования – во второй половине дня.

20). Не бойтесь тратить деньги на программное обеспечение.

Бесплатное программное обеспечение и с открытыми исходными звучит круто, но это - не всегда лучшее решение. Если вы полагаетесь на программу для вашей работы каждый день, вы должны убедиться, что она является лучшей. Если коммерческая программа стоит 100$, но бесплатная не столь хороша – купите коммерческую программу и сэкономьте на рабочих часах.

21). Не привлекайте третьи лица для выполнения работы.

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

22). С.С.В.У

Каждые три месяца делайте «С.С.В.У» анализ. «С.С.В.У» расшифровывается как «Силы, Слабости, Возможности, и Угрозы».

23). Прекращайте читать статьи “Лучшие советы по фрилансу”.

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

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

Источник

@темы: Фриланс

---

Мужская неделя - стиль: Джинсовый сайт

[web-design]

Рисуем

Часть 1:

Привет народ! Сегодня мы будем творить сайт посвященный тому о чем мечтали ваши родители, а может и кое кто из вас. Их любили миллионы и ненавидела советская власть. Ради них любой советский подросток был готов на все. Да это они - джинсы. Это сейчас джинсами уже никого не удивишь, но вот в совковое время... Хорошие джинсы были на ряду с магнитофонами и видеокамерами. Ну что отдадим дань культовой одежде? Тогда запускаем фотошопу, если еще не запущена и приступаем. Для начала создаем новый документ размером 766 х 700. Потом можно будет перегнать с небольшим усилием в 1024 х 768, но мне привычней работать так. Тем более, что максимальное разрешение, которое поддерживает моя видюха это 1024 х 768 Ну да ладно черт с ней. Берем нашу основу это кусок равномерной джинсовой материи:

Делаем из него группу "BG". Слой именуем. как "base".
- Создаем новый слой "clouds". Цвет 1=174e81, цвет 2=1f466a. Топаем в Filter>Render>clouds. Затем два раза difference clouds(находятся там же во вкладке filter>render)
- Меняем режим наложения нашего "clouds" слоя на Overlay, а прозрачность на 75%.
- Создаем текст. Шрифт: XBAND rough(но можно естественно на ваше усмотрение). Размер: 96 рх. Сглаживание отсутствует. Сначала я написал"JEANS", а затем"FASHION". и раставил их в хаотичном порядке. Затем растиризировал и поставил прозрачность на: 35%
- На последок я взял газету. Немного повернул, скопировал и слих их в один слой "gaz". режим наложения: Multiply, прозрачность: 55%. На этом создание фона я закончил. У меня вышло следующее:


Одна голова - хорошо, а две - это уже мутация...

- Создаем новую группу "Header"
- Берем такую картинку и выделяем следующую область:

- Делаем слой через копирование(Ctrl+J) и перетаскиваем на наш дизайн
- Копируем слой сдвигаем в лево и подправляем недостатки с помощью "Clone stamp"
- Скопируем группу "Header" и переименуем в "Footer". Поместив ее в низ документа и инвертировав по вертикали скроем ее.
- С другой картинки вырезаем бретельки(или черт, как там они называются)

и ставим их поверх основной линии, приблизительно подогнав по яркости. Именно по яркости, так как цвет нас не интересует. С помощью Blending Options бросаем

тень. И применяем Filter>Sharpen>Sharpen cливаем с основным куском хэдэра. Назовем слой "header base" и теперь выставляем для него настройки:

- Копируем группу "BG". И копию сливаем в один слой. Назовем его "mask". Через Ctrl+G сгрупируем его со слоем "header base", режим наложения сменим на: Multiply, а прозрачность на 75%
- Теперь настроим яркость слоя "header base" так, что бы цветовой тон хэдэра соответсвовал фону. Многие могут сказать, что стежков не видно, а без стежков джинсы не цикави. Что ж сделаем стежки. Некоторые могут сделать это фильтрами, но я предпочитаю вручную.
- Однако перед этим что бы не делать лишней работы сначала поставим кожанную бирку:

- А вот теперь займемся стежком. Создаем прямоугольник цветом=e49515 и размером 2 рх х 4 рх. Растеризируем. выделяем половину и делаем ее темнее, что бы придать стежку шва объемности. И теперь весело и натхненно копируем стежок туда, где он должен стоять в реале(да знаю я, что я извращенецsmile.gif) Закончив стежкоипопею переимменовываем слой со стежками в "header seam"
- Кое где зятеняем "Burn tool" с exposure: 25%, что бы шов не выглядел просто однородной линией.
- Должно выйти примерно так:

- "Пришиваем" бирку по периметру темно-коричневой ниткой и заставляем отбасывать тень:

- В качестве логотипа я взял значек "Техаских Рейнджеров" и заретушировав надпись добавил свою. Настройки для логотипа:


- Затем я сделал надпись на бирке и слоган. Что бы надпись выглядела, как бы вдавленная я применл к ней следующие настройки:


Та ногами его, ногами...

- Займемся нашим "footer"ом. Как ты мой дорогой друг уже догадался нам надо применить к нашему футеру маску и подогнать яркость, так же как мы сделали и с хэдэром. Затем кинуть шов:


Видимость ноль, иду по приборам...

- Вырезаем кармашек, тянем на наш дизайн и называем "pocket":


- Применяем к нему наш фирменный прием "маска/подбор яркости", что бы не слишком рознился с фоном.
И делаем строчку.
- Затем я взял такую вот байду:

и сделал нашим кармашкам две клепки. Настройки для кармана:


- Под слоем "pocket" создаем скругленный бокс, назовем его "button".
- Скопируем часть нашей бирки и сгруппируем ее со слоем "button". Теперь сливаем в один слой, применив эффект не большей "Inner Shadow".
- Наконец копируем текстовый слой заголовка. Немного уменьшаем и пишем "Home"
- Объединяем весь этот беспредел в группу "home". Копируем четыре раза, меняя названия и сдвигая вниз. И четыре кармана с кнопками объединяем в группу "navigation":


Tampax Inside...

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

- Опять копируя этот кусок и где нужно подправляя "Clone stamp" мы должны получить такой вот результат:

- Применяем наш прием "маска/подбор яркости", ставим по углам рамки четыре клепки.
- Берем картинку с молнией:

где вырезаем отмеченную область. И путем копирование делаем молнию под только что созданой рамкой.
- Еще ниже зубцов создаем бокс, называем его "content base". Вырезаем из бирки кусок побольше и групируем с "content base", с помощью "Clone stamp" увеличиваем

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

Вот пожалуй и все. Надеюсь вам понравилось. Удачного всем джинсового креатива!

Автор: Ghost201087
Источник

@темы: Уроки, Web-дизайн

---

Работа для web-дизайнеров

[web-design]

Уважаемые участники сообщества, размещены новые ссылки.
Начинающие могут попробовать свои силы ради портфолио, а "бывалые" получили возможность пополнить свой запас ссылок на фриланс-порталы. Ссылки на порталы фрилансеров

Начинающие веб-дизайнеры-фрилансеры, ни один заказчик не будет с вами иметь дело, если у вас нет своего портфолио с ВАШИМИ работами. Не обязательно, чтоб это были существующие сайты, сделайте разные варианты дизайна сайтов и разместите в вашем портфолио на одном из порталов фриланса, и на него будете давать ссылку заказчику, когда предлагаете свои услуги. Творческих успехов!

@темы: Работа, Ссылки

---

[Ктулхова бабушка]

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

@темы: Web-дизайн, Работа

---

Новости Интернет

[web-design]

Создан указатель оцифрованных средневековых рукописей


Университет Калифорнии в Лос-Анджелесе (UCLA) создал каталог оцифрованных средневековых рукописей (Catalogue of Digitized Medieval Manuscripts), который содержит ссылки на доступные через интернет старинные манускрипты. Искать нужные книги можно по названию, автору, стране, языку, шифру.
Как сообщает издание Science Daily, в настоящее время указатель включает в себя ссылки примерно на 1000 книг из 59 библиотек мира. Они принадлежат 193 авторам и написаны на 20 языках.

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



Высший арбитражный суд введет электронное правосудие

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

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

Тем не менее, по его словам, Высший арбитражный суд уже на протяжении полутора лет проводит эксперимент по внедрению электронного документооборота в Екатеринбурге и в Санкт-Петербурге. Пилотный проект себя оправдал, и новая система скоро буде введена в Московском округе.

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

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

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

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

Милиционеры не нашли в Белоруссии ни одного порносайта

В белорусском сегменте интернета не найдено ни одного порнографического сайта, сообщает РИА Новости. Об этом заявил начальник управления по раскрытию преступлений в сфере высоких технологий МВД Белоруссии Игорь Черненко. По его словам, большинство порнографических ресурсов расположено на серверах, которые находятся в других странах, например, в США.
Черненко также подчеркнул, что в 2008 году в рамках международной операции "Торнадо" на территории Белоруссии удалось привлечь к уголовной ответственности 11 членов преступной организации, которые были причастны к изготовлению, распространению и рекламе детской порнографии. Всех их приговорили к различным срокам лишения свободы.

Отмечается, что благодаря содействию со стороны МВД Белоруссии, в Италии, Румынии, Ливане и на Кипре удалось возбудить уголовные дела в отношении 110 человек, занимавшихся хранением и распространением детской порнографии.

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

Источник

@темы: Новости

---

Профессиональная графика

[web-design]

Формируем стиль проекта / Цвета, шрифты, основы композиции

Ведущий дизайнер MTV Россия

Цвета, шрифты, основы композиции

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

От тебя требуется создать настолько удачную композицию, чтобы заказчик сказал «wow!» или хотя бы «неплохо!». Только в таком случае тебя посетит чувство выполненного долга: твой дизайн не так уж плох, а может, даже гениален! Что нужно для всего этого?

Во-первых, жди вдохновения (это как будто в тебя что-то вдохнули) . Не было, а тут раз - и появилось. Срочно начинать работу! Вдохновение надолго не задерживается. Один мой друг, он же известный дизайнер, говорит так: "Начинай работу не отходя от кассы". Послушай хорошую музыку, полистай дизайнерские книжки, зайди на www.computerlove.net - позволь всемирному культурному наследию заронить в тебя семя. При хороших условиях взойдет очень быстро.

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


Шрифт

Любой дизайнер, начинающий работу над новым проектом, сталкивается с проблемой выбора подходящего шрифта. Надо обязательно удивить всех красивыми буквами! Хочется сделать так, чтобы внешний вид сайта рассказывал зрителю намного больше, чем можно на нем прочитать. Большие и красивые буквы завораживают и влекут к себе как сирены Одиссея. В окне выбора шрифтов перебираешь сотни и тысячи гарнитур, ищешь самый подходящий, каких обычно набирается с не робкую дюжину. Как раз с этого и начинаются ошибки начинающих дизайнеров.

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

Рецепты красоты

Во всей композиции лучше использовать не более трех гарнитур (шрифтов).

Заголовки лучше писать "рублеными" шрифтами (Helvetica, Pragmatika, Arial, Helios). Если есть желание использовать декоративный шрифт с завитушками и вензелями, то используй не больше двух-трех слов, иначе у зрителя возникнут трудности с чтением. Они даже могут нажать на смертоносный крестик в правом верхнем углу браузера, и ты распрощаешься с этими пользователями навсегда.

Если текста много, пиши гарнитурой с засечками. Их еще называют "антиквы" - Times New Roman, Garamond, Journal, Baltica и т.п. Засечки помогают следить за словами по строкам и не сбиваться. Кстати, для этого можно использовать и рубленные шрифты: страничка будет смотреться прогрессивнее и свежее.

Не стоит деформировать шрифт. Поверь, это неблагодарный труд. Все, что тебе простит разработчик гарнитуры - это изменение расстояния между буквами (tracking), между строчками (leading), а также более плотную подгонку отдельных букв друг к другу, что допустимо в заголовках (kerning). Последнее как раз и отличает макет, сделанный профессионалом, от любительского. Буквы - самое совершенное изображение из тех, что придумал человек, и они заслуживают того, чтобы за ними нежно ухаживали.

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

Цвет

Ты можешь сколько угодно спорить со мной, но чаще всего закрывают после пяти секунд просмотра ту веб-страницу, дизайн которой выполнен на основе ярко-красного, зеленого или желтого фона, какой бы интересной она ни была. Глазное дно находится в катастрофической близости от мозга, который еще может пригодиться . То, что мы видим на экране монитора, является всего лишь комбинацией трех цветов: Red (красный), Green (зеленый) и Blue (синий). Задача дизайнера - уговорить всех троих хорошо поработать в коллективе и, как следствие, порадовать глаз зрителя. Для этого надо выяснить, что на самом деле любит этот "Мистер Глаз".

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

Рецепты красоты

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

Цвета, лежащие друг напротив друга (дополнительные), например, красный и зеленый, вряд ли уживутся на одной территории. Дело в том, что у них принципиальное противостояние вот уже несколько миллионов лет, примирить их - утопия. Но и утопия имеет право на существование, если ты задался целью создать дизайн в стиле "панк".

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

Композиция

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

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

Целостность. Композиция будет удачной, если она не развалится на части и все ее элементы станут участниками единой команды. Как только возникает объект-конкурент, угрожающий развалить все построенное, то появится возможность прибегнуть к еще одному инструменту - балансу.

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

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

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

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

Стиль

Существует огромное количество стилей, в рамках которых уже существуют правила построения композиции (когда нужно "сделать дизайн в стиле…"). Перечислять стили можно бесконечно, вот некоторые: корпоративный, традиционный, классический, хай-тек, гламур, панк, кибер-панк, стим-панк, трэш, винтаж, готика, дарк, диско, хип-хоп (граффити), хэви-метал, манга, техно, диджитал, электро, фьюче, барби, ретро 20-х, ретро 40-х, ретро 60-х, ретро 70-х, ретро 80-х, ретро 90-х (уже?!), милитари, родченко, дэвид карсон, рейв, прогрессив и другие.

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

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

Любое ретро делается очень просто: смотришь на оригинальные образцы и повторяешь, смешивая с современными элементами. Многим очень нравится копаться в устаревших формулах. С помощью них можно сделать все быстро, не напрягаясь, вызвав у зрителя ностальгию. Рецепт прост - вычисляешь тот период, когда представителям целевой аудитории было 5-15 лет от роду, и создаешь ретро-дизайн в стиле той эпохи. Успех гарантирован.

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

Напутствие

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

Полезные ресурсы

ТИП: WWW

www.computerlove.net

www.newstoday.com

www.designiskinky.com

www.surfstation.lu

www.k10k.net

Мнение эксперта

Михаил Воробьев ([email protected]), профессиональный дизайнер

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

"Но" №1 - замыливание глаза. Если ты уже работал в сфере дизайна, то наверняка у тебя бывали ситуации, когда ты не выходил из-за монитора по нескольку часов подряд исполняя какой-то "горящий" заказ (а нужно было еще вчера). И наверняка тебе знакомо ощущение, которое испытываешь когда сидишь перед монитором в попытках посмотреть непредвзятым взглядом на то, что ты наваял, но понимаешь, что ты просто не в состоянии адекватно оценить результаты своей работы. Это вполне нормально и на этот случай есть совет. Не стесняйся показывать плоды своего труда окружающим. Позови кого-то, кто находится рядом, и спроси, что именно их раздражает в твоей работе. Что выбивается и за что цепляется взгляд. Если есть возможность, отойди от монитора минут хотя бы на 15-20 и не думай в это время о работе вообще. А вернувшись к монитору, попытайся посмотреть на свою работу по-новому, представив себе, что ты вообще видишь ЭТО в первый раз. Часто такой подход помогает.

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

Вдохновение надолго не задерживается. Если пришло - используй!

Многое кроется в самих буквах, а не в словах и предложениях. Иногда имеет смысл подогнать буквы друг к другу.

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

Иногда и пустое место несет в себе глубокий смысл. Нужно только уметь обыграть его.

Нюансы позволяют сделать дизайн неповторимым: чтобы смотрели и не могли оторвать глаз.

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

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

Источник

@темы: Интересно, Статьи

---

Мужская неделя - оружие: Макет военного сайта

[web-design]

Military layout

Привет!

Сегодня я покажу вам как создать макет военного сайта.

Вот то, чем мы сегодня займемся:

Рисуем

Открываем новый документ в Фотошопе.
Размер: 760 x 770
Цвет фона: 3b3b3b
Затем выбираем Rounded Rectangle Tool (Прямоугольник со скругленными углами), установливаем радиус 10 пикселей и создаем 2 разные фигуры, как на картинке:



Теперь мы создадим новый узор.
Открываем новый документ размером 8х8 пикселей с прозрачным фоном.

Увеличиваем документ до 1600 % и с помощью Pencil tool (Карандаша) ( размер кисти = 1 пиксель ) рисуем следующее:



После того как вы сделали этот пиксельный рисунок, идем в Edit > define pattern (Редактирование > назначить узор)
Выберите имя для вашего образца (узора) и нажмите OK

Закрываем наш документ 8 на 8 пикселей.
И продолжаем работать над нашим макетом.

Выбираем слой с маленькой фигурой (светло-серого цвета) и добавляем следующие стили слоя:













Теперь используем узор, созданный нами выше





Вот мой результат:



Теперь выделим большую фигуру и добавим следующие стили слоя:












Вот мой результат:



Теперь самое время добавить немного изображений. Я добавлю пистолет и несколько пуль:



Затем я добавлю несколько текстовых кнопок вверху макета.



Выбираем Custom Shape Tool ("Произвольная фигура" на панель инструментов или нажмите клавишу "U"). выберете следующую фигуру:



Затем добавим эту фигуру на наш макет. Вы также можете добавить какой-то текст.



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



Теперь выбираем Line Tool (Линия), устанавливаем высоту в один пиксел, и начинаем создавать некоторые линии.
Затем вы сами можете добавить некоторый текст или необходимое вам изображение.

Автор: talk-mania.com/
Перевод: BerdArt
Источник

@темы: Уроки, Web-дизайн

---

20 красивых дизайнов футеров

[web-design]

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

Смотреть

Alyson Stoner



Jrojr




Blup




Delicious Design Studios




Rotten Kid




Alma Latina




Uforia




Continental Fairy




Wire Roses




Fishy




TNT Pixel




Aurum 3




ispoil




Just Pixel




Nreklam




Disney




Kurt-J




Klinkov




The Oleg




FOWA



Перевод с сайта Eightyone.
Источник

@темы: Работы

---

Улыбка за обедом: Почему глючат программы?

[web-design]

Почему глючат программы?

Иудаизм. К чему спрашивать, почему глючат программы? Надо ждать патча!

Католицизм. Первая программа была безглючной. Но захотела идти на компьютере Apple и заглючила. Все программы являются версиями первой и сохраняют глюки в целях совместимости.

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

Протестантизм. Программист так любит программы, что позволяет им глючить, падать и вешаться. И вообще, надо больше работать с глючными программами. Глюков это не исправит, зато заработаете больше денег.

Свидетели Иеговы. Только у нас есть настоящий патч, исправляющий любые глюки! И мы готовы предложить его всем практически бесплатно. Но он не будет работать, если вы не уверуете, что он действительно исправляет глюки. Если вы поставили патч, а глюки не исчезли, значит, вы не уверовали.

Мормоны. Программы глючат потому, что их запускают на неправильных компьютерах. Правильные компьютеры есть только у нас. Еще немного, и мы узнаем, как их включить.

Ислам (сунниты). Если программа глючит, значит, она неверная. Неверные программы надо стереть. Безглючны только верные программы. Если верная программа выдает, что 2*2=5, значит, глючат все программы, дающие другие результаты.

Ислам (шииты). Только один программист писал верные программы. Верными являются также последующие версии этих программ. Все остальные программы глючат по определению.

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

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

Дзен-буддизм. Глючит ли программа, распечатывающая сама себя? Как выглядит программа, не записанная ни на одном носителе? Однажды ученик спросил учителя, как избавиться от глюков в программах, и учитель дал ему вирус CIH. Однажды другой ученик сказал учителю, что хочет программу без глюков. "Дурак! - крикнул учитель, - почему ты не просишь глюк без программы?", - и ударил его винчестером по голове. Если вы все еще не обрели просветление, с вами не о чем говорить.

Даосизм. Глюк, который можно отловить, не есть истинный глюк. Патч, который можно написать, не есть истинный патч.

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

Сатанизм. Каждая программа имеет право глючить! Постыдность глюков - христианская пропаганда!

Растафарианство. О, и программы тоже? А где они траву берут?

Экуменизм. А давайте глюки всех программ объединим в одну!

Атеизм. Вера в так называемый патч - средство оболванивания пользователей. Глючность программ - объективный закон природы, и с этим ничего не поделаешь.

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

Коммунизм. Программы глючат из-за вредительства! Надо расстрелять программистов. А заодно, на всякий случай, производителей компьютеров. Да и вообще, зачем нам какие-то программы? У нас уже есть Программа партии!

Нацизм. Кстати, и воды в кране нет по той же причине.

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

Критики ницшеанства. У сверхпрограммы будут сверхглюки, ха-ха!

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

Юнгианство. Программы глючат потому, что в коллективном бессознательном существует архетип глюка, которому противостоит архетип патча. Таким образом, ошибаются те, кто думает, будто патчами они смогут победить глюки; на самом деле, работая на архетип патча, они тем самым укрепляют и архетип глюка.

Экзистенциализм. На самом деле вас не интересует, почему глючат программы. Если вы спрашиваете об этом, значит, у вас уже есть патч.

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

Сексуальные меньшинства. Называть это глюками - оскорбительный предрассудок! Это не глюки, а особенности! Которыми можно гордиться! Они, между прочим, есть даже у таких знаменитых программ, как Microsoft Windows, Netscape Navigator и Borland Delphi!

Пролайферы (движение противников абортов). Глючные программы тоже имеют право на инсталляцию!

Green Peace. Программы глючат из-за загрязнения окружающей среды! 500 лет назад, когда промышленность не отравляла Землю, о глюках программ никто и не слышал! Что, скажете, не так?

Отель "У офигевшего программиста

@темы: Юмор

---

Мужская неделя - музыка: Дизайн сайта в DJ стиле

[web-design]

DJ Layout

Рисуем

Создайте новый документ, 850 ? 850 пикселей, выберите цвет # 333333 и # 000000, и сделайте линейный градиент в нашем документе.

Выберите rectangular marquee tool и создайте маленький черный прямоугольник в верхней части документа

Выберите rounded rectangle tool и сделайте округлённое выделение чуть ниже чем чёрный прямоугольник.

Параметры слоя для округлённого выделения.



Ваше изображение должно быть таким, как в шаге 3. Добавьте навигационное меню.

Опять выберите rectangular marquee tool, На новом слое создайте шапку для сайта (под навигационным меню). Заполните выделение Линейным Градиентом цветов: #f08808 и #fee27d. Также по бокам сделайте чёрные линии размером 2px.

Теперь откроемкисти или изображения облаков и растянем их по нужной ширине, установите режим смешивания слоев на linear dodge. Затем добавьте других элементов как: логотип, шэйп под логотип, и изображение Ди-джея.

Теперь rounded Rectangle Сделаем выделение ниже шапки сайта цвета # 333333, и установим Drop Shadow

Ваш прямоугольник должен выглядеть так.

Теперь добавьте содержание. Я в этом шаге использовал больше текста.

Повторите описанные выше действия и создайте ещё несколько боксов с описаниями и изображениями.

Создайте снизу ещё одно округлённое выделение внизу страницы, добавьте сюда логотип и т.д. как принято на всех сайтах.

И последнее что нам надо сделать. Выберите pen tool и создайте выделение, как это.

На новом слое залейте выделение белым цветом, и установите Opacity слоя на 38%, и режим смешивания soft light.

Все сделано. Наслаждайтесь.

Автор: hv-designs
Перевод: SmileBoy
Источник

@темы: Уроки, Web-дизайн

---

Почему увольняют дизайнеров?

[web-design]

Тема выживания дизайнеров в IT-офисах (хотя и убеждённым фрилансерам имеет смысл взять информацию на заметку).
Почему увольняют дизайнеров?


Хотелось бы собрать статистику: по каким причинам — профессиональным и человеческим — увольняют дизайнеров и веб-дизайнеров? Не будем рассматривать ситуации, когда компания не подошла специалисту (денег мало, работа не интересная, надоело) и он уволился сам, не дожидаясь, так сказать. В теме возможны всё-таки две ситуации - когда дизайнер отработал испытательный срок и не был принят (не прошёл), и - чуть печальнее и тяжелее - когда необходимо уволить человека, проработавшего на компанию приличное время. И ещё маленькая оговорка: давайте учитывать, что под "дизайнер" будем понимать любого специалиста из дизайнерской группы — художника-дизайнера, или технического дизайнера (верстальщика), или ещё какие-то разновидности дизайнеров из IT-отрасли. Поделюсь своим опытом, может, добавлю из рассказов знакомых; интересные дополнения из комментариев включу в текст в режиме UPD (от "такого-то").

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

2. В компании меняются требования к специализации дизайнера. Сложно объяснить, близкое к первому пункту. Дизайнер по-прежнему нужен, но - другой, а старый становится не нужен (умеет визитки, но не умеет бигборды/ или стенды, умеет веб-сайты, но не умеет флеш, умеет 2D и не знает 3D, а ждать, когда научится - некогда, по новой специализации человек нужен уже вчера).

3. Устаревший профи. "Не модность" - у дизайнера нет стремления следить за модными тенденциями, популярными решениями; есть опыт, есть знания, но как засел в стиле эскизов 90-х годов прошлого века так в этом стиле и продолжает ""творить. Ему говорят - не модно, не стильно, не популярно, но то, что модно сейчас, он подвергает критике (безвкусица, попса… а вот в наше время!…). Современные тенденции в веб-дизайне брезгливо оценивает стандартным комментарием "здесь нет дизайна". Очень жалко, потому что динозавр когда-то был лучшим (или одним из), и у него учились, и знакомством с ним гордились, и в пример ставили, и если было на что посмотреть в тех же 90-начале 2000, то это именно его сайты, в те времена на таком крутом уровне единицы могли работать, но… времена изменились. Увольняют, чтобы заменить более прогрессивными молодыми кадрами.

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

5. Нет понимания специфики работы. Опять же — хорошее владение тулзами, и со вкусом всё в порядке. Но - то ли полиграфическое прошлое неистребимо настолько, что человек не может мыслить формами с динамическими размерами, то ли человек просто рождён для другой работы, не знаю. Но за полтора месяца не получилось объяснить, что рисовать нужно не красивые модные открытки, а эскизы для веб-сайтов, где часть графических элементов - это объекты с какой-то функциональностью, часть - оформительская графика, которой придётся "тянуться" по какому-то направлению. На очередной "открытке" спрашиваю - и где, каким образом этот диагональный градиент должен тянуться, если размер изменится? Не понимает. Увы, тоже похоже на первый случай, отличие только в том, что человек осознанно пришёл работать в явно обозначенную отрасль дизайна; но считаться с техническими особенностями макетов так и не научился.

6. Очень креативный. Эх, даже неловко за нашу компанию. Но у нас в самом деле крайне редко возникают задачи сделать интерфейс чего-бы то ни было "не типичный", совсем не похожий на популярные решения. А обычные макеты ему не давались - везде хотелось привнести что-то суперское, что-то очень оригинальное, отрисовать какой-то необычный элемент… на это тратилось время, в 3D, к примеру, что-то наваять великолепное, и с построением модульной сетки макета вроде было неплохо, и поля/воздух чувствовал без дополнительных указаний, и цвета у него всегда были… может и не совсем обычные, но уж точно гармонично подобраны, а в конечном итоге работы не принимались, именно за чрезмерную оригинальность (ой… а можно нам что-нибудь попроще? просто эскиз для простенького корпоративного или рекламного сайта?). По моей оценке ему бы идеально подошла работа в каком-нибудь печатном супермодном издании, haute couture, (но он-то утверждал, что хочет сайты делать?), ну или если совсем уж повезёт - не частые, но уместные для его талантов фрилансерские заказы. Пришлось уволить, с сожалением великим.

7. Технический дизайнер с очень образным мышлением. Человека не смогли присадить на качественную вёрстку, объяснить, почему и как макет перед вёрсткой необходимо анализировать, почему нужно продумывать порезку очень тщательно, чтобы избежать избыточности в коде, чтобы сформировать правильную структуру контейнеров "родитель"-"наследник". Я извиняюсь, конечно, но порезка эскиза слайсами в ImageReady - это не работа верстальщика, поставить направляющие, назначить одним движением мышки слайсы и сгенерить html-код - это и секретарша может, в этом нет работы технического дизайнера. Кстати на нём и запретили использовать для порезки ImageReady - может, работу кому-то на каких-то проектах и упрощает, но понимания логики документа точно не даёт. Всё-таки, думается, верстальщиком (как и художником, поэтом, великим физиком-ядерщиком или Ломоносовым) надо родиться, должны быть какие-то врождённые качества, другое мышление, особое видение мира, особое понимание структур данных. Объяснить же, почему так верстать нельзя - не получилось, человек доказывал, что его вёрстка — супер, кроссбраузерная, а валидация - что валидация, вон сайты Артемия Лебедева тоже не проходят валидацию без ошибок, и что - и ничего… (причём здесь валидация? Валидатор можно, разумеется, использовать для тестирования ошибок, но ни один валидатор из существующих на сегодняшний день не выдаст в результатах "не логично" или "избыточно").

8. Сильно шустрый. Общительный, востребованный, известный, ему бы на выданной работе сконцентрироваться, а смотришь - одновременно он и в аське, и в скайпе, и в gtalk`е, окна мелькают, а в фотошопе два холста запущено, на одном - явно рабочий проект, на втором - халтурный, говорю - фигня, мол, закрой халтуру, займись делом, ага, сейчас-сейчас, тут немножечко, а завтра - я тут приболел, голова болит (а голос - боевой и смешливый), и в аське целый день, и с каждого месяца дней 10 рабочих - у него голова болит, и понимаю, что дома остался "халтуру" дорисовать, и рабочих эскизов за месяц - чуть ли не на порядок меньше сделано, чем у остальных. Что тут поделаешь… Что, говорю, денег мало? Всех денег, говорю, не заработаешь. Ты, говорю, определяйся, ты либо туда, либо сюда, а вот туда-сюда не надо, это раздражает руководство. Никто тебя не гонит, но надо бы… работать, в офисе. А не можешь соскочить с фриланса - выходи из компании. Распрощались. Расстраивалась.

Вот так вспомнились из опыта последних нескольких лет разные причины увольнения из компании хороших, в общем-то, людей. Может, допишу ещё попозже. Сейчас на своих поглядываю - не проскакивают ли знакомые признаки? Когда начинаю одного за качество кода отчитывать и заставлять перевёрстывать, второго - за композицию и очередные неудачные цветосочетания, третьего - за спешность (за час туда-сюда отрисовал задачу, но - без души, но - не достаточно в деталях продумано, или в качестве не видно усердия, выложил рабочее, через минуту смотрю - опять своё что-то творит). Ну да ладно, мы справимся.
UPD: Как и обещала, публикую дописанные в комментариях пункты причин увольнений.

От xekc`а:
этика. если дизайнер начинает называть работы компании(или вообще- чужие) своими работами. если начинает показывать то, что показывать пока нельзя. если начинает говорить то, что нельзя говорить. начинает отзываться о клиентах, процессах компании публично, нести сор из избы что ли. то есть вообще если нет понимания деловой этики то за это можно.
хроническая безответственность. есть обязательства. их нужно либо не брать либо исполнять. есть оценки времени. есть даже просто обещания. если входит в систему, если разговоры не помогают, то, через какое то время - за это можно уволить. сам процесс становится убыточным почти независимо от результата.

Источник

@темы: Из жизни дизайнеров, Статьи

---

Мужская неделя - футбол: Шаблон футбольного сайта

[web-design]

Soccer / Football Template

Рисуем

Я создам макет спортивного сайта. Существует очень мало доступных шаблонов в сети, поэтому я его и создам.
Создаем новый документ в Фотошопе.
Размер 760 X 770 пикселей
Фон - белый

Мы должны создать новый узор травы. Может быть когда-то я покажу вам, как создавать узоры с нуля.

Сегодня мы будем использовать следующее изображение.



Откройте это изображение в Фотошопе.
Нажмите CTRL+A (выделится все изображение )
Идите Edit > Define Pattern... (Редактирование > Определить узор...)
Выберите имя для вашего узора и нажмите ОК.

Теперь давайте вернемся к нашему футбольному шаблону.

Создайте новый слой. ( нажмите CTRL+SHIFT+ALT+N )
Возьмите Paint Bucket Tool ("Заливка")
Выберите ваш узор с травой.



Затем один раз нажмите на ваш холст. Я не показываю вам мой результат, потому что это очень простой шаг.

Затем зайдите в Filter > Render > Lightning effects ("Фильтр > Рендеринг > Эффекты освещения...") и используйте следующие настройки.



Создайте новый слой ( press CTRL+SHIFT+ALT+N )
Теперь возьмите наш Rounded Rectangle Tool ("Прямоугольная область со скругленными углами") и создайте фигуру на траве.
Установите радиус в 15 пикселей



Затем примените следующие стили слоя для этого прямоугольного слоя.







Вот мой результат



Теперь зажмите клавишу CTRL и левой кнопкой мыши щелкните по пиктограмке слоя



Создастся выделение.



Выберите Elliptical Marquee Tool ("Овальная область"), нажмите на Subtract from selection ("Вычитание из выделенной области")



Затем начните вычитание с начального выделения, как на следующем изображении.



Когда вы отпустите кнопку мыши, у вас будет такое результат:




Теперь создайте новый слой ( нажмите CTRL+SHIFT+ALT+N )
Выберите paint bucket tool ("Заливка"), и залейте ваше выделение белым цветом



Затем нажмите CTRL+D, чтобы снять выделение
И измените непрозрачность слоя.



Вот мой результат



Теперь вы должны добавить текстовые кнопки на ваш макет.



Затем выберите Rounded rectangle Tool ( "Прямоугольник со скругленными углами"), установите радиус 5 пикселей и создайте новый прямоугольник
Убедитесь, что вы перетащили этот слой под слой с большой фигурой.
Вы можете добавить те же настройки слоя как и выше.



Теперь выделите эти 2 слоя (первый слой - текстовый слой с кнопками, а второй - фигура, которую вы только что создали)



Продублируйте эти слои (чтобы продублировать эти слои, вы должны перетащить их на кнопку " Create new layer " ("Создать новый слой")
Затем убедитесь, что у вас выделено эти 2 новых слоя (копии), и нажмите CTRL+E (вы соедините слои в один)

Затем перетащите новый соединенный слой на верх вашей палитры слоев.



С этим выделенным слоем зайдите в Edit > Transform > Flip Vertical ("Редактирование > Трансформирование > Отразить по вертикали")
Затем передвиньте вниз ваш отраженный слой с помощью клавиш со стрелками ( клавиши на клавиатуре )



Теперь нажмите на Add layer mask ("Добавить маску слоя")



Выберите Gradient tool (Градиент") и сделайте маленькую линию как на следующем изображении ( сверху вниз ) снизу



Вот мой результат



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



Вот мой результат:



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



Сейчас я добавлю немного изображений, а также и логотип.



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

Выбираем Rounded Rectangle Tool . Устанавливаем наш основной цвет на темно- серый и делаем простую фигуру, как на следующей картинке.



С этим выделенным слоем идем в Filter > Blur > Gaussian Blur ("Фильтр > Размытие > Размытие по Гауссу...")
Фотошоп спросит вас, хотите ли вы растеризовать фигуру. Нажмите ОК.
и используйте след. настройки



вот мой результат



Теперь давайте добавим какую-то тень для большого мяча
Выберите Ellipse Tool (Инструмент "Эллипс") и создайте фигуру ( расположите этот слой под слоем с мячом на вашей палитре слоев )



Затем зайдите в Filter > Blur > Gaussian Blur и используйте те же настройки, что и выше
вот мой результат



Теперь вы можете добавить также некоторые простые детали. Например, я выберу мой Type Tool (Инструмент"текст") и я напишу на моем холсте простые знаки минус " --------- "



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



Надеюсь вам понравился этот шаблон.

Автор: talk-mania
Перевод: BerdArt
Источник: Demiart

@темы: Уроки, Web-дизайн

---

[Columb]

Простите, пожалуйста, что вмешиваюсь со своей дилетантской проблемой.
Мне нужно сделать сайт, куплен домен у GoDaddy. Я пыталась заказать дизайн знакомому, но что-то он ушёл в подполье и психование, время идёт, а я прочитала на GoDaddy, что мне нужно активировать... чего-то там до 24 февраля, иначе мой домен будет удалён. Что такое это "чего-то там", знакомый так и не объяснил. Пожалуйста, не мог бы кто-то из вас помочь мне с моим многострадальным сайтом и заливанием его на хостинг? Конечно, за деньги. Спасибо.

---

Красивые дизайны сайтов рунета

[web-design]

Смотрим всё

Ясная Поляна



Все о сладостях



Optimism



Евразия



Red Sea Realty



Big Play



Текстильный Декор



Бест Паркет



Источник

@темы: Интересно, Работы

---

Дизайнерское: три этапа разработки

[web-design]

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

1. Накопление исходной информации. В простом виде - к примеру, интервьюирование заказчика, скажем, веб-сайта (сервиса, программы) на предмет того, что он хочет получить. “Он сам не знает, чего он хочет!” — как часто измученный дизайнеры, после десятого-пятидесятого отвергнутого эскиза проекта произносят эту фразу? Сейчас формально не важно (просто одинаково), кто является заказчиком проекта для дизайнера, будущий владелец проекта или командный project manager, т.е. *кого пытать*, для того, чтобы собрать необходимый объём информации для анализа.

Большинство дизайнеров убеждены, что именно заказчик должен выдать ему объем, забывая о том, что заказчик зачастую не знает, что для работы дизайнера имеет значение, а что - нет, и не может оценить, правильно ли понял дизайнер задачу. Начинается волокита с отбракованными эскизами, обидами “а что же вы раньше нам это не сказали?..” и прочими претензиями. А на что обижаться-то? Надо было догадаться спросить. Надо было правильно ставить вопросы. Напрямую заказчика или PM`а - не принципиально важно здесь.

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

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

3. Реализация обработанной информации. Есть структурированные данные, чётко обозначена цель, назрела идея как реализовать — вот теперь понадобятся инструменты для реализации, те же, к примеру, графические редакторы. Практика показывает, что если не допущено ошибок во время первого и второго этапа, то для исполнения третьего понадобится только хорошее знание среды разработки, и умение “красиво отрисовать”.

Думать нужно всегда, даже если ты всего лишь рисующий дизайнер в команде, где информацию за тебя выспросят и структуру сформируют. Доходит до абсурда: человеку отдали прототип навигационной менюшки в формате двухуровневого списка из пяти главных элементов списка + в трёх из них - по нескольку подэлементов. Нарисовал “меню” из двадцати визуально одинаковых элементов меню. Спрашиваю - “Как же так?.. неужели неясно, что это плохое решение?” — “А я не знал… а я не понял…” — “Если не понял, почему не спросил, не уточнил, не подошёл?”. Я могу понять, что человек не мыслит иерархическими структурами. Но не до такой же степени. Думать-то всё равно надо, даже если ты соглашаешься с тем, что остаёшься только отрисовщиком.

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

Источник

@темы: Из жизни дизайнеров

---

Типы сайтов

[web-design]

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

Сайт-презентация - из названия ясно, что сайт представляет информацию о фирме/услуге/продукте. Как правило имеет конечное количество страниц, частота обновления - ее или нет или же сайт обновляется реже, чем раз в несколько месяцев. Главная задача - при помощи визуального оформления максимально быстро и эффективно донести до посетителя суть представляемой услуги и степень ее полезности и грандиозности. Такие проекты имеют как правило яркий, уникальный дизайн, графическое оформление преобладает перед текстовой информацией, часто используется flash-анимация (или же сайт полностью может быть выполнен во flash). Как правило используется одноколоночная модульная сетка. Наиболее яркие и запоминающиеся примеры в веб-дизайне как правило разрабатываются для презентационных сайтов. В качестве примеров хочу привести интересные работы от www.loyalstudios.com/ и www.designchapel.com/

Корпоративный сайт - интернет представительство организации (фирмы, корпорации) в сети, и, следовательно, в таких проектах самые высокие требования к оформлению информации, к балансу графика/текст. Модульная сетка - 2-3-х колоночная. Соответствие фирменному стилю выражено как в структуре информации, так и в цветовой гамме. www.intel.com (синий и белый цвета, ясная структура разделов сайта, четкость и лаконичность идеально соответствуют корпоративной идее этой известной организации), www.hp.com (меняющаяся цветовая гамма - белый+серый+дополнительный - оранжевый/красный/синий… - но как приятно смотреть и легко разобраться - что и где искать).

Информационные ресурсы - это электронные библиотеки и газеты. Информация как правило обновляется несколько раз в сутки. Объемы информации очень большие, и при разработке дизайна таких сайтов следует учитывать тот факт, что посетители приходят не поглазеть на сайт - они приходят за содержанием. Публикация новостей (к примеру - www.cnews.ru) или галерей изображений, как на sight.nmi.ru/ - обратите внимание, графическое оформление сведено к минимуму, данные сложно структурированы, главная задача проекта - максимально быстро предоставить посетителю информацию, или возможность эту информацию найти. Любое графическое оформление увеличит объем страницы - т.е. увеличит время загрузки страницы. Поэтому по возможности на таких проектах дизайн разрабатывается текстовый, а картинки - не оформление, фотографии, графики, схемы являются иллюстрациями, содержанием, несут в себе информационную нагрузку.

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

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

Многие из вас знают, как сложилась политическая обстановка с начала ноября 2004 года на Украине. Огромное количество людей, ранее мало интересующихся политикой, в связи с последними событиями нуждаются в информации, которую правительственные медиа предоставить не могут. Оперативной, объективной, актуальной информации. И за этой информацией публика пошла в интернет. Возросла нагрузка на такие сайты, как www.5tv.com.ua, www.maidan.org.ua/ и другие. И дизайнерская задача - спроектировать интерфейс, максимально удобно и понятно для пользователя предоставляющий большие объемы информационных данных, иногда - не только текста, но и видео- и звуковых файлов, веб-камеры, фотографии.

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

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

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

Человек может видеть мир не только таким, каким он существует в действительности, но и таким, каким он может (или должен) быть. Такую способность психологи называют "визуальным мышлением". Когда Адамарс спросил Энштейна, каким средствам мыслительной деятельности он отдает предпочтение: образам, словам или символам? - Энштейн сказал, что никогда не придавал большого значения словам или символам, он думал в зрительных образах или даже в мышечных ощущениях . И после того, как в этих образах он получал решение, перед ним стояла уже более легкая задача - перевести найденное решение в слова или символы. Так что... учитесь мыслить образами, господа дизайнеры!

Источник

@темы: Статьи

---

Сайт для Лаборатории Дизайна, легкий шаблон

[web-design]

Design Lab Layout

Рисуем

Создайте новый документ 850х1012 и цвета #0b3349 foreground и #156894 background. Выбираем градиент и тянем от вершины до приблизительно четверти пути вниз:


Для следующего шага нам потребуется вот эта картинка. Растягиваем облака во всю ширину. Blending mode меняем на Lighter Color и немного дорабатываем. Чтобы было похоже вот на это:


Далее добавьте свое название веб-сайта и лозунг в верхнем левом углу:


Стили слоя для него следующие:




Стили слоя для светло-голубой части названия - точно то же самое, так что изменяем только градиент:


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


Стиль слоя для нее:




Добавляем текст:


Оставьте весьма большой промежуток ниже облаков и создайте два белых прямоугольника,используя инструмент "прямоугольник" и заполните их цветом #eeeeee:


Добавьте к ним тени:


Добавляем текст, с таким же стилем слоя как и в начале. Далее заполняем большой прямоугольник текстом:




Под текстом рисуем 3 линии, в 1 пиксель:


С помощью Rectangular Marquee Tool выделяем область, как показано на рисунке и заполняем белым цветом и применяем градиент:






Так же у вас должны быть иконки, похожие на эти:


Дорабатываем маленький блок, к нему добавляем прямоугольник с округленными краями (стили слоя такие же как и в логотипе), пишем на нем текст. С помощью трансформирования (CTRL+T) меняем положение. Затем под этим же блоком можете добавить что-то, на свое усмотрение:




Вот и все



Автор урока: razor_rich
Перевод: de'Art
Источник

@темы: Уроки, Web-дизайн

---

Модульные сетки

[web-design]

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

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

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

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

Итак - какие модули должны присутствовать на главной странице сайта? Рассмотрим самый типичный вариант для среднего сайта средней фирмы или не самый "запущенный" вариант авторской страницы.

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

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

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

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

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

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

Для домашней страницы (в большинстве случаев) разработчики выбирают двухколоночную модульную сетку. При этом пропорции ширины колонок так же зависят от содержания и целей проекта.

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

Наиболее популярная модульная сетка для авторских сайтов и проектов с умеренным объемом содержания (и наиболее легкая в реализации) - это сетка из двух колонок, пропорции которой расчитываются следующим образом:

* во-первых с учетом наиболее популярного по статистике разрешения экрана на сегодняшний день - 1024х768,
* во-вторых с учетом того, чтобы при разрешении экрана 800х600 не появлялась горизонтальная полоса прокрутки (для этого суммарная ширина всех колонок не должна превышать 770 пикселей),
* в третьих, с учетом того, что колонка, которая определена как модуль для отображения собственно информации была больше, чем колонка, которая определена как модуль-навигационное меню.

Таким образом пропорция выбирается 150px+620px или же 200px+550px. Мы получаем сетку из двух колонок, причем в меньшей предполагается расположить навигационное меню, а в большей - содержание.

В общей конструкции страницы присутствуют так же блок начала страницы и завершение страницы, объединяющие по ширине две колонки (т.е. каждый из этих блоков имеет ширину 770 пикселей). В верхнем блоке (top) традиционно принято располагать логотип проекта (левый верхний угол блока), его название, возможно - слоган, образно описывающий тему проекта, иногда - графическое оформление, коллаж, иногда - рекламный баннер. В завершение страницы (bottom) - информация об авторских правах, быстрый доступ к контактной информации (к примеру, e-mail автора или разработчика проекта), иногда - дублируется основное меню. Пример описанной модульной сетки вы можете наблюдать на сайте www.uapeople.com.


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

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

1. Выравнять документ по центру экрана (пример центрированного проекта с описанной модульной сеткой можно посмотреть здесь: www.nundesign.com);



2. Задать ширину большей колонки в процентах (резиновая модульная сетка). - в этом случае колонка с навигационным блоком будет фиксирована, а с динамическим - менять ширину в зависимости от размера окна браузера. Пример такого проекта -



3. Задать ширину обоих колонок в процентах. Решение интересное, однако в веб-дизайне редко используемое. Наиболее частая пропорция для такой сетки - 40%х60%.

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

Отлично. Вы определились с модульной сеткой и готовы начать рисовать? Нет, рано.

Каждый сайт имеет название. Это может быть название фирмы (сайт Adobe - www.adobe.com), или фамилия автора (Авторский сайт Алексея Петюшкина - www.alpet.spb.ru), или просто название проекта (webmascon - www.webmascon.com).

Есть ли необходимость в разработке логотипа проекта? В случае фирмы, даже небольшой, считается правильным представлять логотип - графический символ; в случае же авторского проекта, возможно, будет достаточно наличия вашей уникальной и всем известной фамилии (никнейма).

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

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

Источник

@темы: Статьи

---

Сайт с волшебным дизайном

[web-design]

Прежде чем приступить к работе, предлагаю посмотреть, что должно получиться в результате

Рисуем

Шаг 1.

Приступим! Во первых, хочу сказать, что я не буду очень подробно описывать каждое действие. Так или иначе любое промежуточное действие при помощи photoshop можно выполнить. Во вторых, будет трудно получить в точности такой же результат, как у меня. Используйте свое воображение, чтобы сделать свой неповторимый сайт, может быть даже лучше, чем мой!
Итак, создаем новый документ с разрешением 960x1000 px в цветовой модели RGB. Наносим несколько направляющих и идем в меню Image > Canvas Size, чтобы увеличить ширину документа до 1460x1000 px. Это позволит увидеть, как будет выглядеть изображение при большем разрешении экрана. С помощью направляющей отмечаем высоту шапки сайта.





Шаг 2.

Наносим еще одну направляющую в середине документа, с ее помощью создаем темно-синий радиальный градиент (цвет #0D2B53 и #010D1F). Добавляем еще несколько направляющих слева и справа.
Вполне возможно, что позже нам придется изменить высоту документа, так что добавляем новый слой с заливкой и размещаем его под фоновым слоем (цвет #010D1F).





Шаг 3.

Как-то один из моих читателей предложил использовать реальные изображения облаков вместо классического фильтра Clouds. Так мы и поступим. Вставляем изображение с облаками на новый слой, названный "Clouds" и изменяем Blending Mode на Overlay. Затем следуем в меню Layer > Layer Mask > Hide all и рисуем радиальный градиент от белого к черному, протягиваем его от середины верхней части к середине нижней части. Можно немного изменить настройки Levels, чтобы сделать облака более темными.







Шаг 4.

Теперь вставляем на новый слой изображение горизонта испанского берега и называем его "skyline". Далее создаем новый корректирующий слой New Adjustment Layer > Channel Mixer и выбираем Black & White with Blue Filter (RGB). Для того, чтобы этот эффект распространялся только на слой "skyline", на палитре Layer нажимаем между слоем Channel Mixer и "skyline". И наконец, Blending Mode слоя "skyline" изменяем на Overlay.





Шаг 5.

Применяем к слою "skyline" маску слоя Layer Mask > Reveal all. Используя большую мягкую черную кисть скрываем границы изображения. Затем выбираем кисти в стиле гранж (больше всего люблю кисти 250 и 181). С их помощью делаем границы менее регулярными.









Шаг 6.

Напечатаем слово "Magic", используя шрифт Scriptina. Изменяем настройки слоя с текстом: Outer Glow (цвет #9EB6D0) и Gradient Overlay (цвета #70ABF6, #FFFFFF, #B4CBE7, to #FFFFFF).
Кроме того, сейчас самое время рассортировать все слои по папкам. Помещаем все слои в папку "Background", а слой с текстом в папку "Logo".





Шаг 7.

Теперь добавляем звезды на наше изображение. Вы можете использовать любые кисти, однако я буду использовать эти кисти. Выбираем кисть 550 и рисуем белым цветом на новом слое, который помещаем в группу "Stars". Обратите внимание, что самые большие звезды размещаем точечно. Изменяем параметры gradient overlay, используя три цвета (#3A8FEF, #FFFFFF, and #66C9FC), слоя "Stars1".





Шаг 8.

Используя кисть 615 из набора, добавляем еще больше звезд на слой "Stars2". С помощью Eraser удаляем звезды со зданий. Затем в параметрах слоя "Stars2" устанавливаем Outer Glow (цвет #8AB2FF).







Шаг 9.

Добавляем еще звезд на слой "Stars 2" по всему изображению, с помощью Eraser tool, удаляя лишние участки. Наконец, в параметрах слоя устанавливаем Gradient Overlay (цвета #6AB1D1, #FFFFFF, #94CFED, and #FFFFFF).





Шаг 10.

Загружаем кисти, выбираем кисть 148 размером 65 px и рисуем белым цветом в новом слое выше "i" и в настройках слоя устанавливаем Outer Glow (цвет #00BCF9), чтобы сделать звезду ярче.






Шаг 11.

Дублируем слово "Magic" и рядом пишем слово"Night", в настройках устанавливаем Outer Glow (цвет белый) и Gradient overlay (цвета #F9DA5B, #FEAE00, #FFD403).





Шаг 12.

Добавляем немного облаков в нашу ночь. Скачиваем кисти. Выбираем кисть 2464 размером 960px ( в соответствии с шириной изображения), цветом переднего плана устанавливаем #234B7F и создаем одно единственное облако на новом слое "cloud1". Помещаем папку с облаком в папку "Background".





Шаг 13.

Продолжаем. Воспользуемся инструментами Dodge и Burn. Осветляем области возле основной звезды и затемняем в середине облака. Кроме того, уменьшаем Opacity слоя "cloud1" до 50 %.





Шаг 14.

Добавляем еще одно облако на слой "cloud2", выбираем любую кисть, но цвет переднего плана устанавливаем #5F83A5. Немного затемняем облако для лучшего освещения.







Шаг 15.

Повторяем предыдущий шаг, только цвет берем #36638C и помещаем облако на слой "cloud1". По мере необходимости осветляем или затемняем его.





Шаг 16.

Выбираем инструмент Eraser мягкую кисть с большим радиусом и стираем часть облака на слое "cloud1", чтобы создать эффект исчезновения.



Шаг 17.

Основные шаги практически завершены. Теперь мы добавляем фон для контента. Не забываем, что данная работа предназначена для сети. С помощью Rectangle tool создаем прямоугольник (цвет #0A1D37) на новом слое, который располагаем ниже группы "Clouds". Обращаем внимание, что прямоугольник построен с помощью направляющих. Далее к слою с прямоугольником применяем маску Layer > Layer Mask > Reveal all и создаем черно-белый градиент, который придаст приятный эффект. Затем опускаем направляющую линию ниже прямоугольника, это поможет на стадии создания страницы в HTML+CSS. Обратите внимание, что фон от направляющей до самого низа должен быть однородным.







Шаг 18.

Теперь добавляем еще один прямоугольник (цвет #091525), который будет фоном боковой панели, используем направляющие. А затем создайте на этом слое Layer Mask примерно как в предыдущем шаге.



Шаг 19.

В этом пункте мы завершим работу над фоном шапки. Добавим деталей. На новом слое "moon-rss" размещаем изображение полной луны. Корректируем параметры Hue / Saturation, чтобы сделать луну более желтой, и в настройках слоя добавляем Inner and Outer Glow.







Шаг 20.

Добавляем небольшое облако на новый слой (цвет #7997B3), выше слоя с луной и, используя eraser, удаляем небольшие фрагменты облака.





Шаг 21.

Добавляем классическую форму RSS (цвет #DCA30B) выше слоя "moon", но ниже слоя "cloud". Применяем к этому слою параметры, которые уже использовали (Gradient Overlay, Outer Glow и Drop Shadow) и добавляем по форме RSS какую-нибудь звезду (см. Шаг 10).







Шаг 22.

Вставляем на новый слой изображение. Будем использовать его как фон для основной навигационной панели. Поскольку изначально изображение немного растянуто, сделаем его шире с помощью Free Transform и немного изогнем с помощью Flag warp.







Шаг 23.

Затемняем некоторые части свитка для создания теней и эффекта искажения.



Шаг 24.

Для улучшения текстуры применяем Gradient Overlay (цвета #045F96 и #FBF4BD) и Pattern Overlay.







Шаг 25.

Теперь добавляем тень свитку. Для этого можно либо использовать Drop Shadow, либо дублировать слой, изменить настройки Hue / Saturation, значение Lightening установить равным -100 и размыть копию с помощью Blur. А затем с помощью Free Transform немного исказить изображение.



Шаг 26.

Далее добавляем облако поверх свитка, осветляем и затемняем его, удаляем лишние части, как в Шаге 15. Затем добавляем ссылки, используем шрифт Georgia - Italic, цвет #0B1827 для обычных ссылок и цвет #211808для ссылок на которые наводится мышка. И добавляем детали на фон.





Шаг 27.

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





Шаг 28.

Пишем RSS текст шрифтом Aria 10 px (цвета #F2C90D и #FFFFFF), не забываем использовать текст с параметрами сглаживания Anti-aliasing или None, т. к. сглаживание текста браузерами не поддерживается.



Шаг 29.

Как дополнительную деталь добавляем это изображение воздушного шара. Отделяем его от фона и располагаем где-нибудь ниже логотипа. Применяем настройки Color Overlay (цвет #1F416E), Blending Mode меняем на Overlay.





Шаг 30.

Далее выбираем кисть 615 из набора со звездами (см. Шаг 8) и добавляем больше звезд возле шара и свитка. Создаем деталь в виде линии толщиной 3 px, а затем с помощью Eraser удаляем где это необходимо лишние детали.



Шаг 31.

Самое время добавить запись. Во первых пишем заголовок и дату на новом слое "Post", как на изображении ниже. Кроме того добавляем крупную звезду возле даты.



Шаг 32.

Добавим больше информации в группу "Post", на главной странице у нас будут лежать привью нескольких записей. Слева поставим картинку размером 200x200 px с 1px Stroke effect, а справа - краткое содержание. Также отобразим справа вверху количество комментариев к записи. Для поля комментариев создадим новую группу под названием "Comments" и добавим туда небольшой фоновый рисунок с маленьким облаком и звездами. Делаем то же самое, что и при создании шапки только меньших размеров. Затем добавим число комментариев и ниже само слово "комментарии". Далее добавим список тегов в строчку, с правого конца этой строчки вставим звездочку. При желании, можно в качестве фона использовать небольшое звездное облако. Наконец, начертим разделительную линию (#1D324F, Line Tool). После всего этого скопируем всю группу "Post", чтобы создать несколько разных записей. Вероятно, на этом этапе понадобится увеличить высоту документа, для этого используем инструмент "Crop" или пункт меню Image > Canvas size, как в первом шаге. Затем увеличим высоту фонового рисунка главной и боковой части.









Шаг 33.

Продолжаем работать с боковой панелью. Добавляем в нее форму для поиска. Создаем новую группу "Sidebar", в ней группу "Search", а в ней создаем новый слой с облаком, и располагаем его как на изображении ниже. С помощью Rounded Rectangle Tool создаем окно для ввода поверх облака. Для слоя с прямоугольником устанавливаем параметры Stroke 1px (цвет #697372) и понижаем Fill до 50%.





Шаг 34.

Добавляем немного звезд около облака, используя любой слой со звездами, не забывая стирать лишние. Копируем слой с воздушным шаром, затем идем в меню Edit > Flip horizontal и помещаем копию в папку "Search". Добавляем текст используя шрифт Georgia Italic (цвет #D5A934) для поиска. Затем добавляем критерии поиска и кнопку "Go!". И в завершении, добавляем одну яркую звезду позади текста.





Шаг 35.
Добавляем в боковую панель заголовки, текст, ссылки и помещаем каждый раздел в отдельную группу. Так же не забываем добавлять яркие крупные звезды и россыпи звезд. Про направляющие тоже не забываем.





Шаг 36.

Работа близится к завершению. Доделаем нижнюю часть боковой панели. Во первых, удаляем часть фона с помощью маски слоя. Затем создаем несколько облаков, затемняем и осветляем их, где это нужно. Убедитесь, что они не выходят за пределы фона панели, не превышают ее ширину. Добавляем еще звезд к облакам и дублируем воздушный шар. Объединяем все это в группу "Sidebar Footer".







Шаг 37.

Наконец, создаем подвал. Для начала, создаем маску слоя и большой мягкой белой кистью скрываем границы, делаем их мягкими. Выбираем любую кисть с облаками и добавляем их внизу изображения. Комбинируем большие и маленькие облака (цвета #0B1C38 и #223E63 соответственно). Эти облака будут фоновым изображением, так что стараемся, чтобы они не пересекались с верхней направляющей. Кроме того, не забываем объединять созданные слои в группу "Footer".









Шаг 38.

Затемняем слишком светлые облака. Затем кистью 615, из набора со звездами, создаем различные звезды, а затем с помощью Eraser удаляем ненужные части.











Работа завершена!



Автор: Alvaro Guzman
Перевод: Alta Vista
Источник

@темы: Уроки, Web-дизайн