Задачка про 404-ый цветок
Решим задачку?
Условие
Захотелось сделать в подарок 404-ую страницу для сайта цветочного магазина.
Решение
Естественно, первый же вопрос: «А что должно быть на 404-ой странице?» Как правило, я беру тему сайта и показываю, что все плохо. Если на цветочном сайте на 404-ой красивый букет — то какая же это ошибка? Цветам должно быть ой как не хорошо!
Начинаем искать картинку. Требования такие: однотонный фон и чтобы цветок / букет / ваза были целиком. Первый запрос: «bad flower» (плохой цветок).
Как-то грустно. Вот только на третьей странице взгляд зацепился за розу на белом фоне:
Ну такое… Очевидно, проблема в запросе. Надо поискать засохшие цветы — смотрим в переводчике и ищем дальше:
Вроде и норм, но что-то смущает… Есть такая поговорка у дизайнеров: «Если тебе самому не нравится, не посылай заказчику!» Как-то слишком много «мертвечины» что ли…
Продолжаем искать. На той же странице есть еще одна подходящая картинка: необрезанное фото цветов в вазе на однотонном фоне:
Да, однозначно подходит!
Для начала изменим слишком официальный текст на более дружелюбный и веселый. А так же подтюним отступы: 120 — 60 — 60 — 200 между лого, текстами, кнопкой и копирайтом:
Уберем точку в конце заголовка. А еще хочется куда-нибудь добавить фразу «ошибка 404». На вазе вертикально — в самый раз, вот только…
Что белый текст, что темный — на стеклянной вазе не видно :(Значит, надо что-то сделать с вазой! Например, затемнить:
Мы, конечно же, подняли читабельность белого текста, но убили при этом реалистичность — так себе история. Попробуем сделать наоборот, и за одно уменьшим немного фразу, чтобы не тянула одеяло на себя так сильно (слишком спорит с заголовком):
Мне кажется, если вазу нашу отзеркалить, то станет еще лучше: цветы будут смотреть в центр страницы и лучше обтекать текст:
Другое дело!
Мммм-мм-м. Словил себя на мысли, что текст на вазе ровно по центру — по-дилетантски как-то. Давай-ка подчеркнем объем у вазы!
Кайфец!
Не дает покоя последняя деталь: ширина логотипа конфликтует с шириной кнопки. Не знаю, как остальных, а меня прям подбешивает, что они одинакового цвета и одинаковой формы (а других таких элементов на странице нет), и при этом отличаются «немного-много». Если бы они отличались парой пикселей, это не бросалось бы в глаза, скорее всего. Либо будь они слишком разного размера — тоже было бы ок. А когда два одинаковых элемента отличаются несильно — это сильно заметно и бесит 🙂
Попробуем сделать одинаковой ширины:
Не, логотип начал орать на заголовок. Нам такая история не нужна. Лучше сделаем его в два раза меньше кнопки:
Отлично! Аккуратный логотип и крупный заголовок — то, что надо! Подтюним еще раз отступы сверху вниз: 150 — 150 — 60 — 60 — 150 — 150 и обрадуем заказчика 404-ым подарком!
А тебе заказчик даже «спасибо» не скажет. Мир так не справедлив 🙂
Примерно каждый пятый не благодарит.
Но больше всего радуют те, кто спрашивает: «А 404-ая будет?», не понимая (или даже понимая), что ты уже давно мечтаешь поскорее распрощаться с этим «хорошим человеком» и забыть его проект.
11 комментариев на «“Задачка про 404-ый цветок”»
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Я думал, топ 1 дезигнеру всей руси достаточно пукнуть и сразу получиться красивый дизайн.
А нет, вы просто делаете — смотрите — исправляете ошибки. И так по кругу, пока не получим хороший результат.
Собсна вопросы:
1. Как развить терпение, как у вас? Родиться таким надо? Я бы на вашем месте на 2 попытке сказал бы «И так сойдет» и передал бы дело заказчику.
2. Сколько времени уходит на такие вот правки, мелочи? Долго приходиться задрачивать?
Хочу такую опцию! 🙂
Мне просто нравится то, чем я занимаюсь. Ну и я не стесняюсь отказываться от проектов, на которых я просто заработаю денег. Лучше взять другой проект, а кроме оплаты получить еще и жменю хорошего настроения. Например, за последние несколько дней я раз 5−6 писал фразу «Сорри, откажусь» не из-за загрузки.
А когда работа в кайф, тогда и на деталях можно позаморачиваться 🙂
Судя по дропбоксу, эту 404-ую сделал за 26 минут и в процессе 9 раз сохранился.
https://alexeybychkov.by/wp-content/uploads/2018/07/404_versions.jpg
Круто!
Отличный материал.
Ага, рабочие процессы всегда интересно почитать. Кстати хотел спросить хранишь ли ты базу шрифтов (описания, превьюшки, просто которые приглянулись, но пока не пригодились)? Или просто в фш установлены?
PS: дропбокс удобный?
Про шрифты напишу. Написал.
Дропбоксом уже несколько лет пользуюсь. Дал заказчику ссылку в начале проекта и он по ней смотрит все правки и новые превьюшки,т. е. не надо все время ссылками кидаться. Ну и журнал версий — незаменимая вещь.
Алексей, привет!
Расскажи как настроить дропбокс что бы на автомате туда сохранялось. или ты каждый раз закидываешь (не думаю) сохраненую версию в папку?
Привет.
Никак не настраиваю. Создал псд в дропбоксе, и каждый раз при сохранении файла (обычные [ctrl] + [S]), появляется его версия в журнале версий.
Спасибо за ответ!
Отличный лайфхак 🙂
Пожалуйста 🙂
Болят глаза от вот этого «ищИте», несколько раз натыкался на это слово в твоих постах
А поиск говорит, что у меня нет такого слова в блоге:
https://alexeybychkov.by/wp-content/uploads/2018/07/search.jpg