Ответы пользователя по тегу Веб-разработка
  • Как отрисовать элемент?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Подскажите новичку, как следует отрисовывать в макете, раскрывающиеся вниз элементы (пример как на фото, или кнопка "читать далее", когда при нажатии на ссылку текст продолжается раскрытием вниз). Отдельно рисуются страницы под каждый элемент или как то можно это сделать по другому? Заранее спасибо за ответ!)

    Суть вопроса именно в том как показать в макете два состояния (скрытое и раскрытое). Софт не указан, потому напишу про Фотошоп, к примеру.

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

    Самый удобный способ: с помощью композиций слоёв (layer comps). О нем знают те, кто лучше разбирался с Фш, читал мануал, смотрел уроки или общался с более опытными коллегами
    Почитать можно здесь https://helpx.adobe.com/ru/photoshop/using/layer-c... и посмотреть разные уроки в интернете.

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

    В Фигме можно такое сделать через компоненты и их состояния. Уроков также много в интернете.
    Ответ написан
    Комментировать
  • Кто и на каком этапе разработки сайта занимается продающим текстом?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Тексты должны быть готовы еще до создания дизайна т.к. если сделать дизайн под "рыбу", то после весь дизайн может поплыть от большего или меньшего количества контента.

    Правильно пишут: если прототипы сначала делаются, то на этом этапе определяются и с количеством текста, обсуждая всё коллективно. Если же прототипов нет, то дизайнеру все равно лучше работать с готовыми текстами.

    Для взаимодействия нужен менеджер (в идеале) или кто-то, исполняющий его роль (уж как получится, от директора до дизайнера).
    Ответ написан
    Комментировать
  • Как редактировать файлы темы Wordpress чтобы потом обновление не повлияло на измененный файл?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    Использовать дочерние темы.
    Ответ написан
    Комментировать
  • Веб дизайн, дизайн мобильных приложений, актуальные инструменты?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    -Правильно ли пытаться войти в мир веб дизайна с мобильных приложений?(если нет то с чего?)

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

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

    -Какой "расклад" сил на данный момент по софту, при учёте "с нуля", что стоит изучить, а что можно опустить?(Например наткнулся на Adobe experience design, можно ли сразу учить его?)

    Каждый работает в том, что удобно ему. Пробуйте разное и найдёте идеальное конкретно для себя. Adobe Illustrator, Photoshop, Sketch, Affinity Designer, XD, Inkscape, Xara, CorelDRAW, Gimp и т.п. Для первого знакомства хватит первый четырёх (в зависимости от платформы), а далее и с другими ознакомитесь. Хороший специалист не ограничивается в работе только одним инструментом, а подбирает их исходя из задачи.

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

    Что такое WEB? Всё, что находится в Вебе и делается дизайнером — веб-дизайн. Любое оформление или графика в вашем браузере: иконки, баннеры, веб-страницы, сайты и любая иная мелкая оформительская работа. Начинайте с того, что уже знаете/умеете или к чему лежит душа. С опытом найдёте что нравится больше и получается лучше. Делайте упор на одной специализации, а смежное охватывайте по мере роста т.к. лучше быть крутым в одном, чем "кое-как" во всём.

    -Основная литература по типу "Психбольница в руках пациентов" само собой необходима?

    Литературы валом и здесь каждые 1-2 месяца задают эти вопросы. Умение искать самостоятельно поможет не только с поиском книг, но и в работе (типа "как сделать конический градиент" или подобное). Я серьезно.
    Ответ написан
    1 комментарий
  • Как исправить цветопередачу?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Смотрите какое цветовое пространство использовали при работе: RGB или CMYK. Плюс конкретные цветовые профили, смотря в какой программе работали. Дело может быть и в мониторе, но с цветами в редакторе чаще всего забывают разобраться.

    А еще, откройте одинаковые изображения (любые) на своем и других мониторах. Если разница будет везде (а не только вот в этом макете), то дело очевидно что в вашем мониторе =) Тогда поможет только его смена.
    Ответ написан
    8 комментариев
  • Организация рабочего процесса по вебдизайну в Adobe Illustrator - как лучше?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Вот по описанным причинам ребята и делают всё в одном файле :) Тут выбирать что удобнее именно для себя — разделять файлы и перекрашивать по необходимости вручную каждый или же бояться тормозов программы, но менять любые стили сразу везде. Тут можно еще порекомендовать написать свой скрипт/экшен для подобных целей, готовые мне не встречались (хотя вопросы периодически задают и здесь и на иностранных ресурсах).

    А про хранение файлов напишу вкратце.
    Если проект большой, с задачами разного рода, то делается папка big-project-name. Внутри неё лежат папки по задачам: banners, icons, site и т.п. В каждой папке конкретная задача. Если проект простой и путаться негде, то можно не разделять на подпапки. Все названия папок и файлов я всегда пишу с маленькой буквы и на английском, так удобнее.
    Внутри папки company-site (возьмем пример с сайтом) лежат папки source (со всеми материалами, предоставленными заказчиком), img (с разной исходной графикой, которая используется в проекте), preview (или images или типа того, я в такую папку складываю макеты для согласования и расшариваю для доступа клиенту — чтобы не пересылать кучу файлов, а иметь одну папку с актуальными макетами) и любые другие служебные папки, которые могут понадобиться по ходу работы.
    В корне этой папки ведется работа и находятся исходники вида name_xxxx_yyy_zzz, где name — это название клиента или проекта (указываю всегда чтобы находилось через поиск), xxxx — обозначение вида задачи (site, app, icons и т.п.), yyy — уточнение что в этом файле (если сайт/приложение, то main, contacts, news и т.п., если иконки, то их размер, например), zzz — версия файла — она может быть просто цифровой (001, 002, 024), а может быть и датой сохранения, иногда требовалось подобное (16-11-23 – год-месяц-день, удобно следить). Таким образом, получаются имена файлов sber_icons_128px_001, sber_insurance_lk_012 или ph_cafe_menu_16-10-05. Когда требуется версия с переведённым в кривые контентом, то в конце можно добавить -curved.
    Я предпочитаю разделять смысловые части с помощью подчеркивания "_", а вместо пробела в словах использовать минус "-" (sber-bank_site_one-two_004).

    Если собирается много файлов одной задачи, то они собираются в подпапку как описано в самом начале.
    Когда собираются несколько версий одного макета, то я создаю папку old (или revisions, кому как удобнее) и скидываю туда все старые версии, а в корне задачи остаются лишь актуальные. Это помогает не запутаться в куче версий и, в то же время, держать их рядышком. Если важно сохранить даты подобных «срезов», то в папке old делается подпапка с нужной датой.

    Учитывая, что я фрилансер, то мне не надо иметь кучу папок как у ребят по ссылке и думать о том, что кто-то там может не разобраться :) А в каждой конторе привыкли к разному и просто либо подстраиваешься под них, либо по-умолчанию расшариваешь папочку с макетами. В последнем своём офисе из бардака на личном компе я сделал озвученную выше структуру на сетевом сервере и все работали с файлами без дёрганья друг друга.
    Ответ написан
    3 комментария
  • Какие вопросы задавать заказчику для редизайна интернет-магазина?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Ну вы же типа специалист. Что вам нужно знать об этом проекте? Что не понятно и не известно конкретно вам? Что конкретно вам нужно узнать чтобы взяться за работу? Вот это и спрашивайте у клиента. Не знаете даже что спросить — откажитесь и возвращайтесь когда наберетесь знаний.

    Ну напишут я или кто-то другой сейчас список вопросов, ну узнаете вы их у клиента, но сможете ли применить в работе эту информацию, если не знаете для чего она нужна? Толку будет ноль. Учитесь и набирайтесь знаний, ведь правильные вопросы (как и подход к работе) у каждого свои.

    Upd Я не раз видел как люди берут чужие образцы брифа/ТЗ и дают их заполнять клиенту, а потом всё равно делают что сами захотят, даже не читая (или не понимая) указанную информацию. Отчасти это потому что половина вопросов реально бесполезная информация и перекочевала ещё из шаблонов 90-х и 00-х годов.
    Поэтому изучайте дизайн интерфейсов (общие принципы, юзабилити и т.п.) т.к. это то что важно в интернет магазине. Смотрите как сделано у других и выделяйте хорошие решения.
    К слову, кол-во категорий товаров вообще бесполезная информация когда идёт речь о дизайне интернет-магазина :) Здесь важны главная, список товаров, фильтр, страница товара и процесс оформления заказа.

    Дизайнер не клепает макетики, дизайнер решает задачу клиента.
    Какая цель вашей работы? Какие цели должен достичь редизайн сайта?
    Вот спросите у клиента. А далее уже вы, как специалист, должны принять решение — какими способами решать поставленные задачи для достижения необходимых целей.
    Ответ написан
    Комментировать
  • Как называется данный блок на сайтах?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Чаще этот блок известен всем как просто слайдер (реже там статическая картинка с текстом или без или даже видео). Если сверху не было бы явно отделённого меню и весь верх представлял собой единый блок с красочной иллюстрацией и элементами навигации, то подобный верх страницы может называться hero header, а само изображение hero image (ничего общего с заголовком в примере).

    UPD Статья с примерами
    Ответ написан
    Комментировать
  • Почему один и тот же шаблон продается разными авторами на themeforest?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Все верно написали — это просто разные версии под разные нужды и CMS. Без проблем можно так продавать по договорённости с автором оригинала.

    Один автор сверстал сам шаблон, другие предложили (или он сам попросил) сделать шаблоны под конкретную CMS для простоты установки, чего первоначальный автор не умел (или не хотел). На самой странице шаблона (это и есть начальный автор), прямо под превью размещены ссылки на все имеющиеся версии для разных CMS и это уже говорит о том, что все нормально. По датам выложенных товаров тоже видно, что они делались после публикации оригинального HTML-шаблона.
    Ответ написан
    Комментировать
  • Графический планшет + макеты = Возможно ли?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Исключительно дело вкуса. Лично мне удобно. Я и в допечатке крупной флексо-типографии, где вообще ничего общего с портретами/иллюстрациями не было, использовал Pen&Touch M и орудовал им получше, чем мышью — удобно. Потом и сайты, веб-графику также делал используя планшет.
    Перо всегда в руке и можно спокойно печатать при этом, легче мыши. Возьмите у кого-нибудь на день-два и сами попробуйте, чтобы не потратить деньги зря.

    Кстати, спасибо, что напомнили. Надо достать и подключить, а то после переезда забыл про него.

    По нынешним производителям ничего не скажу, пользовался Вакомами (Bamboo One и Pen&Touch) и был еще один Джениус (гавно). До 8к выбор не такой уж и большой, из Вакомов хватит на тот же One или маленький Intuos. Есть какие-то другие, с неприличными названиями, но лучше изучите обзоры в интернете чтобы понимать что они могут и подходит ли это конкретно вам. Уж просто водить по экрану и тыкать может хватить любого с более-менее качественным пером.
    Ответ написан
    Комментировать
  • Конкуренция на фриланас бирже?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    На фл.ру с качеством беда:
    — 50% автоматические копипасты шаблонных ответов т.е. лепятся скриптами вообще во все проекты, проходящие по нужным им ключевым словам. Причём, это могут быть вообще менеджеры, которые способны только общими фразами писать;
    — 25% ответы от людей, но прочитавших задание бегло в результате чего приходится просить перечитать еще раз;
    — 25% адекватные ответы от нормальных фрилансеров, которые прочитали задание, поняли его и оставили полезный отклик. Иногда этот процент еще меньше.
    Ответ написан
    2 комментария
  • Как делается нарезка в CorelDraw (Adobe Illustration)?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Illustrator
    Дизайнер и перфекционист
    Ни один векторный формат (cdr, ai, svg, eps и т.п.) не экспортируется в psd с возможностью редактировать т.к. это в принципе разные форматы графики. Узнать о возможностях нарезки из cdr вам стоит у коллег-верстальщиков т.к. дизайнеры чаще понятия не имеют как вообще нарезается (есть разные сайты/форумы). Корелом сто лет не пользовался и даже не знаю, есть ли там функционал аналогичный пакетам Adobe.

    Возможные варианты — это экспорт макета из Корела в EPS или другой векторный универсальный формат (PDF, SVG и т.п.). Далее в Иллюстраторе без проблем открывается, НО могут быть проблемы и искажения, если в макете применялись какие-либо эффекты (тени, размытия, градиенты и т.п.). У КорелДРО и Иллюстратора издавна эти несостыковки и проблемы могут возникнуть в самом неожиданном месте. Всегда просите превью в джипеге или ПНГ для сравнения — будет понятно слетело что-либо или нет.
    В интернете давным-давно были разговоры о том, как из Иллюстратора перегнать в Фотошоп с максимальным сохранением векторных форм. Но процесс не 100% идеальный и через дополнительный софт — Fireworks. Пробовал и мне результат не понравился, да и не стоит это потраченного времени.

    Как я написал выше, перевести безболезненно в psd не представляется возможным. В инете есть типа конвертеры, но они, скорее всего, конвертируют со слитыми и растрированными слоями.

    Я бы попросил прислать макет в удобном формате или обратиться к более опытным коллегам =)
    Ответ написан
    Комментировать
  • Есть ли сервисы для удобного перевода pdf?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    Можно сохранить/конвертировать ПДФ в ДОК, если ПДФ сделан грамотно, а не сканом или фото. А потом уже скопировать текст и загнать в переводчик.

    Дополнение: можно также переводить онлайн через тот же Гугл (он поддерживает загрузку файлов) или иные сервисы типа www.onlinedoctranslator.com/translator.html Вот статейка об этом www.labnol.org/internet/tools/translate-pdf-word-d...

    Дополнение 2: вот еще интересная статья о способах перевода ПДФ-файлов www.pdfconverter.com/resources/blog/how-to-transla...
    Ответ написан
    Комментировать
  • Нужно ли менять дизайн сайта?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Сайт делали для себя или для пользователей? Если для себя, то не надо спрашивать мнение других, хотите менять — меняйте.

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

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

    От себя скажу, что сайт слишком серый и пресный. Контент сложно считывается и вот пример в соседнем ответе: человек, не являющийся любителем астрономии, залип на красивой бирюльке — ракете — хотя зацепить его должен был именно контент. Такое посещение будет лишь очередным отказом в статистике)) Плюс, «Главное» почему-то такое же как и все остальное и совершенно ничем не отличается от «не главного». Сравните хотя бы с сайтами крупных СМИ.

    В общем, если это любительское, то решайте сами. Если же планы расти и развиваться, то следует подойти комплексно и работать не только над дизайном, но и над структурой интерфейса и способами подачи информации, чтобы интересно было не только астрономам-любителям, но и всем остальным =) Дизайн обычный, невзрачный среднячок баллов на 4-5 из 10.

    UPD Написано после просмотра главной страницы. Посмотрел еще страницу статьи, актуально все перечисленное, только еще больше надо поработать над удобством подачи контента. А это информации уже на целый юзабилити-аудит)
    Ответ написан
    4 комментария
  • Какая оптимальная максимальная ширина контента для адаптивного сайта?

    pozZzitiv
    @pozZzitiv Автор вопроса
    Дизайнер и перфекционист
    Я считаю оптимальными размеры в районе от 1440 до 1600рх при условии наличия сайдбаров или иных колонок (если колонка всего одна, то не должна быть широкой иначе текст читать будет невозможно). Статистика популярных разрешений это подтверждает
    f0e4a184338d43debec2ed2980c9e651.png
    За примерами далеко ходить не надо: Тостер имеет ширину контента 1440рх и это удобно. Контент занимает большую часть экрана и навигация осуществляется посредством сайдбаров. Причём, сделать в подобном ключе можно не только информационный сервис или новостной сайт, но и коммерческий сайт или магазин.
    Ответ написан
    Комментировать
  • Как дизайнеру сделать Parallax эффект?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Речь о дизайнере, который в графическом редакторе делает макет? Если да, то показать все элементы в макете, передать верстальщику их поотдельности в нужном формате (png, svg и т.п.), снабдив комментариями с описанием поведения. Далее фронт-энд специалист настроит поведение как надо и всё готово.
    Ответ написан
    Комментировать
  • Пришло уведомление от роскомнадзора, что дальше? Какого типа статьи лучше заблокировать по стоп словам?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    Логично смотреть список всего запрещённого непосредственно на сайте Роскомнадзора.
    Они же внесли вас в список, а не пользователи Тостера.

    Принципиально не хотите зайти на сайт Роскомнадзора или банально погуглить?
    eais.rkn.gov.ru/faq — первый же пункт отвечает на вопрос, что именно запрещено.
    Ответ написан
    Комментировать
  • Где искать заказчиков дизайнеру сайтов, если умеешь работать только в фотошопе и вёрсткой не владеешь?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Заказов просто на дизайн сайтов ПОЛНО и на лэндинги в частности. Конкуренция есть, но при хорошем портфолио и умении подать себя как специалиста конкуренция уже заметно меньше.

    Сначала напишу общие советы исходя из личного опыта.
    1. Хороший спец в конкретном направлении лучше «мастера на все руки», поверьте мне. Выбор ниши очень важен. Увы, дизайн сайтов (а тем более целевых страниц!) это слишком популярная специализация и чтобы перестать быть безликим фрилансером нужно очень серьезно поработать над качеством работ и портфолио. Очень хорошо найти грамотную фирму или арт-директора, с которыми можно будет подтянуть свой уровень за время работы. Тут надо искать и не останавливаться, расширяя географию поиска. Кто ищет - тот найдёт, поверьте.
    2. Мониторьте биржи вручную или используйте специальные сервисы-аггрегаторы для этого (неоднократно обсуждалось здесь же, воспользуйтесь поиском).
    3. Познакомьтесь с верстальщиком, программистом, специалистом по интерфейсам, иконкам и теми, кого не хватало до сих пор, чтобы брать заказы под ключ. Авось это даже когда-нибудь выльется в свою фирму. Интернет, соцсети и сарафанное радио в помощь.
    4. Рекламируйте себя в профилях фриланс-бирж, в соцсетях (профильные группы и просто друзья, просите репосты) и на сайтах для дизайнеров (дрибл, биханс и т.п.) - там периодически бывают и клиенты и те, кто ищет сам дизайнера в помощь.
    5. Будьте хорошим специалистом, не позволяйте себе заполнять профили на сайтах несерьезно и как новичок, многих хороших клиентов это оттолкнёт. Не выкладывайте в портфолио всё подряд (типичная ошибка для дизайнера), выкладывайте только то, что действительно хорошо.
    6. Ну и просто не делайте херню. Клиенты очень часто просят странные или заведомо плохие вещи сделать в дизайне. Вы специалист и (если задача не «просто срубить денег», а помочь клиенту и предоставить результат за который не стыдно) вправе сказать клиенту как грамотно решить его задачу. Многие клиенты работают со мной потому что им нравится мой подход.
    А теперь частное, конкретно для вашей специализации. Учитывая ваш выбор — целевые страницы (landing pages) — я не удивлён)) Насколько я знаю, такие сайты нужны быстро и под ключ, это действительно тот случай, когда клиенту проще за фиксированную сумму сделать всё. Здесь либо вы раздобудете денег и/или времени на изучение смежных технологий, либо начнёте осваивать другую нишу, либо найдёте верстальщика/фирму в помощь. А лучше всё это параллельно делать.
    Сядьте в офис на оклад (пусть не самый высокий) с возможностью набираться опыта и фрилансить в свободное время. Когда подтянитесь до более высокого уровня - можно будет уходить в свободное плавание.

    PS Надеюсь я не зря писал и ответ не останется незамеченным среди других «узконаправленных» ответов, которые вы не комментируете)))
    PPS Если покажите своё портфолио, то, возможно (ничего не обещаю) я смогу чем-то помочь =) Советом или делом.
    Ответ написан
    Комментировать
  • Есть ли аналог или же сам Sketchapp для windows?

    pozZzitiv
    @pozZzitiv Куратор тега Дизайн
    Дизайнер и перфекционист
    Обновление на 2019 год.
    Сейчас есть очень похожий редактор — Figma. По словам некоторых даже лучше Скетча (и уж точно лучше Фш).

    Опыт использования Скетча на Вин https://medium.com/sketch-app-sources/how-i-starte...
    Ответ написан
  • Что значит глянец в web-дизайне?

    pozZzitiv
    @pozZzitiv Куратор тега Adobe Photoshop
    Дизайнер и перфекционист
    Ну написано же по-русски
    страница выглядит как глянцевый журнал

    Это не «эффект глянца», это просто желание чтобы страница была оформлена по принципам оформления в журналах. Пример приведён не самый красивый, вёрстка ужасна, но отдалённо понятный — рамочки, картинки в нестандартной маске и т.п. Просто возьмите несколько журналов, посмотрите как они свёрстаны и сделайте по аналогии.
    Можно попросить у клиента показать его любимые развороты в журналах чтобы лучше понять что нравится.
    Ответ написан
    Комментировать