Что нужно веб-дизайнеру прежде, чем получить первый заказ?

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

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

В этой чудесной профессии все мы начинаем как новички, без опыта, мало зная предметную область, но… эй, а мы-то ведь здесь, делаем то, что любим; значит должен быть и какой-то способ войти?

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

Нужно ли мне высшее образование или курсы, чтобы стать веб-дизайнером?

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

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

Как веб-разработчику, вам нужно сконцентрироваться на изучении того, как пользоваться Фотошопом, как вручную кодировать HTML/CSS (верстать) и как немного программировать на JavaScript; еще я бы рекомендовал jQuery, поскольку он очень близко связан с изучением вами CSS. Может быть, стоит также научиться тому, как установить свой первый блог: я бы рекомендовал WordPress, поскольку это простейший и самый востребованный вариант.

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

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

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

Как мне начать?

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

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

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

Если вы отправитесь на Amazon.com [а русские читатели могут начать, например, с ozon.ru] в поисках технологий, которые я недавно упоминал, и найдете там самые популярные книги за этот или предыдущий год, вы – на правильном пути. Может быть, вам понадобится прочесть каждую книгу по 2-3 раза, чтобы действительно усвоить все, что нужно; и вам понадобится еще около трех книг по каждой из технологий, чтобы вы увидели предмет с точки зрения различных людей/писателей/разработчиков.

Пробы и ошибки

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

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

Какие мне понадобятся программы?

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

Так что, учиться и пробовать программировать – и этого достаточно?

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

Это – единственный способ успевать за новинками. Мы в нашей отрасли шагаем так быстро, что ни одной системе образования за нами не угнаться. Вам нужно следовать за теми личностями, от которых вы получили самые последние знания. Это люди, которые работают в нашей отрасли годами; они знают, что важно, как меняются правила игры, какие утилиты больше всего вам помогут и т.д.. Я делаю так уже в течение пяти лет, и лучшую информацию я все еще получаю, отслеживая таких людей, как Veerle, Inman, Snook, Jason Santa Maria, Mark Bouton, John Resign и т.д., список очень длинный.

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

Поиграйте

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

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

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

Я немного изучил программирование и Фотошоп, и что теперь?

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

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

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

Этот способ требует слишком много работы

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

Не останавливайтесь

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

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

Так что сейчас, когда вы думаете о своем первом шаге, запомните: всего лишь за год вы могли бы достичь цели: работы своей мечты, так давайте начнем сегодня!

Источник: Roman Leinwather

Перевод с английского: George Columbow

Дизайн сайта-магазина программных продуктов

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

Статья How to create a sublime software layout представляет нам урок Фотошоп по созданию главной страницы сайта. Видимая легкость урока (всего-то 15 шагов!) на деле несколько обманчива, так как каждый шаг - довольно объемен.

Давайте скорее посмотрим, что интересного мы сможем найти в этом уроке:

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

Это - магазин! Тщательно прорабатываем навигацию продаж. Здесь она простая, но дейтсвенная.

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

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

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

И, наконец, добавляем функциональный футер.

6 верных способов испортить свой сайт

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

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

Но, когда мы сами решаем, какие элементы стоит или не стоит разместить на сайте, давайте хоть немного думать?

В этом нам поможет небольшая статья Mistakes which must be Avoided in Web Design, краткое изложение которой мы приводим ниже. Итак, чего не нужно делать:

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

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

Видео, которое стартует автоматически

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

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

Скрытая навигация

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

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

Да, это вещи известные. Но даже их иногда не лишне напомнить себе.

"Дети, не будьте такими, как я!" :-)

 

9 утилит для управления вашим фриланс-бизнесом

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

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

Итак, слово - знатокам.

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

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

Организация и управление клиентами

1. – 4. Zoho CRM & Google Apps

Давайте начнем с «пакета» программ, которые я помечаю высшей оценкой, и в основном сам пользовался – Zoho CRM, Gmail, Google Calendar, и Google Docs. Или, соответственно, номера от одного до четырех. И, просто на случай, если вы не знакомы с термином CRM, он означает управление взаимоотношениями с клиентами (Client Relations Management).

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

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

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

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

Для более подробного обзора [на английском] Zoho CRM, перейдите по этой ссылке, чтобы посмотреть видеоотчет пользователя, который проведет вас по этому сервису. Вы также можете посмотреть, как Zoho CRM работает с Google-приложениями.

5. StudioCloud

«StudioCloud – это бесплатное десктоп-приложение, представляющее собой интегрированную систему, включающую менеджер клиентов, планировщик, кассу, бухгалтерию, составление отчетов, маркетинговые кампании, управление проектами/событиями/заказами и многое другое!» В основном это прекрасный пакет из серии «всё-в-одном». Для меня единственный недостаток этого приложения в том, что оно десктопное.

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

6. Doolphy

В отличие от StudioCloud или сочетания Zoho CRM и Google-приложений, Doolphy просто участвует в управлении проектами и связанными с ними задачами. Doolphy также высоко ценит совместную работу, позволяя вам иметь на одном аккаунте сколько угодно пользователей. Неприятная сторона – в том, что бесплатный аккаунт допускает ведение в данный момент времени лишь одного проекта с ограниченным объемом. Но если все, что вам на самом деле надо – это приятное место, где можно хранить закладки к задачам по вашему проекту, тогда это приложение - для вас.

Утилиты для платежей

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

7. FreshBooks

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

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

8. Square

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

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

9. Paypal

И, наконец, всегда популярный Paypal. Новый и замечательный? Нет… но почти каждый с ним знаком, и, любите ли вы его или ненавидите, Paypal дает возможность запросто отправить счет и получить платеж. Иногда это – всё, чего вам на самом деле нужно или хочется.

Что вы думаете? Полезен ли этот список утилит? Может, вы знаете о чем-то, что мне нужно сюда добавить? Сообщите мне об этом в комментариях.

Источник: Nathan Weller.

 

Стильный дизайн для сайта за 21 шаг

Хочется чего-то стильного и красивого на сайте? Надоел примитив и гладкие поверхности? Надоел гранж в вебе? Хочется добротного, в меру сложного дизайна? " Их есть у меня!" :-)

Cтатья Create a Clean and Classy Web Design in Photoshop предлагает нам урок фотошоп, в результате которого возникает именно такой дизайн. Просто сайта или портфолио, как личного, так и для веб-студии.

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

Элементов на странице довольно много, и свободного пространства автор не жалел, поэтому высота дизайна довольно заметно превышает ширину, но вид сайта при этом не портит

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

Понравилось, как просто, но эффектно оформлен выбранный пункт меню

Приятная текстурная подложка, окрашенная в тон

Слегка, еле заметно, вдавленный текст заголовков

Векторные кривые в качестве подчеркиваний

Светящиеся легкие тени для оформления картинок

Очень стильный дизайн формы обратной связи

И вдобавок, на темном футере еще более темное вторичное меню.

Общее впечатление от дизайна - продуманный, стильный, просторный и радующий  глаз элегантностью.

А теперь обещанные бонусы! Их раздает Мэтью, сам автор статьи. Это:

Полный PSD исходник полученной веб-страницы, 3Мб

и даже сверстанная страница, 400К

Стильных вам дизайнов, друзья!

Источник:  Matthew Heidenreich

 

Искусство сочетания цветов для веб

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

Статья The Art of Coordinating Colours in Web Design проводит для нас небольшой мастер-класс различных способов подбора цветов. Приводится много примеров реальных дизайнов сайтов, иллюстрирующих излагаемые принципы.

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

Сочетаемость цветов

 

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

Сами цвета при этом не обязаны составлять идеальное сочетание. Наш глаз способен инстинктивно определять цветовые соотношения.

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

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

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

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

Другие способы сочетания цветов

Еще один прием состоит в подчеркивании какого-то одного, важного цвета на фотографиях.

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

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

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

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

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

Сочетание цвета с цветами фоновой картинки

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

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

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

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

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

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

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

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

 

Источник: Scott Carmichael

Мастер-класс: строим сайт с самого начала

Инструменты для выбора цвета и гармоничной палитры

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

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

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

Статья 15Hand Picked Color Palette and Color Scheme Generators написана несколько лет назад. И из 15 инструментов, рассмотренных в обзоре сейчас доступны не все. Тем не менее, считаю обзор полезным, поскольку именно в теме подбора палитр и управления цветом подходы, восприятие и математика меняются, пожалуй, медленнее, чем в любой другой области интернет разработки.

Итак, какие же бывают онлайн инструменты для подбора цветов и гармоничной палитры, и чем они нам могут помочь?

Не гарантирую абсолютную истину в оценках. Хочу поделиться лично своими впечатлениями.

Все инструменты, рассмотренные в статье, можно разделить на три категории:

Генераторы (вычисляют палитры по специальным формулам цветовой математики. Управляются параметрами):

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

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

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

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

Интересный вариант нам предлагает Color Wizard by ColorsOnTheWeb, там как раз реализованы вариаторы. Но слабовато построение цветовой схемы и никакого взаимодействия с вариаторами.

Анализаторы (получают палитры, анализируя картинки, загружаемые пользователями):

Kuler by Adobe -- давно известный инструмент подбора палитр на базе Флэш. Цветовой математики я здесь не нашел. Вижу только каталог палитр, размеченный тэгами. Палитры получаются выборкой цветов из изображений, которые вы загружаете.

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

Удачный пример анализа картинки на составляющие ее цвета предлагает нам Colors Palette Generator by CSSdrive. Там выбирается полсотни цветов, а из них строится три палитры. Есть, что оценить.

А вот сервис ColorHunter предлагает нам меньше думать :-) Просто сам берет и извлекает палитру из нашей картинки по своему усмотрению. Какую-то. Но вроде неплохо так извлекает.

Комбинированные, универсальные сервисы (сочетают оба подхода):

Toucan by Aviary -- умеет построить к заданному цвету до 20 математических цветовых ассоциаций. Цвета умеет выбрать из картинки с нашей помощью (пипеткой). Сделано не очень удобно.

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

Про замечательную систему ColoRotate мы вам уже рассказывали в статье Работаем с цветом на Colorotate. Вот она как раз делает то, что обещает: умеет и выбрать автоматически цвета из картинки, и вычислить гармоничную палитру. Очень привлекательный 3D-интерфейс.

Идеального инструмента при этом мы с вами так и не нашли...

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

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

А жаль! Была бы реально полезная вещь для дизайнеров! Веб и не только.

Источник: Webmasterish

Мастер-класс: строим сайт с самого начала

Обычно мы стараемся дать необычные дизайны, какие-то тонкости верстки или материалы по саморазвитию. И все это относится к достаточно "продвинутым" мастерам.

А что же делать начинающим? С чего начать? И как вообще это делается?

Статья Design and Code Your First Website in Easy toUnderstand Steps предлагает нам потратить 3-4 часа и пройти 30-шаговый "курс молодого бойца" по созданию своего первого сайта.

Сам по себе сайт получается простой, но минимально достаточный.

На главной есть все основные элементы страницы: хэдер, футер, меню, контентная область и сайдбар.

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

Строим раскладку (layout) будущего сайта

Размечаем страницу в Фотошопе: хэдер, футер и другие важные мелочи

Придумываем и ставим логотип

Оформляем элементы навигации, контентную область и сайдбар

Добавляем интерактивности: ставим кнопку-действие (регистрация)

Окончательная отделка PSD-шаблона

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

Верстаем свою страницу с нуля: размечаем папки и создаем нужные файлы HTML

Чего мелочиться? Учимся сразу верстке DIV-ами. Верстаем грамотно!

Наполняем страницу контентом

Теперь принимаемся за CSS. Это не ошибка, а методика! Учимся владению CSS

Изучаем тонкости CSS-кодирования и инструменты для работы с кодом

Все. Страница сайта готова. А что скажет валидатор?

Анализируем свои ошибки и делаем верстку безупречной.

Неплохо для начинающего веб-дизайнера, а?  Успехов!

Источник: Tessa Thornton

Как защититься от вирусов?

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

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

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

Полную версию статьи читайте здесь:

Как уберечься от вирусов

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

Спам в ICQ и в почтовых программах

Довольно часто ко мне приходят сообщения по ICQ, как из моего списка контактов, так и от неизвестных отправителей, о якобы какой-либо халяве. Они предлагают мне отправить SMS-сообщение “с таким-то текстом” на “такой-то номер”. Совершенно очевидно, что данный компьютер стал жертвой вируса, который рассылает сообщения по ICQ, и что интересно – хозяин компьютера и не подозревает, что его компьютер рассылает спам.

Кроме этого вирус может удалить весь ваш список контактов в аське или даже украсть ваш UIN (номер вашей аськи). Чтобы не заразить Ваш компьютер, запомните: никогда не делайте того о чём вас просят! Даже если вас просит об этом Ваш друг, так как Ваш друг может и не подозревать, что от его имени рассылается спам!!!

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

С вашего номера аськи замечено распространение спама, чтобы удостовериться что вы не бот, отправьте сообщение туда-то… Если вы этого не сделаете, то Администрация ICQ заблокирует ваш UIN.

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

Флешки, CD и DVD диски

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

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

Никогда не подключайте флешки к компьютеру и не вставляйте CD и DVD диски без антивируса! Причём антивирусные базы у антивируса должны быть самые свежие!

Поиск исполнителя через каталог, или…. Взгляд со стороны

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

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

Наталия написал(а): 29 октября , 2010 в 9:55 дп

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

Я зашла в гости к Натали, мы разговорились, и вот – перед вами гостевой пост от моей коллеги. Внимайте, затаив дыхание.

Вместо эпиграфа

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

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

Может, попробуем заново? :)

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

Для каких целей мне нужен был исполнитель?

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

И возникает целая проблема – мы, фрилансеры, умеем убеждать заказчиков, отвоевывать проекты и их выполнять, а вот выбирать исполнителей… Это, к сожалению, умеют лишь единицы из нас – да и у большинства специализация «специалист по подбору персонала».

Что делать?

Я выбрала для себя удобный способ – поиск фрилансера через  каталог. Использовала этот способ несколько раз – пару раз для себя (к примеру, искала того же специалиста по работе с CMS) и один раз – для заказчика. В результате находится исполнитель – ИМЕННО ТОТ. Сотрудничеством с этими тремя людьми я осталась довольна – и очень часто рекомендую их своим друзьям и знакомым.

С чего начинается поиск через каталог

Иии, каталог… Первое, что поняла – высокий рейтинг и первые места в каталоге не являются показателем успеха или опыта. А еще – что незаполненность профиля вызывает некоторые размышления – к примеру, банальное отсутствие аватара или альтернативных способов связи, кроме электронной почты.

«Безликий» фрилансер не вызывает доверия, отсутствие дополнительных контактных данных означают неудобства в общении. Поэтому ТОП-5 качествами фрилансера должны быть (именно в таком порядке):

Ø портфолио и опыт работы;

Ø возраст и наполненность профиля – в него входят и дополнительные контактные данные;

Ø указание основных навыков и специализации – к своему разочарованию, ни капли не прельстили товарищи, располагавшиеся в дополнительных специализациях;

Ø цены – ну как же без них!

Ø отзывы – отзывы заказчиков. Отзывы фрилансеров – в последнюю очередь.

Последующие этапы поиска

После этого – более подробное рассмотрение выбранных кандидатов. Большинство «отпадают» по примерам работ, часть – по опыту работы.

Самый последний этап – переписка. На данном этапе отпадает до 50% претендентов, по одной простой причине – задержки в ответах, туманные ответы, отсутствие четкой концепции решения проблемы.

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

Каковы критерии отбора?

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

Но есть и особенности, которые трудно объяснить в двух словах. Есть что-то, чем привлекает определенный исполнитель. К примеру, корректор подкупил образованием и примерами работ, а фрилансер, помогавший с кодом – указанием, что он работает только с кодами WP, а не с Joomla или другими CMSками.

Цены – последний пункт рассмотрения, но не скрою, что значимый.

Насколько быстро удается найти исполнителя?

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

Успешно ли было сотрудничество?

Да, все три раза оставалась довольна – и заказчик, которому посоветовала парочку фрилансеров, тоже доволен. И до сих пор общаемся, кстати с этими исполнителями.

Для кого проще найти сотрудника – для себя или для заказчика?

Найти проще для себя – я же знаю, что и кого ищу. Всю ответственность за выбор исполнителя для своего проекта возлагаю только на себя – если не сработаемся или просто что-то не получится, то это будет «дело двух человек». А вот у заказчика могут  появиться дополнительные требования, пожелания… Это необходимо учитывать.

Польза этого метода

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

Так сказать, «влезаешь в шкуру ЦА». И еще – общение с заказчиками, точнее, как не надо с ними общаться. Когда пишешь с «зеленого аккаунта», отношение совсем другое, в отличие от переписки через фриласерский аккаунт.

Мы не всегда правильно общаемся с заказчиками. Очень часто – сами отталкиваем заказчика от себя своим же поведением или профилем.

Как заказчик – что иногда – конечно, не во всех специализациях, искать нужно не с начала каталога, а с конца. Но и в конце каталога можно найти ТАКОЕ… Но не все золото, что блестит – ТОП и куча отзывов от заказчиков (и коллег) зачастую ничего не значат – если человек  не разбирается в предмете заказа. Иногда встречается элементарная накрутка рейтинга.

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

Недостатки этого метода

Но не все хорошее бывает идеальным – у данного способа есть и масса недостатков.

Основной – время, то есть его затраты – на просмотр каждого профиля уходит в среднем 10 минут.

При публикации проекта ждешь, пока все «принесут на блюдечке». При самостоятельном же поиске исполнителя необходимо терпение и четкое ТЗ. Если нет четкой цели или проблемы, то такой поиск превращается в блуждание в тумане – а в проекте фрилансер может предложить решение проблемы, чем и заинтересует.

Возможная занятость фрилансера. Многие не ставят статус «занят», а когда им пишешь, отвечают, что заняты… Или вообще не отвечают. Кроме всего прочего, нужна интуиция – чутье на людей.

Буду ли впредь пользоваться таким способом?

Да, думаю, что постоянно буду пользоваться. Так удобнее – никто не отправляет послания в «личку», не получаешь кучу заявок от людей, находящихся в совсем другой специализации… И никого вроде не обижаешь – что того выбрали, а того – нет.

Да, и больше гарантии найти именно «того» специалиста, а не человека, умеющего красиво рассказывать о своих преимуществах.

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

Анна Тарасова