Записки лондонского фрилансера

Люди, которые делают вебсайты

Рубрики: Баннеры, Верстка, Дизайн, маркетинг, Переводная статья, Психология, Психология бизнеса, Фриланс

На днях он-лайн журнал для дизайнеров A list apart (www.alistapart.com) опубликовал (http://aneventapart.com/alasurvey2009/) результаты социологического опроса, проведенного среди своих читателей – кто вы, люди, которые делают вебсайты?

85% читателей этого журнала оказались белыми людьми из Северной Америки и Европы (51% – США, 10,6% – Великобритания, 6,2% – Канада), поэтому тему этого топика можно было бы изменить: люди в США и Европе, которые делают сайты. Читатели из России, если и были, составили менее 0,5%. Всего на вопросы анкеты ответили 25,788 человек.

Каков же усредненный портрет веб-девелопера из США и Европы? 

Возраст:

18 лет и меньше – 1.8%, 19-29 лет – 49.6%, 30-44 лет – 42.3%, 45-64 – 6.1%. Хорошо им, школьнеГОВ менее 2х процентов:).

Пол:

82.6% – мужчины.

Образование:

91% учились в колледжах или университетах, 70,4% имеют дипломы PhD, Master или Bachelor (т.е. дипломы об окончании университета или степени кандидатов наук).

Насколько релевантно полученное веб-разработчиками образование?

Полученное образование совсем не связано с работой только у 18%. Более половины (52%) западных веб-разработчиков имеют образование, связанное с их работой.

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

Рабочее время

В общем, понятно и без перевода. 40-49 часов в неделю – это примерно 7-8 часов в день (с учетом одного выходного). Однако на западе принято отдыхать 2 дня в нелелю, поэтому рабочий день большинства ответивших – 8-10 часов эффективной работы (кто меньше работает, тот больше зарабатывает).

В опросе принимали участие и те, кто совмещает работу фрилансера – девелопера с основной работой, поэтому неудивительно, что многие работают и менее 20 часов в неделю.

Зарплата

И сколько же они зарабатывают?

А тут можно узнать, сколько зарабатывают IT-шники в Великобритании.

Какие специалисты востребованы в Великобритании.

5 правил создания эффективной кнопки призыва к действию

Рубрики: Баннеры, Блогосфера, Верстка, Дизайн, Переводная статья, Реклама, Фриланс

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

У вас есть свой сайт? Свой блог? Вы ведете его просто ради удовольствия или используете его (хотя бы изредка) для саморекламы или продажи своих услуг? Если да, то очень советую прочитать краткий перевод статьи “The Principles of Great Call to Action Buttons”, опубликованной на дизайнерском сайте psdfan.com (линк

http://psdfan.com/inspiration/web-design/the-principles-of-great-call-to-action-buttons/).

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

Итак, какой должна быть эффективная кнопка призыва к действию?

Размер

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

---

Контраст

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

Кстати: как показал эксперимент, на кнопку красного цвета кликали на 21% больше пользователей, чем на зеленую.

---

Расположение и паддинг

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

---

Кнопок не должно быть много

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

---

Дизайн кнопки

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

---

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

20 бесплатных электронных книг для дизайнера и блоггера

Рубрики: Блоги о фрилансе, Верстка, Дизайн, маркетинг, Переводная статья, Полезные ссылки, Реклама, Фриланс

В блоге speckyboy.com опубликована отличная подборка бесплатных электронных (в PDF формате) книг для дизайнеров и блоггеров (http://speckyboy.com/2010/09/02/20-useful-free-pdf-ebooks-for-designers-and-bloggers/). Некоторые из них я бы отнесла к разряду маст – их просто необходимо прочитать, если вы еще не сделали этого. Да, все они на английском… Надеюсь, это вас не очень огорчило . Зато все книги – легально бесплатные и выложены авторами в свободный доступ.

---

Peter Pixel
Introduction to Good Usability
Краткий учебник – введение в юзабилити. Расчитан прежде всего на начинающих дизайнеров. Нет тонкостей и ньюансов, но основы юзабилити веб-сайта изложены кратко и доступно.

Автор и источник http://www.peterpixel.nl/writings/introduction-to-good-usability/
Скачать PDF

Также в блоге есть: 35 ресурсов, помогающих улучшить юзабилити сайта.

---

Seth Godin
KnockKnock
Книга о том, как, используя современные инструменты маркетинга, заставить веб-сайт работать более эффективно.

Автор и источник http://sethgodin.typepad.com/seths_blog/2005/09/free_ebook_1_no.html

---

Seth Godin
Who’s There?Еще одна книга этого же автора, рассказывающая, как собственный блог может положительно повлиять на вашу карьеру и что для этого нужно сделать.

Автор и источник http://sethgodin.typepad.com/seths_blog/2005/09/whos_there_the_.html

Скачать PDF

---

Mike Smith
Guerrilla FreelancingКнига для фрилансеров – как начать зарабатывать деньги, что необходимо фрилансеру. Расчитана на начинающих, хотя и более опытным фрилансерам будет интересно узнать об особенностях работы с зарубежными заказчиками.

Автор и источник http://www.guerrillafreelancing.com/download-the-guide-to-guerrilla-freelancing-ebook-for-free/

Скачать PDF

---

Mark McGuinness
Time Management for Creative PeopleТайм-менеджмент для креативных людей – как планировать свое время, чтобы его хватало на все. Много очевидных истин, но все же…

Автор и источник http://www.wishfulthinking.co.uk/2007/12/03/time-management-for-creative-people-free-e-book/

Скачать PDF

---

Hugh MacLeod
How To Be CreativeКнига пытается рассказать, как быть креативным. Автор, рекламщик и популярный блоггер, предлагает свои 26 проверенных советов, как быть действительно креативным. Каждый совет сопровождается веселой картинкой от автора.

Автор и источник  http://changethis.com/manifesto/show/6.HowToBeCreative

Читать http://changethis.com/manifesto/6.HowToBeCreative/pdf/6.HowToBeCreative.pdf

---

AIGA
Why design?Книга о роли дизайна в бизнес-стратегии и о том, как дизайн помогает решать бизнес-задачи. В написании участвовали многие ведущие западные дизайнеры.

Источник http://www.aiga.org/content.cfm/why-design

Скачать PDF

---

Michael Martine
How to Start a Business BlogПошаговая инструкция о том, как вести бизнес-блог.

Автор и источник http://remarkablogger.com/how-to-start-business-blog-ebook/

---

Forty
Forty’s Pocket Guide to SEOВсе что надо знать о SEO. Книга будет интересна всем, у кого есть свой сайт или блог и кто заботится о его оптимизации и раскрутке в поисковых системах. Расчитана, на мой взгляд, на начинающих. Никаких тем авторы не палят и Америку не открывают.

Автор и источник http://www.fortyagency.com/stuff/post/fortys-pocket-guide-to-seo

Скачать PDF

---

И несколько книг о верстке и типографике – поскольку мне они менее интересны, привожу только названия и ссылки, по которым можно скачать книги.

---

Natalie Downe
CSS Systems For Writing Maintainable CSS
Автор и источник http://natbat.net/2008/Sep/28/css-systems/

---

Nathan Ford
Better CSS Font StacksЧитать http://unitinteractive.com/blog/blog-images/BetterFontStacks.pdf

---

Bram Pitoyo
Faster, and More Secure WebfontsЧитать http://noteandpoint.com/documents/pdf/fmsw.pdf

---

Jacob Cass
Type Classification eBookЧитать http://justcreativedesign.com/web/type-classification-ebook.pdf

---

freehtml5templates.com
HTML5 Quick Learning Guide
Как быстро перейти от HTML к HTML5.Читать http://freehtml5templates.com/downloads/free/html5-quick-learning-quide.pdf

Скачать PDF

---

FontShop
Web Font User GuideЧитать http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

Скачать PDF

---

Erik Spiekermann
Typo Tips – Seven Rules for Better TypographyЧитать http://www.fontshop.com/education/pdf/typo_tips.pdf

Скачать PDF

Как сделать скриншот всего сайта? Полезная ссылка

Рубрики: Верстка, Дизайн, Полезные ссылки

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

Сделать скриншот одного экрана элементарно – PrintScreen. Но иногда текст или картинка занимает 2-3 экрана.

Сделать скриншот главной страницы сайта целиком можно с помощью capturefullpage.com.

Вводите урл сайта, жмете на “Take screenshot” и получаете скриншот всей страницы сайта. Для примера, скриншот главной страницы этого блога temza.com делался секунд 20. Файл jpg, полученный в результате, весил 7,3 мегабайта. Как-то я много пишу .

Фиксированный сайдбар с помощью CSS

Рубрики: Верстка, Дизайн, Переводная статья

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

На сайте DesignM.AG недавно была опубликована очень интересная статья – как “приклеить” сайдбар и сделать его неподвижным при скроллинге основного контента сайта (урл статьи designm.ag/tutorials/sticky-sidenav-layout/).

Так это выглядит в реале: http://www.sohtanaka.com/web-design/examples/sticky-nav/

Допустим, ваш сайт или блог состоит из двух колонок. Колонка поуже – меню, колонка пошире – основная часть сайта. Меню сравнительно короткое (пол-экрана), основная часть сайта – длинная (3-4 экрана и больше). Хотелось бы, чтобы меню было постоянно в поле зрения посетителя сайта, даже при прокрутке:

Оказывается, реализовать это с помощью CSS несложно.
HTML

< div class="container" >
< div id="sidenav><!--Fixed Sidenav Goes Here--></div> <div id=">< /div >
< /div>

СSS

.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url(container_stretch.gif);
font-size: 1.2em;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Фиксирует навигацию на одном месте--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Контент справа--*/
width: 640px;
padding: 0 20px 20px;
}


К сожалению, в IE6 это не работает, поэтому приходится фиксировать навигацию иначе:


*html #sidenav {
position: absolute;
left: expression( ( 0 ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) 'px' );
top: expression( ( 0 ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) 'px' );
}

Еще несколько статей для дизайнера – верстальщика:
5 простых, но полезных свойств CSS для дизайнеров и верстальщиков
Юзабилити: увеличение кликабельной зоны
Объемные буквы без Фотошопа (letterpress effect)

Объемные буквы без Фотошопа (letterpress effect)

Рубрики: Баннеры, Верстка, Дизайн

Буквально вчера наткнулась на интересную информацию – как на веб-сайте сделать буквы объемными. Причем не делая их картинкой в Фотошопе .

Автор статьи, в которой описана данная функция (http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow), называет этот эффект letterpress effect.

Полезность очевидна – заголовки постов или разделов сайта можно сделать красивее и заметнее, при этом текст остается текстом и доступен поисковикам. Да и Фотошоп лишний раз запускать не надо.

Минус – не все браузеры поддерживают CSS3, в котором есть необходимая опция text-shadow. Зато плюс – Safari и Firefox (3.1+) поддерживают эту опцию, а Firefox становится все более и более популярным браузером (в то время как Эксплорер сдает свои позиции).

Чтобы сделать буквы объемными, им надо добавить тени. Чтобы сделать тени, используется стиль text-shadow:

Тень описывается 4 параметрами: x-offset, y-offset, blur и цвет тени. Можно задать цвет тени темнее цвета букв, тогда в результате получаем выпуклые буквы (“Line 25″ на вышеприведенной картинке).

Для получения  letterpress эффекта тень должна быть немного светлее, чем текст. В данном случае (первый имидж в этом посте, темный текст) использованы #555555 для тени и более темный  #222222 для текста:

color: #222;
text-shadow: 0px 2px 3px #555;

Для тех, кому нужна работа в москве – сайт job.ru. Поиск вакансий, подписка на новые вакансии, советы по составлению резюме. Подробная информация о ярмарках вакансий в Москве. Если вам нужен работник – разместите объявление бесплатно за 3 минуты.

Юзабилити: увеличение кликабельной зоны

Рубрики: Верстка, Дизайн, Переводная статья, Фриланс

Статьи о принципах и правилах юзабилити – статьи полезные. К сожалению, 99% всех статей на эту тему повторяют или перефразируют Якоба Нильсена. Но есть и тот 1%, который несет в себе новое и интересное.

Журнал для дизайнеров SmashingMagazine.com в очередной раз обратился к проблеме юзабилити (http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/). Одна из идей статьи показалась мне вполне заслуживающей внимания и отдельного поста.

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

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

Чтобы увеличить пространство вокруг ссылки, можно либо увеличить размер самой ссылки, либо увеличить padding вокруг ссылки. Последнее достигается добавлением “padding” в стили ссылок:

<a href=”http://www.examplesite.com” style=”padding: 5px”>Example Site</a>

Паддинг можно вынести в CSS:

<style>

  div.nav a { padding: 5px; }

</style>

<div class="nav">

  <a href="">First link</a><a href="">Second link</a>

</div>

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

Полезные плагины для блога на WordPress

Рубрики: Блогосфера, Верстка, Полезные ссылки

Плагин Add Post Footer

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

Установка плагина Add_Post_Footer

1. Скачать архив плагина Add_Post_Footer (вы также можете бесплатно скачать плагин с сайта разработчика www.freetimefoto.com/add_post_footer_plugin_wordpress).
2. Распаковать архив.
3. Загрузить .php файт в папку плагинов (plugin) на хостинге
4. Активировать плагин
5. Для конфигурации плагина Option Add Post Footer tab

Плагин Automatic SEO Links

Забудьте о ручном проставлении ссылок в постах. Установите плагин, задайте слово и урл сайта, на который надо ссылаться, и плагин сам автоматически проставит все ссылки (еще и посчитает, сколько ссылок поставил). Вы можете задать title ссылки, rel. Для тренировки проставьте ссылки на сайт temza.com со всем слов «фриланс», которые встречаются в вашем блоге .

Скачать Automatic SEO Links плагин (сайт разработчика http://cvs.aesinformatica.com)

Плагин Twitter Tools

Плагин, обеспечивающий интеграцию вашего вордпресс-блога и Twitter аккауна.
Скачать Twitter Tools плагин

Похожая тема в моем блоге:
Плагин для вставки YouTube в сайт на WordPress