Интересно стало посмотреть на производителей газированной воды, точнее на их сайты. Нашла не всех, видимо потому что некоторая вода идет от одного и того же произвотдителя, а может быть просто потому что просто нет сайта. Смотрим. И конечно если вы нашли чтото интересное, то не забываем выкладывать и делиться. Ога?)
Flash игры и развлечения позволяют отвлечься от напряженной работы, переключиться на что-то веселое и в результате повысить свое настроение. А с хорошим настроением работается уже по-другому. Обычно я ставлю ссылку на забавную игру или интересный сервис в конце статей (постскриптумы), а сегодня предлагаю вам специальную подборку оригинальных и увлекательных развлечений, которую я собрал за последнее время.
Flash игры и развлечения
В океане с акулами - вы попадаете в панорамный подводный мир, кишащий акулами и экзотическими рыбами. Можно сделать в режим полного экрана, а также менять точки обзора, кликая на значке рыбы в правом нижнем углу. Кстати, попробуйте кликнуть на акуле 
[показать] .
Падающий песок - знаменитая flash игра. Многие люди буквально "подсаживаются" на нее. На первый взгляд, ничего особенного - сыпятся разноцветные вещества. На самом деле все гораздо интереснее. Можно нарисовать линии (на нижнем меню - wall), сыпать струи пороха (gunpowder), напалма (napalm), нитро (nitro), нефть (oil), воск (wax) и другие вещества, а затем все поджечь огнем (fire). Кроме этого, есть опции изменения интесивности сыпящихся струй веществ, толщины курсора, ластика для стирания излишков и другие, что делает эту flash игру разнообразной и увлекательной.
Для этой игры нужен Java плагин. Можете скачать его на официальном сайте Java (у меня установка плагина напрямую через браузер не сработала).
3d шар - эта flash игра ставит перед вами цель - поймать и отбить падающий шар в трехмерном пространстве. Это сделать довольно непросто. В начале игры нужно ввести свое имя латинскими буквами.
Первобытная война - в этой игре вы будете сражаться в первобытном мире. На скриншоте виден наездник, сидящий на динозавре, а также падающие горящие камни.
Стань художником - этот сервис - настоящая находка для любителей рисовать. Можно рисовать все, что захотите (в меню это команда paint), добавить рамку (select a frame), текст (значок T), сохранить и отправить ваше творение друзьям на e-mail (save and send), а также смотреть работы других посетителей со всего мира (view other paintings) и видеть запись процесса рисования (replay painting).
Еще одна классная опция - можно поместить свое творение в галерею (в левом меню выберите для этого hang in gallery):
Разберись с бандой - простая, но увлекательная flash игра, которая не позволит вам скучать.
Разбей компьютер - наконец-то сбылась мечта многих
[460x234] [461x326] [460x345] [465x311] [465x293] [475x279] [488x359] [487x307] [483x251] [477x255] [488x316] [492x292] [495x317] [501x300] [503x335] [показать] [513x356] [показать] [522x387] [521x373] [516x320] [514x331]Если вам не хватает вдохновения и свежих идеи для веб-дизайна - тогда приглашаю вас посетить эти сайты.
Очень красивый дизайн, особенно впечатляют верхние кнопки.
2. iconiza.com
Веселый веб-дизайн с лучших традициях web 2.0.
3. joyent.com
За основу оформления шапки сайта взяты векторные рисунки.
4. makao.it
Необычный подход к оформлению дизайна сайта.
Цветовая гамма этого сайта хоть и яркая, но все элементы гармонируют друг с другом.
У этого сайта шапка тоже сразу привлекает взгляд.
Вся главная страница этого сайта сделана в виде векторного рисунка с облаками и самолетами.
Это довольно известный своим дизайном сайт.
Перевернутая трава вверху - довольно оригинальный подход к оформлению сайта.
10. artscode.com
У сайта artscode просто замечательный дизайн. Все тщательно продумано.
11. betterimage.org
Студия веб-дизайна из Северной Каролины.
12. bittbox.com
Дизайн довольно простой, но фон древесины добавляет индивидуальности.
13. letter2god.com
У этого сайта приятный дизайн и ничего лишнего.
14. litepost.com
Оригинальный веб-дизайн в виде почтового конверта.
15. luvdalot.com
Цветы в дизайне - это классический
Область применения Flash поистине огромна и ограничивается лишь фантазией веб-дизайнеров. С помощью Flash можно создавать ошеломляющие своей изящностью дизайны, способные заставить истекать слюнками даже самого привередливого зрителя!
Несмотря на то, что с помощью Flash веб-дизайнер может создать практически все, что угодно, у него есть один немаловажный недостаток - Flash категорически не юзабелен и не обладает соответствующей степенью доступности.
С помощью Flash веб-дизайнеры могут претворять в жизнь такие задумки и идеи, которые просто невозможно реализовать с помощью (X)HTML и CSS!
Результаты кропотливой работы веб-дизайнера могут быть поистине очень выразительными и впечатляющими при 2-ух условиях:
- Если дизайнер нашел оптимальное соотношение между графикой, анимацией и мультимедиа
- Если дизайнер следует правилам юзабилити и взаимодействия с пользователем
В силу своих особенностей, плюсов и минусов, Flash нецелесообразно использовать на сайтах, где необходим оперативный и интуитивно-понятный доступ к информации.
В данной статье-обзоре мы представляем Вашему вниманию отобранную нами коллекцию из 65 превосходных Flash-дизайнов.Ошибка №1: Использование Flash вместо (X)HTML/CSS
Ошибка №2: Непонятная навигация
Ошибка №3: Использование поп-апов
3D и видео-эффекты
Наступило лето, зелень на деревьях с каждым днем становится все гуще и гуще…
В связи с этим представляю Вам небольшой обзор, состоящий из 23 дизайнов с использованием дерева. По-моему, реализовано отлично! Конечно, какие-то дизайны лучше, какие-то хуже. Как говорится, о вкусах не спорят!
2) BurningSea
3) Wrapragecure
5) GnvPartners
6) Wrapragecure
7) Miba
8 ) Henryjones
9) Alexbuga
10) Yucesoy
11) Silent7
12) SwingTheory
Профессиональный веб-разработчик должен быть адвокатом посетителя сайта, защищать его интересы и гарантировать, что независимо от сложности сайта, пользователь всегда сможет найти то, что ему нужно. Чтобы успешно выполнять эти задачи, вы должны уметь эффективно защищать свои идеи и решения в дискуссиях с клиентами и коллегами. Ваша работа в том, чтобы корректировать плохие идеи и неверные концепции, а не слепо следовать им.
Конечно, для этого важно глубокое понимание фундаментальных принципов юзабилити, но чтобы ссылаться на них в обсуждении столь же важно знать, как называются эти концепции. Более того, использование точных определений может помочь отстоять свою точку зрения в дискуссии.
Правила и принципы юзабилити
Правило 7±2
Возможности мозга по обработке информации не безграничны, в соответствии с результатами исследования Джорджа Миллера кратковременная память может одновременно содержать от 5 до 9 сущностей. Этот факт часто используется при обосновании необходимости сократить количество элементов в навигационных меню до 7, что вызывает горячие дебаты1, поскольку не совсем ясно, как это правило должно применяться в веб. [Miller’s studies2]
Правило 2-х секунд
Заключается в том, что пользователь не должен ждать любой реакции системы, к примеру, запуска или переключения приложения, более 2-х секунд. Значение 2 секунды выбрано произвольно, но кажется достаточно подходящим. В общем случае, чем меньше ждет пользователь, тем лучше.
Правило 3-х кликов
Пользователь не будет в восторге от использования сайта, если он не может найти необходимую ему информацию за три клика мышкой. Другими словами это правило подчеркивает важность понятной и простой навигации. Во многих случаях важно не столько количество необходимых кликов, сколько общая понятность системы, даже 10 кликов не проблема, если на каждом этапе пользователь четко представляет, где он и куда должен двигаться дальше.
Правило 80/20 (Принцип Парето)
Заключается в том, что 80% эффекта получается в результате 20% действий. В бизнесе это правило часто применяется в виде: «80% продаж приходится на 20% клиентов». В веб-дизайне и юзабилити это правило работает не менее эффективно. К примеру, значительно улучшить отдачу сайта можно определив 20% пользователей, заказчиков, действий, продуктов или процессов которые дают 80% прибыли и обратив на них особое внимание при разработке.
Восемь золотых правил для разработчиков интерфейсов
В результате исследований взаимодействия человека и компьютера Бен Шнейдерман составил набор правил, которые могут быть использованы при разработке многих типов интерфейсов. Эти принципы актуальны как для разработчиков интерфейсов, так и для веб-дизайнеров.
- Стремитесь к логичности
- Для опытных пользователей должен быть быстрый способ (сокращения, горячие клавиши, макросы)
- Должна быть информативная обратная связь
- Диалог должен быть законченным
- Обработка ошибок должна быть простой
- Должен быть простой способ отмены действий
- Пользователь должен чувствовать, что все под его контролем
- Как можно меньше загружайте кратковременную память
Подробнее о правилах Шнейдермана можно узнать из Wikipedia: Shneiderman’s rules for design3.
Правило Фиттса
Опубликованная Паулем Фиттсом в 1954 году модель движений человека, определяет время, необходимое для быстрого перемещения в целевую зону как функцию от расстояния до цели и размера цели. Обычно это правило используется при рассмотрении движения мышью от точки A к точке B. Это может быть важно при размещении элементов, количество кликов на которые желательно увеличить.
Перевернутая пирамида
Перевернутая пирамида — это стиль написания, при котором основная мысль представлена в начале статьи. Статья начинается с вывода, за которым следуют ключевые моменты, а завершается наименее важной информацией. Пользователи хотят получать информацию как можно быстрее, поэтому перевернутая пирамида как нельзя лучше подходит для веб, такого
Именно юзабилити и практичность определяют успех или неудачу сайта, а не его дизайн, как ошибочно думают многие. Сами подумайте, если Вы делаете сайт для целевой аудитории, а ее представители не могут ничего на нем найти, о какой прибыли и говорить? Успешный сайт – такой сайт, который понятен пользователю и который способен выполнять возложенные на него задачи.
В этой статье мы не будем обсуждать такие детали, как, например, где должна располагаться форма поиска и т.д. Этому было посвящено достаточно хороших статей. Вместо этого мы сосредоточимся на рассмотрении основных принципов, эвристики и методов эффективного веб-дизайна.Как думают пользователи?
Обычно поведение пользователей в Интернет ничем не отличается от поведения покупателей в магазинах! Посетители просматривают каждую новую страницу, сканируют глазами текст и кликают на первую привлекшую их внимание ссылку.
В основном пользователи ищут что-то интересное или полезное и как только такие объекты ими находятся, пользователи кликают на них. Если же открывшаяся страница не оправдала ожиданий пользователя, он жмет на кнопку браузера «Назад» и продолжает поиски.
- Пользователи ценят качество. Если на сайте имеется важная и полезная для пользователя информация, то он закроет глаза на оформление сайта и на рекламу, на нем размещаемую. Именно поэтому сайты, предоставляющие первосортный контент, но не обладающие изысканным оформлением, имеют стабильную высокую посещаемость. Запомните! Контент гораздо важнее для пользователя, нежели дизайн.
- Пользователи не читают, они сканируют глазами. Пользователи сканируют веб-страницы, ища на них «зацепки», такие как заголовки, списки, слова, выделенные жирным или курсивом и т.д.
- [показать]
Пользователи не читают, они сканируют. Видите закономерность – «горячая» зона тянется до середины предложений. Это типично для сканирования контента глазами. - Пользователи нетерпеливы, они хотят все прямо здесь и сейчас. Простой закон: если сайт не может оправдать ожиданий целевой аудитории, компания теряет прибыль. Чем труднее пользователям понять сайт, тем выше шанс, что они незамедлительно покинут его.
- Пользователи не принимают оптимальных решений. Пользователи не используют простых путей в процессе поиска необходимой им информации. Также они не просматривают веб-страницы сверху донизу – их взгляд бродит в хаотичном направлении. Как только они увидят ссылку, которая, по их мнению, способна предоставить искомую ими информацию, они незамедлительно кликают по ней. [смотреть видео]
- [показать]
[показать]
На обоих скриншотах видно, что взгляд пользователей бродит в хаотичном направлении по веб-странице. - Пользователи следуют своей интуиции. В большинстве случаев пользователи с грехом пополам выполняют различные действия, не читая инструкций, размещаемых на сайте. Согласно Стиву Кругу: «Если мы находим что-то, что работает, мы используем это. Абсолютно неважно, как это работает, нам важен сам факт этого!»
- Пользователи хотят владеть ситуацией. Пользователи хотят управлять своим браузером и не терпят вмешательства в свою вотчину со стороны. Например, их неописуемо раздражает, когда при заходе на сайт меняется размер окна их браузера или выскакивают всплывающие окна, обходя установленный блокировщик и т.д. Отсюда вытекает еще одно очень важное и часто нарушаемое правило: никогда не задавайте открытие ссылок в новом окне браузера. Пользователи сами решат, что, как и где им открыть.
1. Не заставляйте пользователей думать
Вспомнили первый закон юзабилити Стива
Как Вы понимаете, сайт выступает в роли связующего звена между Вами и Вашими потенциальными клиентами и покупателями. Вам необходимо заинтересовать их, чтобы не упустить. Отлично справляется с этой задачей грамотно написанная история.
Читать увлекательные истории любят все от мала и до велика! Вспомните, когда Вы были маленькими, истории Вам читали Ваши родители. Когда Вы выросли, у Вас не пропала тяга к интересным и захватывающим внимание историям. Все профессиональные спикеры ведут свои речи в виде историй для поглощения внимания своей аудитории! Это работает!
Профессиональный сайт как профессиональный спикер – преподносит информацию своей аудитории в захватывающей внимание форме, форме истории! Все, что Вам нужно для успеха – полностью сосредоточить внимание Вашего оппонента на себе и подвести к покупательскому решению!
Поскольку подавляющее большинство посетителей попадает именно на главную страницу сайта, соответственно, история, размещаемая на этой странице, должна быть отшлифована донельзя, иначе потери неизбежны!
Итак, как Вы знаете, любая история состоит из 3-ех частей: вступления, основной части и развязки (заключения). Не забудьте об этом в процессе написания истории для своего сайта.
Далее я хочу поделиться с Вами простым планом, способным помочь Вам в процессе написания потрясающей истории для главной страницы Вашего сайта!
Шаг 1. Определяемся с основной целью главной страницы сайта
Основная ошибка подавляющего большинства сайтов – цель их существования либо размыта, либо вовсе не определена. Даже если главная страница сайта имеет четкую цель, то это не поможет в ситуации, когда остальные элементы сайта и его структура хаотичны и не определены.
Я как раз сейчас я работаю с одним клиентом, у которого есть сайт, контент на котором просто превосходный, но проблема его как раз в контенте. Чтобы у пользователя перед глазами предстала четкая картина, ему необходимо гулять по страницам сайта и собирать информацию по крупицам, т.к. главная страница сайта отвечает всего на несколько его вопросов.
Это большая ошибка, т.к. пользователи ненавидят терять время на переходы по множеству ссылок, они хотят получить все ответы сразу в одном месте без лишних телодвижений – это необходимо помнить всегда.
Первое, что я сделал – спросил клиента, какова же вообще цель его сайта. Данный им ответ прояснил всю картину! Теперь стало ясно, о чем писать и на что делать акцент!
Шаг 2. Поглощаем внимание читателя
Каждый посетитель, зашедший на Ваш сайт, хочет получить интересующую его информацию сразу же и в одном месте. Для этого Вам необходимо составить такой заголовок, который сразу бы отбросил все сомнения посетителя о том, туда он попал или нет.
Заголовок должен дать понять посетителю, что Вы действительно понимаете, что ему нужно, его проблему. Ваш заголовок должен говорить ему: «Поздравляю! Вы попали по адресу! Здесь Вы найдете ответы на все свои вопросы, найдете решение всех своих проблем!».
Первый пример эффективных и работающих заголовков: «Вы хотите научиться продавать в разы больше с большим энтузиазмом и меньшими нагрузками? Тогда наш тренинг создан специально для Вас!». Как видите, заголовок содержит в себе одновременно проблему и ее решение! Этот заголовок заставляет заинтересованных посетителей погрузиться с головой в чтение дальнейшего текста.
Второй пример эффективных и работающих заголовков: «А Вы знаете, что у 1 из 3 женщин в течение ее жизни наблюдаются проблемы с сердцем?». Этот заголовок так же заинтересовывает и поглощает внимание читателя, стремящегося узнать об этом подробнее!
Шаг 3. Информация должна быть представлена последовательно
Т.к. в основном цель перед сайтом ставится глобальная, то и информации для раскрытия этой цели в письменной форме предостаточно. Любой уважающей себя компании необходимо иметь тексты, рассказывающие о компании в целом, о ее конкурентных преимуществах, о роде ее занятий, о предоставляемых услугах и т.д.
Всю эту информацию необходимо расположить последовательно и только в последовательном виде предоставить пользователям. Ни в коем случае не наоборот.
Итак, история, размещаемая на главной странице Вашего сайта, должна иметь вступление, основную часть и заключение. Каждая из этих 3-ех частей должна быть непосредственно связана с соседней, должна плавно перетекать в нее.
Представьте такую ситуацию: Вы рассказываете своему другу о том, что Вы нашли такой магазин, в котором предлагают огромный и небывалый нигде более ассортимент товаров. Только Вы дошли до самого интересного места, как тут же зазвонил телефон. Вы прервались и стали общаться по телефону. В этот момент Ваш собеседник сбился и потерял внимание, а так же
Представляю Вашему вниманию отличный сервис по автоматической генерации CSS-файлов. От Вас потребуется лишь знание того, что Вы хотите получить в итоге. Все остальное данный сервис сделает сам.
Заполните все необходимые поля CSS Builder’a, нажмите Build и скопируйте полученный код в Ваш файл с расширением .css
Для перехода на сайт CSS Builder’a, нажмите на изображение выше.
Для многих остается загадкой, почему одни статьи тысячекратно добавляются в закладки различных сайтов социальных сетей, а другие - раз, два и обчелся. На самом деле тут ничего секретного нет, все очень просто - надо просто знать основные тому причины, которыми я и поделюсь далее в этой статье.
Почему важно уметь писать «активно добавляемый в закладки» контент?
Тот, кто умеет писать «активно добавляемый в закладки» контент, владеет своей нишей и всегда находится в центре событий! Только представьте, какие Вы получите выгоды от того, что представители Вашей целевой аудитории будут сохранять Ваши статьи на сайтах социальных сетей - Вы в долгосрочной перспективе будете получать все новых и новых целевых посетителей, что не может не радовать, Вы получите известность, авторитет и т.д.
Кстати, эту технику используют все крупные и известные проекты!
А теперь давайте поговорим о составляющих «активно добавляемого в закладки» контента.10 составляющих «активно добавляемого в закладки» контента
Перед перечислением этих составляющих хочу предупредить, что необязательно, но желательно использовать все перечисленные ниже элементы. Можно экспериментировать и комбинировать их по своему усмотрению, подыскивая наиболее эффективную комбинацию.
1. Объем статьи. Наиболее общая причина, по которой пользователи добавляют статьи в закладки. Это объясняется тем, что на прочтение объемных статей требуется много времени, которого на момент их нахождения может просто не оказаться.
Вывод: пишите качественные, информативные и объемные статьи (но не «лейте воду», этого посетители не оценят).
2. Давайте своим читателям пищу для размышления. Это означает, что в своих статьях Вы должны поднимать темы, требующие более глубокого осмысления. Так, например, поступает Сет Годин. На его блоге публикуются короткие заметки, каждая из которых содержит подобную «фишку», вследствие чего все его заметки добавляются заинтересованными читателями в закладки.
3. Напишите полезное пошаговое руководство на актуальную тему. Обучающие пошаговые руководства по определению содержат несколько шагов, которые просто невозможно (в зависимости от сложности и степени подготовленности читателя) запомнить при первом, тем более, беглом изучении. Именно это и служит причиной добавления их в закладки.
Добавив данное руководство в закладки, пользователь сможет получить к нему моментальный доступ в любое время и в любой момент, избежав его длительных поисков на просторах Интернет.
Чуть не забыл, Ваше руководство должно быть актуальным, уникальным, информативным и поистине полезным для представителей Вашей целевой аудитории, иначе оно просто не будет никому нужно.
4. Создайте сборник ссылок по какой-либо конкретной теме. Работа над созданием качественного сборника ссылок отнимает много времени, но оно окупится слихвой. Посетители будут безмерно благодарны Вам за проделанный труд. Все заинтересованные пользователи добавят данный сборник в закладки, т.к. удобства от этого очевидны…
5. Создайте список рекомендуемых лично Вами ресурсов. Если Вы пользуетесь уважением и авторитетом среди представителей своей целевой аудитории, то они с должным вниманием воспримут Ваши рекомендации. Помните - Вы обязаны предоставлять своей аудитории поистине полезные ссылки, никаких «левых», в противном случае, Вы лишитесь бесценного доверия…
Некоторые идеи: список полезных веб-сайтов, перечень полезных статей по конкретной теме и т.д.
6. Создайте компактную памятку (подсказку) на конкретную тему. Компактная памятка представляет собой своеобразную «подсказку» (формат A4) по какой-либо теме, освещающая все ее основные моменты. Они очень ценятся среди пользователей, в подтверждение чему моментально отправляются в их закладки!
Процесс создания качественных компактных памяток (подсказок) я описал в этой статье.
7. Высказывайте свое мнение по спорным вопросам. Читатели, согласные с Вашим
Вся прелесть отменных дизайнов заключается в повышенном внимании дизайнеров к его мелким деталям. Чтобы дизайн выглядел неотразимо, необходимо умелое обращение с цветом, создание креативных форм и т.д. Заметьте, мелкие детали придают дизайну уникальный и неповторимый вид!
Хочу представить Вам интересные креативные решения в оформлении навигационных кнопок:
В продолжении еще несколько примеров!
[показать]
Оригинал статьи: Monday Inspiration: Paper Strips Menus
Flash является поистине огромной силой. С помощью Flash веб-дизайнеры претворить в жизнь то, что они никогда бы не реализовали с помощью (X)HTML+CSS. С помощью Flash создается огромное количество интерактивных приложений, дизайнов и оболочек.
Сайты, созданные на Flash, выглядят очень живыми. С помощью Flash стирается грань между статикой и динамикой. Flash - сила!
В этой статье-обзоре мне бы хотелось продемонстрирвоать Вам примеры красивых, креативных, необычных и выдаюРеклама и игры
Искусство
Совершенно неожиданно мне в голову пришла идея собрать данные о том, как преобразовывались сайты 10 крупнейших и известнейших компаний за последние 12 лет.
В качетсве “жертв” выступают следующие мировые бренды: Apple, Amazon, Adobe, CNN, Nike, Yahoo, Microsoft, ESPN, Starbucks и MTV! По-моему, идея предоставить взору широкой аудитории ступени развития веб-представительств столь крупных и уважаемых компаний, очень любопытная! Лично мне было очень интересно понаблюдать за процессом эволюции!
Итак, хватит вводных слов, переходим к просмотру!1. Apple сегодня / 5 лет назад / 10 лет назад
2. Amazon сегодня / 9 лет назад
3. Adobe сегодня / 5 лет назад / 9 лет назад / 12 лет назад
4. CNN сегодня / 5 лет назад / 8 лет назад
5. Nike сегодня / 5 лет назад / 8 лет назад
6. Yahoo сегодня / 4 года назад / 8 лет назад / 12 лет назад
В связи с тем, что в Рунете появляется все больше и больше тематических блогов, мне бы хотелось сделать обзор привлекательных и необычных дизайнов WordPress-блогов. Данный обзор касается исключительно зарубежных блогов.
Надеюсь, что после просмотра этой коллекции, у Вас проснется чувство прекрасного и Вы преобразите или хотя бы задумаетесь над преображением своего детища!
Ошеломляющие красочные дизайны
1) Raduceuca
Дизайны в стиле Гранж
4) Daninko
5) Robgoodlatte
6) Matt Brett
Использование векторной графики
8 ) Octwelve
9) Monofactor
10) w3sh Magazine
11) Photoshop Lady
12) Elitist Snob
13) Paul Enderson
Темные дизайны
На сайте papagdemama.net появилась новая студия дизайна, которая представила нам свою коллекцию сделанных работ. Заходи и смотрим) Вот часть из них: