Апр 24 2009

imgAreaSelect — jQuery-плагин для выделения области изображения

Раздел: Javascript, Дизайн — ingvar @ 21:16

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

imgareaselect_jquery_plugin

Остается только дописать backend и получается отличный инструмент.

Последняя версия плагина imgAreaSelect v0.8 совместима с jQuery 1.3.x.

Ссылки:
• Все примеры использования плагина imgAreaSelect
• imgAreaSelect on jQuery Plugins
• ImageCrop с помощью jQuery, плагина imgAreaSelect и PHP GD
• Создание превьюшек: PHP и плагин imgAreaSelect для jQuery
• Другой плагин: JCROP IMAGE CROPPING PLUGIN

Апр 01 2009

5 советов по совершенствованию страницы 404

Раздел: Дизайн, Юзабилити — ingvar @ 09:36

Страница с ошибкой 404 может оказаться единственной страницей, которую увидит пользователь пришедший к вам на сайт. Так почему не сделать её более удобной? Приведенные в статье советы помогут улучшить её на любом сайте.

Вот эти советы кратким списком:

  1. Не использовать страницу с ошибкой 404, которая установлена по-умолчанию
  2. Оформить страницу в стиле вашего сайта
  3. Сделать её максимально простой
  4. Разместить на странице ссылки на основные разделы вашего ресурса
  5. Подходите к ее проектированию творчески, но не переусердствуйте

Читать дальше

Дек 23 2008

Подборка материалов по UI паттернам

Раздел: Дизайн, Юзабилити — ingvar @ 11:32

Отличная подборка по UI паттернам, источник: UI паттерны.

  1. Patterix. Коллекция удачных интернет решений
  2. Elements of Design: A Web Design Showcase
  3. UI patterns
  4. Patterns for Effective Interaction Design (паттерны из книги Дженифер Тидвелл “Разработка пользовательских интерфейсов”)
  5. Interaction Design pattern library (коллекция паттернов собранная Martijn van Welie)
  6. Yahoo! Design Pattern Library
  7. Mobile UI design pattern
  8. Design Patterns (Flickr)
  9. Blink design library
  10. Information Design Patterns
  11. UI Pattern Factory
  12. Pattern Tap
  13. Design Patterns for Data Graphics
  14. A collection of e-commerce interface and design elements
  15. Design Patterns and Interfaces by Brian Christiansen
  16. Книга “The Design of Sites” (Douglas K. Van Duyne, James A. Landay, Jason I. Hong)
  17. Designing Social Interfaces patterns
  18. namics UI Pattern Library
  19. DrupalDance. Галерея элементов интерфейса
  20. Шаблонные решения для web-сайтов (Webmascon)
  21. factoryjoe’s photostream
  22. SMASHING MAGAZINE RESEARCH SIGN-UP FORMS

 
Другие сcылки:
• Паттерны дизайна: Обязательные поля форм
• UI Patterns

Дек 17 2008

Онлайн генераторы favicon для сайтов

Раздел: Дизайн — ingvar @ 13:25

Есть прекрасные онлайн утилиты, с помощью, которых легко сделать простые favicon иконки для сайта:

Почитать дополнительно:

Июл 25 2008

CSS: создание закругленных углов на сайтах

Раздел: CSS — Igor @ 01:22

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

Русскоязычные сайты:
http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/
http://cssmake.ru/component/content/article/5–boxes/79-gradientcorners.html
http://habrahabr.ru/blog/webdev/47616.html
38 статей о создании закругленных углов на сайтах

Англоязычные:
http://blog.josh420.com/archives/2007/11/how-to-create-fluid-width-div-layers-with-rounded-corners.aspx
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
http://www.smileycat.com/miaow/archives/000044.php
http://www.schillmania.com/projects/dialog2/

Июл 23 2008

20+ ресурсов с готовыми CSS шаблонами

Раздел: CSS — Igor @ 20:45

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

дальше…

Июл 19 2008

CSS: Лишние отступы под изображениями

Раздел: CSS — Igor @ 18:39

Решаем проблему с отступами под изображениями.

img {
  vertical-align: top;
}

Источник:
• Лишние отступы под изображениями в IE6,7
• Habrahabr: Убираем лишний отступ внизу изображения

Июл 19 2008

Материалы по Юзабилити

Раздел: Юзабилити — Igor @ 18:21

Материал по базовым основам usability: модульная сетка, резина…

http://habrahabr.ru/blog/web_design/32264.html

http://www.htmlbook.ru/content/?id=79

http://www.artevolve.ru/articles_03.htm

Ссылки на ресурсы по юзабилити

Книги по дизайну:

Блоги:
http://www.birzool.com/

Программа для создание прототипов Axure PR:

http://guicci.ru/2006/12/08/axure-rp-pro-sredstvo-dlya-prototipirovaniya/

http://guicci.ru/2008/04/01/axure-the-best-for-sure-with-denwer/

http://guicci.ru/2008/04/06/axure-urok-1-sozdaem-globalnoe-menyu-sayta-na-zakladkah/

Июл 19 2008

IE png fix

Раздел: CSS — Igor @ 17:42

Очень хорошее решение, недавно обновилось, обещают поддержку background-position и background-repeat.

IEPNGFix v2.0 Alpha