Веб-дизайн *

 

Джон МакКарти и Патрик Бергель (John McCarthy, Patrick Bergel) приводят вот такое сравнение интерфейсов поиска:



Они противопоставляют стандартный поисковик с одним текстовым полем для ввода запроса организованному каталогу.

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

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

На моем сайте можно найти полную версию тезисов МакКарти и Бергеля, а так же пару других статей по пользовательскому поведению и поиску.

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

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

Вот тут вы и можете помочь пользователю, установив на своем сайте в теге <titlе> уже набранный в неверной раскладке адрес своего веб-сайта!

Поясню на картинке:

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

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

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

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

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

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

Я просто из любопытства решил сделать небольшой соцопрос по поводу трех разработанных дизайнов — создал пост в своем блоге на Я.ру с просьбой выбрать понравившийся вариант. Результаты меня, мягко говоря, удивили:

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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

Бывает у вас так, что дизайн разработан отличный, всю эту красоту технично собрали и заанимировали, а вот прелоадер как то остался на последнюю очередь и силы уже иссякли… А если учесть, что это первый элемент который встречает посетителя, то положение приобретает серо-тоскливые оттенки.

Специально для попавших в такую ситуацию, ресурс для вдохновения (подчеркиваю!) prettyloaded.com

Добрый день, друзья, хочу поведать вам один секрет, который помогает мне быстро и правильно найти цветовую схему для сайта.Прошу строго не судить, возможно, некоторые из вас знают этот прием, но вот мой друг, не знал, а когда я поведал ему, как легко найти цвета для цветовой схемы сайта – он был поражен простотой решения. Я не претендую на уникальность, либо открытие нового метода, просто я это знаю, и мне это помогает.
Для того чтобы нам создать цветовую схему. Нам понадобится такая хорошая программа, как Adobe Photoshop, причем подойдет практически любая версия. Особых знаний работы с фотошопом для этого т.с. трюка не НАТО, все делается буквально в пару кликов.

1. Что такое PNG?
2. PNG vs GIF.
3. PNG vs JPEG.
4. Жизнь после Photoshop'а или сжимаем дальше.
5. Adobe Fireworks или PNG-8 с альфа-каналом.
6. Вердикт.

Осторожно, много картинок! Все кликабельны.

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

1. VIERA (телевизоры Panasonic) от ADV/web-engineering



2. Lexus RX350 от Brand Studio



Расскажем немного о самой технологии. Появилась она достаточно давно, и ее «идеологической базой» стал ресурс http://dontclick.it/, на котором подробно изложена суть технологии, примеры, а также эмоциональная подоплека.

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



Скачать архив с пээсдэшником (49 kb)

UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари

Ссылка от niker
designerstoolbox.com/designresources/elements/

Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/

Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners

Ссылка от 3fonov
Yahoo Design Stencil Kit

С 1 октября по 15 декабря на просторах Рунета пройдет Enthusiast Internet Award 2008 — ежегодный открытый конкурс среди лучших «непрофессиональных» web-проектов. За организацию и проведение этого «мероприятия» ответственны компания Gameland и портал «MSN Россия».

Задача конкурса — собрать сильнейших создателей наиболее ярких web-проектов. К участию допускаются только энтузиасты, т.е. создатели сайтов не на заказ, а для себя. Конечно, проект должен соответствовать заявленной конкурсной тематике. Это цифровые технологии, спорт, кино, мотор, аудио, фото, видео, дизайн, мода и бизнес. Регистрация бесплатна. А за победу как раз немного заплатят. Организаторы заявили призовой фонд в размере $50 000. На первый взгляд цифра довольно большая, но она разойдется не менее чем дюжине призеров, так что все пятьдесят тысяч побудителю не обломятся.

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

Если вдруг кому-то интересно, то зарегистрироваться можно тут или тут.

Есть такой малоизученный дизайнерами функционал в фотошопе как скрипты.
Многие пользуются Actions, но для написания настоящих jsx скриптов нужны хотя бы базовые познания в JS, VBS или AppleScript.

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


Как решить задачу?
1) Сесть и ручками наструячить 50 заголовков, копируя текст из текстовичка, настраивая размер и сохраняя файлы.
2) Создать скрипт:)

 

Навеяно топиком Неужели? SbRF.ru.

Невероятно, но факт, но сайт Билайна тоже подвергуся довольно-таки кардинальным изменениям. Но, моя радость оказалась преждевременной — пока что обновилась только главная страница. Думаю, остальные — дело времени.



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

Билайн приурочил редизайн к ожиданию запуска аймобилки ;)

UPD: Переместил в Веб-дизайн

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

Подборка из 12 сайтов в ассортименте которых, большой выбор креативных ссылок: портфолио, фотоколлекций, медиа-дизайн, иллюстраций и т.д.

Designcollector


The FWA


Creativenews

Вместо того, чтобы тратить впустую время, обыскивая сеть, в поисках хороших уроков по Photoshop, придерживайтесь этого списка.

PS Hero — перейти


PSD tuts — перейти


Tutorial 9 — перейти