7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Inspiration

Примеры писем на HTML, которые стоят того, чтобы их открыть

Scroll to top
Read Time: 3 mins
This post is part of a series called Weeks of Web Design Inspiration.
Big Smiles and Happy Faces in Web Design
15+ Tools for Building Your Portfolio on the Web

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

На этот неделе я занимался дизайном e-mail, так что я в первую очередь плотно занялся их дизайном. С таким количеством вещей, из которых можно почерпнуть вдохновение, я собрал небольшую подборку с примерами писем, которые отлично справляются со своей задачей

Стиль

Мой личный вкус говорит, что дизайн с большим количеством свободного места всегда будет популярен. Вот вам Death to Stock со шрифтом Courier, спокойными цветами и большим количеством свободного места.

Вот вам еще моноширинных шрифтом, с notanotherbill.com. Они возвращают ко временам печатных машинок, пороха и маслянистых джентельменских бород:

Eventbrite знают как использовать цвета и пробелы; вот одна из версий их e-mail рассылки:

Другой пример e-mail с большим количеством свободного пространства от Wistia, обращающий внимание на один пост из блога. Этот включает в себя gif анимацию, для дополнительной концентрации внимания. Единственное, мне кажется немного неуместной линия, которая разделяет экран:

Понятные Call to Action

E-mail рассылки обычно открывают не более 20% пользователей, переходят же по ним не более 2-3%. Оттого нужно ставить фокус на call to action; упростите, переходите сразу к сути и убедитесь, что пользователи понимают, что их ждет по ту сторону клика.

Промо-письма от Typecast со всего лишь двумя-тремя кликабельными элементами направляют пользователя куда нужно максимально эффективно:

Apple не переживает об окончании подписки пользователей на свои сервисы; этот CTA требует внимания:

Digest

Заставить пользователей прочитать письмо непросто, так что убедить их прочитать его полностью действительно тяжело. Я люблю рассылки от themoderndesk.com за четкие презентации, подходящие картинки и списки содержания, которые дают мне четко понять, чего ожидать от дальнейшего чтения такого письма.

Издание The New York Times смело помещает колонку редактора в самый центр; если вы пришли не за контентом, то можете смело уходить.

Color

Надо быть заботящимся, стойким, цветным (если это нужно). Красочные превью, четкие белые контейнеры для текста, смешанные с выбивающим напрочь желтым фоном прекрасно работают для Bezar (ныне AHAlife), маркет для вдохновения творческими вещами.

MailChimp  отлично справляется со своей рассылкой – вот цветное напоминание об их инструменте для A/B тестирования.

Контрастные цвета, крутые углы, конфликтующие текстуры и толстый шрифт. Этого и ожидаешь от London’s Design Museum, это отлично подхоит под эстетику их веб-сайта

Мы говорили о Spotify и их очень цветном дизайне ранее, но это также относится и к их прямому маркетингу. Вот пример месячной давности. Здесь используется текст-картинка, так что это не очень доступно (и я не представляю, где можно найти полную текстовую версию), но эстетика – это главное в этом случае.

Email шаблоны на Envato Market

Тут стоит упомянуть о шаблонах, которые вы можете найти на Envato Market. Вот вам несколько шаблонов email.

Viso - Responsive Email Builder OnlineViso - Responsive Email Builder OnlineViso - Responsive Email Builder Online
Viso - Responsive Email + Builder Online
Notify - Notification Email Themebuilder AccessNotify - Notification Email Themebuilder AccessNotify - Notification Email Themebuilder Access
Notify - Notification Email + Themebuilder Access
Market - Responsive Newsletter with Template BuilderMarket - Responsive Newsletter with Template BuilderMarket - Responsive Newsletter with Template Builder
Market - Responsive Newsletter with Template Builder
Moka - Responsive Email and Newsletter TemplateMoka - Responsive Email and Newsletter TemplateMoka - Responsive Email and Newsletter Template
Moka - Responsive Email and Newsletter Template

Дальнейшее чтение

Теперь когда вы вдохновлены, посмотрите также на эти уроки от одних из лучших умов индустрии, а затем приступайте к верстве вашего email!

Еще вдохновения:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.