DesigNonstop - О дизайне без остановки » Тренды

20 мануалов по созданию контактных форм с помощью HTML5 и CSS3

Наташа Клевер — Sun, 15 Jan 2012 21:01:07 +0000

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

15 основных трендов в веб-дизайне в 2012 году по версии DesigNonstop

Наташа Клевер — Thu, 05 Jan 2012 21:01:41 +0000

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

20 впечатляющих возможностей технологии CSS3 с примерами за ноябрь

Наташа Клевер — Tue, 20 Dec 2011 21:01:25 +0000

Первым среди представленных CSS мануалов в этой подборке идет очень необычный анимированный эффект с текстом. Даже не верится, что запросто можно сделать такую анимированную типографику. Далее идет вполне обычная карусель из картинок с предпросмотрами. Меню-аккордеон мне очень нравится как элемент дизайна. Здесь тоже можно посмотреть, как его сделать. Следующие на очереди два вида меню с различными эффектами и эффект навигации с кругом. Больше всего мне в этой подборке нравятся анимированные кнопки с призывам подписаться. Очень неплохо смотрятся оптический zoom для картинок и текста, а также меню с динамическим маркером-магнитом.

20 мануалов CSS3 по созданию всплывающих подсказок на сайте

Наташа Клевер — Mon, 21 Nov 2011 21:01:53 +0000

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

Топ 20 популярных бесплатных слайдеров и ротаторов картинок

Наташа Клевер — Mon, 10 Oct 2011 21:01:25 +0000

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

20 впечатляющих примеров возможностей jQuery технологии с мануалами

Наташа Клевер — Mon, 12 Sep 2011 21:01:09 +0000

Сегодняшняя подборка посвящена технологии jQuery. JQuery – это JavaScript библиотека, отвечающая за взаимодействие JavaScript, HTML и CSS на сайте. С помощью этой технологии можно обращаться к любому объекту, работать с событиями, осуществлять различные визуальные эффекты. Собственно сама библиотека находится на внешнем сайте в библиотеке кодов Google. А подключается она соответствующей записью в коде сайта в теге head. Во всех приведенных ниже мануалах есть live demo и инструкция, а также возможность скачать и установить подготовленный набор файлов.

20 впечатляющих возможностей технологии CSS3 с примерами за июль

Наташа Клевер — Mon, 08 Aug 2011 21:01:10 +0000

В сегодняшней подборке мануалов по CSS3 можно узнать, как сделать меню в стиле Apple, закругленные углы и очередную красивую кнопку. Очень впечатляет 3d анимация для объекта и возможности ротации картинок. Среди оформительских приемов – симпатичное темное меню навигации и всплывающие подсказки. Есть несколько мануалов для анимированных меню. Хорош урок о том, как сделать простейшее лого. Гурманов порадует анимированный колокольчик и вращающиеся иконки. Особенно мне нравятся кнопки включить/выключить. В общем, успехов вам в освоении всех этих новшеств.

20 впечатляющих возможностей технологии CSS3 с примерами за июнь

Наташа Клевер — Mon, 11 Jul 2011 21:01:34 +0000

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

20 впечатляющих возможностей и функций CSS3 технологий с примерами

Наташа Клевер — Sun, 12 Jun 2011 21:01:34 +0000

В этой подборке я собрала отличные уроки, которые мне очень нравятся, с примерами того, какие вещи можно сделать с помощью CSS3 технологий. Это и контактная форма, и тени у объектов, и 3D текст. А также простейшее раскрывающееся меню, симпатичные кнопки, необычные градиенты для текста, оригинально оформленная поисковая строка, кастомная админ панель, стильные кнопки навигации, поворот текста, паттерны для фона, выпадающее меню, постраничный навигатор и треугольник.

Новый тренд ретро дизайна в исполнении современного CSS3

Наташа Клевер — Sun, 15 May 2011 21:01:20 +0000

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

20 основных характеристик современного WordPress шаблона

Наташа Клевер — Mon, 11 Apr 2011 21:01:06 +0000

В последнее время мне достаточно много пришлось сталкиваться с самыми разнообразными шаблонами на базе WordPress. Речь идет о платных премиум вордпресс темах, которые в огромных количествах продаются на просторах западного интернета. Конечно многообразие в выборе поражает. Но и требования к современным WordPress шаблонам предъявляются не шуточные. Для того, чтобы шаблон был конкурентоспособен, он должен быть… И тут следует достаточно внушительный список, каким должен быть современные веб шаблон. По крайней мере по буржуйским меркам. Давайте по пунктам посмотрим на основные характеристики.

20 впечатляющих примеров возможностей и функций CSS3 технологий

Наташа Клевер — Thu, 24 Mar 2011 21:01:01 +0000

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

11 основных трендов в веб-дизайне в 2011 году по версии Webdesignledger

Наташа Клевер — Tue, 01 Feb 2011 21:01:42 +0000

Обстоятельный обзор от Webdesignledger о том, какие тенденции в веб-дизайне нас ждут в 2011 году. Вообще, я давно заметила, что веб-дизайн очень чутко реагирует на технические новшества в мире. Так 2010 принес нам 3d технологии в фильмах, нашествие айподов и айфонов, фотошоп CS5, а значит и направление развития веб-дизайна будет соответствующее. Поэтому давайте последовательно рассмотрим все основные тренды.

20 основных трендов в веб-дизайне в 2011 году по версии DesigNonstop

Наташа Клевер — Mon, 03 Jan 2011 21:01:21 +0000

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

Основные тренды в дизайне сайтов известных джинсовых брендов

Наташа Клевер — Thu, 23 Dec 2010 21:01:08 +0000

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

Стиль минимализм в современном веб-дизайне и его основные принципы

Наташа Клевер — Mon, 08 Nov 2010 21:01:25 +0000

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

Основные тренды в дизайне сайтов известных автомобильных компаний

Наташа Клевер — Fri, 08 Oct 2010 21:01:25 +0000

Сегодня мы рассмотрим основные тенденции в создании дизайнов сайтов автомобильных компаний. Поможет нам в этом интересная аналитическая подборка от Flashmint. Автомобильные концерны тратят огромное количество ресурсов на производство новейших марок автомобилей. Это накладывает свои отпечатки и на производство веб-сайтов. Давайте посмотрим какие.

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

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

Toyota Auris Hybrid

Volkswagen Polo

BMW Cinetique

Hyundai

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

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

Audi A1

Volvo FMX

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

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

Lexus Dark Ride

Volkswagen Polo 444

Toyota Racing

2010 RAM Heavy Duty

4. Интеграция с социальными сетями
Активное использование социальных сетей для продвижения товаров является неотъемлемой частью существования современных автомобильных брендов. Посетителей сайтов активно стимулируют делиться ссылками со своими френдами в таких сетях как Facebook и Twitter, используя для этого креативные ролики.

Blue Your Friends

Porsche Spain

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

Nissan Leaf

Toyota Avalon

А вот еще интересное:

Основные тренды в дизайне сайтов известных алкогольных брендов

Наташа Клевер — Wed, 08 Sep 2010 21:01:42 +0000

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

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

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

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

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

3. Иконки социальных сетей
Не удивительно, что с ростом популярности социальных сетей, многие алкогольные бренды пожелали воспользоваться этим удобным средством продвижения сайтов. Практически на каждом сайте обязательно наличие таких иконок, как Facebook и Youtube и других.

4. Рецепты коктейлей и напитков
Еще один отличительный тренд в дизайне сайтов алкогольных компаний – это рецепты коктейлей и прочих алкогольных напитков, как правило, сопровождаемые качественными фотографиями. Это очень привлекательно для посетителей и хорошо стимулирует продажи.

5. Устаревшие элементы дизайна
Очень интересная особенность дизайна сайтов алкогольной тематики – это использование устаревших элементов дизайна. Многие алкогольные сайты были разработаны где-то в 2001 году и с тех пор практически ничего не обновлялось. Это касается некачественной типографики и пренебрежения к оптимизации под размеры экрана. Некоторые грешат включением аудио и видео приветствий без функций контроля. Так что тоже тренд, правда со знаком минус.

А вот еще интересное:

Основные тренды в дизайне сайтов известных косметических брендов

Наташа Клевер — Sun, 08 Aug 2010 21:01:57 +0000

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

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

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

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

4. Наличие анонсирующих блоков
Еще один тренд для сайтов индустрии красоты – это наличие блоков с объявлениями о новых товарах, текущих акциях, скидках, бестселлерах. Они находятся сразу на главной странице сайта и существенно облегчают переход непосредственно на страничку покупки товара.

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

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

А вот еще интересное:

20 основных трендов в веб-дизайне в 2010 году по версии Webdesigner Depot

Наташа Клевер — Thu, 08 Jul 2010 21:01:11 +0000

Мировые авторитетные блоги продолжают радовать нас интересными размышлениями на тему дальнейшего развития веб-дизайна. В этот раз популярнейший сайт Webdesigner Depot выделил 20 основных трендов веб-дизайна, которые явно прослеживаются в 2010 году. Здесь представлены и хорошо знакомые нам тенденции и только-только набирающие силу и популярность.

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

2. Большой хедер
Большой хедер сразу привлекает к себе внимание. Этим вовсю пользуются креативные дизайнеры. Тенденция началась еще в 2009 году и успешно держит лидерство и сейчас.

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

4. Большая фоновая фотография
Одна картинка стоит тысячи слов. Все больше и больше сайтов используют большую картинку для передачи информации, а развитие широкополосного интернета делает это все более доступным.

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

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

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

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

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

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

11. Закругленные углы
Технология CSS3 позволяет генерировать закругленные углы прямо в браузере, что делает их применение гораздо проще и эффективнее. Теперь пользователю не придется подгружать дополнительные изображения и скрипты.

12. Тень у текста или блока
Раньше для того, чтобы сделать тень у объекта, приходилось пользоваться графическими изображениями. Теперь задать глубину и рельеф у текста или блока можно легко сделать с помощью CSS3 технологии.

13. Эффект полупрозрачности
Еще одно детище CSS3 технологии. С помощью цветовой модели RGBa можно задавать степень прозрачности для объекта, в том числе и текста.

14. Мобильный дизайн
Мобильный интернет продолжает расти быстрыми темпами. А значит необходимо и сайты подстраивать под мобильное разрешение.

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

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

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

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

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

20. Закрепленные элементы
Сейчас когда браузеры могут поддерживать position: fixed, появилось множество путей, как это применить. Например, можно закрепить меню навигации.

А вот еще интересное: