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

Webсборник.com для дизайнеров - антипиратов

Опубликовано admin в разделах Моя жизнь, Полезные ссылки, Фриланс, Баннеры, Дизайн

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

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

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

websbornik.com - бесплатные инструменты для дизайнера.

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

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

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

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

7 имиджей, которые нельзя использовать в дизайне

Опубликовано admin в разделах Переводная статья, Дизайн

Еще в сентябре 2009 года дизайнерский блог justcreativedesign.com опубликовал интересную подборку семи имиджей, которые превратились в клише и кочуют из дизайна в дизайн (Top 7 Most Cliché Stock Images Used in Web Design, урл статьи http://justcreativedesign.com/2008/09/30/top-7-most-cliche-stock-images-used-in-web-design/).

Деловое рукопожатие

Девушка из call-центра с телефоном и лимонной улыбкой

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

Упорно ползущий вверх график роста чего-нибудь

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

Четверть ноутбука, 2/3 мышки и карандаши

Глобус города, в котором живет дизайнер

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

Статьи по теме в блоге темза.ком:

Шаблонные фотографии и клип-арт проще всего искать на бесплатных фотостоках.

Не только хороший дизайн должен быть нестандартным. Хорошая запоминающаюся реклама - это нестандартная реклама:

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

Новогодние RSS и векторные иконки

Опубликовано admin в разделах Полезные ссылки, Дизайн

А Новый год все ближе и ближе :).

Вы еще не украсили свой сайт или блог к Новому году? Если нет, возможно, новогодние иконки, собранные на сайте http://naldzgraphics.net, помогут создать новогоднее настроение. Все иконки - бесплатные и могут использоваться как для личных, так и для коммерческих веб-сайтов.

Все наборы иконок можно скачать с сайта http://naldzgraphics.net/freebies/a-collection-of-free-unique-christmas-icon-sets/.

Наборы новогодних RSS иконок и иконок для социальных сетей:

скачать новогодние RSS иконки (иконки также можно скачать с сайта http://psdfan.com/freebies/icons/psdfan-exclusive-christmas-icon-set/)

Новогодние иконки всех социальных сетей

Каждая иконка представлена в нескольких размерах:

Скачать иконки можно на сайте http://www.iconarchive.com/category/christmas/christmas-social-bookmark-icons-by-fasticon.html.

Еще один набор из 30 иконок для социальных сетей (скачать иконки можно с сайта создателя иконок http://www.chethstudios.net/2009/11/christmas-special-social-networking.html)

Набор из 5 новогодних иконок (скачать можно с сайта http://www.clevericons.com/icon/christmas06/)

Деды Морозы (скачать иконки). Иконки бесплатны только для некоммерческого использования.

Просто новогодние иконки (скачать)

Иконки с новогодней (или просто праздничной) едой от SmashingMagazine - иконки представлены как в растре, так и в векторе. Скачать иконки можно здесь http://www.smashingmagazine.com/2009/12/24/yummy-a-free-tasty-icon-set/ (или с сайта дизайнера иконок http://iconeden.com/blog/2009/12/24/get-yummy-free-tasty-icons/).

Ну и самое интересное - векторные новогодние иконки (скачать иконки можно с сайта http://mohsenfakharian.deviantart.com/art/28-christmas-vector-icon-RS-105557329, архив весит 5,2 Mb)

Также в моем блоге можно найти и скачать:

Бесплатные новогодние иконки - украшаем свои сайты
Бесплатные новогодние кисти для фотошопа
Лучшие бесплатные иконки 2009
48 бесплатных иконок для RSS

40 лучших обработок текста в фотошопе 2009 года

Опубликовано admin в разделах Переводная статья, Полезные ссылки, Дизайн

49 самых креативных урока фотошопа 2009 года
Лучшие бесплатные иконки 2009

Продолжают хит-парад “лучшего в 2009 году” лучшие обработки текста в фотошопе от дизайнерского журнала speckyboy.com (The Best 40 Photoshop Text Effects from 2009,  http://speckyboy.com/2009/12/18/the-best-40-photoshop-text-effects-from-2009/)

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

3D буквы фантастических цветов. Урок фотошопа http://psd.tutsplus.com/tutorials/text-effects-tutorials/add-fantastic-color-to-3d-text-part-i/

Цветастые буквы. Урок фотошопа http://drawingclouds.com/2009/05/create-a-frilly-2009-typo/

В рисунке использованы кисти для фотошопа Orgumi Deco (можно скачать по ссылке http://pixelchemist.deviantart.com/art/Brushes-Orgumi-Deco-Set01-75443699).

3D - цветные буквы (урок http://www.gomediazine.com/tutorials/3d-typography-photoshop/)

Буквы в огне. Урок фотошопа http://photoshop.kingtutz.com/2009/10/22/scorching-fire-text/

и в воде (урок по ссылке http://www.adobetutorialz.com/articles/30970034/1/Photoshopping-Aqua-Wallpaper)

и в дыму (урок фотошопа http://psdlearning.com/2009/05/create-smoke-text/)

Буквы, покрытые льдом (урок http://psd.tutsplus.com/tutorials/text-effects-tutorials/how-to-create-an-ice-text-effect-with-photoshop/)

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

Облачно, возможны осадки в виде фрикаделек букв (урок фотошопа http://abduzeedo.com/photoshop-quick-tips-6-cloudy-text)

3D эффект. Урок фотошопа http://psdguides.com/2009/07/deep-grunge-text-effect/

35 ресурсов, помогающих дизайнеру улучшить юзабилити сайта

Опубликовано admin в разделах Переводная статья, Полезные ссылки, Дизайн

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

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

Все полезные сайты разбиты на 2 категории - платные и бесплатные ресурсы. Я остановлюсь, в первую очередь, на бесплатных ресурсах.

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

Урл статьи http://designm.ag/resources/usability/

WebsiteOptimization.com

Бесплатный ресурс, позволяющий проверить размер страницы, ее структуру и время загрузки вашего сайта.
Вводите урл либо html код и кликаете на “Submit”.

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

TOTAL_HTML ….
TOTAL_OBJECTS - Warning! The total number of objects on this page is 55 which by their number will dominate web page delay. Consider reducing this to a more reasonable number….
TOTAL_IMAGES - Warning! The total number of images on this page is 53 , consider reducing this to a more reasonable number. Recommend combining, replacing, and optimizing your graphics. Replace graphic rollover menus with CSS rollover menus to speed display and minimize HTTP requests.
TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 1 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page. Remember to place CSS files in the HEAD and JavaScript files at the end of the BODY to enable progressive display.
TOTAL_SIZE - Warning! The total size of this page is 1483606 bytes, which will load in 306.68 seconds on a 56Kbps modem. Consider reducing total page size to less than 100K to achieve sub 20 second response times on 56K connections….
HTML_SIZE - Congratulations, the total size of this HTML file is 25223 bytes, which less than 50K….
IMAGES_SIZE - Warning! The total size of your images is 1448616 bytes, which is over 100K. Consider switch graphic formats to achive smaller file sizes (from JPEG to PNG for example)….
CSS_SIZE - Caution. The total size of your external CSS is 9767 bytes, which is above 8K and less than 20K. For external files, ideally keep them less than 1160 bytes to fit within one higher-speed TCP-IP packet (or an approximate multiple thereof)….

Dead-Links.com

Проверяет все исходящие ссылки вашего сайта и находит “битые” ссылки. Полезно проверять свой сайт время от времени, особенно комментарии в блоге.

ClickHeat

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

Программа бесплатная, но требует установки на сервер в ту же директорию, в которой находится ваш сайт. Скачать программу можно с сайта http://www.labsmedia.com/clickheat/index.html (или прямо отсюда), там же даны инструкции по установке программы и минимальные требования системы).

5-тисекундный анализ сайта

Загружаете свой дизайн (в виде картинки) на сайт и тестируете, что реальные пользователи увидят и запомнят на сайте в первые 5 секунд просмотра. Сервис англоязычный, поэтому, скорее всего, русскоязычные сайты никто не поймет.

Colour contrast check (проверка контрастности цветов сайта)

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

Передвигая слайдеры, можно выбирать различные сочетания цвета текста и фона. При этом автоматически расчитываются Brightness Difference, Colour Difference и дается рекомендация, насколько выбранные 2 цвета сочетаются между собой.

Luminosity Colour Contrast Ratio Analyzer (анализатор контрастности 2х цветов)

Вводите 2 цвета (в #fff формате) и проверяете, достаточно ли соотношение между их контрастностями. Если нет - лучше не использовать сочетание этих цветов для текста и фона на одном сайте. Отношение контрастностей для черного и белого - 21, для белого и белого - 1. Все остальное, наверное, будет между этими цифрами, и чем ближе ваше соотношение к 1, тем хуже.

Graybit - ваш сайт в черно-белом формате

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

Чтобы проверить свой сайт, вводите урл и кликаете на “Make It Gray”. Например, анализ моего сайта показал, что заголовки статей у меня в блоге можно бы сделать побольше размером.

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

Userfly

Userfly позволяет записывать движения мышки пользователя и клики по ссылкам.

Бесплатный пакет позволяет получить анализ движения 10 пользователей по сайту в месяц, цена на платные пакеты варьируется от $10 (за 100 пользователей) до $200 (10,000 пользователей) в месяц.

Статьи по теме “юзабилити” в блоге:

• Как пользователь воспринимает насыщенный текстом веб-сайт - результат эксперимента
• Красота сайта versus юзабилити - результат эксперимента
• Интересная тенденция в дизайне меню веб-сайтов
• 10 наиболее частых ошибок, которые делают дизайнеры
• Фрилансерская мудрость - и опять о юзабилити с точки зрения пользователя
• Формы – дизайн с точки зрения юзабилити
• TOP-10 юзабилити-ошибок рунета - Роман Настенко против Якоба Нильсена

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

49 самых креативных урока фотошопа 2009 года

Опубликовано admin в разделах Переводная статья, Полезные ссылки, Дизайн

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

Хит-парады 2009 года продолжаются. После лучших бесплатных иконок 2009 года пришла очередь дизайнеров - специалистов по фотошопу и их наработок. Дизайнерский блог speckyboy.com представил 2 интересные подборки: лучшие уроки фотошопа 2009 года и лучшие фотошоп-эффекты обработки текста.

49 самых креативных урока фотошопа 2009 года

49 Most Creative Photoshop Tutorials of 2009
http://speckyboy.com/2009/12/14/49-most-creative-photoshop-tutorials-of-2009/

Всего автор speckyboy.com отобрал 49 лучших (по его мнению) урока фотошопа, я приведу только несколько наиболее понравившихся картинок.

Апокалиптический город. Не знаю, уместно ли будет использовать такой эффект в дизайне, но для обработки фотографий в фотошопе подойдет отлично (урок http://psd.tutsplus.com/tutorials/photo-effects-tutorials/how-to-make-a-dark-post-apocalyptic-city-illustration/)

Светящаяся полоска. Отлично подойдет и для дизайна, и для обработки фотографии. Ссылка на урок http://www.digitalartsonline.co.uk/tutorials/index.cfm?FeatureID=1738

Ссылка на урок http://psd.tutsplus.com/tutorials/photo-effects-tutorials/how-to-create-a-chilling-photo-manipulation-in-photoshop/

Кино- фотолента (урок http://www.webdesignerwall.com/tutorials/photo-strip-photoshop-tutorial/all-comments/)

Остановленное движение (урок http://www.computerarts.co.uk/tutorials/2d__and__photoshop/create_dynamic_distortion_effects)

Ретро-плакат (ретро-фотография) или дизайн в стиле ретро (урок http://webdesignledger.com/tutorials/how-to-create-retro-art-in-photoshop)

Лицо череп из дыма (урок фотошопа http://psd.tutsplus.com/tutorials/photo-effects-tutorials/manipulate-smoke-to-create-hyper-real-images/)

Слегка запачканное краской лицо (урок http://psd.tutsplus.com/tutorials/tutorials-effects/how-to-mold-paint-splatter-to-a-face-in-photoshop/)

По улицам слона водили :). Слона можно заменить собой (урок http://fx.worth1000.com/tutorials/161386/lighting-a-giant-elephant)

На сайте http://speckyboy.com/2009/12/14/49-most-creative-photoshop-tutorials-of-2009/ можно посмотреть остальные лучшие уроки фотошопа 2009 года и скачать сами уроки.

Добавлено 26.12.2009:

Дизайнерский блог sixrevisions.com представил свой топ-50 лучших урока фотошопа 2009 года (урл http://sixrevisions.com/photoshop/top-50-adobe-photoshop-tutorials-of-2009/). Среди не вошедших в лучшие уроки по версии дизайнерского блога speckyboy.com (о чем писалось выше) хотелось бы отметить:

Цветные круги (ссылка на урок http://www.blog.spoongraphics.co.uk/tutorials/create-a-simple-vibrant-light-effect-in-photoshop)

Буквы в виде стаканов молока (ссылка на урок http://abduzeedo.com/awesome-milk-typography-effect-photoshop)

Галактический постер (урок фотошопа http://www.blog.spoongraphics.co.uk/tutorials/create-a-trendy-galactic-poster-design-in-photoshop)

Бесплатные новогодние иконки - украшаем свои сайты

Опубликовано admin в разделах Полезные ссылки, Блогосфера, Дизайн

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

Сегодня на очереди - коллекция бесплатных иконок к Новому году от SmashingMagazine (http://www.smashingmagazine.com/2009/12/14/50-beautiful-free-icon-sets-for-your-next-design/).

Первый набор иконок от самого SmashingMagazine:

Иконки доступны для свободного скачивания и использования. Все иконки представлены в виде 3D картинки, в виде силуэта и в виде кнопки. Особый плюс - иконки есть в растовом и векторном форматах (!). Скачать иконки можно с сайта http://www.smashingmagazine.com/2009/12/08/free-smashing-christmas-icon-set/ (архив 7-16 Mb).

Еще один набор бесплатных новогодних иконок (растр):

Скачать иконки можно с сайта автора иконок (http://lazycrazy.deviantart.com/art/Silent-Night-Christmas-icons-146501718) или прямо отсюда (скачать иконки).

Иконки с Санта-Клаусом (или Дедом морозом, как кому привычнее):

Иконок всего 5, зато какие :). Первый дед - 31 днем, второй - 1 января в 5 утра, третий - 1 января в 11 утра и т.д. :). Скачать иконки в win или mac формате можно с сайта автора (http://fasticon.com/freeware/index.php/santa-claus-icons/) либо отсюда (скачать бесплатные иконки с дедушкой Морозом).

Бесплатные новогодние иконки в win-mac-png формате от EnhancedLab:

Скачать иконки можно либо с сайта автора набора (http://enhancedlabs.com/index.php/labnotes/comments/the_real_christmas_05_reloaded/), либо прямо отсюда (скачать бесплатные новогодние иконки от EnhancedLab).

И несколько иконок для фанатиков твиттера, фейсбука и RSS:

Скачать иконки, опять же, можно либо с сайта автора иконок zeusboxstudio.com (http://zeusboxstudio.com/icon/), либо отсюда (скачать иконки).

Еще в моем блоге темза.ком можно найти:

Лучшие бесплатные иконки 2009
Бесплатные иконки для RSS

Бесплатные новогодние кисти для фотошопа

Опубликовано admin в разделах Полезные ссылки, Баннеры, Дизайн

До 2010 остался один месяц, пора покупать подарки и наряжать свои сайты и блоги :).

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

Коллекцию бесплатных новогодних (или рождественских, смотря что вы празднуете) кистей для фотошопа собрал автор дизайнерского блога naldzgraphics.net: Более 35 новогодних (рождественских) бесплатных кистей для фотошопа (35+ Free Photoshop Brushes for the Christmas Season, урл http://naldzgraphics.net/freebies/35-free-photoshop-brushes-for-christmas-season/).

Скачать кисти можно по ссылкам с сайта naldzgraphics.net или прямо с этого сайта (только некоторые наборы кистей).

Больше всего мне понравились:

Кисти для фотошопа в виде снежинок различных форм (скачать кисти)

Кисти в виде лап cосны (скачать кисти) или ели, главное, что зеленые и новогодние :).

И еще набор кистей для фотошопа в форме всевозможных снежинок (скачать кисти)

Рождественские кисти для создания целого рисунка на новогоднюю тему (судя по цифрам, немного устарели, но смотрятся как новые :)) (скачать кисти).

Не такие яркие, но такие же новогодние кисти

Кисти для нового года, рождества и хануки - никто не забыт.

Как пользователь воспринимает насыщенный текстом веб-сайт - результат эксперимента

Опубликовано admin в разделах Психология, Переводная статья, Фриланс, Блогосфера, Реклама, Дизайн

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

Экспериментальному анализу восприятия сайта, насыщенного текстом, посвящена статья  “Eye Movement Analysis of Text-Based Web Page Layouts”, опубликованная в журнале “Usability News”, April 2009, Vol. 11 Issue 1. Авторы статьи - Sav Shrestha & Justin W. Owens.

Он-лайн журнал “Usability News” уже упоминался ранее в моем блоге - недавно я опубликовала перевод исследования на тему “Зрительное восприятие versus юзабилити: что сильнее влияет на восприятие веб-сайта пользователем”, опубликованного в этом журнале. Он-лайн журнал “Usability News” издается научной лабораторией юзабилити программного обеcпечения (Software Usability Research Laboratory (SURL)) при Wichita State University, США и доступен для чтения на сайте http://www.surl.org/usabilitynews/.

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

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

Объект исследования: веб-сайты с обилием текста на странице.

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

Условно сайты - объекты исследования представлены на рисунке:

Веб-страница была постоена по типу новостного сайта CNN.com, в верхнем левом углу страницы был помещен красный логотип CNN.

В правой колонке (сайдбаре) всех сайтов размещалась реклама.

Подопытные кролики Испытуемые

В исследовании принимали участие 48 студентов - добровольцев (32 девушки, 16 юношей) университета Midwestern. Средний возраст - 22.3 года. Все испытуемые умели пользоваться Интернетом, 2/3 использовали Интернет минимум 7 часов в неделю.

Оборудование

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

Вся исследуемая веб-страница была разбита на интересующие области (ИО). В эксперименте регистрировалась фиксация зрачка на ИО (фиксацией считалось прекращение движение зрачка на 100 миллисекунд) и резкие “прыжки” зрачка между различными областями.

Чем больше фиксаций на определенном участке сайта наблюдалось, тем более заметен этот участок сайта для посетителя.

Постановка эксперимента.

Участников эксперимента просили изучить данный веб-сайт в течение 40 минут, после чего им были заданы 2 вопроса:

• была ли на сайте реклама
• как назывался сайт

Результаты эксперимента - “заметность” рекламы.

Только 24% испытуемых сказали, что заметили рекламу на странице. Однако фиксация взгляда на рекламе была отмечена у 67.5% испытуемых. Т.е. около 43% опрошенных не видели рекламу несмотря на то, что смотрели на нее.

Результаты эксперимента - на чем фиксируется взгляд
Все 5 исследованных варианта веб-страницы показали отчетливый “F/E”-образный рисунок фиксации зрачка на странице.

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

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

Результаты - очередность фиксаций

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

Какие полезные выводы может извлечь дизайнер/блогер из этих результатов или для чего вы все это читали? Проанализируем полученные результаты:

1. Наиболее внимательно посетитель просматривает первые пару абзацев. Чтобы его заинтересовать, эти абзацы надо сделать максимально интересными и/или информативными.

2. Если в тексте есть рисунок, максимальное внимание уделяется тексту рядом с рисунком.

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

4. Картинку лучше поместить слева от текста, тогда посетители прочтут и текст после картинки.

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

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

7. Наличие картинок понижает заметность рекламы. Если ваша цель - клики на рекламный блог Бегуна или АдГугл, ограничьте количество картинок на сайте.

Метод слежения за зрачком пользователя (eye movement analysis) для изучения удобства интерфейса используется очень часто для объективного анализа юзабилити сайтов и интерфейсов. В моем блоге уже была статья о eye-movement: Формы – дизайн с точки зрения юзабилити.

Дизайн сайта в стиле плаката - новая тенденция в дизайне или красивые исключения?

Опубликовано admin в разделах Переводная статья, Полезные ссылки, Дизайн

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

Дизайнер Paul Boag в своем блоге Boagworld.com проводит параллель между дизайном постеров (плакатов) и дизайном веб-сайтов (http://boagworld.com/design/no-more-websites). И приходит к выводу, что приемы дизайна плакатов (такие, как красивый визуальный образ, четкая структура, юзабилити) вполне можно использовать в дизайне сайтов. Что и делается успешно многими дизайнерами. При этом сайты получаются действительно нестандартными и запоминающимися.

Несколько примеров дизайнов сайтов, выполненных в виде постеров:

Особенно мне понравился этот дизайн (сайт http://www.kitschensink.com/)

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

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

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

Станет ли плакатный стиль новой тенденцией в веб-дизайне?

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