Встретимся на пляже!

В этом посте, я расскажу о плюсах и минусах использования илюстратора в веб-дизайне. В общем-то минусов особо и нет. Да-да нет. И вот по какой причине. Дело в том, что использование илюстратора без привычного всем фотошопа почти невозможно. Использовать только фотошоп для дизайна сайта — можно. Использовать только илюстратор — возможно, но с большой натяжкой.

Так для чего же нужен илюстратор?

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

Самое глобальное преимущество илюстратора перед фотошопом это стили и символы. Что я имею ввиду. Например, мы придумали некий стиль отображения ссылок на сайте.  Банальная ссылка с подчеркиванием синего цвета. Расставили мы эти ссылки по всему макету и их получилось достаточное множество — хотя бы 20 штук. Теперь необходимо их всех перекрасить в зеленый (такое часто бывает). В фотошопе надо будет лазить по всем слоям и красить, красить, красить… в общем пробежка по 20 слоям обеспечена. А когда слоенка достаточно большая то это уже настоящий кошмар. В илюстраторе мы просто обновим стиль наших ссылок и они все сами станут зелеными.

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

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

Еще.
Вы можете нарисовать любую часть сайта в фотошопе и вставить её в макет. Например шапку сайта с красивой графикой. Илюстратор идеально поддерживает формат PSD. Кликая с альтом по нашей шапке автоматически загрузится фотошоп и откроется наша слоенка. Вы её редактируете, например, изменяете телефон, сохраняете… и вуаля! В илюстраторе она обновляется автоматом.

Используя в своей работе фотошоп + илюстратор  — Вы становитесь властелином макета. Работая только в фотошопе вы скованы по рукам и ногам.

Внимание. Всё ко времени и месту. Если вы делаете промо-сайт с насыщенный графикой на сложном фоне, со всевозможными перетеканиями, то лучше весь сайт сделать в шопе. Ну, а если вы делаете редизайн портала Lenta.ru, то илюстратор просто необходим. В общем, к любой задаче нужно подходить гибко, и тогда нас всех ждёт успех.

До встречи!

Реклама из двух страничек, идущих друг за другом.
Первая: Это калька. С печатью в один супер-черный цвет.
Вторая: HDR Фотка. Печать флюоресцентными красками.

Вот родилась идея чехла для сотки на шею. Девушки любят такие :)

Всем привет!
Этим постом я открываю цикл статей про использования Adobe Illustrator в веб-дизайне. А именно в использовании его при работе над интерфейсами. Статьи постараюсь выстраивать в виде пособия — сначала будет информативная часть, некие рассуждения на тему преимуществ и недостатков. Потом будет рассмотрена подготовка рабочего пространства. Ну а затем пойдут практические занятия и примеры. Попытаюсь быть максимально точным и не скупится на иллюстративный материал — прикладывать понятные скриншотики и т.д.

Буду рад комментариям по делу. Именно касающихся практической стороны дела. Холивара не надо.
За сим прощаюсь. Ждем первый пост о том как в Илюстраторе все круто и удобно.
Пока.

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

1. Новое творение будут звать iPad
2. Экран гаджета будет диагональю 11 дюймов
3. Работать будет под управлением iPhone OS
4. Сможет звонить как телефон
5. Будет поддерживать сети-3G
6. Разрешение экрана будет 1024×800-pixel

О чудо! Есть оказывается ещё круче плеер — это настоящий iTunes, только написанный на flash.
Представляю Вам GROOVESHARK
↓

↑
Работает очень круто! Настоящий онлайн-комбайн музыки…
Приятного прослушивания.

Интернет просто чудовищная вещь. Благодаря ему теперь можно не хранить безумную mp3-коллекцию на винте. Раньше я ей так дорожил, систематизировал, прикреплял обложечки… А она росла и жрала место. Жрала и жрала — настоящая ненасытная тварь. Но я сказал: —Хватит! Зафига я плачу за интернет? Подумал я, и решил найти сервис, который всегда и везде позволит мне слушать мою любимую музыку, ну и плюс любую другую музыку. 

Недолгое время я пользовался Веборамой — она более-менее юзабильная, но все же некая тупорогость в ней присутствует. Да и перенасыщеность фичами, которые мне совсем не нужны — тоже напрягала.
И вот, свершислоь! Ура! Наконец-то я нашел сервис, который я так долго искал. Благодаря всеми любимому Хабру мы встретились.



Простой и удобный сервис для слушания музыки. Вот это именно то, что я искал.
Музыка и ты… и все.
Сижу, работаю, слушаю.

Еще одно доказательство мегапопулярности твитера, это то что в рейтинга блогов Яндекса мой твитер-блог http://twitter.com/alexsas_ стоит на аж 40 894 месте. А автономный блог http://alexsas.ru/blog всего лишь на каком-то 2 299 524 ! Поразительная разница.

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

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

Запускаю новую рубрику в блоге — ИДЕЯ.
У меня рождается много идей в процессе жизни. И я их как старая бабушка складываю в сервант. Складываю, складываю… А какого ХУЯ?
Блять только 0,5% из количества этих идей находят воплощение. А я их складываю и складываю. Как самый последний жид. Можно подумать я самый умный, никто этого больше не придумал… ХРЕНУШКИ! Так нахуя их складывать?
Всё решено. Теперь в блоге я делюсь своими идеями.От самых банальных до самых мега как бы крутых.
Ждите. Идеи выстроились в очередь и ждут пока я их вам выложу.

Как-то я поведал о том, что занимаюсь обливанием.
За вчера и сегодня в Бишкеке выпало очень много снега. Я подумал, что это хороший шанс повысить планку в оздоровлении своего тела и души.

Раздеваеюсь до трусов. Одеваю банный халатик. Выхожу за ворота, где лежат большие кучи снега, сделанные мной же при расчистки близ лежащей территории. Снимаю халатик. Долго не думаю. Ложусь в сугроб на животик. Чувствую приятную прохладу. Переворачиваюсь на спинку. Нагребаю снега себе на ноги и на живот. Еще раз переворачиваюсь. Встаю. Стряхиваю с себя весь снежок. Подхватываю халатик и бегу домой.

Просто кайф.

В недавнем своем посте про влияние возраста на вкусы в еде, я писал о том, что полюбил много чего с течением времени. Осталась только икра…
Поздравьте меня! Преодолен и этот барьер. Икра Сига, купленная женой, очень пришлась по вкусу.

Сиг ↓




p.s. Форельскую и сельди всё еще не навижу!

12 февраля 2008
Слова «Будь проще» могут интерпретироваться по разному. А особенно слово «проще».

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

Фотошоп очень долгое время грешил этим — до CS-версий в нем нельзя было менять шоткаты.
С Илюстратором такая же ситуация, но не с шоткатами, а вообще с интерфейсом — он был вообще не нагляден и неудобен. Неудивительно, что на просторах СНГ популярность завоевал Корел. Секрет прост — с ним проще работать. Вообще илюстратор спас Постскрипт и PDF. Сейчас ситуация меняется в лучшую сторону, но до Корела ему еще далеко (в плане интерфейса конечно. о «деле привычки» я не говорю)

Вернемся к простому пользователю. При разработке интерфейса закон прост — выбирается самый неподготовленный пользователь и под него проектируется интерфейс. Попробуйте разрабатывать интерфейс скажем для своей мамы (если она у вас не администратор баз данных конечно). Ваши сайты и программы сразу станут добрыми, отзывчивыми и главное простыми.

А теперь вернемся еще на шаг назад. Что стоит перед разработкой любого программного продукта? Да. Это магическое словосочетание «Техническое Задание». Вот здесь, чаще всего, важно быть простым и понятным. Вы знаете, кто подписывает ТЗ? Не админ сайта, это уж точно. Он струсит. Подписывает ТЗ Иван Васильевич Бизнесменов — Ваш заказчик. Он реально не знает, что такое PHP, «восстановление сессии» или что, оказывается, «коннектор к БД лежит вне зоны www». Ему, человеку который вам заплатит за работу, абсолютно поровну, напишите вы его сайт на Рабионрейлс или же на Питоне. Он не задаст вам вопросов, он не захочет показаться глупым, он все поймет по своему и подпишет. А когда вы представите ему готовый проект — он все равно скажет, что вы сделали не так, как он думал. Вы будете тыкать ему ТЗ.
И возникнет конфликт. А конфликт это всегда плохо. Поэтому ТЗ должно писаться обычным «маминым» языком с прилагаемым макетами всех экранов. Чтобы дядя Ваня видел, что же он в итоге получит.

А какими библиотеками пользоваться при разработке решать вам!

4 Января, 2008

Тут продолжение. Начало ниже ↓

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

Давайте возьмем в пример монстров, а именно: Яндекс, Гугэл и Яху.
Но возьмем их не сейчас, а много лет назад во времена их становления.

И так 1998 год.

Первый рассмотрим Яндекс. Тогда он был вот таким:



В принципе все просто. Но не забывайте, что на дворе стоит 98 год. В интернете одни программисты. А поисковая система… она же для всех – о чем и повествует баннер Яндекса.
Но для всех это темный лес и зайдя на страничку люди начинают читать, понимать, вникать.

Смотрим на Яху.




Мне кажется это вообще провал. Взгляд не может зафиксироваться. Куча ссылок. Что это??? а-а-а!

Теперь Гугэл:




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



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

Продолжение следует…

Реанимирую свой цикл статей по поводу простоты дизайна.
Во-первых: для того чтобы они жили в моём блоге. Во-вторых: готовится очередная статья и чтобы не терять целостности соберу все статьи под одну крышу.

Со некоторыми моими суждениями я уже не согласен, но материал не теряет своей ценности.

Будь проще I
20 декабря 2007 года

Решил я, наконец, поделиться своими мыслями по поводу тенденции построения пользовательских интерфейсов, а также дать какие-то свои рекомендации по этому поводу.

Основной тезис статьи — «Будь проще». Я считаю это основное правило, которому должен придерживаться разработчик при построение интерфейса для большого круга пользователей, и рассчитывающий на популярность.
Еще одна главная мысль статьи — «Простой интерфейс сделать гораздо сложней чем сложный»
Далее я попытаюсь все это доказать.
↓
С древних времен человек пытается упростить себе взаимодействие с окружающей средой.
Возьмем простой пример — надо выкопать яму.
Перечислим и прокомментируем все варианты копание ямы:
Копать руками. Построить данный интерфейс очень просто (делать вообще ничего не надо) но копать таким инструментом очень сложно.
Копать палкой. Что требуется: найти палку. Руки уже болеть не будут но копать тоже не очень то удобно.
Лопата. Сделать лопату еще сложней, чем палку, но копать ей уже поприятнее.
Экскаватор. Экскаватор сделать очень сложно. Но копать уже совсем легко.
Конечно же надо еще учитывать то, что бы цель оправдывала средства. Зачем гнать экскаватор, если ямка должна быть в 5 см? Тут и палка может сойти.
Еще приведу любимый пример со смесителями в ванной.
Сначала он был такой:



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



У него вентили крутились только на 180° градусов. И добиться нужной струи приемлемой температуры стало проще
Но самое крутое изобретение случилось еще некоторое время спустя.

Это джойстиковый смеситель:



Теперь стало все просто и удобно.  Одним движением можно настроить и силу струи и температуру. И когда выключаешь… включить можно с той же самой температурой. В общем сказка, а не смеситель и очень прост в использовании. Но очень сложен в изготовлении, и еще сложнее было его придумать
Это еще раз доказывает, что разработка простого для понимания и легкого интерфейса — очень сложная задача. Простой интерфейс — залог успеха.
Вот еще один пример:



Все узнали — это iPod. Надо отдать должное разработчикам, они создали настоящий шедевр в мире плееров.
За всей кажущейся простотой скрывается очень многое… я допустим офигел когда узнал, что этот джойстик еще и тач-пад одновременно… супер.
Тоже самое произошло и с  iTunes
Успех интерфейса зависит от поведения пользователя при использовании данного интерфейса. Чем меньше у человека возникает вопросов при взаимодействии с интерфейсом, тем удачней интерфейс.

На сегодня все.
Ждем продолжения!

Фильм с очень глубоким смыслом. Рекомендую.

Постим очередной хороший танцевальный трек.

Хороший такой трек. Смотрим. Слушаем. Парни кивают головами в такт, а телочки попами.