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

Ошибки поисковой оптимизации (SEO)

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

Целевая страница малоинформативная

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

Сайт (страница) слишком перегружена

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

Отсутствует призыв к действию

Любая эффективная станица должна содержать призыв к действию (то, что называется Call to Action). Побуждающие формулировки, типа «зарегистрируйся», «купи», «позвони», «не будь дурак – закажи сегодня» и прочее способны существенно увеличить конверсию!

У вас неверные акценты

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

Ваш сайт (страница) не вызывает доверия

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

P.S. Designonstop – один им моих любимых блогов про веб-дизайн, если вы по недоразумению с ним еще не знакомы, очень рекомендую!

Продолжаю собирать веб-сайты с качественным минималистичным дизайном (надеюсь, вы уже успели познакомиться с 1, 2 и 3-ей частью). И в сегодняшней подборке у нас:

Decorated Playlists

Ed Nacional

The Touch Agency

Girlfriend

vnsaga

Marlon Medau

McQuade

Hocus Focus

CO:

enjoythis

Продолжаем искать черты и приемы классических стилей (вы уже вероятно читали публикации «Веб-дизайн вдохновленный Ренессансом» и «Веб-дизайн вдохновленный барроко«) в современном веб-дизайне. Сегодня у нас на очереди рококо.

Стиль рококо появился в первой половине 18-ого века во Франции. Данный стиль стал развитием барокко. Основные черты рококо — декоративность, широкое использование орнаментов, аристократическая изысканность, романтизм и игривость.

В живописи наиболее влиятельными представителями рококо были Франсуа Буше, Джамбаттиста Тьеполо, Жан Антуан Ватто и другие.

Ну, а теперь, как всегда немного практики:

Использование орнамента

Рококо присущ орнаментальный ритм. Яркая демонстрация – Аллегорическая роспись плафона Вюрцбургской резиденции (работа Джамбаттиста Тьеполо):

Подобное решение не редкость и сегодня (я бы даже сказал, наряду с винтажной тематикой у современных веб-дизайнеров это в моде):

Игривость

Нет более убедительной демонстрации «игривости» и беззаботность рококо, чем «Качели» (Жан Оноре Фрагона):

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

Ну, а у меня на сегодня все, продолжение следует.

Ни для кого не секрет, что люди совершают все больше покупок онлайн. В США онлайн ретейлеры по объемам продаж некоторых видов товаров уже давно обошли своих «оффлайновых» конкурентов. Да еще как обошли!

В России и бывших Советских республиках дело пока не приняло такой оборот, но все к этому идет. Поэтому, если вы подумываете об открытие своего онлайн-магазинчика, вот вам интересная статистика на основе данных исследования U.S. Census Bureau:

инфографика от permuto.com

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

• Одежда — 62,9%;
• Компьютерное «железо» и «софт» – 48,1%;
• Лекарства и прочие мед. товары — 8,8%;
• Электроника — 74,1%;
• Еда, алкоголь — 57,9%;
• Мебель — 65,8%;
• Музыка и видео — 74%;
• Офисные (канцелярские) принадлежности — 67,8%;
• Спортивные товары — 58,2%;
• Игрушки и игры — 61,4%;
• Книги и журналы — 61%;
• Другие виды товаров — 43,2%;

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

P.S. Кстати, вертолеты на радио управлении – отличный пример. Я уже заказал такой племяннику -).

Медленно но верно, адаптивный веб-дизайн становится «промышленным» стандартом. Вот вам 10 отличных примеров:

Frontend

Forefathers

food sense

yoke

Reverse Büro

Atlason

SMS

warface

More Hazards More Heroes

hanging up the moon

16 пикселей для основного текста? Не многовато-ли? Ведь, веб-мастера исторически привыкли оперировать куда меньшими величинами (обычно для основного текста рекомендуют устанавливать размер шрифта 10-14 пикселей). Сегодня многие специалисты приходят к выводу, что 16 пикселей — оптимал. И вот какие они приводят доводы:

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

2. Все больше молодых (и не очень) людей имеют проблемы со зрением.

3. Большинство людей сидят на расстоянии 50-70 см от монитора (на самом деле 70 см — рекомендованный минимум), если при этом приходится читать относительно мелкий шрифт, глаза чрезмерно напрягаются. К тому же размер шрифта влияет на «скорость восприятия» материала — текст удобного размера воспринимается куда быстрее.

4. Держа в голове цифры из пункта #3, признаем, что мы не читаем журналы и газеты на расстоянии вытянутой руки, поэтому 12-пиксельный шрифт на мониторе (который удален на 70 см) и 12-пиксельный в книге (которую вы держите гораздо ближе, обычно 20-30 см) — две большие разницы. Если сделать поправку, то 16-пиксельный текст на экране как раз по величине будет примерно соответствует 12-пиксельному книжному или журнальному.

5. В опросе «Web design problems» 2005 года с большим отрывом лидировал «плохой шрифт», что свидетельствует о том, что дедовские стандарты (10-14 px) устраивают далеко не всех. С тех пор почти ничего не изменилось.

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

Вы что думаете по поводу 16 пикселей?

По материалам Smashing Magazine

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

В отличие от типичных работ ренессанса барокко присущ динамизм и драматизм. Давайте посмотрим подробнее на примере работы Караваджо (Микеланджело Меризи де Караваджо) «Призвание апостола Матфея».

Контраст и динамизм

Шедевры барроко отличаются цветистостью и сильным контрастом. У Караваджо люди буквально высвечиваются из темноты полуподвального помещения, свет как будто «выхватывает» фигуры из мрака.

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

Тот же резкий контраст и динамизм можно найти во многих работах современных дизайнеров. Яркий пример сайт Cleatskins. Если бы Караваджо рисовал макеты сайтов, он наверняка делал бы что-то подобное -).

Драматизм

Реализм, насыщенные цвета, сильный контраст, динамика — все это создает драматизм. Тех же результатов и теми же средствами современные веб-дизайнеры добиваются сегодня.

На этом с барроко закончим, следующая публикация цикла будет посвящена рококо.

P.S. Продажа квартир в Киеве и не только. Большая база, удобная навигация — одним словом все, чтобы вы нашли ту недвижимость, что вам нужна.

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

Neve Inspired

магазин neve inspired

The Cassette

магазин The Cassette

Sage Fly Fish

магазин Sage Fly Fish

Campluxe

магазин Campluxe

Real Mart

магазин Real Mart

Сhocomize

магазин Chocomize

CouCou

магазин coucou

Suck Yeah

магазин Suck Yeah

Insane

магазин Insane

Velec

магазин Velec

Jenier world of teas

магазин Jenier Teas

Bike by me

магазин Bike by me

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

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

Перспектива

Великие представители Ренессанса начали широко использовали перспективу. Возьмем для примера шедевр Леонардо да Винчи «Тайная вечеря». Центр композиции — Иисус Христос. Фокальная точка находится прямо у него над головой. Перспектива ярко выражена, причем отметим что она используется не только для реалистичности, но и для того чтобы сконцентрировать внимание зрителя на самом главном.

Леонардо да Винчи «Тайная вечеря»

Обратимся к образцам современным. Дизайнер (дизайнеры), работавшие над сайтом Skittlel умело использовали прием гениальных живописцев Эпохи Возрождения:

сайт Skittlel

Думаю в этом примере комментарии излишни — перспектива ярко выражена. Внимание зрителя концентрируется на слоганах «Experience the rainbow», «Taste the rainbow» и пр.

Баланс, симметрия и стабильность

Вернемся к тому же шедевру. Длинный стол, Иисус Христос в центре композиции, по обе его руки одинаковое количество учеников — баланс и симметрия. Обратите внимание так же, что Спаситель вписывается в «стабильную» форму треугольника.

Тот же баланс, симметрия и устойчивость (обратите внимание на «треугольные» текстовые блоки) не редко можно удивить на просторах интернета:

сайт Site Stitcher

Ну, а меня на сегодня все. Барокко comming soon…

P.S. Кстати, смеситель blanco filo тоже тянет на шедевр. Дизайн, материалы и исполнение на высоте!

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

Оформление заголовка

Задача заголовка заинтриговать, заинтересовать читателя, дать ему обещание. Заголовок обязан бросаться в глаза, цеплять. Поэтому он должен:

• Занимать самое высокое место в иерархии заголовков — H1 (в крайнем случае H2 в зависимости от структуры вашего сайта);
• Контрастировать с остальным текстом (содержимым). Здесь возможны следующие варианты и их сочетания — по гарнитуре, по замеру шрифта, по весу и насыщенности шрифта, по выравниванию (может располагаться асимметрично по отношению к остальному тексту) благодаря всевозможным эффектам;
• Иметь достаточное количество «воздуха» (речь о пространстве отделяющем его от основного содержимого);
• При всем этом гармоничным

Пример оформления заголовков на сайте Trentwalton:

Оформление подзаголовков

Подзаголовки создают структуру текста. Благодаря им ориентироваться по тексту (да и вообще читать) гораздо проще и удобнее, поэтому они не менее важны. Касаемо подзаголовков можно предложить следующие рекомендации:

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

И еще о заголовках и подзаголовках:

• Излишне не усложняйте структуру текста, желательно использовать не более 3-х уровней заголовков;
• Всегда сохраняйте иерархию «сверху-вниз» (заголовок уровня H2 не может быть выше чем H1)
• Не делайте слишком длинные заголовков. Заголовок должен быть коротким, но емким и ярким;
• Не ставьте точки в после заголовков/подзаголовков;
• Не делайте переносов в заголовков/подзаголовков (переносите слово целиком);
• Не нужно подчеркивать подзаголовки если они не являются гиперссылками;
• Заголовки стоит равнять вправо или по центру, но никак не во всю ширину или влево (естественно, исключения могут быть).

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