Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 46
Искренний респект вам, Холмс! Честное слово, мне порой так не хватает вас… Теперь буду некоторых коллег в этот пост носом тыкать, в некоторых случаях. Не удаляйте его, пожалуйста.
Плюсую от души.
(автор «Вопросов»)
Плюсую от души.
(автор «Вопросов»)
1. Почему, когда дизайнеров просят что-то переделать, с ними приключаются истерики? Причем, чем существеннее доработки — тем более жуткие истерики.
Обычно, в условиях суровой действительности поправки со стороны заказчика выглядят несколько иначе.
Симулякры все же означают совсем другое:)
И да, первоначальный набросок часто удобнее набросать в каком-нибудь Pencil Project — так как потом значительно проще вносить правки.
И да, первоначальный набросок часто удобнее набросать в каком-нибудь Pencil Project — так как потом значительно проще вносить правки.
И где ж всех этих людей этому всему учат?..
В СНГ почти нигде. Может немного в Британской школе дизайна (http://www.britishdesign.ru/), да и то я сомневаюсь. Люди учатся сами, это нормальный процесс в мире ИТ в постсоветских странах. Ведь есть интернет с кучей информации!
Могу посоветовать почитать:
ui-cloud.com/ — база интерфейсов (США)
gui.ru/ — про юзабилити (РФ)
www.usability.ru/links.htm — полезные ссылки по юзабилити (РФ)
guicci.ru/ — еще немного юзабилити (РФ)
www.birzool.com/ — проектирование, юзабилити (РФ)
www.uxfox.ru/ — про дизайн интерфейсов (РФ)
Большая статья: secl.com.ua/article-serjoznoe-proektirovanie-serjoznix-saitov.html — Серьезное проектирование серьезных сайтов
Курсы по проектированию сайтов: vk.com/topic-23829748_27521897
В общем: кто ищет, тот всегда находит! ;)
Могу посоветовать почитать:
ui-cloud.com/ — база интерфейсов (США)
gui.ru/ — про юзабилити (РФ)
www.usability.ru/links.htm — полезные ссылки по юзабилити (РФ)
guicci.ru/ — еще немного юзабилити (РФ)
www.birzool.com/ — проектирование, юзабилити (РФ)
www.uxfox.ru/ — про дизайн интерфейсов (РФ)
Большая статья: secl.com.ua/article-serjoznoe-proektirovanie-serjoznix-saitov.html — Серьезное проектирование серьезных сайтов
Курсы по проектированию сайтов: vk.com/topic-23829748_27521897
В общем: кто ищет, тот всегда находит! ;)
Дизайн сайтов с пометкой (РФ) — очень хорошо показывают уровень UX в РФ :)
Интересно что говорит вам об уровне ux дизайн этого сайта?: )
www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Большая статья: secl.com.ua/article-serjoznoe-proektirovanie-serjoznix-saitov.html — Серьезное проектирование серьезных сайтов
А вот и отличная иллюстрация проблемы.
Анализ, сценарии, mind map, структура сайта — все отлично.
А потом внезапно проектировщик, далекий от визуального представления информации, берется за прототип. И ожидаемый результат в конце статьи.
Печально.
А кто, как не проектировщик должен делать прототип?
Дизайнер.
Или хотя бы проектировщик с опытом в дизайне (или как это называет создатель статьи — визуальный дизайнер).
Аналитика у вас классная, но ради эксперимента, дайте всю эту аналитику без прототипа хорошему дизайнеру с опытом в прототипировании — и посмотрите какой прототип получите на выходе.
Или хотя бы проектировщик с опытом в дизайне (или как это называет создатель статьи — визуальный дизайнер).
Аналитика у вас классная, но ради эксперимента, дайте всю эту аналитику без прототипа хорошему дизайнеру с опытом в прототипировании — и посмотрите какой прототип получите на выходе.
Не соглашусь. Этим должны заниматься разные люди. Вот другой пример (может тот Вам не понравлся по каким либо причинам):
secl.com.ua/work/fotoua_maket.html — прототип
secl.com.ua/work/fotoua.html — дизайн
Делали разные специалисты с разным опытом. Этот больше нравится или так же?
secl.com.ua/work/fotoua_maket.html — прототип
secl.com.ua/work/fotoua.html — дизайн
Делали разные специалисты с разным опытом. Этот больше нравится или так же?
Боюсь что этот диалог скатится к банальной оценки чьей-то работы. Не думаю что это хорошая идея :)
Тут проблемы всё такие же. Проектировщик создавая прототип уделил максимум внимания проблемам навигации и пользования (собственно то, что он и должен был сделать), но абсолютно забыв про графический дизайн.
Графический дизайнер же в свою очередь сделал все возможное, но был ограничен возможностью только «разукрашивать».
Лично мне, итог не нравится. Возможно он в чем-то правильный, но абсолютно безликий.
Тут проблемы всё такие же. Проектировщик создавая прототип уделил максимум внимания проблемам навигации и пользования (собственно то, что он и должен был сделать), но абсолютно забыв про графический дизайн.
Графический дизайнер же в свою очередь сделал все возможное, но был ограничен возможностью только «разукрашивать».
Лично мне, итог не нравится. Возможно он в чем-то правильный, но абсолютно безликий.
Подождите, что значит «забыв»? :) Он не забыл, ему это даже запрещено! Есть технология проектирования, по ней проектировщик не имеет права применять цвета, они оттягивают внимание от сути макета. А дизайнер, в свою очередь, по сути разукрашивает, но никто ему не запрещает вносить предложения по самому расположению элементов и деталям. Не знаю как работаете Вы, но мы работаем только так.
Давайте по порядку.
Графический дизайн — это не только цвета. Это внешний вид, который включает в себя и расположение, и удобство, и навигацию, и цветовую схему, и эмоции и кучу других составляющих. Это то цельное, что в итоге видит пользователь и чем он пользуется и чем ему хочется пользоваться. Или не хочется.
Лично я не представляю возможным проектировать что-либо, забывая о какой-либо составляющей.
Красивая цветовая схема и убогая навигация — плохой итог. Плохая цветовая схема и отличная навигация — плохой итог. Так как эти две составляющие работают только вместе, в комплексе. Все составляющие интерфейса работают только вместе, в комплексе.
Вы же, вместо того, что бы объединить усилия, еще больше разделяете их. Проектировщика и дизайнера ограничиваете сводом каких-то правил. Это цепочка возможно выглядит отлично на бумаге: проектировщик спроектировал — дизайнер разукрасил и никто никому не мешает, но не приводит к отличным результатам.
Графический дизайн — это не только цвета. Это внешний вид, который включает в себя и расположение, и удобство, и навигацию, и цветовую схему, и эмоции и кучу других составляющих. Это то цельное, что в итоге видит пользователь и чем он пользуется и чем ему хочется пользоваться. Или не хочется.
Лично я не представляю возможным проектировать что-либо, забывая о какой-либо составляющей.
Красивая цветовая схема и убогая навигация — плохой итог. Плохая цветовая схема и отличная навигация — плохой итог. Так как эти две составляющие работают только вместе, в комплексе. Все составляющие интерфейса работают только вместе, в комплексе.
Вы же, вместо того, что бы объединить усилия, еще больше разделяете их. Проектировщика и дизайнера ограничиваете сводом каких-то правил. Это цепочка возможно выглядит отлично на бумаге: проектировщик спроектировал — дизайнер разукрасил и никто никому не мешает, но не приводит к отличным результатам.
Логика напомнила мне 90е) Тогда был один человек, который назывался «веб-мастер» и он делал сайт от и до. Мы, в SECL Group, считаем это в корне неправильным. Сайт всегда должна делает группа специалистов, у каждого человека своя узкая специализация, в которой каждый является гуру, лучшим. В связке с эффективным взаимодействием проектной группы мы всегда можем получить отличный сайт.
Есть и другой подход, его до сих пор некоторые «конкуренты» используют: когда сайт целиком делает один человек… Но результат этого очень печален.
Дизайнер — это во многом художник, особый тип таланта (кроме знаний). Проектировщик — это, прежде всего, аналитик и логик. Совсем разные специализации, которые делают интерфейсы с разной точки зрения и только плод их совместной деятельности будет качественным со всех сторон.
Есть и другой подход, его до сих пор некоторые «конкуренты» используют: когда сайт целиком делает один человек… Но результат этого очень печален.
Дизайнер — это во многом художник, особый тип таланта (кроме знаний). Проектировщик — это, прежде всего, аналитик и логик. Совсем разные специализации, которые делают интерфейсы с разной точки зрения и только плод их совместной деятельности будет качественным со всех сторон.
Ну вот вы и сами сказали:
А что такое дизайнер — можете на википедие почитать.
Вы описываете связку Проектировщика + Художника. В этом случае все ок. Это более дешевый способ, чем Аналитик + Дизайнер.
Проектировщик — это, прежде всего, аналитик и логик.
А что такое дизайнер — можете на википедие почитать.
Вы описываете связку Проектировщика + Художника. В этом случае все ок. Это более дешевый способ, чем Аналитик + Дизайнер.
Если у визуального дизайнера есть претензии к навигации, пусть аргументирует их и предложит альтернативу, — в чем проблема? Просто дизайнеры UX и визуалов должны работать в контакте.
Вот пример разработки дизайна сайта: http://www.artlebedev.ru/everything/mybook/process/
Посмотрите на каком этапе вступает дизайнер.
Что бы не разводить очередной холливар на любителей и не любителей Студии Лебедева, скажу, что финальный дизайн мне не особо нравится. Но подход и схема работы — отличная.
Посмотрите на каком этапе вступает дизайнер.
Что бы не разводить очередной холливар на любителей и не любителей Студии Лебедева, скажу, что финальный дизайн мне не особо нравится. Но подход и схема работы — отличная.
У нас другая технология разработки.
Да, нормальная схема работы, вовремя вступает дизайнер — после того, как блок-схемы шаблонов напилены.
По второму варианту они выложили только графическую часть, видимо, убрав информацию о UX и проектном планировании, дабы не было слишком нудно. А схема работы может меняться в зависимости от нужд конкретного проекта.
Не сомневаюсть, что они читают книги по UX так же, как читают Эдварда Тафти (о чем «маячат» тем, кто «в теме» :)
По второму варианту они выложили только графическую часть, видимо, убрав информацию о UX и проектном планировании, дабы не было слишком нудно. А схема работы может меняться в зависимости от нужд конкретного проекта.
Не сомневаюсть, что они читают книги по UX так же, как читают Эдварда Тафти (о чем «маячат» тем, кто «в теме» :)
Если вас интересует UX, то черпайте информацию из сети и книжек. Хорошо, если есть возможность участвовать в конференциях. Ажиотажный спрос на специалистов по UX возник после того, как Apple натянула всем нос своими тачскрин-гаджетами, т.е. совсем недавно. Не хватает ни преподавателей, ни разработанных методик. В этом даже есть плюсы — эти вещи инновационные и создаются прямо на глазах. Но высшеее образование либо в ИТ, либо в дизайне иметь очень желательно.
Хотя… Вот недавняя история, как человека без профильного образования и опыта работы взяли в UX-группу приличной фирмы. После двух телефонных интервью его вызвали на собеседование, которое оказалось 4-х часовым тестированием, вместе с его потенциальным конкурентом (тот был из программистов, с 6-летним опытом).
После всяких вопросов им дали задание вместе разработать веб-сайт, причем, работодатели сидели и, что называется, пасли все их действия, включая поведение. Тут возник довольно тонкий этический момент, так как каждому из претендентов нужно было показать себя лучшим кандидатом, не топя конкурента.
Взяли обоих, причем, поставили работать в паре, — оказывается, работодатели изначально рассматривали такой вариант и устроили им такой проверочный трюк.
Хотя… Вот недавняя история, как человека без профильного образования и опыта работы взяли в UX-группу приличной фирмы. После двух телефонных интервью его вызвали на собеседование, которое оказалось 4-х часовым тестированием, вместе с его потенциальным конкурентом (тот был из программистов, с 6-летним опытом).
После всяких вопросов им дали задание вместе разработать веб-сайт, причем, работодатели сидели и, что называется, пасли все их действия, включая поведение. Тут возник довольно тонкий этический момент, так как каждому из претендентов нужно было показать себя лучшим кандидатом, не топя конкурента.
Взяли обоих, причем, поставили работать в паре, — оказывается, работодатели изначально рассматривали такой вариант и устроили им такой проверочный трюк.
Мокапы, прости господи… уже есть замечательное слово эскиз.
Эскиз это скетч, карандашом на салфетке например. Назвать наброски на салфетках мокапом язык не повернется.
en.wikipedia.org/wiki/Mockup
В русском языке аналога слова mokup я не знаю. Наиболее близким было слово «макет», но макеты могут быть в любом масштабе и иметь сходство с реальным объектом только в общих очертаниях, например, макет застройки микрорайона.
В русском языке аналога слова mokup я не знаю. Наиболее близким было слово «макет», но макеты могут быть в любом масштабе и иметь сходство с реальным объектом только в общих очертаниях, например, макет застройки микрорайона.
Отличная статья. После всех холиваров недавних связанных с этой темой на хабре, долго в голове вынашивал подобный текст, но так и не решился выдать отдельным постом.
А вообще, если говорить за отдельно взятый фриланс и заказчиков, которые недовольны дизайнерами, то мне кажется, что всему виной тут как раз таки те дизайнеры, которые впаривают свое под любым проектом, даже тем, который объективно не по зубам. А заказчики в свою очередь ведутся больше на слова и на обещания за демпингованые цены.
А вообще, если говорить за отдельно взятый фриланс и заказчиков, которые недовольны дизайнерами, то мне кажется, что всему виной тут как раз таки те дизайнеры, которые впаривают свое под любым проектом, даже тем, который объективно не по зубам. А заказчики в свою очередь ведутся больше на слова и на обещания за демпингованые цены.
Спасибо за высокую оценку :)
Честно говоря, прокрутив в голове ответы на статью о прототипах, я начал писать ответ почти сразу, но быстро надоело, бросил. Потом, дня через три, напрягся и, сильно сократив, домучил :) Жаль выбрасывать дополнителные аргументы и красочные примеры, но если есть ощущение, что иначе до конца не дотянуть, то приходится…
Честно говоря, прокрутив в голове ответы на статью о прототипах, я начал писать ответ почти сразу, но быстро надоело, бросил. Потом, дня через три, напрягся и, сильно сократив, домучил :) Жаль выбрасывать дополнителные аргументы и красочные примеры, но если есть ощущение, что иначе до конца не дотянуть, то приходится…
да ну, какие там навыки визуала. Ни за что не поверю, что на синем фоне будет тёмно-синий текст. И вообще в серо-зелёно-сине-голубой плашковый сайт. Тот же скетч, просто цветастый. Уверен, цвета не для этого эскиза подобраны, а шаблонные — выделяются логические группы и элементы внутри них. Причём здесь дизайн вообще?
Это скорее не навыки визуала, а обыкновенная тяга адекватного дизайнера сделать красиво даже в простом прототипе. И я считаю, это правильно, т.к. такое заказчик проще примет (%. Если, конечно, не начинает отнимать лишнее время, т.к. скорость в данном случае важнее.
Из этих примеров мне непонятно, как чужие вайрфреймы или прототипы могут мне помешать в работе. Я все равно применю те цвета и графические приемы, какие посчитаю нужными.
Когда UX-дизайнеры приносят мне прототипы, в процессе обсуждения они должны обьяснить и обосновать свои решения. Например, навскидку — по второй картинке:
1. Я вижу, что основной фокус внимания находится в верхнем правом углу. Два второстепенных фокуса — текстовая строка слева, (которая по мощи тянет не заголовок, но находится под информационным блоком — почему?) и оранжевый блок справа. Правильно ли я понимаю иерархию, и почему именно эти части важнее остальных?
2. Я вижу круглые аватарки. Какими соображениями вызвано их размещение то в левом верхнем углу, то вверху посередине, то сбоку справа и применение 3-х разных размеров?
3. В нижней части верхнего левого блока размещены ссылки в виде навигационной цепочки. Почему не в верхней, как это обычно принято? Почему массив ссылок справа тоже напоминает навигационные цепочки с движением слева направо?
И т.д.
Когда UX-дизайнеры приносят мне прототипы, в процессе обсуждения они должны обьяснить и обосновать свои решения. Например, навскидку — по второй картинке:
1. Я вижу, что основной фокус внимания находится в верхнем правом углу. Два второстепенных фокуса — текстовая строка слева, (которая по мощи тянет не заголовок, но находится под информационным блоком — почему?) и оранжевый блок справа. Правильно ли я понимаю иерархию, и почему именно эти части важнее остальных?
2. Я вижу круглые аватарки. Какими соображениями вызвано их размещение то в левом верхнем углу, то вверху посередине, то сбоку справа и применение 3-х разных размеров?
3. В нижней части верхнего левого блока размещены ссылки в виде навигационной цепочки. Почему не в верхней, как это обычно принято? Почему массив ссылок справа тоже напоминает навигационные цепочки с движением слева направо?
И т.д.
Как по мне, любому дизайнеру должно быть худо-бедно понятно что же на второй картинке.
Интуитивно понятно, что на второй картинке пример прототипа блога-новостной ленты. «Навигационная цепочка», как вы назвали, обычные тэги. Круглые аватарки слева — авторы постов.Сбоку справа — последние комментировавшие. А аватар посередине — это аватар непосредственно залогиненого юзера.
Интуитивно понятно, что на второй картинке пример прототипа блога-новостной ленты. «Навигационная цепочка», как вы назвали, обычные тэги. Круглые аватарки слева — авторы постов.Сбоку справа — последние комментировавшие. А аватар посередине — это аватар непосредственно залогиненого юзера.
Я спрашивал, почему ссылки имеют движение слева направо, как breadcrumbs, почему аватарки разных размеров и гуляют по инфоблоку, путая ментальную карту, и т.д… Если бы я получил подобный ответ от UX-дизайнера, это означало бы, что все это сделано просто ради композиционных пятен и может быть переделано по моему усмотрению…
Выбор между бальзамиком с комментариями и неясным набором прямоугольников без комментариев? Бальзамик победил (хотя я все предпочитаю axure, но это дело вкуса :)
И я абсолютно согласна с этим разделением. Хотя в удачном случае совмещать ничто не мешает, лучше не делать этого на одном проекте.
Часть терминов (sketch, mockup, prototype, etc.) была раскрыта в переводе статьи «Wireframing, Prototyping, Mockuping – What’s the Difference?».
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
О бедном мокапе замолвите слово