Именно для таких целей существует полезный сайт Placehold.it — просто подставляете нужные размеры изображения (а по желанию — еще и цвета) в его url и получаете нужную заглушку.

Вот, например, как это получилось у нас:

- общие характиристики качества сайта (удобство навигации, удобство контактов, связность, отражение основной идеи)

- соответствие сайта потребностям основных групп целевой аудитории (инвесторов, прессы, общеста в целом, клиентов, потенциальных сотрудников)

Первая десятка с учетом всех параметров выглядит следующим образом:

Top 10 from the 2009 Index

Всего на агентства сайте представлено 75 компаний. К сожалению ни одной украинской компании нет совсем, из российских в рейтинг попали Сбербанк, Газпром, Лукойл и Роснефть и все они, к сожалению, находятся в конце списка, хотя у всех наблюдается положительная динамика:

В общем нашим компаниям еще есть куда стремиться.

Итак, начнем!

С каждым днём веб-интерфейсы становятся всё более похожими на традиционные десктоп приложения. И главная задача — это, естественно, достижение большего уровня интерактивности и удобства для пользователя. Добиться всего этого можно используя такой старый добрый скриптовый язык, как Javascript. Который благодаря технологии AJAX обрёл практически безграничные возможности. Но не будем обобщать, а поговорим о самом популярном фреймворке jQuery. Именно на его основе хочется показать (интересных примеров очень много) красоту и возможности современной разработки веб-интерфейсов. Вдохновляйтесь и берите на вооружение!

Меню и навигация

Красивые реализации меню, анимация.

• Lava Lamp
• jQuery UI Tabs
• Navigation Effect
• jQuery Menu: Dropdown
• iconDock

Работа с контентом

Закладки, «аккордионы», слайдеры…

• Slick Tabbed Content
• Incredible Login Form
• Horizontal Accordion
• Agile Carousel

Фотогаллереи, слайдшоу, работа с картинками

• JQZoom
• GALLERIA
• Slider Gallery
• jQuery Thumbs
• jQuery Cycle
• ThickBox

Всплывающие подсказки и диалоговые окна

• Coda Bubble
• qTip
• jQuery Impromptu
• jGrowl

Работа с формами, проверка введенных данных/валидация.

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

• jQuery Validation Plugin
• Ajax Username Check
• Masked Input Plugin
• Autocomplete
• Jeditable

Расширенная функуциональность форм, украшательства

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

• Farbtastic
• File Style
• jNice
• jQuery date picker

Это лишь малая часть всего того, что можно реализовать с помощью jQuery. Ведь ещё есть работа с таблицами данными и графиками, создание контекстных меню, WYSIWYG-редакторы, всевозможные анимации, древовидные меню и прочие фишки…

Ссылки для дополнительной информации:

• 45+ Fresh Out of the oven jQuery Plugins
• 37 More Shocking jQuery Plugins
• 75 (Really) Useful JavaScript Techniques
• The ultimate jQuery Plugin List
• 45+ New jQuery Techniques For Good User Experience

Kavoon

Efingo

MediaBoom

Kulturbanause

20CM Records

Outdoor Italia

Gavin Mackintosh

Pixel Criminals

Dana’s Garden

Jeff Sarmiento

Оригинал

1. Рисованный дизайн
Дизайн, что называется «от руки» останется популярным стилем, но только первые пару месяцев 2009 года. Затем такой дизайн постепенно будет перевоплощаться во что-то новое, более свежее, потому как дизайнеры склонны думать, что этот стиль понемногу изживает себя и веет ностальгией 2008 года.

2. Мобильный веб-дизайн
Заход на сайты через мобильные устройства всё ещё занимает малое процентное отношение. Тем не менее, оно будет расти, а сайты с большим трафиком вскоре станут переходить на «облегчённую» версию, например как «iPhone version».
Веб-дизайнерам, которые всегда хотят оставаться на гребне волны следует задуматься о создании мобильной версии сайтов. Ведь каждый пятый пользователь обладает полноценным смартфоном с полнофункциональным веб-браузером.

3. Социальные медиа
Прежде чем начать говорить о социальных медиа, скромно отмечу, что это словосочетание настолько часто повторяется людьми, что стало почти нарицательным. Социальные медиа основываются на идее о том, что каждый отдельный человек может взаимодействовать с другими людьми так, что вместе они чувствуют себя частью некоего сообщества.
По тенденциям 2009 года создать обыкновенный сайт будет недостаточно для клиента. Веб-дизайнеру понадобится определённая стратегия, подразумевающая взаимодействие с какими-либо социальными сетями. Самый простой пример: сделать страницу на MySpace (www.myspace.com) — наибольшая и самая известная из сетей.

4. JavaScript библиотеки
Благодаря популярности и простоте использования JavaScript, всё больше и больше сайтов используют jQuery, которая загружается достаточно быстро относительно других библиотек (200–400мс — существенный выигрыш в скорости).

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

1. Размер документа.
Принт-дизайн – это двухмерное изображение, где всё внимание направлено на макет. Исходя из этого, большинство принт-дизайнеров в первую очередь обращают внимание на разрешение документа и размеры бумаги, на которой конечный продукт и будет напечатан. Но как не печально, полиграфисты частенько пренебрегают правилами переноса размеров в веб.
В отличие от полиграфии, веб не имеет натуральных размеров (мм или дюйм), и опирается только на пиксели. Конечно, любой монитор обладает dpi (количество точек на дюйм), но вряд ли принт-дизайнер можно безоговорочно доверять dpi при разработке веба. Веб-проекты основываются на 72 dpi разрешении, и, мягко говоря, неразумно думать, что 72 пикселя соответствуют одному дюйму экрана.
Принт-дизайнер уверен, когда он разрабатывает макет на А3, то на бумаге продукт будет соответствовать размеру А3, как и было задумано. В вебе немного не так. Конечный результат и качество может отличаться от того, что задумал автор. Например, то что изначально предполагалось быть размера А3 в веб, на бумаге может получится размером А4. Это происходит от того, что полиграфисты делают слишком большие разрешения на свои работы, не учитывая при этом особенностей Интернета.
Рекомендация: разрабатывайте дизайн только в пикселях.

2. Цвет
Цвет может либо пойти на пользу, либо же оттолкнуть потенциального клиента от вашей продукции. Однако излишнее буйство красок может погубить представление о типографии, а недостаток яркости не сможет захватить достаточного внимания. Неправильный выбор цвета нарушает смысловой поток вашего сообщения. Главное найти золотую середину.
Многие образцы дизайна имеют две или четыре цветовых схемы. В маленьких образцах, таких как визитки или открытки, следует использовать всего несколько цветов, в то время как в образцах больших размеров (брошюры, буклеты) допускается использование четырёх цветов. Также следует учитывать оттенок шрифта и правильное расположение теней.
Подходящее сочетание цветов даёт вам возможность направить взгляд читателя на нужную информацию. Среди большинства цветов и оттенков, которые привлекают внимание, фаворитами считаются чёрный и красный.
Печатные образы по сравнению с компьютерными выглядят менее насыщено. Принт-дизайнер просто может не брать во внимания некоторые оттенки, которые, например, на бумаге не будут смотреться, а экран монитора отобразит этот оттенок наилучшим образом. И ещё одно требование, при разработке дизайна: установите на своём компьютере возможность выбора цвета с помощью CMYK, это придаст вашему образцу большей реальности. Советуем вам также использовать технологию шестнадцатеричного кода (Hexadecimal Code). Эти коды включают три набора шестнадцатеричных чисел, по два разряда каждый. Первый двухзначный набор отвечает за количество красного в цвете.
Второй набор управляет количеством зеленого, а третий — количеством синего. Смешивание различных уровней красного, зеленого и синего цветов создает каждый отдельный цвет, который вы видите на экране.

3. Шрифты

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

Для текстового представления в вебе можно применять совсем немного шрифтов, которые гарантированно установлены на любом компьютере, из них самые «ходовые»:
o Time New Roman
o Arial
o Courier New
o Tahoma
o Verdana
o Helvetica
o Georgia

Для элементов оформления в принципе можно использовать любые шрифты.

В html нельзя задать точный размер шрифта. Если необходим шрифт строго определенного размера, то используется так называемые таблица каскадных стилей (CSS).
Наибольшая разборчивость текста сайта достигается при соблюдении следующих основных условий:
• Максимальный контраст между цветом фона и текста. Оптимальным является черный шрифт на белом фоне без какого-либо фонового рисунка;
• Основные ключевые слова (основную мысль, названия заголовков и т.д.) желательно выделять полужирным шрифтом.
• Текст, которым оформлены гиперссылки системы навигации, должен отличаться от шрифта, которым оформлено основное содержание страниц сайта.

4. Общее содержание веб-дизайна для полиграфистов
Веб — не печать. Здесь нельзя разгуляться буйной фантазии полиграфиста. Возможности достаточно скудные, но, тем не менее, даже при таких «суровых» условиях можно сделать гениальный дизайн сайта. Принт-дизайн гласит: «Посмотри, как я хорош!».
Лозунг же веб-дизайна: «Посмотри, сколько хорошего я могу сделать для твоего клиента!».

Итог
Проектирование оригинал-макет для веба и для полиграфии отличаются друг от друга. Каждый вид дизайна, безусловно, имеет свои особенности. В полиграфии, например, незначительная погрешность может стоить нормальной читаемости текста или качественного разрешения.
Успешная разработка дизайна зависит и от самого дизайнера, его способностей и целей.
Помните, что дизайн это не искусство, и главная его цель – донести до потребителя нужную информацию и заработать на этом деньги.
Проектируя веб-дизайн и при этом, не вдаваясь в его особенности, принт-дизайнеру необходимо учесть следующее:
• Рассчитывайте размеры в пикселях. Для этого отлично подойдёт Photoshop. Откажитесь каких-либо  единиц измерения кроме пикселей.
• Учитывайте ширину монитора пользователя – 760рх или же 960рх (для более нового монитора).
• Избегайте сложных макетов – 3 колонки будет достаточно.
• Избегайте витиеватых шрифтов. Используйте только базовую типографию.
Нельзя чётко сказать, что и как легче создавать – дизайн в веб или полиграфию. Но существует одно общее правило, которое гласит о том, что в любой работе должна быть идея.