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

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

Как сделать красивую презентацию онлайн?

yu — Fri, 22 Apr 2011 04:16:38 +0000

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

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

280 Slides

280 Slides — это бесплатный онлайн инструмент, с простым и понятным интерфейсом. При создании презентации вы можете загрузить необходимые файлы со своего компьютера или начать разработку презентации, выбрав готовые шаблоны и темы. Приложение позволяет добавлять в презентацию фотографии и ролики из Flickr и YouTube, писать форматируемые тексты, делать короткие заметки на русском языке и создавать разные геометрические фигуры. Готовую работу можно скачать в формате pptx (PowerPoint) или отравить ссылку по e-mail.

SlideRoket

SlideRoket — веб-приложение, обладающее большим количеством разнообразных функций, и идеально подходящее для создания сложных и красивых презентаций. Как и в 280 Slides вы можете начать разработку загрузив свои файлы из PowerPoint или воспользоваться готовыми шаблонами. Кроме стандартного набора функций (рисование фигур, редактирование текста, добавление фото) приложение включает в себя возможность совместной разработки, создание подробных отчетов, добавление аудио, а также экспорт готового проекта, например, в pdf файл. Для начала работы необходимо зарегистрироваться и выбрать тарифный план (Lite — бесплатно или Pro — $240 в год), после чего можно приступать к работе над проектом.

Empressr

Empressr — популярный онлайн сервис, позволяющий делать презентации любого уровня сложности. На первом этапе разработки вы можете загружать свои картинки, видео ролики, графики и таблицы. Далее, благодаря встроенным инструментам, удобному интерфейсу и интеграции с различными сервисам (Flickr, Google, Yahoo и Photobucket) можно дополнить презентацию картинками, текстом, фигурами и другим необходимым контентом. Кроме того можно узнать сколько человек посмотрели вашу презентацию.

Prezi

Prezi — интернет-сервис с бесплатными и платными функциями. Сервис оснащен красивым и навороченным flash-интерфейсом и предоставляет большой набор инструментов для работы с текстами, графикой, фигурами и другими объектами. Есть возможность вставки в презентацию видео и flash-роликов. Начиная с платных версий (Enjoy — $59 в год или Pro — $159 в год) вам предоставляется больший объем памяти для хранения данных (500Mb и 2000Mb, вместо 100Mb), возможность убрать логотип сервиса из создаваемой презентации, а также использовать специальное приложение для работы в автономном режиме.

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

Надеемся, что эта статья поможет найти вам наиболее удобный сервис и создание красивых презентаций станет для вас простым и интересным делом (:

womtec.ru