EDM-framework

229 views

Published on

  • Be the first to comment

  • Be the first to like this

EDM-framework

  1. 1. EDM Design Framework Master template Build layout using pre-defined components Why? HEADER FOOTER Less coding = better communication Better visual consistency A blank canvas. It will include master header and footer. This master template should be the foundation of ALL email templates / variation. A handy selection of usable layout components. It’ll be a row based module. Email editor can copy and paste directly to the master template. Content editor can focus more on what message the EDM will deliver to the reader. Less fiddling with HTML markup will empower them to create well crafted EDM. The pre-selected components will drive the layout consistency between all communication pieces. Better consistency = Better user experience. The pre-selected components will be developed and well tested on all devices and screen sizes. Once it’s available for the email editor to use it will be bullert proof. Reducing any possibility of broken layout on multiple browsers and screen sizes. 1 2 Reduce browser/client testing time3 50% 25% 25%
  2. 2. The Components Full bleed width image. Headline is recommended. CTA is optional. 1 HERO IMAGE Best for featuring profile and products. 6 FEATURED LISTING Generic item listing IMAGE + TEXT combo. Best for news item and features story list. 7 ITEM LISTING Container for medium - long paragraph. Sub-heading might be used as well. 2 TEXT BLOCK Clickable image CTA button. 3 CALL TO ACTION BUTTON Quotes and citation. Larger text in italics. 4 QUOTES Full grid image block - variable height. Might be used for video splash screen as well. 5 IMAGE / VIDEO SPLASH CTA CTA Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. A headline goes here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. Lorem ipsum dolor sit amet, consec- tetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque Lorem ipsum dolor sit amet, consec- tetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque Lorem ipsum dolor sit amet, consec- tetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque “ras finibus mi eu metus bibendum, a congue leo facili- sis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate.” - citation
  3. 3. Making it works Validate and craft the content Below are some validation points that email editor should check against the content prior to do any layout / design works. Some examples and BE SPECIFIC! We want the user to click the donate button and give financialy. We want the user to watch the video . We want the user to read a story we prepare for them on My World Vision. The user want to see their impact on what they give during last campaign. The user want to login to My World Vision. The user just want to have a ‘feel good’ reading time. To improve retention by communicating impact on their previous donations. To get as many single donation as possible within first month of campaign. To get as many sign-up as possible. “You always ask me for more money” “Signing up process is too time consuming - don’t like it!” “You always say the same thing on your newsletter - BORING!” 1 Choose the BEST layout components to communicate the message. Based on the ESSENTIAL communcation points that the content editor pulled from the brief, they then should pick the most suitable layout to support the communcation. Stay true and be signle minded! Too many goals will make your EDM rotten and achieve nothing. Story telling / newsletter Campaign - financial ask Communicating impact / video 2 WHAT IS THE BUSINESS GOAL? IS THERE ANY USER HESITATIONS / FEARS / BLOCKERS? WHAT IS THE USER MOTIVATION? WHAT IS THE ACTION THAT WE WANT THE USER TO DO? “Elegant interfaces are ones that have the most impact with the least elements.” Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. CTA A headline goes here CTA Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in arcu eget nunc congue semper vel quis orci. Vivamus arcu eros, scelerisque vel est eu, vestibulum placerat mi. Donec lobortis, nisi et porta ornare, urna leo accumsan risus, vel ultrices odio odio a sapien. Integer laoreet magna sit amet imperdiet cursus. Donec ultricies risus id diam ornare mattis. Cras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate. “ras finibus mi eu metus bibendum, a congue leo facilisis. Donec finibus arcu sapien, convallis molestie nunc iaculis eget. Ut placerat velit et scelerisque vulputate.”

×