Pavel Designer

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

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

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

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

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

В Фигме можно такое сделать через компоненты и их состояния. Уроков также много в интернете.

Использовать дочерние темы.

-Правильно ли пытаться войти в мир веб дизайна с мобильных приложений?(если нет то с чего?)

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

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

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

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

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

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

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

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

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

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

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

А про хранение файлов напишу вкратце.
Если проект большой, с задачами разного рода, то делается папка 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 делается подпапка с нужной датой.

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

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

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

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

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

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

UPD Статья с примерами

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

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

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

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

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

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

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

Дополнение 2: вот еще интересная статья о способах перевода ПДФ-файлов www.pdfconverter.com/resources/blog/how-to-transla...

Я считаю оптимальными размеры в районе от 1440 до 1600рх при условии наличия сайдбаров или иных колонок (если колонка всего одна, то не должна быть широкой иначе текст читать будет невозможно). Статистика популярных разрешений это подтверждает

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

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

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

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

Сначала напишу общие советы исходя из личного опыта.

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

А теперь частное, конкретно для вашей специализации. Учитывая ваш выбор — целевые страницы (landing pages) — я не удивлён)) Насколько я знаю, такие сайты нужны быстро и под ключ, это действительно тот случай, когда клиенту проще за фиксированную сумму сделать всё. Здесь либо вы раздобудете денег и/или времени на изучение смежных технологий, либо начнёте осваивать другую нишу, либо найдёте верстальщика/фирму в помощь. А лучше всё это параллельно делать.
Сядьте в офис на оклад (пусть не самый высокий) с возможностью набираться опыта и фрилансить в свободное время. Когда подтянитесь до более высокого уровня - можно будет уходить в свободное плавание.

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

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

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

Ну написано же по-русски

страница выглядит как глянцевый журнал

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

Любое действие преследует какую-то цель. Для чего вам нужен этот блог? Ответьте сначала на этот вопрос себе, а не смотрите на другие студии. Не надо бездумно копировать других.

Нужен блог просто чтобы делиться чем-то полезным и интересным? Нужен для поискового продвижения? Или блог просто чтобы создать видимость живого сайта с рутиной? От этого и будет зависеть востребованный контент.

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