Кроме того, на странице выводится заголовок картинки и тоже с помощью 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)

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

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

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

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

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

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

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

Опрос – неплохой инструмент для таких целей, но тест на юзабилити куда более эффективен. Если у вас блог на 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)

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

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

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

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)

Но не “+1″ единым, в последний год внешний вид Google+ диктовал моду и другим сервисам компании Google, которые  подверглись изменению дизайна и стиля оформления. Общим элементом для многих проектов можно выделить стильное меню вверху страницы, похожие иконки, кнопки управления да и вообще много разных элементов, что можно найти во всех проектах – от почты Gmail до Google Reader. Cегодня представляю вашему внимаю интересный набор кнопок в стиле Google+, найденные на сайте shrapp.nl. Набор этот является не просто иконками социальной сети Google+, а скорее целым фреймворком позволяющим добавить кнопки из интерфейса Google+ на свой сайт.

Посмотреть демо как работают кнопки Google+, скачать эти иконки и почитать документацию по их установке можете на этой странице. Во-первых, вы, конечно. можете просто сказать эти симпатичные минималистические иконки для разных действий, ситуаций и т.п. дабы использовать в своем дизайне или сайте. Более продвинутый вариант – это подключение фреймворка (скриптов) для применения иконок через css cтили легко и быстро.

Установка кнопок Google+

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

Итак, порядок установки:

1. Поместите файл css и изображения в корневую директорию сайта, ну или туда где у вас располагаются стили для шаблона.

2. «Подключите» таблицу стилей для этого добавьте в код ссылку вида (добавляется где угодно между <head> и </head>):

<link rel="stylesheet" href="css/css3-buttons.css" type="text/css" media="screen">

3. Далее подключим jQuery TipTip плагин и соответствующую таблицу стилей (добавляется где угодно между <head> и </head>):

<!-- Using TipTip jQuery plugin for the tooltips -->
<link rel="stylesheet" href="tiptip.css" type="text/css"  media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.tiptip.js"></script>
<script>
        $(document).ready(function() {
                // Launch TipTip tooltip
                $('.tiptip a.button, .tiptip button').tipTip();
        });
</script>

4. Если вам нужны dropdown (выпадающее) меню, добавляем также:

<script>
        $(document).ready(function() {
                // Toggle the dropdown menu's
                $(".dropdown .button, .dropdown button").click(function () {
                        $(this).parent().find('.dropdown-slider').slideToggle('fast');
                        $(this).find('span.toggle').toggleClass('active');
                        return false;
                });
        }); // END document.ready
 
        // Close open dropdown slider/s by clicking elsewhwere on page
        $(document).bind('click', function (e) {
                if (e.target.id != $('.dropdown').attr('class')) {
                        $('.dropdown-slider').slideUp();
                        $('span.toggle').removeClass('active');
                }
        }); // END document.bind
</script>

На этом установку можно считать законченной. Теперь чтобы, например, вывести вот такие кнопки:

… добавляете код:

<a href="#" class="button left"><span class="label">Left</span></a>
<a href="#" class="button middle"><span class="label">Middle</span></a>
<a href="#" class="button right"><span class="label">Right</span></a>
 
<a href="#" class="button left"><span class="icon icon63"></span></a>
<a href="#" class="button middle"><span class="icon icon58"></span></a>
<a href="#" class="button right"><span class="icon icon64"></span></a>

То есть за счет фреймворка все кнопки Google+ можно отображать через css и html путем несложных действий. Другие примеры использования кнопок в стиле Google+ можете найти в документации, на которую я ссылался ранее. В принципе нет ничего сложного, а получается весьма симпатично и стильно – особенно это, думаю, актуально будет для разработок каких-то внутрикопроративных сайтов, где кнопки будут использоваться для интерфейса системы.

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

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

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

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

Инструменты которые мы используем не имеют значение

Если вы начинали карьеру веб-дизайнера десять или более лет тому назад, вы наверное, помните что в то время в тренде были FrontPage, WML, FBML, WAP и другие не очень популярные сегодня вещи. Еще раньше в порядке вещей была исключительно табличная разметка. Сегодня актуальны HTML5, CSS3 и Flash/ActionScript. Думаете через 5-10 лет ничего не изменится? Я очень сомневаюсь!

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

Нет портфолио? Создай его себе сам!

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

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

Человек который занимается всем — занимается ничем

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

От некоторых заказов стоит отказываться

Браться стоит за то, что у тебя хорошо получается, за те проекты где ты сможешь себя проявить и зарекомендовать наилучшим образом. Например, если ты привык работать с wordpress, не нужно браться за Drupal. Теоретически, конечно, можно во всем этом разобраться, но количество потраченного времени, скорее всего, не будет компенсировано оплатой по проекту. Если вы уже решили быть специалистом по wordpress, то лучше в этом направлении и развиваться, не отвлекаясь на другие CMS.

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

Четко определяйте на старте объем работы, сроки и бюджет

Очень важно сразу расставить все точки над «i» во взаимоотношения с клиентом. Четко определите объем работы, сроки и оплаты. При этом важно, чтобы клиент, как говориться, полностью осознал и согласился. Обязательно согласовывайте и утверждайте («под подпись») каждый этап работы. При подсчете времени можно даже подстраховаться, добавив немного часов / дней «на всякий случай». Что касается объема работы, то, учитывая предыдущий совет, нужно быть полностью уверенным в способностях реализации того или иного проекта. По оплате рекомендуется всегда брать предоплату. Таким образом вы избежите головной боли и проблем.

С маленькими клиентами работать сложнее

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

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

Пользователь всегда должен быть на первом месте

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

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

По возможности занимайтесь последующей поддержкой созданных проектов

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

P.S. Украсить и изменить внешний виде телефона поможет красочная iPhone наклейка которая может быть дополнением к вашему стилю или отражением каких-то предпочтений.
Сломался автомобиль? – причины могут быть разные, если виной тому стартеры и автомобильные генераторы тогда обращайтесь в нашу компанию, которая осуществляет их ремонт.
Девушки очень любят разные украшение, различная качественная бижутерия купить киев представлена в интернет магазине Colorova – богатый выбор и широкий ассортимент.

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

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

• 6 советов по созданию одностраничных веб-сайтов (2)
• Часто задаваемые вопросы (FAQ) – разрабатываем эффективный раздел FAQ (0)
• Где и как дизайнеру заработать в интернете (3)
• 6 основных этапов разработки сайта (8)
• Якоб Нильсен – известный специалист по юзабилити (1)

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

Постепенно фотобанки приходят и на наш рынок, хороший тому пример – проект Depositphotos. Depositphotos — это один из крупнейших глобальных ресурсов стоковых изображений. Раньше, для тех русскоязычных пользователей, кто предпочитает использовать легальные изображения, приобретать их было неудобно, если не сказать сложно – сервис был не локализован, из способов оплаты только PayPal и кредитные карты.

На сегодняшний день Depositphotos преобразился! Рунетовская версия сервиса стала полностью пригодной для использования. Ресурс перевели, появились удобные способы оплаты — Webmoney, Яндекс.Деньги, оплата по SMS. Даже цены адаптировали в соответствии с нашими реалиями. Так, стоимость штучного изображения может составлять всего $0,5! Согласитесь это совсем немного. Добавьте к этому всевозможные варианты подписки от одного месяца до года (стоимость самой короткой подписки – $19, имеется бесплатная тестовая подписка!) и получите очень привлекательный, может быть даже выгодный полезный ресурс.

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

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

Здесь также есть теги, связные фотки автора или по тематике, варианты покупки и т.п. В своей учетной записи Depositphotos вы можете найти несколько полезных разделов:

• Главная содержит последние поступления картинок, лучшие покупки, разные лайтбоксы и новости.
• Меню покупателя отвечает непосредственно за пополнение баланса (покупку кредитов).
• Лайтбоксы – ваши наборы.
• Сообщения – внутренняя почта.
• Профиль – информация о себе.
• Привлечение – специальная реферальная программа для вебмастеров.

Как я уже сказал выше вы можете купить изображения в Depositphotos тремя различными способами – покупая кредиты, подписки и оплачивая их по SMS. Каждый из них имеется свои преимущества.

• Кредиты – внутренняя валюта системы, при покупке курс 1 кредит = 1 доллар.  В таком случае купить изображения вы сможете по цене от 0.5 доллара и выше в зависимости от качества.
• Подписка – что-то вроде оптовой покупки картинок, вы оплачиваете, например, доступ на неделю за $39 и сможете при этом скачать 15 изображений в день. Итого получается цена одной картинки $0.37. При больших сроках экономия получается еще солиднее, оплачивая подписку на год вы, по сути, будете покупать изображения за $0.1. Тут, конечно, все зависит от необходимых вам объемов картинок. Кстати, есть бесплатная подписка – возможность в течении недели скачивать по 5 изображений в день для теста фотобанка Depositphotos.
• Покупка изображений за SMS – самый простой и доступный метод, мобильные телефоны есть практически у каждого.

Для совершения оплаты в своем аккаунте раздел “Меню покупателя” выбираете один из вариантов покупки изображений. Для кредитов есть сразу несколько подходящих возможностей по оплате.

Выбираете сколько кредитов хотите купить и как будете платить. Можно использовать платежные системы PayPal, Moneybookers, Webmoney, Яндекс.Деньги, Робокасса, RBK Money или пластиковую карту. Как видите, вариантов масса. Фотобанк Depositphotos действительно стал более доступным для рунета и наших дизайнеров. Кстати, с позиции фрилансера Depositphotos тоже хорош. Учитывая популярность сервиса, качественные фотографии или векторные изображения гарантированно будут расходиться как горячие пирожки – можно будет на этом заработать.

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

P.S. Кстати в этом же фотобанке удалось найти красивые картинки в стиле iphone наклейки которые можно использовать для украшения своего смартфона.
Банки не дают кредиты? Узнайте, как исправить кредитную историю и избавиться от финансовых проблем.
Заказать книги теперь можно прямо через всемирную паутину, заходите в книжный интернет магазин выбираете что вас интересует, оформляете заказ и получаете товар с доставкой.

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

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

• Фотодженика – самый большой российский фотобанк (6)
• Создание портфолио онлайн с помощью сервиса Portfolios (9)
• Лучшие бесплатные фотобанки и фотостоки (36)
• Как зарождался микросток (2)
• Где лучше всего искать royalty free изображения и картинки (7)

Итак, победители конкурса дизайнеров получат:

• Первое место ­— 20.000 рублей и включение дизайна в дистрибутив в роли дефолтного вместе с копирайтами дизайнера.
• Второе место — 15.000 рублей.
• Третье место — 10.000 рублей.

Помимо этих призовых победитель получает огромную базу потенциальных клиентов от которых не будет отбоя + возможность сильно наростить ТИЦ на своем сайте. Отзывы о конкурсе прошлого победителя можно прочитать здесь. Действующий дефолтный дизайн можно посмотреть на livestreet.ru:

Основные правила участия:

1. Нужно сделать дизайн функционала LiveStreet 0.5, но участник конкурса может по своему мнению дорабатывать и изменять функционал под свой дизайн.
2. Чтобы принять участие в конкурсе нужно показать макеты (можно в любом формате, будь то psd или jpg) 3-х основных страниц: главная страница, топик, профиль пользователя сайта.
3. Принять участие могут только новые дизайны, которые ранее нигде не публиковались и не использовались. Один участник имеет право предложить сколько угодно вариантов дизайнов.
4. Чтобы принять участие в конкурсе нужно до 15.11.2011 опубликовать собственный вариант дизайна.
5. Победителя выберут путем голосования (будет составлен шорт-лист из 10 дизайнов), а также будет учтен выбор администрации проекта.
6. Конкурс может быть признан не состоявшимся по причине небольшого количества участников или плохого качества представленных дизайнов.
7. Для получения выигрыша победители должны предоставить исходники HTML или PSD своего дизайна, при этом дизайны должны распространяться бесплатно.
8. Для получения выигрыша победитель, который займёт первое место, должен предоставить макеты всех значащих страниц LiveStreet 0.5 в течение одного месяца, с момента окончания конкурса.

В принципе, ничего сложного по условиям конкурса. Единственное, что остается не так много времени. Не смотря на то, что формат 95% сайтов сделанных  на LiveStreet достаточно стандартный, что так или иначе отображается в шаблона, думаю, можно придумать что-то оригинальное. Главное при этом, конечно, сохранить функциональность, которая для блого-социальных сетей имеет зачастую большее значение чем внешний вид. Дизайн должен подчеркивать плюсы, быть стильным, в меры простым, но не привлекать основное внимание, особенно, если учесть, что ведется разработка дефолтной, то есть темы по умолчанию. Всем участникам желаю удачи – 20 и даже 10 тысяч рублей приятный такой приз.

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

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

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

• Суть дизайна – в чем же она заключается? (5)
• Редизайн: несколько индикаторов того, что его время пришло (4)
• Ошибка 404: Изящное решение (17)
• 6 советов по созданию одностраничных веб-сайтов (2)
• Якоб Нильсен – известный специалист по юзабилити (1)

«Тонкое» использование текстуры

Хотите разнообразить простой однотонный или градиентный фон — добавьте «легкую» текстуру, которая не будет бросаться в глаза и резко контрастировать, но вместе с тем, усложнит и облагородит фон. Также это позволит немного выделить те или иные объекты, привлекая к ним внимание пользователя.

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

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

Другой пример — сайт W+K Studio. Здесь текстура используется вместе с эффектом градиента для фона.

Причем в данном случае «легкая» и весьма простая текстура добавляет глубины и «богатства» этому самому градиентному фону.

Текстура как «грубая сила»

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

Яркий пример второго варианта использования текстур — сайт Church on the Rock, где «сильные» текстуры применяются достаточно  широко.

По сути, весь дизайн (особенно в его верхней части) Church on the Rock «замешан» на контрастных текстурах и их взаимодействии: отдельные области сайта выделяются разными текстурами, при прокрутке вниз используется обычный одноцветный фон.

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

При прокрутке вниз текстура через плавное размытие переходит к белому цвету – хороший прием смены насыщенной шапки на совершенно “минималистичное продолжение” внизу веб-страницы.

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

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

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

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

• 6 советов по созданию одностраничных веб-сайтов (2)
• Якоб Нильсен – известный специалист по юзабилити (1)
• Этапы развития веб-дизайнера и реакция на критику в работе (7)
• Часто задаваемые вопросы (FAQ) – разрабатываем эффективный раздел FAQ (0)
• Типографика для веб (10)