• Какой джентельменский набор вы используете для проектирования UI/UX?

    Chipr
    @Chipr
    UX/UI designer
    1. uxpressia — для персонажей и флоу.
    2. Draw.io — для создания информационной архитектуры.
    3. Figma, Sketch – для создания прототипов (в том числе кликабельных) и дизайнов.
    4. Photoshop, Illustrator — векторные иллюстрации и работа с растром.
    5. Framer, Principle — для анимации.
    6. Cinema 4D — для 3D графики.

    Бесконечное количество документации на drive, в docks. И сам Google для поиска.
    P.S. Ну и behance, dribbble, awwwards и прочие ресурсы для вдохновения.
    Ответ написан
    5 комментариев
  • Какой джентельменский набор вы используете для проектирования UI/UX?

    mixail_fet
    @mixail_fet
    Дизайнер веб-интерфейсов
    Очень короткий список, но очень полезный:

    1. Axure - основной инструмент для разработки прототипов, иногда заменяет драгоценный блокнот.
    2. Figma - для полноценной реализации того, что сделал в Axure, грубо говоря делать дизайны - там.
    3. Adobe Photoshop - каждый раз когда нужно поработать с растровой графикой - иду туда, и импортирую позже в Фигму.
    4. Adobe Illustrator - когда не хватает стандартных инструментов Figma для векторной графикой (а такое бывает не часто), открываю Иллюстратора.
    5. Ну и конечно же, для вдохновения Behance, Дрибл и Themeforest.

    Есть аналоги Figma, это Adobe XD и Скетч, но тут на вкус и цвет.
    Ответ написан
    Комментировать
  • Есть ли существенное отличие между Open Sans и Open Sans Regular?

    Ragtime_Kitty
    @Ragtime_Kitty
    Open Sans - это семейство шрифтов.

    Regular - это обычный вид начертания. У regular font-weight: 400, стандартный. Подключая Open Sans, вы получаете Open Sans Regular
    У этого шрифта вариантов несколько, они могут отличаться насыщенностью, пропорциями, контрастностью и наклоном. Все они есть у гугла
    https://fonts.google.com/specimen/Open+Sans
    Ответ написан
  • Figma и типографика?

    dom1n1k
    @dom1n1k
    В отличие от CSS, Фигма считает процентную line-height не от кегля (font-size), а от высоты строки по умолчанию, которая прописана внутри шрифта. Например: если у моего шрифта высота строки по умолчанию 120%, а в Фигме я укажу 140%, то по факту получится 120*140=168% от font-size.

    Никакого стандарта на счет умолчального line-height нет. Обычно это 120-130%, но далеко не всегда. Исключений довольно много, отcюда будет постоянный бардак. Решение разработчиков Фигмы откровенно странное и неудачное.

    Решение: забыть о процентах, указывать line-height только в пикселях (именно в Фигме, о CSS разговор отдельный).
    Ответ написан
    1 комментарий
  • Чем строгое выравнивание отличается от нестрогово?

    Kadzi
    @Kadzi
    Ом
    Привет, рекомендую изучить какие вообще бывают элементы верстки и как их можно разделять.

    Совет бюро, базовые элементы верстки

    В этом совете еще 12 ссылок на эту тематику, в том числе, про выравнивание и чередование ритма. А на самом сайте бюро в советах можно поискать дополнительные ответы, их не прикладываю, так как ты интуитивно найдешь нужные.

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

    Чтобы сделать резкий скачок, рекомендую:

    1) Подборка советов главреда по тексту их там очень много, за месяц не осилить если вдумчиво читать и осознавать, но за 2 месяца, с видео на его канале, вполне.

    2) Книга А.Горбунова Типгорафика и верстка (можно на сайте бюро купить подписку, а можно скачать из сети, например из вк)

    3) Джеймс Феличи, Типографика: шрифт, верстка, дизайн. Ооочень классный справочник. Читается не легко. Информации много, почти 500 страниц. Но после него, ты со скоростью света будешь принимать решения в верстке. (а это очень важно для хорошего адаптивного сайта, например, сложные таблицы и т.д).

    4) Ян Чихольд: Облик книги. Перечитываю сейчас и нахожу новое, что не замечал ранее. Также поможет со скоростью верстки.

    5) Эдвард Тафти. Рекомендую погуглить его. И Брокмана "Модульные сетки в графическом дизайне".

    6) Упражнение. Однажды я пошел и купил порядка 700 листов А4, плотных, это несколько альбомов, были также А2. И по очереди каждый разукрашивал кисточкой, черной краской, серой краской, красной. Рисовал полоски, имитируя текст, заголовки, рисовал квадраты, представляя, что это картинки. Ну и всякие кружки. У меня ушло несколько недель на это, чтобы не лениться. Но после 300 листа, я стал импровизировать и самонаучился, вкус начал развиваться. Я делал симметритчно, асимметрично, упарывался с полосками, прямоугольниками, квадратами и кружками. И осознание наступило. А потом пришло понимание, когда нужны собственные сетки.

    7) стайлгайды
    Ответ написан
    2 комментария
  • Где можно посмотреть примеры красиво-удобно оформленных больших таблиц с данными?

    bukinion
    @bukinion
    Классный вопрос)))Сама задача типографическая, а ныне также и RWD-шная.
    Отличная гифка от vis0r вкратце показывает, что именно, и как делать.

    Если же по полочкам, да по ссылочкам, то.
    Прежде чем заниматься графдизайном таблиц, надо, если потребуется, переосмыслить их и привести информацию в понятному и простому виду: определить структуру информации, выбрать способ отображения, избавиться от всех повторов, есть много разных методов оптимизации таблиц — об этом лучше всех написано у Мильчина. Мильчин, — это советская школа еще, в универе по нему учили. Для вас конкретно: Глава 13. Таблицы и выводы. — Мильчин А., Чельцова Л. Справочник издателя и автора : редакционно-издательское оформление издания.

    Типографический аспект верстки можно посмотреть в 15 главе "Типографика. шрифт, верстка, дизайн", Феличи Джеймс, или что говорит "Новая типографика", Я. Чихольд:

    8d61eac53511465a82e76f27435e659d.PNG

    или "О Шрифте", Шпикерман:

    a4f4940a77cd403ba5a253cb1a09c886.PNG

    вот оформление таблиц от Эдварда Тафти:

    a062573f9d6747a5ae52c1c7125dfca3.PNG

    По дизайну и типографике таблиц, в вашем случае, можно попробовать оттолкнуться от Material Design. Там тоже интерактивные таблицы с чекбоксами рассмотрены.

    Еще стоит подумать об адаптивности таблиц: отправная точка, или посмотреть реализации в библиотеке паттернов Бреда Фроста, товарища в скафандре, автора подхода "Atomic Design".
    P.S.
    Только что наткнулся, на jQuery-плагин для таблиц: с адаптивностью! Плюс: сортировка, пагинация, настройка объема вывода строк и т.д.
    Ответ написан
    2 комментария
  • Какие шрифты чаще всего используете в дизайне сайта?

    RostOsipov
    @RostOsipov
    Designer
    Не путайте парня и не ограничивайте его в выборе. Послушает, замкнется на Open Sans, Roboto, Proxima Nova.

    1. Выбор шрифта осуществляется в соответствии с конкретной задачей. Это первое правило, которое нужно держать в голове при выборе шрифта (шрифтов) для определенного проекта.
    У Вас большие объемы текста и нужно добиться максимальной скорости прочтения? Выбирай шрифт с максимальной удобочитаемостью (Helvetica, Pragmatica, Aktiv Grotesk, etc).
    Делаешь своей девушке сайт-визитку по продаже хенд-мейд бижутерии? Можешь присмотреться к декоративным шрифтам или серифам.

    Кроме того, возможны ограничения по шрифтовым набором со стороны разработчика ПО под которое делается проект. Так например, Microsoft в Windows 8 Guidelines, настоятельно рекомендовала уйти от сторонних шрифтов в пользу Segoe UI.

    Мне сложно представить, к примеру, сайт IT компании, параграфы которого набраны serif типа Bodoni или Baskerville. Это вызывало бы диссонанс, так как Антиква (serif fonts) отправляет нас в прошлое, а Информационные технологии - направление будущего, поэтому и выбирают Гротескные гарнитуры (sans-serif).

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

    3. Поиск шрифтовых пар.
    Найдите пару шрифту для связки Заголовок/Параграф. Как и у людей - не все шрифты подходят друг другу. Собираетесь сделать моношрифтовой сайт? Почему бы нет. Однако, возможно, он будет скучноват и будет напрашиваться добавление еще одной гарнитуры к уже имеющийся.
    В интернете полно сайтов, посвященных "играющим" парам.

    НО. Никогда. ни в коем случае. Не при каких обстоятельствах. Нельзя использовать в заголоках и параграфов похожие шрифты. Например: Helvetica и Acumin Pro.

    Почему некоторые шрифты популярны, а другие нет? Здесь есть много причин:
    a) Бесплатность. Не нужно платить за лицензию на шрифт, либо лицензионные фи за использование в приложениях или web. Шрифт Лобстер набрал свою популярность именно по этой причине. (правда сейчас у него репутация, близкая к Comic Sans'у).
    b) Качество набора гарнитур.
    c) Поддержка языков.
    d) Наличие лигатур (для кириллицы не актуально:))
    e) Тенденции в Web Дизайне и т.д.

    Возвращаясь к вопросу "Какие шрифты должны быть у каждого web дизайнера?" Не хочется ли Вам после всего вышеописанного перефразировать свой вопрос "Чем должен руководствоваться каждый web дизайнер при выборе шрифта?"

    Сервисы:
    Google Fonts (Free) и Adobe TypeKit (Free and Paid). Лично мне больше нравится сервис от Adobe. Немного сложнее в "установке" шрифта, но приятнее по качеству наборов гарнитур.
    Ответ написан
    Комментировать
  • Профессия веб-дизайнер мертва?

    fred-design
    @fred-design
    web design, UI design, branding
    Вы хорошую тему подняли.
    Не так давно я что то подобное спрашивал, только в моем контексте было больше про возраст, но смысл был тот же (я больше 10 лет в веб дизайне).

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

    Нету чистого веб дизайна, есть UI дизайнер (да он может быть просто UI, который рисует кнопочки и всякие UI киты +графики и цветокорекция фоток для сайта, а потом все по местам расставляем, но это как бы уже работа больше UX проектировщика). В том то и дело что UI и UX очень тесно связаны, и дизайнер-фрилансер должен и даже обязан знать эти две вещи + анимация (очень важна)

    Так же появилась новая профессия (она как бы была но не так популярна как сейчас) продуктовый дизайнер это что то больше чем UI/UX, он больше анализирует и тогда что то создает, его функции находятся на стыке дизайна взаимодействий и исследований (посути тот же UX, только больше платят :)

    Так же дизайнер анимаций или как модно сейчас моушен дизайнер, когда то это тоже все делал веб дизайнер или человек который знал flash (хорошо что гавнофлеш ушел в прошлое :))
    Так же есть прототипировщики, но это тоже UX

    Ну и как тут без графического дизайнера, который рисует всякие иллюстрации и графику.
    А ну да, еще и контент тут можно приписать, за частую еще от дизайнера требуют грамотность написания текста (и что бы он продавал)))

    Так что веб дизайн никуда посути не ушел, а просто разделился на отрасли, и каждый теперь занимается своим делом (но это если студии) а если ты дизайнер-фрилансер ты должен уметь все и даже больше.
    А UI/UX в наше время прототипирует, рисует сайты (лендосы), интерфейсы, дизайны мобильных приложений, магазинов, банерки, иконки и т.д.)
    Ответ написан
    Комментировать
  • Как повысить навык проектирования хороших сайтов?

    copist
    @copist
    Empower people to give
    Нет, я не согласен с тем, что созерцание чужих сайтов даёт навык проектирования хороших своих. Максимум - вдохновление. А тут нужны склад ума, навыки, определённая техника.

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

    Я рекомендую обратиться к направлению User eXpirience (EX) - создавать удобные пользователям решения.
    Это большое направление. Там есть немного от художника, но много от самого пользователя. Нужно давать пользователям задания, которые можно решить на твоём сайте, чтобы они при тебе делали и рассказывали - что хотят сделать, какой элемент интерфейса они бы кликнули, какие ожидания у них в голове до клика, что они получили после клика, получили ли они желаемое, достаточно ли просто было получить желаемое. Это в общем называется User/Usabity Testing. Нужно несколько таких ревью. Затем принимается решение, устраивает ли пользователей ваш способ удовлетворить его потребности, не стоит ли упростить или усложнить сценарии поведения пользователей, изменить размеры или цвета, переставить элементы местами.
    Через некоторое время, на N+1 проекте, у вас в голове начнёт складываться правильное понимание того, что ожидают пользователи, как удобнее для пользователя реализовать в интерфейсе решения его проблем. Идеального решения не будет. То, что вы придумете для N проектов, на N+1 вообще может не сработать. Главное знать как определить, что именно является причиной неудачи и иметь идеи, как это изменить.
    Ещё есть такая техника, как A/B тестирование, сплит-тестирование.
    В общем - делайте, проверяйте, исправляйте.
    Небольшой обзор для затравки www.zenexmachina.com/what-we-do/user-experience
    lean-startup-01.png
    Под хорошими я понимаю сайты, ... которые приносят прибыль своим владельцам

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

    Под хорошими я понимаю сайты, ... которые при этом сделаны с заделом на будущее.

    Ищите новые потребности новых потребителей. Ищите новые потребности старых потребителей. Обозначу всё это словом диверсификация.
    Ищите новые способы удовлетворения старых потребностей, более эффективные или менее затратные. В том числе, новые клиентские технологии, более современный дизайн, если пользователю так будет удобно.
    Не останавливайтесь. Развивайтесь.
    Вот такой мини-обзор поможет: uxmastery.com/resources/process
    ux-process-diagram-cropped-620x360.png
    Опыт показывает, что меньше всего в этом вопросе помогают умные книги. Из них можно почерпнуть знания, но навык от этого не растёт ни чуть.

    Не согласен. Но конкретных книг не дам. Я просто не записывал, что именно я прочитал.
    Издательство МИФ много современных иностранных книг переводит. Много источников на английском.

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

    Не так уж и быстро она растёт. А ещё, часто бывает, что знания растут, а на практике ничего не меняется. Цель изучения не в том, чтобы знать, а в том, чтобы действовать. Обычно лучше запоминается именно то, с чем сталкиваешься в реальности. А ещё, зная как делать, начинаешь экспериментировать.

    P.S. Тут какая то "серебрянная пуля", а не "золотая середина" ж))
    Ответ написан
    Комментировать
  • Как начинали свой бизнес такие компании как reg.ru, jino.ru, nic.ru?

    Leo698
    @Leo698
    php developer
    reg.ru - организовали киберсквотеры с кучей денег.
    nic.ru это бывшая полугос контора - регистратор доменов( в последствии купленная динозавром РБК), вылезшая из ripn.net

    Можно сказать так, рынок хостинга крайне не развит в РФ и серьезных игроков на нем пока нет.
    Ответ написан
    Комментировать
  • C чего начать фриланс?

    taxigy
    @taxigy
    Если вы хотите быть фрилансером и при этом не быть занятым на фултайме в качестве наёмного работника, то либо у вас должен быть стартовый капитал, либо вам придётся быть фултайм-работником, иначе вы умрёте от голода. Когда вы работаете фултайм, у вас остаётся четыре-пять честных часов в сутки (после девятичасового рабочего дня, поездки на работу и обратно, завтрака, ужина и т.п.), которые вы можете либо посвятить своему развитию в каком угодно направлении. Фриланс — одно из таких направлений.

    Я бы советовал вам, во-первых, всегда держать в уме: вы не можете запихнуть работы больше, чем у вас есть свободного времени. Осознание этого факта даст вам очень сильное преимущество перед другими начинающими фрилансерами, с которыми вам предстоит конкурировать.

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

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

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

    Следующий шаг — это, ура, наконец-то искать заказчика. Зарегистрируйтесь на Elance, oDesk, Freelancer.com, Outsource.com (возьмите у вашего друга-фрилансера реферальные ссылки, вам обоим будет от этого плюс). Это не самые лучшие биржи, но на них водятся интересные проекты. Вообще, биржу следует расценивать как стартовую площадку для накопления полезных контактов. Пока вы никому не нужны, и у вас нет друга-министра, который за откат заказал бы вам вёрстку, вам придётся практиковаться в том, чтобы захватить внимание человека, перед которым такими же прекрасными пропоузалами машут пакистанцы и индусы. О том, как пробиться сквозь стену дешёвых претендентов, не сбавив при этом в собственной ценности, и получить первый заказ, я могу рассказать подробно отдельно, может быть, лично. Это долгая история. Например, у меня это заняло пять месяцев очень упорного труда, и я до сих пор не уверен, что то время, которое я вложил, когда-то может окупиться.

    Развивайтесь как фрилансер. Это очевидно, но об этом легко забыть. Вы ежедневно развиваете свои способности общаться или не общаться с людьми, готовить еду и варить кофе, но это не имеет значения. По-настоящему имеет значение ваш профессионализм — и этим нужно заниматься. Ежедневно анализируйте свои действия, ошибки, возможности, сильные и слабые стороны. Отметайте активности, которые забирают ваше время зря. Не бойтесь отказаться от проекта, если он даже на $10 дешевле, чем тот минимум, на который вы рассчитываете (кстати, установите себе этот уровень в самый первый день).

    Познакомьтесь с другими фрилансерами. Зарегистрируйтесь на freelancing.stackexchange.com/, читайте, задавайте вопросы. Вы удивитесь, как много людей проходят через одни и те же грабли. Вы будете смеяться над тем, что, завалив проект, вы на следующий день увидите вопрос на тему «сложного клиента» или «неконтролируемого увеличения скоупа», которые пережили буквально вчера. Смеяться и плакать, а потом вставать и идти дальше. Когда (или если) вы были фултайм-работником, вас страховали коллеги и вся цепочка руководителей над вами, несмотря на то, что вы этого не понимали или, может быть, даже не чувствовали. Теперь вы один на один с очень агрессивной средой, и очередная неудача — это нормально, разница лишь в том, как вы её ощущаете.

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

    Ну и напоследок. Подумайте о том, в каком месте, в какой природе, в каком климате вы хотите жить, что должно быть видно из вашего окна. Посчитайте, какой кэш флоу вам нужен, чтобы этого достичь, — поздравляю, это одна из самых главных отметок на шкале вашего роста. Разделите ожидания на десять — это ваш план на ближайший год. Умножьте 200 рабочих дней на ваши 4–5 часов — это ваш временной бюджет. Разделите первое на второе — это ваша часовая ставка.

    Успехов! Чем больше людей будут успешными фрилансерами, тем лучше для всех. У вас все шансы попячить ваших друзей, которые работают в крупной компании на средней позиции и участвуют в укреплении внутрикорпоративной безответственности.
    Ответ написан
    3 комментария