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

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

a list apart magazine

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-шники в Великобритании.

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

Сайт висит у всех или только у меня? Ответ на вопрос

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

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

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

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

I.

down for everyone or just me? (висит у всех или только у меня)
downforeveryoneorjustme.com

Дизайн сайта прост до невозможности, по сравнению с этим сайтом главная страница гугла – просто нагромождение текста и графики.

site down just for me
Зато пользоваться очень просто – вводите урл своего сайта и проверяете.
Недостаток сервиса – похоже, ваш сайт проверяется только с одного айпи.

II.

host-tracker.com

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

host tracker

Вводите урл сайта и кликаете по кнопке “Check now”. Результат проверки выдается в виде таблицы. В левой колонке – локализация проверяющего компьютера. Таких компов много, они расположены в разных странах – на моем скрине есть компы в США, России, Украине, Гонконге и Канаде. Статус OK означает, что сайт виден. Далее слева направо идет размер главной страницы сайта (должен быть одинаковым у всех, если страница загружается полностью) и время загрузки (у моего блога оно приемлемое – 1-3 секунды).

III.

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

hide my ass.com (дословный перевод урла сайта – спрячь мою задницу)

hide my ass

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

И еще один онлайн-сервис, дающий анонимность IP

anonymouse.org

анонимность сайта

Тексты или видео-подкасты – что предпочитают пользователи (результаты опроса)

Авторы сайта psd.tutsplus.com недавно провели опрос: в каком формате читатели сайта хотели бы видеть размещенные на нем уроки – в текстовом или в формате видео-урока? (урл опроса http://psd.tutsplus.com/articles/news/poll-do-you-prefer-written-or-video-content/). Даже если вас абсолютно не интересуют уроки рисования в Фотошопе, сам подход к подаче информации должен быть интересен всем, у кого есть свой сайт или блог. Следует ли переключиться на входящий в моду формат видео-подкастов или лучше по-старинке писать гусиным пером тексты  в блоге? Что предпочитают читатели – тексты или видео?

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

тексты или видео

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

Аргументы в пользу написанного текста:

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

Аргументы в пользу видео:

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

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

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% больше пользователей, чем на зеленую.


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

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

пространство вокруг кнопки на сайте


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

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

кнопка на сайте


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

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

дизайн кнопки на сайте

Синий цвет приносит удачу в бизнесе?

Чтобы быть действительно успешным, фрилансер должен не просто быть хорошим специалистом, он должен стать брендом. Хороший пример тому – Артемий Лебедев. Можно по-разному относиться к его хуйне работам, но первое имя, которое приходит на ум при слове “дизайнер” – это Лебедев. Не у всех, но у многих. Как “поэт – Пушкин”, хотя кто-то, конечно, скажет “Хлебников”.

Если проанализировать бренды ведущих фрилансеров, можно увидеть, что при разработке бренда имени себя важную роль играет все – и никнейм, и вебсайт (представляете сайт Лебедева на бесплатном narod.ru?), и репутация в сети, и собственный блог, и даже узнаваемый аватар. Но данный топик будет посвящен логотипам.

Какой логотип выбрать для себя? Я бы выбрала тот, который нравится лично мне. Конечно же, он должен быть выполнен профессионально, но главный критерий был бы один – нравится мне или нет.

А авторы www.COLOURlovers.com собрали логотипы top 100 веб-сайтов и проанализировали цветовую гамму ведущих онлайн брендов (The Most Powerful Colors in the World, ссылка http://ru-ru.colourlovers.com/business/blog/2010/09/15/the-most-powerful-colors-in-the-world). И вот что они получили

ведущие цвета брендов

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

10 лет назад журнал “Wired Magazine” проанализировал цвета самых успешных корпораций Америки. И этот анализ также показал явное лидерство синего и красного:
самые влиятельные цвета

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

Комментаторы статьи предложили более наукообразное объяснение могуществу синего цвета: 5-10% мужчин страдают той или иной формой дальтонизма, причем большинство не различает цвета в оранжево-желто-зеленой области спектра. Частично этот вывод подтверждает и сам автор статьи: “Я однажды спросил Марка Цукерберга (Mark Zuckerberg), основателя Фэйсбук, почему он выбрал синий цвет для дизайна его сайта. Он ответил, что он – дальтоник, и синий – это единственный цвет, который он хорошо различает”.

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

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

Verdana – самый лучший для зрения шрифт

Проводящим сутки за компами фрилансерам эта информация обязательно покажется интересной – по данным научной лаборатории эргономики зрения (Vision Ergonomics Research Laboratory), Verdana был признан самым безопасным для зрения шрифтом. При этом текст, набранный шрифтом размером в 10-12 pt, воспринимается без особого напряжения для зрения.

вердана - самый безопасный фонт

Единственное (или главное) НО – финансировалось исследование компанией Микрософт, которой и принадлежит шрифт Вердана. Правда, относится он к категории дефолтных фонтов и уже установлен на всех компьютерах с лицензионной Виндоус.

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

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

По материалам
http://www.themedguru.com/20100816/newsfeature/viewing-wrong-font-can-cause-computer-vision-syndrome-study-86139553.html.
http://www.techeye.net/internet/scientists-claim-that-verdana-is-the-best-typeface

Где найти ТЗ? На www.freetz.ru

Чтобы не было конфликтов с заказчиком, работайте по ТЗ.
Настолько банальный совет постеснялся бы дать даже Капитан Очевидность :). “Да это и так все знают” – покивал головой дизайнер и ушел рисовать то, что заказчик ему описал как “ну короче надо чтобы было брутально и с черными блестками”.

Чтобы работать по ТЗ, надо, как минимум, иметь ТЗ (техническое задание). И тут может пригодиться интересный сайт  www.freetz.ru, на котором собраны примеры технических заданий на разработку веб-сайтов, логотипов, текстов, баннеров, визиток и другой полиграфической продукции и т.д.

Конечно, брифы и ТЗ  придется доработать под конкретный проект, но уже хорошо, когда есть что доработать.

При желании можно добавить свой бриф на сайт – кто-нибудь потом скажет вам спасибо, это позитивно отразится на карме и в следующей жизни у вас будет еще больше заказов :).

сайт бесплатных ТЗ брифов

Короче, ссылка фрилансерам в мемориз.

Еще несколько полезных ссылок из прошлых постов в темзе.ком:

Пирамида веб-стратегии: как создать лучший веб-сайт

В эпоху (а 2-3 года по меркам Интернета уже можно нахвать эпохой) нездорового увлечения SEO (оптимизацией сайтов), социальными сетями, экспериментами над юзабилити (какой сайт приносит больше прибыли – красивый или уродливый?) многие просто забывают (или забИвают), ради чего вообще создаются сайты. Для монетизации? Хм…

 

Пару дней назад на сайте sixrevisions.com была опубликована статья “The Web Strategy Pyramid: A Well-balanced Web Strategy” (“Пирамида веб-стратегии“). Ссылка на статью http://sixrevisions.com/content-strategy/the-web-strategy-pyramid-a-well-balanced-web-strategy/.
Автор статьи – Jason Schubring (его страница на Linkedin http://www.linkedin.com/in/jschubring) – веб-разработчик, на счету которого более сотни созданных веб-сайтов. Суть статьи заключена в самом ее названии – автор предлагает пирамиду стратегии создания сбалансированного веб-сайта.

Как в любой пирамире, чем выше слой, тем меньше его объем. И тем менее важен он для качественного веб-сайта.

пирамида веб-стратегии

Как видим, в основе пирамиды расположен контент – содержание сайта. То, ради чего пользователь приходит на сайт. Доля контента – максимальна. Если его не будет, пирамида просто рухнет. Чуть выше идет слой юзабилити – когда у вас уже есть полезная информация на сайте, ее надо правильно подать. Хорошее жаркое для гостей приятно выложить на серебрянные блюда.Но подайте гостям одни пустые тарелки… и послушайте, что думают пользователи о сайтах без полезного контента :).

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

Ну и в самом верху, маленький и неброский, кусочек пирамиды, посвященный PPC – “pay-per-click”. Иными словами, монетизация сайта. Вот тут уже можно и ставить те волшебные красные кнопочки, на которые тыкают чаще, чем на зеленые. Но контент все равно рулит. Все остальное – десерт, который нужен, но который все равно не заменит основное блюдо.

 

WordPress3.0 вышел в свет

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

wordpress 3.0

Почитать о новой версии Вордпресса можно в блоге на wordpress.org. Там же выложен видеоролик, показывающий новые возможности Вордпресса номер 3.0.

Что нового приготовили нам создатели WordPress3.0?

  • Слияние WordPress MU и WordPress, что позволит установить Вордпресс один раз и управлять несколькими сайтами из одной панели.
  • Возможности легко видоизменять темы для Вордпресс прямо в панели управления – менять фон, заголовок, вид меню и т.д.
  • Новой темой по умолчанию станет Twenty Ten – прощай набивший оскомину Kubrick.

Ну и так далее. А что именно далее – станет понятно после того, как апдейтну версию Вордпресс на своем блоге.

Скачать WordPress 3.0 можно с того же официального вордпрессового сайта, с которого скачивали и все предыдущие версии: http://wordpress.org/download/. Да, и перед апдейтом лучше сделать бекапы.

Добавлено 27.06.10. О мультисайтовости. Как было написано выше, WordPress 3.0 позволяет упарвлять несколькими сайтами, установив всего одну систему управления. Чтобы эта опция заработала, необходимо в файл wp-config.php добавить строку


1 define('WP_ALLOW_MULTISITE', true);

Подробнее о подключении сетки сайтов к одной системе управления написано в http://www.deluxeblogtips.com/2010/05/multisite-wordpress-30.html.

wordpress 3.0