Решим задачку?

Условие

Захотелось сделать в подарок 404-ую страницу для сайта цветочного магазина.

Показать стилистику

Решение

Естественно, первый же вопрос: «А что должно быть на 404-ой странице?» Как правило, я беру тему сайта и показываю, что все плохо. Если на цветочном сайте на 404-ой красивый букет — то какая же это ошибка? Цветам должно быть ой как не хорошо!

Начинаем искать картинку. Требования такие: однотонный фон и чтобы цветок / букет / ваза были целиком. Первый запрос: «bad flower» (плохой цветок).

Как-то грустно. Вот только на третьей странице взгляд зацепился за розу на белом фоне:

Ну такое… Очевидно, проблема в запросе. Надо поискать засохшие цветы — смотрим в переводчике и ищем дальше:

Первая фоточка вроде ниче:

Попробуем! Яндекс нам рекомендует делать вот так:

Океюшки, делаем:

Вроде и норм, но что-то смущает… Есть такая поговорка у дизайнеров: «Если тебе самому не нравится, не посылай заказчику!» Как-то слишком много «мертвечины» что ли…

Продолжаем искать. На той же странице есть еще одна подходящая картинка: необрезанное фото цветов в вазе на однотонном фоне:

Да, однозначно подходит!

Для начала изменим слишком официальный текст на более дружелюбный и веселый. А так же подтюним отступы: 120 — 60 — 60 — 200 между лого, текстами, кнопкой и копирайтом:

Норм…
Но так лучше!

Уберем точку в конце заголовка. А еще хочется куда-нибудь добавить фразу «ошибка 404». На вазе вертикально — в самый раз, вот только…

Что белый текст, что темный — на стеклянной вазе не видно 🙁 Значит, надо что-то сделать с вазой! Например, затемнить:

Мы, конечно же, подняли читабельность белого текста, но убили при этом реалистичность — так себе история. Попробуем сделать наоборот, и за одно уменьшим немного фразу, чтобы не тянула одеяло на себя так сильно (слишком спорит с заголовком):

Нормуль
Но так лучше!

Мне кажется, если вазу нашу отзеркалить, то станет еще лучше: цветы будут смотреть в центр страницы и лучше обтекать текст:

Другое дело!

Мммм-мм-м. Словил себя на мысли, что текст на вазе ровно по центру — по-дилетантски как-то. Давай-ка подчеркнем объем у вазы!

Кайфец!

Не дает покоя последняя деталь: ширина логотипа конфликтует с шириной кнопки. Не знаю, как остальных, а меня прям подбешивает, что они одинакового цвета и одинаковой формы (а других таких элементов на странице нет), и при этом отличаются «немного-много». Если бы они отличались парой пикселей, это не бросалось бы в глаза, скорее всего. Либо будь они слишком разного размера — тоже было бы ок. А когда два одинаковых элемента отличаются несильно — это сильно заметно и бесит 🙂

Попробуем сделать одинаковой ширины:

Не, логотип начал орать на заголовок. Нам такая история не нужна. Лучше сделаем его в два раза меньше кнопки:

Отлично! Аккуратный логотип и крупный заголовок — то, что надо! Подтюним еще раз отступы сверху вниз: 150 — 150 — 60 — 60 — 150 — 150 и обрадуем заказчика 404-ым подарком!

PS.

А тебе заказчик даже «спасибо» не скажет. Мир так не справедлив 🙂

PPS.

Примерно каждый пятый не благодарит.

PPPS.

Но больше всего радуют те, кто спрашивает: «А 404-ая будет?», не понимая (или даже понимая), что ты уже давно мечтаешь поскорее распрощаться с этим «хорошим человеком» и забыть его проект.

Оставить комментарий

Такая эл. почта уже зарегистрирована. Воспользуйтесь формой входа или введите другую.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.
11 комментариев

Я думал, топ 1 дезигнеру всей руси достаточно пукнуть и сразу получиться красивый дизайн.

А нет, вы просто делаете - смотрите - исправляете ошибки. И так по кругу, пока не получим хороший результат.

Собсна вопросы:

1. Как развить терпение, как у вас? Родиться таким надо? Я бы на вашем месте на 2 попытке сказал бы "И так сойдет" и передал бы дело заказчику.

2. Сколько времени уходит на такие вот правки, мелочи? Долго приходиться задрачивать?

достаточно пукнуть и сразу получиться красивый дизайн

Хочу такую опцию! 🙂

Как развить терпение, как у вас? Родиться таким надо? Я бы на вашем месте на 2 попытке сказал бы «И так сойдет» и передал бы дело заказчику.

Мне просто нравится то, чем я занимаюсь. Ну и я не стесняюсь отказываться от проектов, на которых я просто заработаю денег. Лучше взять другой проект, а кроме оплаты получить еще и жменю хорошего настроения. Например, за последние несколько дней я раз 5-6 писал фразу «Сорри, откажусь» не из-за загрузки.

А когда работа в кайф, тогда и на деталях можно позаморачиваться 🙂

2. Сколько времени уходит на такие вот правки, мелочи? Долго приходиться задрачивать?

Судя по дропбоксу, эту 404-ую сделал за 26 минут и в процессе 9 раз сохранился.

Круто!
Отличный материал.

Ага, рабочие процессы всегда интересно почитать. Кстати хотел спросить хранишь ли ты базу шрифтов(описания, превьюшки, просто которые приглянулись, но пока не пригодились)? Или просто в фш установлены?
PS: дропбокс удобный?

Про шрифты напишу. Написал.

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

Алексей, привет!
Расскажи как настроить дропбокс что бы на автомате туда сохранялось.. или ты каждый раз закидываешь (не думаю) сохраненую версию в папку?

Привет.

Никак не настраиваю. Создал псд в дропбоксе, и каждый раз при сохранении файла (обычные [ctrl] + [S]), появляется его версия в журнале версий.

Спасибо за ответ!
Отличный лайфхак 🙂

Болят глаза от вот этого "ищИте", несколько раз натыкался на это слово в твоих постах

А поиск говорит, что у меня нет такого слова в блоге: