дизайн

blog wed'a

все. уже понял, в чем проблема с сайтом - нельзя было нечего здесь делать, не поменяв пароль (ну, с тем, что был генерированный автоматически, - доступ ко всему был запрещен - мистика, однако). полазил по сайту - мне понравилось, но очь уж дизайн броский - контраст большой, на глаза давить начинает скоро (непорядок). ну, как говорят, красота требует жертв :)
вспомнилось так же свое первое знакомство с линуксом. страшно было ставить на ноут такую штуку - а если что пойдет не так?! винда, все-таки, удобно, но - глючно. решил пользоваться с ливсиди - все было четко, но достало постоянное догрузка файлов с диска. первой была сборка слакс (там какие-то лапки были) - но с драйверами проблема большая была, потому не понравилось. потом - убунту, кубунту, но остановился на кнопиксе.

Дизайн-среды.

xomyaq аватар

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

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

Несколько слов про сайты: верстка писем

MT аватар

Отдельно несколько слов скажу про вёрстку писем.

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

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

Проще перечислить возможности, которые у нас остаются.

Примеры можно посмотреть здесь: http://www.permlug.org/files/sizes.html

[b]1.

Несколько слов про сайты: формы

MT аватар

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

1.1. Текстовое поле.

Это самый простой виджет.

Несколько слов про сайты: анимация

MT аватар

Итак, продолжим тему графики.

2. Слои.

Технологии создания сайтов позволяют использовать слои. То есть у нас есть возможность размещать один объект поверх другого. Например, текст поверх картинки.

Рассмотрим пример: текст с иллюстрацией.

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

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

Несколько слов про сайты: графика

MT аватар

Следующая наша тема — сложная графика и анимация.

Под словом «сложная» в данном случае я подразумеваю не сложность рисования, а сложность вёрстки. То есть речь пойдёт о многослойной составной графике с прозрачными областями. Но начнём мы с простого.

1. Картинки.

Сначала поговорим о том, каким образом на сайт можно вставить картинку.

Способа всего два: первый — вставить непосредственно объектом image, и тогда по этой картинке можно будет кликнуть правой кнопкой и сохранить на компьютер; второй — указать какому-нибудь элементу это изображение в качестве фона, и тогда пользователь без специальных средств не сможет ничего сделать с этой картинкой: ни сохранить, ни открыть в новом окне.

Несколько слов про сайты: активные элементы

MT аватар

Сейчас мы поговорим про активные элементы сайтов: ссылки, псевдоссылки, кнопки, элементы форм.

Наша задача в том, чтобы дать пользователю максимум информации при минимуме действий с его стороны. Если это ссылка — надо её подчеркнуть. Если кнопка — оформить как кнопку и подсвечивать при наведении.

Рассмотрим виды активных элементов:

1. Текстовые ссылки.

Простая текстовая ссылка по умолчанию имеет три состояния: простая, посещённая и при наведении. Все хорошо знакомы с этими видами ссылок.

Рассмотрим пример: http://www.yandex.ru/

Здесь простые ссылки имеют привычный набор цветов: синий по умолчанию, красный при наведении, фиолетовый для посещенных ссылок.

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

Несколько слов про сайты

MT аватар

3 февраля я полечу в Казахстан на два дня проводить семинары по веб-дизайну. В первый день я буду выступать перед заказчиками, во второй — перед дизайнерами.

Выкладываю на всеобщее обозрение текст своего первого выступления (минут 30-40), призванного объяснить заказчикам, на что нужно обращать внимание при утверждении дизайна сайта.

1. Интуитивный интерфейс = знакомый интерфейс.

Очень часто нам приходится слышать слова «интуитивный интерфейс». Мы настолько привыкли к этому понятию, что считаем его совершенно очевидным и простым. Вряд ли здесь найдётся человек, который не считает, что хороший интерфейс должен быть интуитивным. Но как определить, какой интерфейс является интуитивным? По каким критериям это определяется?

RSS-материал