Блог о дизайне

Айфон в стиле первого макинтоша

yu — Tue, 07 Feb 2012 23:51:09 +0000

Сначало думал, что это просто фотошоп, но оказалось что это реальные чехлы для айфона, имитирующие дизайн первого макинтоша. Стоит это удовольстыие по 45 баксов за штуку.

Или закос под айпод десятилетеней давности. Schreer Delights

Dribbble

yu — Sat, 26 Nov 2011 00:26:53 +0000

Если еще кто не знает. А ля твиттер для дизайнеров — вдохновляться, да и просто частенько бывают разные карамельки.

KernType — проверь себя на «чувство кернинга»

yu — Wed, 12 Oct 2011 23:18:58 +0000

KernType— забавный тест для дизайнеров, после прохождения можно разместить результат на твиттере.

Fireworks и дизайн сайтов

yu — Sun, 29 May 2011 22:11:53 +0000

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

Итак, профиты и преимущества Fireworks с точки зрения проектировщика интерфейсов.

Про всякие плюшки Fireworks лично для проектировщика уже прилично сказано, я попробую рассказать о профитах для всего процесса разработки.

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

Рассмотрим создание какой–то части веб–приложения, с момента когда нужно открывать Fireworks. То есть предметная область уже разжевана, бумажные прототипы нарисованы и показаны заинтересованным лицам, можно начинать махать мышкой. Итак, после бумажных (lo–fi) прототипов должны появиться еще 3 типа hi–fi прототипа:
— интерактивный прототип для тестирования на пользователях
— интерактивный прототип с комментариями и описанием исключительных ситуаций — для разработчиков бизнес–логики (back–end программистов)
— интерактивный прототип с интегрированным в него графическим дизайном — для front–end разработчика, который занимается версткой и клиентскими скриптами.

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

Итак, почему FW рулит в создании интерактивного прототипа для юзабилити тестирований? Потому что он под это, собственно, заточен. Все экраны и их состояния хранятся в одном файле, легким движением мыши можно расставлять ссылки с любого элемента на любой экран, есть встроенный инструмент для анимации чего–угодно, так мы имитировали клиентский яваскрипт, который что–то двигает/сворачивает/разворачивает/затемн яет. Экспорт в html происходит в 2 клика.
Довольно близко по возможностям тут Axure и InDesign (особенно CS5)

Почему FW рулит для графического дизайнера? Дизайнер может творить в чем угодно, но в конце концов обычно все утаскивается в Photoshop. Прототип из Fireworks в Photoshop утаскивается на ура, причем несколькими способами: можно сохранить экран как psd файл со слоями, а можно экспортировать библиотеку символов, из которых состоят все интерфейсы. Далее, графический дизайнер нарисовал все нужные элементы, пиктограммы и рюшечки, теперь это нужно затащить в прототип чтобы посмотреть как с этим дизайном выглядят все 50 экранов. Дизайнер просто копирует элементы из Фотошопа в соответствующие символы в Fireworks и волшебным образом весь прототип теперь с графическим дизайном! (ну я исхожу из того, что хороший проектировщик все рассовал по символам, и правильно настроил как слои шарятся между экранами).
Подобный трюк можно проделать в InDesign, но никак нельзя в Axure.

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

Вот графический дизайнер раскрасил последний пиксель и пора верстать. Вместо кучи psd файлов он отдает верстальщику наш прототип с графическим дизайном внутри (а мы еще успели написать комментарии для верстки, и яваскрипт–анимации показать гифами в интерактивном прототипе). Верстальщик может дальше работать как ему хочется: резать картинки из Fireworks или утащить все в Photoshop, но ориентироваться в прототипе ему будет удобнее. Кстати Fireworks — друг задротов по оптимизации веб–графики, там можно, например, без танцев с бубном создать PNG8 с разным значением альфа–канала (то есть разная прозрачность у разных пикселей). Я еще уточню отдельно у самого front–end чувака в чем он видит плюсы Fw.
На этом этапе Fireworks обставил даже InDesign.

О фрилансе

yu — Sat, 28 May 2011 17:23:09 +0000

— Нужен логотип за $10! Для банка! Должно быть стильно и дорого!
— Нужен интерфейс CRM–системы! Разработайте нам и пришлите, а мы выберем и заплатим 3000 рублей, вместе с установкой и настройкой системы.
— Требуется программист на битриксе. Оплата 10.000 рублей в месяц, занятость полная.
— Фирменный стиль, брендбук и гайдлайны СРОЧНО! Оплата 5000 рублей!!!

Качество исполнителей фриланс.ру давно разбавилось обилием жаждущих наживы, мягко скажем, неопытных исполнителей. Вот и отношение там к исполнителям постепенно ухудшилось. Львиную хороших заказов с фриланса забирают студии. У студий поток больше, выше рейтинг, больше отзывов. Один человек не сможет конкурировать с большой командой. Раньше студий банили, ресурс был только для вольных исполнителей. Потом администрация пересмотрела свои взгляды и имеем то, что имеем. Черт знает, другие фриланс–сайты ещё хуже. Может зарубежные попробовать? Хотя, говорят, там сидит миллион индусов, готовых работать за 2 цента в месяц.

На первый взгляд фриланс выглядит просто ужасно, но студентов, водящих хороводы в ответах на проект с воплями "сделаю за отзыв", нанимают обычно такие же студенты или посредники. Оно и к лучшему. Заказчики, единожды нарвавшиеся на таких исполнителей, разочаровываются либо во фрилансе целиком и больше на сайт не возвращаются либо в дешевых исполнителях и начинают ставить более–менее адекватные бюджеты и не связываться со студентами. Это даже не демпинг, а просто идиотизм. А в связи с большой текучкой и обилием неадекватов заказчики охотнее обращаются во второй раз к тому с кем удачно поработали вместо поисков нового исполнителя.

Со студиями конкурировать сложно, но коллектив из двух человек (дизайнер + кодер/верстальщик) может вполне успешно существовать. Через несколко месяцев заказчики начнут обращаться сами или советовать друзьям и знакомым.

Geek and Poke. Второй выпуск

yu — Wed, 04 May 2011 05:25:27 +0000

Мы каждый день попадаем в смешные ситуации или являемся их свидетелями. Мы видим смешные и очень полезные участки в чужом, а порой и в своем коде, когда разрабатываем новый ресурс или программу. Мы переписываемся со своими друзьями в Twitter’e или Facebook’e, смеёмся от оригинальных словесных оборотов и удивляемся от многих нелогичных вещей в течении целого дня.

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

Как и в первом выпуске все картинки кликабельны.

womtec.ru

CSS Framework

yu — Wed, 04 May 2011 05:00:28 +0000

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

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

В статье мы собрали 8 CSS фреймворков, среди которых вы точно найдете наиболее подходящий framework под ваши задачи. Останется только скачать и воспользоваться им. Так же мы предлагаем подискутировать, что лучше — использование в верстке готового фреймворка или написание собственного.

womtec.ru

Адаптированный дизайн web-сайта

yu — Wed, 04 May 2011 03:35:54 +0000

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

Создание отдельных версий для каждого разрешения и аппарата, например для телефона и планшета, не самый лучший вариант, как с точки зрения первичной разработки, так и с точки зрения последующего развития и поддержания сайта. Гораздо удобнее оперировать свойствами и атрибутами, которые предоставляет нам CSS. Использование преимуществ этого языка в совокупности с максимально чистой (тут нам на помощь приходит HTML5) и гибкой версткой способно дать необходимый результат.

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

womtec.ru

Воспоминания о будущем

yu — Tue, 03 May 2011 19:34:42 +0000

Ресурсcracktwo.com знакомит с потрясающей подборкой фотографий монументов, воздвигнутых по указу бывшего президента Югославии Иосифа Броз Тито в память о битвах Второй Мировой Войны имевших место на территории этой балканской страны. В девяностых годах в связи с распадом Югославии эти монументы были заброшены и их символическое значение, во многом, оказалось забытым. Фотограф Ян Кампенаэрс вооружился туристической картой 1975 года с указанием расположения монументов и запечатлел эти фантастические свидетельства уходящей эпохи, которые выглядят, как артефакты из будущего, которого так и не состоялось. Но как бы там ни было, нужно отдать должное таланту и фантазии югославских скульпторов и архитекторов

omnibusdesign.ru

Geek and Poke. Выпуск первый

yu — Fri, 22 Apr 2011 05:36:05 +0000

Добро пожаловать в новую рубрику блога — Комиксы. Теперь каждый месяц мы будем радовать вас свежими переводами очень популярного англоязычного комикса Geek and Poke.

Geek and Poke рассказывает о современной реалии интернет-жизни и высмеивает сюжеты из разных сфер IT-индустрии. Главным действующим лицом комикса, как можно догадаться из названия, является продвинутый пользователь интернета или попросту Гик (Geek). Он знает все о том, как работают интернет сервисы, программы, ресурсы, шарит в куче технологий и … в общем Geek знает практически все, что связано с интернет-технологиями и инновациями.

В каждой статье будет собрано около 15 самых интересных, на наш взгляд, комиксов. Мы будем публиковать русский перевод, как новых, так и старых выпусков, среди которых очень много смешных и веселых сюжетов. В общем теперь каждый новый месяц будет начинаться с порции гиковских плюшек от Geek and Poke, не пропустить которые вам позволит подписка на rss или e-mail рассылку.

В завершении, мы хотим поблагодарить автора комиксов Oliver Widder, за разрешение на перевод и публикацию его комиксов на блоге womtec.

Картинки кликабельны.

womtec.ru