встроенный код на behance
Как дизайнеру сделать свой первый кейс на Behance
Чтобы заявить о себе, дизайнеру не обязательно создавать собственный сайт с портфолио: можно размещать работы на площадках, которые часто посещают клиенты и коллеги, — например, Behance. Недостаточно просто опубликовать красивые картинки — нужно создать полноценный кейс, по которому другие люди смогут оценить вашу способность мыслить и решать дизайнерские задачи.
Как должен выглядеть привлекательный кейс и какие ошибки допускают начинающие специалисты — рассказывает Павел Горшков — UX-дизайнер и руководитель, экс-дизайн-директор Redmadrobot.
На Behance можно просто и сравнительно быстро организовать портфолио, чтобы показать его миру. В первую очередь площадка подходит специалистам, которые работают с визуалом: графические, моушен- и 3D-дизайнеры, иллюстраторы и дизайнеры интерфейсов. Behance помогает найти клиентов, а еще — вдохновиться чужими работами и завести новые знакомства в дизайнерской среде.
Вы лучше других знаете, как и кому презентовать ваши работы, но есть несколько базовых правил составления кейса, которые помогут вашей страничке на Behance выглядеть привлекательнее.
Выбор языка. Behance — международная площадка, поэтому лучше всего вести кейсы на английском языке. Даже если вы хорошо знаете язык, старайтесь использовать Plain English — пишите без сложных конструкций и редких слов, чтобы не носители языка тоже понимали вас. Но если вы не планируете работать с иностранцами, можно обойтись родным языком.
Сбор референсов. Чтобы начать создание портфолио, посмотрите наиболее рейтинговые кейсы других дизайнеров, у которых такая же специализация, что и у вас. Отложите самые хорошие кейсы для подробного изучения и подпишитесь на их авторов, чтобы не пропустить новые работы. Затем проанализируйте, что общего есть у кейсов, которые вам понравились, и чем именно они хороши — это пригодится, когда вы начнёте собирать свой первый кейс.
Кейс должен дать заказчику понять, как вы мыслите и почему выбираете те или иные решения. Чтобы подробно раскрыть эти вопросы, можете пользоваться готовой структурой кейса:
1. Затравка. Яркий открывающий тизер, который привлекает внимание человека, интересует и мотивирует читать кейс дальше. Если есть возможность, укажите ключевую информацию о проекте: например, после редизайна лендинга конверсия выросла на 3%.
2. Вызов. Описание задачи, которая перед вами стояла. Расскажите, зачем заказчик пришёл к вам и к чему это привело, как клиент собирался использовать результат вашей работы и как ваш дизайн должен был решить проблему.
3. Вдохновение и поиск решения. Расскажите, чем вы вдохновлялись в процессе работы и какие принципы заложили в решение задачи. Покажите концепты и кратко опишите ход своих мыслей: как выбирали шрифты и цвета, какой выбрали стиль и почему решили, что он лучше всего решит задачу.
4. Решение. Это основная часть вашего кейса, сделайте её максимально подробной и яркой. Сопроводите слайды описанием, но не переусердствуйте: пользователи Behance читают текст в лучшем случае по диагонали. Следуя традициям сторителлинга, самое сладкое приберегите напоследок, чтобы эффектно закрыть свой рассказ.
5. Результат. Время похвастаться результатами: чего вы добились своим дизайнерским решением и какую пользу оно принесло клиенту. Если клиент поделился цифрами, например рассказал, что клиентов стало на 20% больше, то публикуйте данные только с разрешения клиента.
6. Благодарности. Если работали в команде с другими дизайнерами, напишите имена других участников проекта и поблагодарите читателя за внимание.
Старайтесь описывать кейс ёмко и лаконично: большое количество текста скорее оттолкнет, потому что посетителям Behance важнее всего посмотреть работы дизайнеров.
В портфолио должны быть работы, которые подчёркивают ваш индивидуальный стиль и вызывают гордость лично у вас. Такие работы проще защищать перед клиентом. При этом стоит выкладывать только те работы, которые отражают ваше видение дизайна: для заказчика не должно быть сюрпризов а-ля увидел в портфолио минималистичные кейсы, а получил работу в стиле гранж.
Если вам попадались клиенты, которые запрещают выкладывать работы в портфолио, или сами проекты оказались не очень удачными — не беда.
Для портфолио вы можете создать любой проект, который придёт в голову: например, никто не мешает вам сделать редизайн банковского приложения или создать рекламные материалы для крупного мероприятия. Такие работы называются «фейковыми», и в этом нет ничего плохого. Конечно, «фейковый» дизайн не принесёт денег, но позволит вам продемонстрировать ваши навыки.
Регулярно обновляйте портфолио: убирайте старые, неактуальные работы и добавляйте новые. Если клиент видит, что в портфолио не добавили ни одной работы за год, он может решить, что дизайнер сменил профессию или работает в штате, поэтому к нему нет смысла обращаться. Чем больше качественных работ вы будете выкладывать на Behance, тем выше шанс, что одна из них попадёт на главную страницу с пометкой «Избранное».
Чтобы создавать привлекательные кейсы, нужно развивать одно из самых важных качеств дизайнера — насмотренность. Для этого каждый день заходите в кейсы коллег и черпайте вдохновение. Посещайте разные площадки: Behance, Dribbble, Pinterest и смотрите портфолио известных студий дизайна.
Как использовать API Behance для создания пользовательской веб-страницы с портфолио
Russian (Pусский) translation by AlexBioJS (you can also view the original English article)
Behance – отличное место для творческих людей, где они могут поделиться своими работами и показать их и текущие проекты. В отличие от Dribbble или Forrst, главными пользователями которых преимущественно, как мне кажется, являются художники-иллюстраторы и дизайнеры UI (* user interface – интерфейс пользователя), набор областей творческой деятельности на Behance более широк и включает также архитектуру, анимационный дизайн, автомобильный дизайн и моду. Помимо этого Behance также предоставляет набор API для получения доступа к его контенту.
В этой небольшой серии руководств мы воспользуемся API Behance для создания веб-сайта с личным портфолио (* образцы выполненных работ). Мы фактически получим контент с Behance и отобразим его на нашей отдельной веб-странице. Однако перед тем как рассмотреть создание веб-сайта более подробно, для начала нам необходимо взглянуть на то, как организуется контент на Behance и как работает API.
Изучаем Behance и его API
На Behance контент поделен на модули, а именно: изображения, встроенный контент, видео-, аудио-записи и текст. Полученные при помощи API данные будут содержать не только URL-адреса изображений, но также могли бы содержать URL-адреса видео-, аудио-записей, а также чистый текст (* текст без гиперссылок, информации о форматировании и других встроенных нетекстовых элементов). Отображение всех этих типов контента на нашем веб-сайте, тем не менее, усложнило бы нашу задачу. Поэтому в этом руководстве мы сосредоточимся на только использовании изображений для упрощения нашего кода.
Обратите внимание: для работы с данным руководством вам необходим аккаунт Adobe и портфолио Behance, с которым будете работать. Для достижения целей нашей демоверсии мы будем использовать великолепное портфолио Майка «Creativemints», который любезно разрешил нам воспользоваться его работой в этом случае.
Вкладка для редактирования проекта на Behance.
При работе с вашими проектами после закачивания вашего контента Behance предложит вам диалоговое окно для закачивания изображения с эскизом. Это подобно установлению контрольного изображения (* уменьшенная и упрощённая копия графического объекта, а также макета верстаемого документа) в WordPress. Закачиваемое нами туда изображение будет показываться в качестве превью целого проекта. На нашем веб-сайте мы также будем использовать это изображение.
Диалоговое окно для закачивания изображения с эскизом на Behance.
Сразу после выбора изображения с эскизом нам будут предложены опции для заполнения значений некоторых атрибутов, например области творческой деятельности (* Ccreative Fields), тегов и описания контента. Мы не будем переполнять наш веб-сайт слишком большим количеством этих атрибутов. В данном руководстве помимо изображения с эскизом и заголовка мы только добавим значения атрибута области творческой деятельности.
Раздел для указания областей творческой деятельности на Behance.
Ключ для API Behance
Нам необходим уникальный API key/Client ID (* ключ к API / ID (* identifier – идентификатор) клиента) для получения доступа к API Behance. Для того чтобы его получить, посетите Behance Dev, зарегистрируйте ваше приложение и заполните поля Application Name, Website и Description. Поле Redirect URI (для OAuth (* Open Authorization – открытый протокол авторизации, который позволяет предоставить третьей стороне ограниченный доступ к защищённым ресурсам пользователя без необходимости передавать ей (третьей стороне) логин и пароль)) заполнять необязательно, разве что вы хотите добавить в ваше приложение возможность выполнения аутентификации пользователя.
Ключ к API Behance.
После получения API key перейдите на Behance API Endpoints, где будут перечислены все способы получения доступа к API. API Endpoint (* конечная точка) – отдельная функция API, где указывается URL-адрес веб-сервиса..
В этом руководстве нам нужно будет получить доступ к информации о пользователе и его проекты. Ниже представлены конечные точки API для запроса данной информации:
Получение информации о пользователе
Информация о пользователе включает в себя ID пользователя, имя, расположение пользователя, URL-адрес, URL-адрес аватара пользователя и еще некоторые данные.
Получение проектов пользователя
Получение контента проекта
Поскольку доступ к API Behance осуществляется через HTTP, мы можем увидеть данные тут же в браузере. Если вы используете Chrome или Firefox, то я бы рекомендовал вам установить плагин для браузера под названием JSONview для просмотра данных в формате JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript) в более удобочитаемом виде.
Просмотр данных в формате JSON при помощи JSONview
Лимит API
Пожалуйста, учтите, что Behance накладывает ограничение на количество выполняемых за 1 час запросов к API – 150. Если выполнено слишком много запросов, то мы начнем получать пустые ответы и не получим никакого контента. Вот как описывается это ограничение в документации:
Количество запросов ограничено 150 в час и подсчитывается на основании публичного IP-адреса (* используется для идентификации узла в сети и для определения информации маршрутизации) сервера или устройства, выполняющего запрос. Если вы превысите норму, то начнете получать пустой ответ с кодом ответа 429 (Слишком много запросов).
Поэтому в этом руководстве мы воспользуемся оффлайн хранилищем HTML5 (* HTML5-хранилищем, Веб-хранилищем) для сохранения данных оффлайн, чтобы минимизировать количество запросов. Вместо того чтобы обращаться к API каждый раз, когда мы загружаем страницу, мы можем получить ее из хранилища. Пожалуйста, ознакомьтесь со следующими статьями для получения более детальной информации об оффлайн хранилище HTML5
План нашего веб-сайта
Перед созданием структуры нашего веб-сайта давайте взглянем на его план.
План нашего веб-сайта
Как вы видите, на нашем веб-сайте имеется три раздела: Заголовок, Контент и Подвал (* Header, Content и Footer). В Заголовке содержатся аватар пользователя, его имя, области творческой деятельности и его местонахождение. В разделе Контент отображается портфолио пользователя, где указаны названия проектов и области творческой деятельности. В Подвале мы добавим логотип Behance, указывая таким образом, что веб-сайт работает на базе API Behance.
Создание структуры сайта и добавление контента
Давайте начнем с создания папки под названием personal-portfolio и файла index.html с базовой разметкой HTML5. В index.html мы подключим следующие библиотеки:
jQuery
Сегодня имеется две версии jQuery: 1.x и 2.x. Версия 1.x предназначена для поддержки более старых браузеров, а именно Internet Explorer 8 и и более ранних версий, в то время как версия 2.x ориентирована на более современные браузеры. Мы предположим, что живем сейчас в мире, где все используют современные браузеры (может я и ошибаюсь). Так что в данном руководстве мы можем с уверенностью использовать jQuery 2.x.
Handlebars.js
Handlebars – замечательный шаблонизатор (* программное обеспечение для комбинирования шаблонов с моделью данных для получения конечных документов), работающий на основе JavaScript. В данном руководстве мы будем использовать Handlebars для создания шаблона для отображения данных, полученных при помощи API Behance. На Tuts+ имеется два скринкаста (* цифровой файл, в котором хранится последовательность изображений с экрана монитора (screen output), зачастую с текстовыми и аудио-подсказками), которые могут помочь войти вам в курс дела:
Если вы еще не работали с Handlebars, мы бы вам рекомендовали тщательно ознакомиться с этими скринкастами или какими-либо другими руководствами, где рассматриваются основы работы с этим шаблонизатором, перед тем как идти далее.
Пожалуйста, обратите внимание, что если для размещения index.html вы используете локальный сервер, то вам необходимо добавить http:// в каждой ссылке, направляющей на CDNJS.com.
Создаем HTML-разметку для разделов
Создаем шаблоны Handlebars
В этом разделе мы создадим шаблоны Handlebars для отображения контента разделов нашего веб-сайта. И мы начнем с шаблона для Заголовка, в котором будут использоваться данные пользователя с конечной точки API со следующим адресом – www.behance.net/v2/users/
Отображаемое имя пользователя в составе данных в формате JSON
Далее мы создадим шаблон для отображения портфолио, и это будет последний шаблон Handlebars, который мы создадим для нашего веб-сайта. Для начала мы создаем новый div с ID portfolio внутри раздела Контент. Мы создаем этот div для оборачивания портфолио на тот случай, если нам будет необходимо добавить в этот раздел дополнительный контент. Далее мы добавляем тег script, в котором будет располагаться шаблон. На данном этапе HTML-разметка нашего портфолио должна выглядеть следующим образом:
Массив проектов, полученный с API Behance
Мы разместим портфолио в неупорядоченном списке. Что же, давайте добавим элемент ul и обернем элемент li при помощи хелпера <<#each>>. <> следующим образом:
Размеры изображения с эскизом
HTML-разметка для Подвала чрезвычайно проста. Мы добавим два тега р: в одном будет располагаться фраза «Powered by» (* «Работает на базе»), а в другом – ссылка на Behance. Мы добавляем класс fi-social-behance в теге а для отображения логотипа Behance из шрифтового набора иконок Foundation Icon Fonts.
На данном этапе мы завершили создание разметки HTML для контента нашего веб-сайта. Однако если мы откроем файл с ней в браузере, то ничего пока что не увидим! Это так, поскольку нам необходимо выполнить запрос к API и затем скомпилировать данные вместе с шаблоном Handlebars.
Вызов API Behance и компиляция шаблона
Давайте создадим тег script для размещения нашего кода JavaScript. Также мы создадим две переменные, в которых будут размещаться ключ к API Behance и ID пользователя. Как было упомянуто ранее, мы будем использовать портфолио «Creativemints».
Под этими двумя переменными мы добавляем следующую функцию. За счет этой функции будет вызвана конечная точка API Behance для получения данных пользователя и скомпилирован шаблон Handlebars для заголовка.
Несколько слов о sessionStorage
В sessionStorage, однако, могут храниться данные только в форме строки или чистого текста. Поэтому, как вы видите в вышеупомянутой функции, мы воспользовались JSON.stringify(); для преобразования данных в форме JSON-объекта в строку перед их сохранением в sessionStorage. Затем мы будем извлекать данные при помощи JSON.parse() для обратного преобразования данных в объект JSON.
Также вы видите sessionStorage при переходе на вкладку Resources в Chrome DevTools и браузерах, работающих на основе Webkit.
sessionStorage в Chrome DevTools.
Компиляция контента
Теперь в браузере мы уже должны будем увидеть профиль пользователя и портфолио. Однако для них еще не добавлено стилевое оформление.
В следующей части этой серии мы добавим стилевое оформление для контента нашего портфолио, в результате чего получим динамическую и соответствующую требованиям отзывчивого веб-дизайна веб-страницу. Тогда и увидимся!
Делаем смену изображения по ховеру на behance
Плюсы : что-то новенькое в вашем портфолио, можно «оживить» кейс
Минусы: пока получилось сделать рабочую версию только для десктопа.
(P.S. Если вы знаете, как сделать для мобайла, напишите в комментарии, буду благодарна🙏🏻)
Летом проходила курс по композиции от науки дизайна, и работы решила как-то оформить. Потом подумала, что просто сделать кусочки фреймов будет скучно и непонятно, хотелось добавить интерактива, так появилось изменение изображения по ховеру и верстка.
Верстку делала в codepen, сам ховер делается за пару строчек в CSS:
Когда все готово, нажимаем в codepen кнопку «embed». В окне настроек выбираем тему (тему можно настроить в расширенной версии так, что не будет видно полей), затем нужно убедиться, что нажат только «Result», затем выбираем «iframe» и копируем, все что внизу.
Теперь осталось только вставить.
На behance тоже есть кнопка «Embed», нажимаем, вставляем. Дальше, скорее всего, нужно будет подогнать высоту под необходимый размер.
Готово. А результат можно глянуть тут 🙂
| Теперь осталось только вставить.
Ну, принцип понятен, а как сверстать проект можно нагуглить 🙂
Интересная фишка, спасибо!
Директор по логистике ПГК Михаил Петров рассказал о том, почему логисты должны быть профессиональными коммуникаторами и «жадинами».
Помните, в апреле в Санкт-Петербурге сгорела Невская Мануфактура? В моём прошлом посте задали несколько вопросов о том, не сгорели ли мы тоже. Отвечу честно. Всё время, пока мы с коллегами стояли в пятидесяти метрах от пылающего соседнего корпуса, была лишь одна мысль: «возможно, мы следующие».
Согласно опросу сервиса «Работа.ру» четверть работающих россиян хотели бы всегда трудиться из дома.
Компания перенесла размещение из-за «рыночных условий».
Хочу написать о работе отдела урегулирования убытков в АльфаСтраховании.
Все проекты, попадающие к нам в ТИМ, сталкиваются с ними…хештегами! Команды вместе со своими кураторами креативят, как могут: здесь вам и #ясамсебяпосчитал (ну а действительно, кто, если не ты сам), #идунадемодейнамвместевеселей (с такой-то компанией как может быть иначе?) и #ямолодец (потому что кто, если не я?).
Действительно, а как выучить английский? Спойлер — никак. А вот овладеть языком вполне реально. Сегодня расскажем, как это сделать.
В базе есть данные 795 тысяч россиян.
Как не имея релевантного опыта перейти в Data Science из другой сферы? Какие инструменты могут помочь развить новые профессиональные навыки и какой стратегии лучше придерживаться в обучении, рассказал специалист по анализу данных и машинному обучению Первой грузовой компании Павел Куницын. Подготовили топ-5 основных правил от нашего коллеги.