Category: искусство

Category was added automatically. Read all entries about "искусство".

Новые фишки Illustrator CS6



Грядёт новая версия Иллюстратора. Наткнулась на неофициальный обзор его новых функций.

Как всегда смотрю, что можно применить в моей основной деятельности – проектировании интерфейсов.

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

В частности обнадёживают изменения системной панели: на панели настройки шрифта (Character) отображается больше функций и не надо переключаться на стили параграфов.



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

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

Искусство цвета

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

Иоханнес Иттен

Недавно я прочитала книгу Иттена «Искусство цвета», набралась умных мыслей. Теперь хочу ими поделиться.

Иттен – крупнейший исследователь цвета в искусстве. Вошёл в историю как основатель школы Баухауза (20-30ые гг ХХ века).

Лично я далека от творчества импрессионистов. Если уж и говорить об искусстве, то мне ближе картины Брюллова, Шишкина и Куинджи. Конкретные чёткие образы против самовыражения цветными пятнами, ага. Но в работе веб-дизайнера цвет – неотъемлемый элемент. Поэтому неплохо бы разобраться, как с ним работать.

Гармонично смотрится такая цветовая композиция, в которой цвета являются дополнительными по отношению друг к другу. Если, к примеру, взять нейтральный серый квадрат на ярко жёлтом фоне, то серый приобретёт фиолетовый оттенок. Для красного серый станет зеленоватым, для синего – оранжевым.
(впрочем, на разных мониторах это, наверно, не будет заметно; то ли дело старый добрый бумажный формат)

addcolors


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

Гармонично смотрятся друг с другом цвета, расположенные друг напротив друга в цветовом круге:


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

colorcircle

Гармоничным является сочетание трёх основных цветов – красного, синего и жёлтого. Но помимо самих цветов важно также и соотношение площади пятен. Жёлтый – самый светлый цвет. При размещении его на чёрном фоне жёлтый квадрат кажется больше по размеру, чем такой же чёрный квадрат на жёлтом фоне. Поэтому его доля в композиции – самая маленькая. Вместе с остальными цветами идеальная пропорция выглядит так:


proportion


То есть, если брать то же сочетание жёлтого и фиолетового, то соотношение их площадей должно быть 3:9 или 1:3.

Такая система имеет силу только при использовании цветов в их максимальной насыщенности.

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

steklorezerv.ru

Кстати, в последних версиях программ Adobe появилась новая фишка – кулер.

Гармоничные цветовые комбинации уже составлены. Остаётся только правильно подобрать размеры блоков.

1+1=3 и больше

Мальвина и Буратино:
- Я говорю, предположим, что у вас в кармане два яблока.
- Ха-ха!
- Некто взял у вас одно яблоко. Сколько у вас осталось яблок?
- Два.
- Подумайте хорошенько.
- Два.
- Почему?
- Я же не отдам некту яблок, хоть он дерись!
- У вас нет никаких способностей к математике.



С детства учили: 1+1=2. Однако, с возрастом начинаешь понимать, что не всё так просто.
В дизайне интерфейсов действует правило, описанное Тафти как «1+1=3 и больше».
Две полосы одинакового размера можно сложить несколькими способами.

1.      Обе полосы ставятся вертикально и рядом друг с другом.
Получаем: 1+1=2.


2.      Если же разделить их ещё одной полосой такой же ширины, получаем три полосы.
1+1=3.


3.      Ну а если поменять угол наклона и включить воображение, можно получить до 9 элементов.




Сравним два варианта начертания нотного стана.


Ноты читаются намного легче, если их визуально не вытесняют линии нотного стана.

Игорь Стравинский, балет «Весна священная». 

В дизайне интерфейсов это правило актуально при оформлении таблиц. Я отдаю предпочтение лёгким светло-серым границам.
Вот такой была таблица цен на сайте салона красоты «Хельга» в первой версии:



Вот так она выглядит на новом сайте:



В новом прайсе я предусмотрела уже все варианты отображения названия услуги и её цены.
Но, как говорил Влад Головач в книге «Искусство мыть слона», это можно сделать лучше. Поэтому буду рада любым советам и предложениям! =) 

В статье использовался материал из книги Э.Тафти, "Envisioning information", 1990


Upd. 20.01.2012
Улучшенный вариант того же прайса. 
Благодарю ksoftwareза конструктивную критику и советы.