Веб-дизайн *

Недавно столкнулся с такой ситуацией: разрабатывал дизайн для сайта одной фирмы, было представлено 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 — перейти

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

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

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

На тему эффективного дизайна можно привести несколько ссылок:

10 принципов эффективного веб-дизайна
Пять дизайнерских правил применяемых в Web

Это из того что вспомнилось. Рекомендуется почитать блог Дизайн пользовательских интерфейсов и юзабилити.

Это, скажем так преамбула, которую можно отнести к любому направлению дизайна. В этой статье мы поговорим о Web-дизайне и о применении Золотого Сечения и Правила Третей.

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

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

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

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

Первым в этом списке я выбрал http://www.textureking.com/ — красивый и понятный дизайн сайта, а также хороший выбор текстур которые разделены на 14 категорий.

Следущим будет http://www.cgtextures.com/ — огромное количество текстур и их категорий (вожможно он и получше textureking :), вам решать.

Да, большинство нынешних пользователей веба не только его читают, но и пишут в него же. И если бы они писали отдельные самодостаточные статьи и заметки, эта тема бы просто не родилась. А пользователи-то склонны к обсуждениям. Например: <<В ответ на ваше «ня» выражаю Вам свое «фе»>>.
Т.е., как правило, за каждым первичным материалом (которым может быть статья или первое сообщение на форуме) тянется «хвост» из обсуждений, длинный хвостище…

Я не сомневался, что моя акция с раздачей иконок будет иметь успех. Учитывая, что в данном случае «халява» не благоукраденная, как варез, или что-то в этом роде. Авторские иконки, каждая из которых — моё метафорическое видение блога-участника акции, его темы и характера.

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

1. Подкастер и радиогик Росновский, получил «сплэш-айкон» с плюющимся весёлым динамиком:

2. Еретик, у которого «по пять страниц» обо всём читабельном на свете обрёл архивную арэсэс-книгу:

3. ИКЕА-блог иконку не получил… В традициях компании ему достались составляющие, для самостоятельного монтирования:

Привет, хабралюди! Вчера вечером Тэглайн стартовал очередной, третий по счету, рейтинг «TOP-100 ведущих веб-студий Рунета 2008». Сейчас идет этап предварительной регистрации представителей веб-студий.

В прошлом году проект вызвал много споров и обсуждений. В этом году, судя по всему, организаторы скорректировали методику, добавили новые критерии, а также планируют построить ряд локальных рейтингов по крупнейшим городам России и СНГ: Санкт-Петербург, Новосибирск, Нижний Новгород, Екатеринбург, Самара, Омск, Казань, Челябинск, Владивосток, Пермь, Уфа, Красноярск, Иркутск, Киев, Минск.

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

Так же в этом году анонсирована оценка работ студий из TOP-20 по качеству работ.

Недавно на работе разразился спор. Довольно нешуточный. Мы сейчас занимаемся одним очень крупным социальным проектом, над которым работает два дизайнера, одним из которых являюсь я. Но вопрос был не совсем по дизайну, а о html вёрстке. Спорили о том, надо ли и можно ли прибивать нижний колонтитул (footer) к низу страницы, не зависимо от количества информации, или же позволять ему плавать? На подавляющем большинстве страниц футер плавает, и если информации на странице мало, он поднимается вверх.