Кейс редизайна до и после
Покажите одну видимую правку сайта на двух сопоставимых снимках. Одинаковые фрагмент, ширина и масштаб помогут заказчику увидеть, что вы изменили и какую задачу решали. Готовые кадры автор собирает в кейс ELL вручную.
Задача
Условный пример
Учебная ситуация для объяснения сценария.
До
Вымышленная учебная ситуация: дизайнер переделывает карточку инструмента для проката. В исходном макете суточная цена указана рядом с товаром, а залог — только на странице правил. Для портфолио выбраны старая главная и увеличенный новый фрагмент карточки. Они не позволяют проследить перенос условия.
После
Автор вручную готовит два снимка одной карточки с тем же товаром, шириной и масштабом. В новом блоке сумма залога стоит рядом с суточной ценой; отметки «До» и «После» включены в файлы. Пример общего описания: «Учебный редизайн карточки проката. Задача — показать залог там, где посетитель видит цену. Мой вклад — структура и оформление блока стоимости. В паре одинаковые товар, ширина и масштаб. После правки залог виден в карточке рядом с суточной ценой. Это учебный макет; влияние на обращения не измерялось.» Получатель видит конкретную правку и её границу.
Порядок действий
- Выберите одну правку и один участок сайта. Снимите исходное и новое состояния вручную при одинаковых ширине и масштабе, с тем же текстом и границами фрагмента. Включите отметки «До» и «После» в файлы; дополнительную деталь подготовьте такой же сопоставимой парой. Отберите до шести JPG, PNG или WebP, до 12 МБ на файл по подсказке редактора. Согласуйте показ клиентских материалов.
- Войдите в ELL и заполните «Об авторе»: публичное имя, специализацию и нужные контакты. Нажмите «Сохранить профиль» и дождитесь подтверждения; для существующего профиля сохраните изменения, если они были. Проверьте доступный лимит работ, затем откройте «Добавить работу», выберите «Тип работы» — «Дизайн» и способ «Скриншоты».
- Назовите кейс по видимой правке, например «Учебный редизайн карточки проката». В едином поле «О задаче и результате» за 800 символов объясните проблему, решение, свою роль и стадию проекта. Добавьте подготовленные кадры и стрелками расположите каждый исходный перед соответствующим новым. Отдельные подписи состояния оставьте внутри файлов.
- Нажмите «Сохранить работу» и дождитесь окончания загрузки. В предпросмотре проверьте порядок пары, читаемость отметок и сохранение сопоставимого масштаба; изображения могут уменьшаться и перекодироваться. Перед передачей ссылки отдельно проверьте видимость кейса, доступ к профилю и одобрение портфолио. По снимкам описывайте видимую правку; деловые результаты требуют своих данных.
Проверить перед завершением
- В паре один фрагмент с тем же содержанием, шириной и масштабом.
- Отметки «До» и «После» включены в изображения и читаются после сохранения.
- Описание объясняет конкретную правку, личную роль и стадию.
- Пара стоит в нужном порядке; дополнительных изображений не больше шести.
- Проверены разрешение на показ, видимость работы и доступ к портфолио.
Ограничения и условия
Вопросы и ответы
Чем этот кейс отличается от набора экранов?
Здесь сравнивают два состояния одного и того же участка: например, условие проката рядом с ценой. Набор экранов показывает разные части проекта или ход действия. Выберите один вопрос сравнения и подготовьте кадры, по которым видна именно эта правка.
Будет ли автоматическое сравнение до и после?
Пара показывается как подготовленные автором изображения в галерее. Для сопоставления вы сами задаёте ширину, масштаб, обрезку и отметки внутри файлов. Отдельного слайдера сравнения этот сценарий не создаёт.
Как обозначить состояния без отдельных подписей?
Включите короткие отметки «До» и «После» в сами файлы до загрузки, затем расставьте изображения по порядку. В общем описании до 800 символов назовите задачу, решение, свой вклад и статус. Специальных подписей к каждому файлу здесь не требуется.
Можно ли назвать правку успешной по двум кадрам?
По снимкам можно показать видимое изменение: например, залог теперь указан рядом с ценой. Если влияние на обращения или продажи не измерялось, опишите только это изменение. Учебный макет обозначьте как учебный; наблюдения о работе сайта приводите по отдельным проверкам.
Покажите правку, которую можно разобрать
Начните с одной сопоставимой пары и короткого объяснения решения. Проверьте порядок и читаемость после сохранения, затем доступ к странице перед передачей ссылки.
Оформить кейс редизайна