Кроме того, на странице выводится заголовок картинки и тоже с помощью CSS. Смотрится очень круто! Хотя нужно уточнить, что работать это будет только в тех браузерах, которые поддерживают CSS анимацию. Итак, поехали:

Разметка страницы

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

<ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
        <div>
            <h3>re·lax·a·tion</h3>
        </div>
    </li>
    <li><!--...--></li>
    <li><!--...--></li>
</ul>

Для каждого элемента Span будут закреплено определенное фоновое изображение (background image) для слайдшоу.

CSS стили

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

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}

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

Span, содержащий фоновые изображения, будет позиционироваться абсолютно и иметь высоту и ширину 100%. Поскольку у него внутри будет определенный текст, сделаем прозрачным color так как мы не хотим его отображать. Свойство background-size с значением cover позволит удостовериться в том, что фоновое изображение покрывает всю площадь элемента, который в свою очередь растягивается на всю ширину видимого экрана. Прозрачность установлена в значение 0, это будет изменено уже при анимации.

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s;
}

Анимация для каждого Span будет длится как минимум 36 секунд и запускаться бесконечное число раз. Но для начала рассмотрим как решить вопрос с отображаемым заголовком:

.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px;
}

Анимация для блока заголовка также будет длится 36 секунд.

Далее в CSS стилях следует определить фоновые изображения для каждого Span и задержку анимации (animation delay) дабы каждая следующая картинка и заголовок появлялась через 6 секунд после предыдущего.

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/2.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/3.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/4.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/5.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/6.jpg);
    animation-delay: 30s;
}
 
.cb-slideshow li:nth-child(2) div {
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
    animation-delay: 30s;
}

Теперь рассмотрим процесс анимации более детально. Элементам Span установлено время анимации 36 секунд. За это время прозрачность будет меняться с 0 до 1 когда анимация достигает 8%. Дальше прозрачность сохраняется пока не достигнем 17%. После 25% она снова должна быть равна нулю и оставаться такой до конца.

Откуда взялись эти цифры? – давайте разбираться. Мы хотим чтобы каждое изображение было видимым 6 секунд, кроме того, после прохождения всего цикла опять должна быть показана первая картинка. Поскольку всего используется 6 изображений, итого потребуется 36 секунд. Теперь нам нужно задать соответствующие значения по времени для прозрачности. Зная тот факт, что второй кадр (картинка) анимации начнется через 6 секунд нам нужно знать какой процентиль анимации должен быть для показа первой картинки. Разделим 6 на 36 и получим 0.166… что будет 16% для нашего шага параметра keyframe. Теперь, поскольку мы не хотим дабы наша картинка просто исчезала все время, определим промежуточный шаг, который будет равен половине полученного ранее значения, то есть 8%. Суть в том, чтобы картинка показалась полностью, после того постепенно исчезала на 17%, и соответственно полностью исчезла на 25%. (ред. – тут, конечно, придется немного помозговать и разобраться со всеми тонкостями анимации и математических действий. Если захотите использовать использовать код “как есть” – просто разместите его в стилях либо делайте аналогичные расчеты).

@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

Аналогичные расчеты применимы и для анимации заголовка, единственное что мыс делаем дабы он немного быстрее исчезал, поэтому прозрачность = 0 на 19%.

@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

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

.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

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

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 { font-size: 80px }
}

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

Альтернативная анимация

Следующий пример кода вместе с изменением масштаба изображения также добавляет небольшой поворот:

@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }
    17% {
        opacity: 1;
        transform: scale(1.1) rotate(3deg);
    }
    25% {
        opacity: 0;
        transform: scale(1.1) rotate(3deg);
    }
    100% { opacity: 0 }
}

Заголовок должен будет “выезжать” справа (нужно изменить text-align блоков в значение right), после чего убираться перемещаясь влево с эффектом исчезновения:

@keyframes titleAnimation {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }
    8% {
        opacity: 1;
        transform: translateX(0px);
    }
    17% {
        opacity: 1;
        transform: translateX(0px);
    }
    19% {
        opacity: 0;
        transform: translateX(-400px);
    }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

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

Для создания дополнительной перелинковки в Blogspot создаем хлебные крошки (Breadcrumb) на Blogger страницах с помощью специальной html вставки в шаблоне.
Хотите украсить свой дачный участок, где все уже есть? – установите фонтан причем побольше и покрасивеее, куда можно подключить разные звуко-музыкальные эффекты.

© Дизайн Мания, 2012. | Нет комментариев | Категория Верстка.

Интересные статьи по теме

• Фон для сайта с картинкой на весь экран (background-size) (5)
• Школа W3 Schools для веб разработчиков (3)
• Оформление текста с помощью CSS3 на практике (4)
• Экшены (actions) для Photoshop – экономия времени (11)
• Уроки верстки – CSS подмена текста картинкой (7)

Первым делом давайте разберемся с назначением системы. Основная задача и цель использования RedHelper – организация наиболее быстрой связи с посетителями на вашем сайте. По статистике даже если на сайте указаны абсолютно все типы контактов (телефон, почта, icq) с администрацией, то все равно в 40% случаев пользователи предпочитают именно «онлайн консультантов». Этот механизм максимально быстр и удобен. Добавляя подобную функцию на сайт вы можете смело рассчитывать на то, что конверсия из посетителей в покупатели вырастает. Нужно также помнить, что эффективность мгновенных консультаций может быть разной в зависимости от тематики и специфики сайта в котором он расположен. Если у вас сложный продукт и консультации будут очень востребованы, тогда эффект будет заметен сразу. В среднем рост конверсии 15-40%.

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

Приятным бонусом для сайтов с посещаемостью до 100 уникальных посетителей можно считать то, что система RedHelper для них будет бесплатной. Это очень правильно и удобно для только открывшихся магазинов, когда клиентов не так много и вы делаете лишь первые шаги в интернет предпринимательстве. Кстати, можно настроить Jabber клиент на телефоне (оператор будет получать сообщения в привычный мессенджер, например QIP) и оказывать хорошую поддержку первым клиентам.

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

К счастью для пользователей системы разработчики не стоят на месте – сейчас идет активная деятельность над внедрением парочки интересных функций. Например, CO-Browser и наблюдение в реальном времени за курсором мыши посетителя. Это даст оператору возможность определять, что делает пользователь на странице сайта. Он также сможет по необходимости выделить какой-либо элемент или перевести пользователя на другую страницу. Не смотря на то, что в Рунете Онлайн консультанты на сайтах пока еще не очень популярны, это отличный инструмент на который стоит обратить внимание уже сейчас – раньше конкурентов. Думаю, через пару лет проекты типа RedHelper станут своего рода стандартом для большинства интернет магазинов и продающих сайтов.

© Дизайн Мания, 2012. | Комментариев - 2 | Категория Online сервисы.

Интересные статьи по теме

• Эффективная навигация интернет-магазина (0)
• Стикеры на сайт “Скидки и распродажа” (5)
• Основные этапы создания интернет сайта в сети (0)
• Обувь от компании ALDO можно выиграть в рулетку (0)
• Курсы для оптимизаторов и веб-дизайнеров (0)

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

Показатели статистики сайта падают

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

Метрики – наиболее важный индикатор

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

Ваши пользователи говорят, что время пришло

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

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

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

Окончательное решение остаётся за Вами

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

Лист технического и UX-долга становится слишком длинным

Справка: Технический долг (tech debt) и UX-долг (User Experience debt) – это та работа в проекте, которую мы решаем не делать в данный момент, потому что: дедлайн «горит», руководство оказывает давление и т.п.

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

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

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

Когда список долгов становится слишком длинным, очень легко поддаться желанию заняться «частичным редизайном», исправляя отдельные недоработки. Однако все эти действия ведут к тому, что американцы называют «death by 1000 paper cuts». Что означает: чем больше мелких исправлений Вы вносите, тем больше у Вас возникает проблем с другими функциями сайта. Если в действительности лист долгов достиг своего предела, стоит всерьёз задуматься о редизайне.

Он просто выглядит «старым»

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

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

Решите, что убрать, и что добавить

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

В заключение

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

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

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

© Дизайн Мания, 2012. | Комментариев - 4 | Категория Веб-дизайн, Статьи.

Интересные статьи по теме

• Ошибка 404: Изящное решение (17)
• Конкурс на дизайн дефолтного шаблона для LiveStreet CMS (5)
• Инструменты и сервисы для создания набросков дизайна (12)
• 6 основных этапов разработки сайта (8)
• Тренды веб-дизайна в 2009 году. Часть1 (13)

Glossy: Free Icon Set

Скачать ~ 18,7 Мб // Источник

В набор Glossy: Free Icon Set входит 20 базовых иконок высокого качества. Каждая иконка представлена в шести размерах (32х32, 48х48, 64х64, 128х128, 256х256 и 512х512). Помимо этого в наборе присутствуют 48 иконок, которые «обыгрывают» различные «состояния» базовых – рядом с иконками располагаются плюсы, минусы и т.п. – полезно при разработке каких-то программных интерфейсов или приложений. По стилистике, кстати, иконки также подходят для «рабочих» сайтов – иконки пользователей, чемодана, телефона, корзины, гаечного ключа и т.п. Формат иконок — PNG, размер архива — 18,7 Mb.

3D Glossy Icon Set: 20 Free Icons (with PSD)

Скачать ~ 1,85 Мб// Источник

3D Glossy Icon Set – это набор бесплатных трехмерных иконок от Iconshock, ракурс изображений «сверху-вниз». Выполнены все глянцевые иконки просто безупречно с точностью до каждого пикселя, выглядят красиво и интересно. Все иконки в наборе представлены в пяти размерах. Коллекция Glossy Icon Set интересна тем, что помимо конечных PNG-иконок содержит PSD исходники. Использовать данные картинки можно в любых как личных так и коммерческих проектах.

Webtoys 50 icons

Скачать ~ 1,14 Мб // Источник

Глянцевые иконки из Webtoys 50 icons — это, во-первых, подборка достаточно внушительных размеров. Даже по превью видно, что она значительно больше двух предыдущих коллекций. В принципе, набор не имеет ярковыраженной тематики, в нем содержатся иконки на все случае жизни – здесь вам и мобильный телефон, и монитор, и дизайнерские какие-то элементы, RSS иконка, канцелярия и т.п. Размер всего набора глянцевых иконок небольшой за счет того, что представлены изображения лишь в одном формате 64х64 пикселей в PNG. Но не смотря на это, набор Webtoys 50 icons заслуживает внимания, тут явно можно что-то для себя и своего сайта найти.

P.S. Работая в интернете нужно страховаться от различных ситуаций дабы восстановить данные со своего сайта или компьютера было возможно – обращайтесь к профессионалам.
Съем жилья на сайтах значительно дешевле номеров в отелях, предложений аренда посуточно Киев вполне достаточно чтобы выбрать себе квартиру подходящую по деньгам и условиям.

© Дизайн Мания, 2012. | 1 комментарий | Категория Иконки.

Интересные статьи по теме

• Наборы иконок очень высокого качества (1)
• IconToucan — оригинальный архив бесплатных иконок (3)
• Красивые и стильные темные иконки (2)
• Иконки популярных смартфонов + вектор AI (1)
• Иконки Cutie – бесплатный набор + архив иконок (0)

Итак, рассмотрим более детально Preloaders — бесплатный генератор GIF и APNG прелоадеров, отображающих процесс загрузки. Причем генератор максимально простой и очень удобный. Сразу попадая на страницу вы увидите, что все картинки-загрузчики удобно отсортированы по категориям — 3D, смайлики, знаки зодиака, люди, знаки религий, астрономия и прочее. Вы можете обнаружить даже категорияю «Социальные сети». По сегодняшним временам вещь практически незаменимая. Кстати, кроме категорий есть возможность посмотреть наиболее поплярные анимированные картинки или 10-тку последний.

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

• Тип изображения (формат — gif или apng);
• Цвет самого подзагрузчика/заднего фона (выбирается с помощью удобной «палитры»), а также прозрачность;
• Скорость анимации;
• Размер изображения (в том числе, поддерживается разрешение 128х128 пикселей);
• Некоторые дополнительные «эффекты» (инвертирование цвета, отражение фона, обратная анимация и прочее).

Дальше вы нажимаете на кнопку “Создать подгрузчик” и увидите, что в итоге получилось. Под превью прелоадера увидите его размер и ссылку для скачивания.

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

Для начинающих пользователей полезной будет подробная инструкция по генератору Preloaders.net, которую  вы можете найти здесь. В принципе больше и нечего добавить, так как сервис максимально простой, сделать нужные анимировавнные прелоадеры loading-gif с его помощью можно быстро и легко. Спасибо нашим разработчикам за такой полезный сервис, все, кто программирует на Ajax должны оценить его по достоинству.

© Дизайн Мания, 2012. | Комментариев - 3 | Категория Online сервисы.

Интересные статьи по теме

• Гиф анимация, сервис для создания гиф анимации (7)
• Школа W3 Schools для веб разработчиков (3)
• Фотобанк Depositphotos поможет купить изображения в интернете (2)
• Создание портфолио онлайн с помощью сервиса Portfolios (9)
• Инструменты и сервисы для создания набросков дизайна (12)

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

С другой стороны интернет сервис Fotolia сделал очень полезную акцию. Все заинтересованные дизайнеры и художники смогут бесплатно скачать PSD файл иллюстрации в разрешении 150 DPI. С помощью него можно будет разобрать детально технику работы того или иного цифрового художника, его методы работы, специфику и нюансы. В каждом из файлов будут доступны все слои. Скачать бесплатно файл можно будет в течении суток, после чего у вас будет возможность его купить в любое время с разрешением 300 DPI для личных или коммерческих целей. Стоимость,  в принципе, не большая – $9, но лучше с этим не затягивать и скачать Free версию. Запомнить дату появления новой работы очень просто – 10-ое число каждого следующего месяца.

Отдельных слов заслуживает сам сайт коллекция «TEN» – сделано там все очень стильно, красиво и функционально, я бы сказал, мастерски. В данный момент отображается работа веб-дизайнера Xavier Bourdil из Парижа, ее тематика “Семья”.

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

Не знаю как вас, но увиденные видеоряд, можно сказать короткометражный фильм со своей историей, стилем, характером, задевает за живое и очень вдохновляет. Поскольку художники не наши, в видео имеются субтитры дабы вам была понятно о чем говорит главный герой. На данный момент в коллекции «TEN» представлены 2 дизайнера – Xavier Bourdil и Pierre Doucin. Вы можете посетить их персональные сайты дабы посмотреть работы, хотя (повторюсь) видео как нельзя лучше представит их для вас.

Xavier Bourdil (trustinelements.com). Графический художник и веб-дизайнер из Парижа. Прежде, чем стать графическим дизайнеров, изучал литературу в течение пяти лет. И каким бы странным не был его путь, сегодня, в возрасте 25 лет, он создает особый стиль и удивительные работы с абстрактными и геометрическими формами, шрифтами и манипуляциями.

Pierre Doucin (soemone.com). имел стремительный взлет. Менее чем за четыре года, он превратился из неизвестного никому за пределами Франции художника во всемирно известную фигуру street art (уличного искусства). Улица часто вдохновляет его стиль, смешанный со светом и эффектами движения. “Все, что я узнал, приходит от уличного искусства”, говорит он.

Судя по пресс релизу, следующим будет Emeric Trahand (cargocollective.com/stillontherun), что живет и работает в Нью-Йорке. Должно быть интересно. В целом, проект коллекция «TEN» от Fotolia достоит вашего внимания, если вы занимаетесь веб-дизайном профессионально. Это шанс посмотреть технику и методику работы лучших художников, можно сказать бесценный опыт (особенно для начинающих). Скачать бесплатные PSD файлы со слоями сможете каждого 10-го числа месяца, не упустите!

P.S. Фотобанк Фотодженика – самый удобный фотосток для русских дизайнеров:15 млн картинок для ваших проектов, цены от 33р, оплата WebMoney, Я.Д, безнал..
Начинающие манимейкеры должны с самого начала узнать как создать сайт, потом его развивать, улучшать и научиться продвижению в поисковых системах.
После того как ваш интернет проект окрепнет, можно почитать статьи как заработать в интернете и начинать применять различные варианты монетизации и получшения дохода.

© Дизайн Мания, 2012. | 1 комментарий | Категория PSD исходники, Дизайнеры и блоги, Полезные сайты, Разное.

Интересные статьи по теме

• Пит Харисон (Pete Harrison) – дизайнер из Лондона (5)
• Наборы элементов интерфейса UI для фотошопа (4)
• Блог “Уроки дизайна” Сергея Макельского по графическом дизайну (0)
• Телефоны в PSD: настенный, iPhone 3G-3GS и Blackberry (3)
• Социальная сеть для дизайнеров-профессионалов il Conte (15)

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

Тематические иллюстрации

Тематические иллюстрации создают или усиливают определенную атмосферу. Сюжет такой иллюстрации обычно тесно связан с тематикой сайта. Рассмотрим несколько примеров:

Get my boss to North Cape (http://www.bikingboss.com/)

Иллюстрация развивает основную идею иGet my boss to North Cape. Она не только украшает, но и несет функционально-смысловую нагрузку, подчеркивая то, чему собственно и посвящен этот проект – босс поспорил с подчиненным на то что если они наберут 5000 лайков, тот  должен будет отправиться в долгий путь.

Launch Kit (http://getlaunchkit.com/)

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

Atelier Anonyme Design (http://www.anonyme.in/)

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

Иллюстрация с персонажем

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

inkFinder (http://inkfinder.com/en/)

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

The Evnt (http://2011.theevnt.com/)

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

Big Eye Creative (http://www.bigeyecreative.com/)

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

Иллюстрированные украшения

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

1000 WP Themes (http://wp1000.envato.com/)

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

Coca-Cola History (http://www.cocacola.pt/historiasfelizesparacomer/)

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

Metaphiziks (http://www.metaphiziks.com/)

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

Иллюстрированый текст (шрифт)

Шрифт нарисованный руками никогда не сравнится с «машинным». Рукописные фразы и предложения всегда по-своему уникальны, чем умело и пользуются многие современные дизайнеры. Решение во многих случаях достаточно выгодное и полезное для общего впечатления от дизайна сайта, кроме того это возможность создания уникальных (оригинальных) элементов. (Пользуясь случаем хочу заметить что в Дизайн Мании есть отдельный раздел про шрифты – там найдете парочку интересных вариантов)

Rangus (http://www.rangus.co.uk/)

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

Joey Lomanto (http://blog.joeylomanto.com/imitation-in-web-design)

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

Информативный иллюстрации

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

Bookish (https://booki.sh/)

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

Vitality City (https://www.vitalitycity.com/)

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

Uklizenodoma (http://uklizenodoma.cz/)

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

Иллюстрация-противоядие (antidote)

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

Shipment App (http://shipmentapp.com/)

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

Egopop (http://www.egopop.net/)

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

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

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

© Дизайн Мания, 2011. | Комментариев - 2 | Категория Веб-дизайн, Дизайны сайтов, Иллюстрации, Статьи.

Интересные статьи по теме

• Коктейль винтажа и инноваций: ретро стиль в веб-дизайне (6)
• Суть дизайна – в чем же она заключается? (5)
• Креативные и яркие дизайны сайтов для вдохновения (8)
• Какой дизайн сайтов вы любите? (опрос) (9)
• Дизайн в стиле Web 2.0: простота как искусство (10)

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

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

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

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Решение поддерживают почти все браузеры популярные в сети:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
• Chrome Whatever+
• IE 9+
• Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Но внимание!!!  при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS-хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент <img>, который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

Дальше в хаке используется опция @media для проверки является ли окно браузера меньшим чем изображение и с помощью процентного значения left и свойства margin-left выравниваем картинку по центру.

img.bg {
        /* Set rules to fill background */
        min-height: 100%;
        min-width: 1024px;
 
        /* Set up proportionate scaling */
        width: 100%;
        height: auto;
 
        /* Set up positioning */
        position: fixed;
        top: 0;
        left: 0;
}
 
@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg {
                left: 50%;
                margin-left: -512px;   /* 50% */
        }
}

Работает в любых версиях качественных браузеров – Safari / Opera /  Firefox и Chrome. Для IE как всегда есть свои нюансы:

• IE 9 – работает;
• IE 7/8 – чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
• IE 6 – можно настроить, но кому вообще нужен этот браузер.

CSS-хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и  min-height значение 100% сохраняя пропорции.

<img src="images/bg.jpg" id="bg" alt="">

#bg {
        position:fixed;
        top:0;
        left:0; 
 
        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
}

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

<div id="bg">
        <img src="images/bg.jpg" alt="">
</div>

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

Хак работает в:

• Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
• IE 8+
• Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше – можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    
 
        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();
 
        function resizeBg() {
 
                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }
 
        }
 
        theWindow.resize(function() {
                resizeBg();
        }).trigger("resize");
 
});

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована – скачать можно здесь. В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные “приколы” от IE7 все упомянутые хаки были бы идеальными.

P.S. Бзаузеры – основной инструмент для работы пользователя в интернете, а лучшие firefox плагины помогают сделать ее максимально удобной, быстрой за счет новых функций и возможностей.
Хотите купить книгу? – не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть – выбрать, оплатить и оформить доставку на дом.

© Дизайн Мания, 2011. | Комментариев - 5 | Категория Верстка.

Интересные статьи по теме

• Фоновое слайдшоу изображений на весь экран с помощью CSS3 (0)
• Школа W3 Schools для веб разработчиков (3)
• Оформление текста с помощью CSS3 на практике (4)
• Галерея узоров CSS3 для фона (3)
• Текстовые эффекты с помощью свойства text-shadow в CSS3 (5)

Блог “Уроки дизайна” нельзя назвать узкоспециализированным на его страницах вы найдете материалы по полиграфии, pre-press, web, созданию логотипов, фирменному стилю, заработку, общие материалы по композиции, работе с цветом, шрифтам и другую полезную теорию (основные рубрики проекта — полиграфия, web, логотип, обучение, заработок). Хотя с другой стороны все эти направления можно объединить одним понятием “графического дизайна”. Найти и выбрать нужную тематику статей сможете с помощью разделов меню и облака меток в сайдбаре.

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

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

Вообще, признаться, очень понравился стиль изложения – простой, доступный с массой различных примеров. Вопросов, думаю, после подобных видео уроков не останется ни у кого. Видимо, такой подход вызван деятельностью Сергея Макельского как автора  множества обучающих курсов и тренингов по дизайну. Кстати, их вы можете найти в разделе «Продукты». Здесь есть:

• Видео-курс «Стиль дизайна»
• Видео-курс  «Как создавать графический дизайн»
• Видео-курс «Как создать логотип»

Кстати, про курсы графического дизайна я уже рассказывал. Там же был небольшой бонус в виде буклета по разработке логотипа. Недавно был выпущен новый инфопродукт, который распространяется бесплатно и называется “Как сделать дизайн“. Здесь будет 6 основных видео уроков по разным темам графического дизайна – от логотипов, фирменных стилей и полиграфии, до рекламы, упаковки и веб-дизайна. Каждый урок по 15 минут. Все абсолютно бесплатно.

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

© Дизайн Мания, 2011. | Нет комментариев | Категория Веб-дизайн, Дизайнеры и блоги, Уроки и книги.

Интересные статьи по теме

• Курсы по графическому дизайну, логотипам и стилям + бесплатная брошюра (8)
• Коллекция «TEN» от Fotolia – бесплатные PSD лучших художников (1)
• Самые крутые влиятельные дизайнерские блоги 2009 (17)
• Пит Харисон (Pete Harrison) – дизайнер из Лондона (5)
• Отрисовка изображения в фотошопе с нуля с помощью Pen Tool (7)

Приветствую. Представьтесь, пожалуйста – кто вы и чем занимаетесь?
Всем привет! Меня зовут Наташа Клевер, я дизайнер-фрилансер. Дизайном занимаюсь уже около шести лет. По совместительству веду блог о веб-дизайне DesigNonstop.

Проект designonstop.com заприметил достаточно давно – это единственный сайт, можно пару слов о нем?
Да, это у меня единственный такой объемный информационный ресурс. Есть еще несколько сайтов, но они скорее носят техническо-вспомогательный характер.

Учитывая то, что проект объемный, интересный и качественный, для начала хотелось бы узнать о нем подробнее. Как все начиналось? Как появилась идея, почему и зачем создали блог?
Начиналось с того, что к концу 2009 года у меня на компьютере накопилось столько информации о веб-дизайне, что ее срочно надо было как-то систематизировать. Это и букмарки, и архивы, и уроки, и книги. Ну и в какой-то момент я поняла, что ведение собственного блога о веб-дизайне идеально решит эту проблему. А дальше я просто начала реализовывать эту идею. Так что сейчас в поисках нужного шрифта или иконки я хожу к себе на блог.

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

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

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

Откуда в основном черпаете вдохновение для публикаций и работы?
Ну около 70% тем публикаций у меня на сайте повторяются из месяца в месяц. А остальные 30% оставляют маневр для творчества. Как правило, это непосредственно связано с тем, чем я занимаюсь в текущий момент. Например, я сейчас я освоила вики разметку и оформила свою группу ВКонтакте, почему бы не сделать урок об этом. А вдохновение для работы… То огромное количество просмотренных дизайнерских работ всегда дает мне пищу для вдохновения. Так что в этом плане мне повезло.

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

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

Есть ли заработок с блога? Какие самые актуальные и успешные направления заработка?
Заработок с блога есть, правда совсем небольшой. В основном это контекстная реклама адсенс и продажа постовых на блоге. Предложения от прямых рекламодателей периодически появляются, но это происходит бессистемно, поэтому я пока с этим не связываюсь. Достаточно много предложений по рефферальным программам, но для меня это тоже не вариант. Хороший хлеб дают только прямые заказы, хотя они к блогу по сути никакого отношения не имеют. Так что на сегодняшний день единственным перспективным направлением заработка для меня является развитие своего магазина вордпресс шаблонов. Сейчас он в еще в начальной стадии развития, но я рассчитываю на перспективу.

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

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

Какова вообще ситуация с дизайн блогами в рунете? Я как-то раньше больше интересовался подобным направлений, сейчас чуть меньше, но создавалось впечатление, что 90% это были переводы, личного (как в буржунете) мало. Это так?
Раньше я была такого же мнения, что у нас в основном все переводное. Сейчас, мне кажется, ситуация кардинально изменилась. И у нас есть качественные авторские блоги, где веб-мастера очень интересно описывают свой опыт в дизайне и веб-разработке, а также в продвижении сайтов. Кстати про буржунет. У них десятка четыре ну или чуть больше качественных блогов-хедлайнеров, задающих тон всему веб-дизайну. А большинство блогов – это все те же подборки, что и у нас, только в различных вариациях. Источники-то контента одинаковы и всем известны. Зачем теперь копипастить, когда можно самому сходить на соответствующий ресурс и сделать аналогичную подборку.

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

Какие-то блоги по дизайну читаете? Или по другим тематикам? Выделите лучшие для вас дизайн (и другие) блоги рунета, которые полезны конкретно вам?
Если у меня возникает вопрос, касающийся функционирования или продвижения блога, я в первую очередь иду на сайт к Шакину. Также по техническим вопросам частенько бываю на KtoNaNovenkogo, WebSovet, Proofsite и RusDigi. Мне очень нравится как дизайнит Олег Михайленко и Вебмозг. Из последних дизайнерских откровений – это шапка и футер Вовкиного блога.

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

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

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

P.S. Воровать картинки больше не выгодно! Купи фотографию за пару долларов в фотобанке Фотодженика и не подставляй себя и своего клиента.
Точно такое же можно сказать и по поводу книг, можно зайти онлайн в книжный интернет магазин и заказать себе печатную бумажную и настоящую книгу, которую приятно взять в руки и читать.
Эксплуатация кранов – не такой уж и простой процесс, профессиональная наладка кранов вообще можно сказать задача требующая максимально квалификации работника и опыта.

© Дизайн Мания, 2011. | Комментариев - 4 | Категория Дизайнеры и блоги, Полезные сайты.

Интересные статьи по теме

• Социальная сеть для дизайнеров-профессионалов il Conte (15)
• Самые крутые влиятельные дизайнерские блоги 2009 (17)
• Блог “Уроки дизайна” Сергея Макельского по графическом дизайну (0)
• Якоб Нильсен – известный специалист по юзабилити (1)
• Этапы развития веб-дизайнера и реакция на критику в работе (7)