| design workflow
| design workflow
| contents 2. Introduction 4. File Folder Structure
A look into filing conventions on design projects.
6. Design Workflow
The process from concept to completion.
8. Phase 1
9. Phase 2
10. Phase 3
11. Phase 4
12. Phase 5
13. Phase 6
14. Phase 7
15. Phase 8
Quality Checks/Documentation.
Quality Checks/Documentation. Quality Checks/Documentation. Quality Checks/Documentation. Quality Checks/Documentation. Quality Checks/Documentation. Quality Checks/Documentation. Quality Checks/Documentation.
16. Design Resource
A living document outlining design procedures.
| design workflow
1
| introduction Branding: Defined by Process Your brand is your process from beginning to end. It is the promise you make to your client as you build a working relationship together.
2
| design workflow
| the process
| file folder structure A look into filing conventions on design projects. | internal files A folder structure consisting of internal company documentation and assets. Logo
Archive of all orientations and versions of company logos.
Brand Standards
Internal company brand standards document.
Letterhead
Template document for duplication and use.
Print Estimate Request
Project Quote
Design Resource
Template document for duplication and use. Template document for duplication and use. A living document with important design,production,vendor, login and password information.
Media
Assets used specifically for internal company branding.
Images Audio Video
Stock
Library of stock assets for client projects.
Images Audio Video
| client files A folder structure consisting of client documentation and assets. {Client}
Brand Standards Logo Images
4
| design workflow
| 14_{XXXX} {client} A folder structure consisting of project documentation and assets.
Client Assets
A folder structure to house all assets sent from a client, specific to a project.
Images Copy Mailing
Creative Brief
A folder structure that houses specs, proposals, and pricing for a specific project. CreativeBrief_v1.docx Estimates Working
Creative
A folder structure to house creative development files for a project.
{Designer Name}
Creative.indd Working Images Copy Mailing
Final
A folder to house final art and files that will be archived.
Current Date
FinalCreative.indd Links Fonts
| design workflow
5
| design workflow The process from concept to completion. The graphic to the right is an infographic showing the life of a project in 8 phases. Each phase of a project is completed by the agency. The supervisor (shown to the right of a corresponding bullet) approves that a phase has been completed correctly. If there is an opportunity that does not require certain areas of expertise, like marketing, to be addressed in a project that phase is skipped so long as the supervisor(s) responsible agrees.*
| phase 1 Account Executive identifies client need.
| phase 2 Marketing Director, Design/Creative Director, and/or Technology Director determines approach to solve client need.
| phase 3 Marketing Director, Design/Creative Director, Technology Director, and/or Estimator submit quotes to the Account Executive and a job number is opened.
| phase 4 Marketing Director and Design/Creative Director develop a marketing strategy and/or creative brief. Marketing strategy is submitted to Account Executive.
| phase 5 Design/Creative Director seeks approval of design production feasibility through Press Director/Pre-Press Director, Technology Director, and/or outside vendors. Specs are submitted to Estimator for additional/ updated pricing.
| phase 6 Design/Creative Director oversees and approves creative design.
| phase 7 Design/Creative Director, Marketing Director, Technology Director, and Account Executive review/edit/ present art and/or provide any additional/updated pricing for printing, mailing, technology services, etc. from the Estimator.
| phase 8 Upon client approval, all departments produce art/job while oversight is provided by the Account Executive.
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
6
| design workflow
1.
2.
3.
4.
5.
6.
7.
8.
| account executive Customer Service Representative
| marketing director | design/creative director Copy Writer Senior Art Director
| pre-press director Graphic Design
| press director Press Operator
| technology director Web Developer
| estimator
| mailing
| design workflow
7
1.
| phase 1 2.
3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
Account Executive identifies client need.*
Account Executive*
| account executive Customer Service Representative
Documentation - New Client Contact - Application for Credit - Credit Card Authorization
| marketing director | design/creative director Copy Writer Senior Art Director
| pre-press director Graphic Design
| press director Press Operator
| technology director Web Developer
| estimator
| mailing
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
8
| design workflow
6.
1.
| phase 2 2.
3.
4.
5.
6.
7.
8.
1.
2.
3.
4.
5.
6.
7.
Marketing Director, Design/Creative Director, and/or Technology Director determines approach to solve client need.* | account executive Customer Service Representative
Marketing Director* Documentation - Project Proposal
Creative/Design Director* Documentation - Project Proposal
| marketing director
Technology Director*
| design/creative director
Documentation - Project Proposal
Copy Writer Senior Art Director
| pre-press director Graphic Design
| press director Press Operator
| technology director Web Developer
| estimator
| mailing
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
| design workflow
9
1.
| phase 3 2.
3.
4.
5.
6.
7.
8. 1.
Marketing Director, Design/Creative Director, Technology Director, and/or Estimator submit quotes to the Account Executive and a job number is opened.*
2.
3.
4.
5.
6.
7.
| account executive Customer Service Representative
Marketing Director* Documentation - Project Quote
Creative/Design Director* Documentation - Project Quote
Technology Director*
| marketing director | design/creative director Copy Writer
Documentation - Project Quote
Senior Art Director
Estimator* Documentation - Project Quote
| pre-press director Graphic Design
| press director Press Operator
| technology director Web Developer
| estimator
| mailing
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
10
| design workflow
8.
1.
| phase 4 2.
3.
4.
5.
6.
7.
1.
8. 2.
Marketing Director and Design/Creative Director develop a marketing strategy and/or creative brief. Marketing strategy is submitted to Account Executive.*
3.
4.
5.
6.
7.
8.
| account executive Customer Service Representative
Account Executive* Quality Checks - Marketing Director - Design/Creative Director
Marketing Director*
| marketing director
Documentation - Marketing Strategy
| design/creative director Copy Writer
Design/Creative Director*
Senior Art Director
Documentation - Creative Brief
| pre-press director Graphic Design
| press director Press Operator
| technology director Web Developer
| estimator
| mailing
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
| design workflow
11
1.
| phase 5 2.
3.
4.
5.
6. 1.
7. 2.
8. 3.
Design/Creative Director seeks approval of design production feasibility through Press Director/Pre-Press Director, Technology Director, and/or outside vendors. Specs are submitted to Estimator for additional/updated pricing.*
4.
5.
6.
7.
8.
| account executive Customer Service Representative
Design/Creative Director* Documentation - Print Estimate Request
Pre-Press Director*
| marketing director
Quality Checks - Design/Creative Director
| design/creative director Copy Writer
Press Director*
Senior Art Director
Quality Checks - Design/Creative Director
Technology Director* Quality Checks - Design/Creative Director
| pre-press director Graphic Design
Estimator* Documentation - Project Quote
| press director Press Operator
| technology director Web Developer
| estimator
| mailing
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
12
| design workflow
1.
| phase 6 2.
3.
4.
5. 1. 6. 2. 7. 3.
8. 4.
5.
6.
7.
8.
Design/Creative Director oversees and approves creative design*
Design/Creative Director*
| account executive
|a
Customer Service Representative
Quality Checks - Pre-Press Director - Technology Director
Pre-Press Director* Quality Checks - Design/Creative Director
| marketing director
|m
Technology Director*
| design/creative director
|d
Copy Writer
Quality Checks - Design/Creative Director
Senior Art Director
| pre-press director
|p
Graphic Design
| press director
|p
Press Operator
| technology director
|t
Web Developer
| estimator
|e
| mailing
|m
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
| design workflow
13
1.
| phase 7 2.
3.
4. 1.
5. 2. 6. 3.
7. 4.
8. 5.
Design/Creative Director, Marketing Director, Technology Director, and Account Executive review/edit/present art and/or provide any additional/updated pricing for printing, mailing, technology services, etc. from the Estimator.*
6.
7.
8.
| account executive Customer Service Representative
| account
Cust Rep
Account Executive* Quality Checks - Marketing Director - Design/Creative Director - Technology Director - Estimator
Marketing Director*
| marketing director
| marketin
| design/creative director| design/c
Documentation - Deliverable Files
Copy Writer
Cop
Senior Art Director
Seni
Design/Creative Director* Documentation - Deliverable Files
| pre-press director Graphic Design
Technology Director*
| pre-pres
Grap
Documentation - Deliverable Files
Estimator*
| press director Press Operator
Documentation - Additional/Updated Project Quote
| technology director Web Developer
| design workflow
Pres
| technolo
Web
| estimator
| estimato
| mailing
| mailing
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
14
| press di
1.
| phase 8 2.
3. 1.
4. 2.
5. 3.
6. 4.
7. 5.
8.6.
7.
8.
Upon client approval, all departments produce art/job while oversight is provided by the Account Executive.*
| account executive | account executi Customer Service Representative
Account Executive* Quality Checks - Marketing Director - Design/Creative Director - Pre-Press Director - Technology Director - Mailing Documentation - Purchase Order - Invoice
Customer Serv Representative
| marketing director | marketing direct | design/creative| director design/creative Copy Writer
Copy Writer
Senior Art Director Senior Art Dire
| pre-press director | pre-press direct Graphic Design
Graphic Design
| press director | press director Press Operator
Press Operato
| technology director | technology dire Web Developer
Web Develope
| estimator
| estimator
| mailing
| mailing
*Departments involved in project should traffic check only. i.e. If the project does not utilize mailing services, there is no need to have Mailing traffic.
| design workflow
15
| design resource document A living document outlining design procedures. This is a living document and should be updated upon the completion of a design based on new project specifications.
| installing print presets 1. Download printer preset files named, Digital.joboptions, Offset.joboptions, and LargeFormat.joboptions. 2. Copy and paste your files into the following path, Mac > Library > Application Support > Adobe > Adobe PDF > Settings 3. When exporting all files as PDF’s for print, these three options will now be accessible in your PDF Presets drop down menu.
| print file prep for export to prepress Before exporting any files for print, the following items must be confirmed.
1. Designs should be exported as print-ready on a flat sheet. For example, if the design is going to be a spiral bound menu, convert it to single pages, if it is spreads just leave it as-is. 2. Check that all links are at 300 DPI and at least 300 DPI in effective DPI. 3. Confirm that all images are in CMYK. 4. Confirm that all color swatches are in CMYK unless dielines or Pantone spot colors are used. 5. Open all original EPS and AI files and resave them as CMYK. 6. Make sure that documents with bleeds actually have a 0.125" bleed all around and that the artwork’s margins reach those bleeds.
| designing and exporting dielines for prepress Standard Dielines
1. Create or open the dieline file in Illustrator. If dielines are provided, make sure that they are symmetrical and centered in the file. Always check that a dieline provided to you by a vendor is built properly. 2. Drag the artwork from Illustrator to the appropriate area of your InDesign file. 3. Color the stokes of the dieline with a spot color that will best contrast with the background they rest on. If you are unsure, look at the CMYK color codes of the background colors and choose the best color below:
16
DieLine_Black = 0/0/0/100 DieLine_Cyan = 100/0/0/0 DieLine_Magenta = 0/100/0/0 DieLine_Yellow = 0/0/100/0
| design workflow
4. Click on the dieline and, in InDesign, go to Window > Output > Attributes > Check the Over Print Stroke Box 5. Make sure that the dieline is on a printable layer and that the name of the layer is on is exactly the same name as above. For example, DieLine_Black. 6. Export PDF in 2 sets. One Set with the dieline marks, and the other set without the dieline marks. Each file from these sets should be optimized with the Offset, Digital, or LargeFormat settings. Mimaki CAD Cutter Dielines
1. Create the dieline file in either InDesign or Illustrator. Make sure that all colors used in the dieline adhere to the color names and values outlined in Step 3 of the Designing and Exporting Dielines for Prepress Standard Dielines section. 2. Follow Step 5 in the Designing and Exporting Dielines for Prepress Standard Dielines section. 3. Bring the newly created dieline into Illustrator and make sure the new Illustrator document size is equivalent to the size of the artboard of the InDesign document itself. 4. Next, add another 0.5" margin around the entire document’s artboard in Illustrator. 5. On a separate layer called Mimaki, draw a thin trim dieline around the entire circumference of the art board. 6. Next put the fold and trim marks from the dieline on their own layers, call one Fold and one Trim in the AI file. 7.
In the InDesign document, check that the bleed in this document is 0.5" and that a new layer is created called Mimaki. Draw a thin box around the bleed edge of the document in the chosen spot color for the dieline. On the thin box apply the Over Print Stroke setting by going to Window > Output > Attributes > Check the Over Print Stroke Box
8. Place the Illustrator file that was just created into the design, on it’s own layer named exactly the same as your dieline’s spot color. For example, DieLine_Magenta. Confirm that all spot colors have imported from Illustrator correctly. 9.
Export PDF in 2 sets. One set with the dieline and Mimaki marks, and the other set without dieline and Mimaki marks. These sets should be optimized with the Offset, Digital, and LargeFormat settings. Make sure that when generating the PDFs, Use Document Bleed Settings is Checked. This should change the bleeds of the PDF to 0.5" if all steps above have been followed.
| variable data print The following steps are a walkthrough of how to design variable data print and direct mail pieces.
1. With InDesign, develop your file as normal. In places where there are to be type variables, placeholder copy should be placed between <<>> characters. For example, <<FirstName>> <<LastName>>.* 2. Wait until the XLS mail data list is been provided via your mailing department after the list optimization process has completed. 3. Open the provided XLS document in Excell and go to File > Save As… 4. Save the document as a CSV file.
| design workflow
17
5. Next, in InDesign go to Window > Utilities > Data Merge 6. Select the additional drop down in the upper right corner of the pop-up window and choose Select Data Source… 7. Import the CSV file that was just created into InDesign. 8. Data fields from the CSV file will fill the rows in the Data Merge window. 9. With the Type tool in InDesign selected, highlight the variables previously created. For example, <<FirstName>>. 10. While the variable placeholder copy is highlighted, go to the Data Merge pop-up window and select the corresponding Header title from the CSV file that was just imported. 11. Once all data is mapped properly, Check the Preview box on the lower left hand side of the Data Merge window. Live data will then flow into the design dynamically. 12. To make sure that all entries are properly imported click the Left and Right arrows on the lower right side of the Data Merge window. This will show a preview every CSV row in your list. If there any mistakes or changes needed, the original CSV file can be changed in Excell and then updated in InDesign by selecting the Data Merge dialog’s Upper Right Drop Down Menu, and then selecting Update Data Source. 13. Make sure a mailing indicia is placed in the file at 100% in size and it is positioned 0.25" from the top and 0.25" from the right hand margin of the mailing panel. 14. When your variables have been proofed and the file is ready to be exported with all variables intact, go to the Data Merge dialog’s Upper Right Side Drop Down Menu, then select Export to PDF. 15. Confirm that under the Records to Merge page All Records and under the Records Per Document page Single Record is selected. Then hit OK. 16. Finally, export PDFs with the Offset, Digital, and LargeFormat settings. *For any personalized components that have multiple pieces put together in bindery, a very small Sort Order Number should be hidden in all variable design pieces somewhere.The sort number requires an additional column that should be created in the Excell list. For instances where variables are stacked and blanks data fields need to collapse over blank spaces, for example: <<Name1>> <<Name2>> <<Name3>> <<Address>> <<City>>, <<State>> <<Zip>> You first must end the line with a Hard Paragraph Return, then go to theWindow > Utilities > Data Merge dialog box. Next select the Small Drop Down Menu on the Upper Right Corner of the dialog box and choose Content Placement Options… Make sure that Remove Blank Lines for Empty Fields is selected.
18
| design workflow
Troubleshooting Variable Data Issues
1.
Occasionally, removing hyphenation on certain variable placeholders will flow your text in such a way that it kicks type into the next content box, or hides your type completely. To resolve this, try using Soft Paragraph Breaks on sentences that are not variable and Uncheck the Hyphenation selection on only the Variable Placeholders themselves.
2. In Excell lists, make sure that the mailing department treated any plural treatments for Company Names, for example, Palios Design’s in the proper display when the data is mapped to the design. You may have to edit individual cells in the XLS file to achieve the desired results. 3. Make sure that CSV files are displaying all ® symbols and those similar to them, are displayed properly after being re-saved several times over.
| variable data print – linking images This is the workflow used for a PURL campaign for one in need of a print component that utilizes variable imagery.
1. First, the Header section, or row 1 of the Excell list must have ’@ input into the Header Cell for the image name. For example,’@IMAGE. Doing this enables that when you type the @ symbol into a header cell, Excell does not expect a command line in your cell. 2. Place a temporary image from the same folder in which all other variable images reside. 3. Once your test image is placed, click on the image and in the Links panel click on the Fly-Out Menu in the Upper Right Corner and drag to > Copy Info > Copy Full Path 4. Open up Text Edit and paste the path you just copied into the program. 5. Go To Edit > Find > Find and Replace… 6. Find and replace all instances of / with : for Macintosh. If you are on PC leave your / as-is. 7. Copy everything in the path except for the filename and beginning : or /. 8. Go into your Excell spreadsheet under the ’@IMAGE column and in front of all image filenames in each cell, paste the file path you just copied from of the file name. 9. After the last / or : in the file paths placed for each cell, insert the variable filename for the images that should be mapped for your cells until all variable filenames are placed. 10. Save the document as a CSV file. 11. Go to the Data Merge dialog and upload the newly saved CSV file. 12. Click on the variable image box with your test image and delete the test image within, keeping the variable frame around it. 13. Click the variable frame again and while selected Click on the appropriate Data Field in the Data Merge dialog box which will have a picture icon beside it. 14. Once all data has been proofed and confirmed, Export artwork with the Digital, Offset, and LargeFormat settings.
| design workflow
19
| variable data print – multiple record data merge This process is used for a pieces that contain multiple records on one printed sheet such as mailing labels or name tags, to name a few. Generally, an Avery template file or sample will be provided.This process will enable us to design multiple pieces per sheet using the variable data merge feature in InDesign.
1. Layout the InDesign document with Guide Lines showing the margins of the individual pieces on the template sheet prior to them being separated, trimmed, or perforated. The complexity of this step is tied directly to the nature of the Avery template, or other template provided. 2. Design only one of the individual pieces with all the variables needed. Confirm that the same process is followed in both the Variable Data Print and Variable Data Print – Linking Images sections of this Design Resource Document. 3. When you are ready to merge your list data, in the Data Merge palette, and in the Drop Down Menu in the Upper Right Corner select Export to PDF. 4. Under the Records for Document Page section, select Multiple Records and then on the bottom of the dialog box select Preview Multiple Record Layout. 5. Click on the Multiple Record Layout tab. 6. Adjust the margins and column spacing in the dialog boxes according to the guidelines created originally when completing Step 1. 7. Hit OK to export a PDF with the Digital, Offset, or LargeFormat presets as noted Step 6. ***The above steps are for exporting the variable PDF. However, if you need to merge the data into this file and have InDesign automatically flow the data into the InDesign file itself and create multiple pages for the content to fit into the design automatically, do the following.***
1. Go to Step 3 and instead of clicking Export to PDF, click Create Merged Document… 2. Go through the remainder of the steps above and watch as InDesign imports all of the data lists’ content into your working document, enabling further editing later.
| variable data print – mailing indicia* This is the workflow used for a mailing piece.
1. Receive the mailing indicia from the Customer Service Representative (CSR) for the job prior to print. 2. When indicia is submitted to designer, retrieve the correct indicia from the following path, Dam Customer Masters > ALC > Internal Documents > Mailing Indicias 3. Place indicia at 100% and 0.25" from the top and 0.25" from the right side of the mailing panel. *GURLs do not need mailing indicias on them.
| email marketing* 1. Import or build graphics for email in Photoshop, export slices with images and Hyper Text Mark-Up Language (HTML) generated. 2. Bring HTML into Dreamweaver and replace the EmailTemplateCode.html <head> section code into the HTML document <head> section created from Photoshop. 3. Delete all code above the <Doc Type!!> tag and delete all content in the <title> tag.
20
| design workflow
4. Develop inline Cascading Style Sheet (CSS) styles for all elements, make sure that all hex colors are six digits long. For example: color=“#000000”. 5. Upload images to MindFire and relink those using MindFire server path in HTML. 6. Replace all instances of http:// and place https:// in their places. 7. Input alt text for all images. 8. Put the following code on the ThankYou Page just before the closing </body> tag. This code must be housed in a content variable: <script type=“text/javascript”>document.cookie=“JSESSIONID=;expires=Thu, 2 Aug 2001 20:47:11 UTC;path=/”;</script> 9. Input a ViewWebVersion link in the top of the email that leads to a web version of the email. 10. Add to the bottom of the email next to the Unsubscribe link the following copy:
“You’re receiving this email as a valued friend of <<Company Name>>”
11. In the <head> section of the email and in the Global Styles box in MindFire, input the following code: <style type=“text/css”>p { color:#FFFFFF ;} .copyright { display: none !important; color: #FFFFFF !important } </style> 12. Once the email looks correct and has been approved, copy and paste final code in the Pre-Mailer Tool. To access the tool visit:
http://www.scangroup.net/sg-premailer
Once there and before generating your new code, uncheck the boxes labeled Remove Newlines and Remove Tabs.
Finally, copy and paste plain text version of the email generated into MindFire and tweek content as necessary.
13. Create new <meta name=“”> tags for landing pages and web version pages with the following attributes:
<meta name=“viewport” content=“width=device-width, user-scalable=yes”/>
14. Wrap the outer-most table in the design with the following code: <table width=“100%”> <tr> <td align=“center”>
Close the outer-most table with the following code:
</td> </tr> </table>
| design workflow
21
15. Check that all buttons in the design are wrapped in a <div> tag and have a height and width applied to match the exact <img> size of the button. Make sure the <div> tag has a style attribute of display=“block”.
Check that <img> tags for buttons are defined with a width and height attribute Set a style attribute for the <img> tag to apply a background color to the <img> tag itself.
16. Make sure that all Vimeo videos open in a pop-up window. Simply take a screenshot of the Vimeo video, make it an image link and apply the following code: <a href=“https://($VimeoVideo)” onclick=”window.open(‘https://($VimeoVideo)’,’popup’,’width=1024, height=768,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no, left=0,top=0’); return false”> 17. Test the email in Litmus and check for cross-compatibility by checking the Spam Filter Results box in Litmus. 18. For email campaigns with landing pages, test pages in Browser stack. 19. Go into Litmus and generate tracking code using the email address placeholder from MindFire ($prospectEmail). Place the code Litmus generates in your HTML code, just before the </body> tag. 20. Activate tracking code in email through Litmus. 21. Send a test email from MindFire to the Litmus tracking code email that can be found under the Activate Tracking Code to List option. *Make sure that Live Emails are not sent using the Send Test Email option in MindFire. Data response records will not be recorded. If a version of an email blast needs to be generated on the fly, for forwarding purposes, simply copy and paste an existing email from the campaign.
| menu engineering How to properly engineer and design profit-building menus.
1. For every menu item to be feautured in the final piece, subract the cost to create the dish including materials, labor, and overhead from the menu price. 2. Look at all of the menu items and calculate the total number of sales for each menu item annually. Multiply the profit margin of each item by the number of sales annually. Record that number and make a list of highest profit to lowest profit for each menu item.
22
3.
Take a hard look at your lowest profit items. Ask your client, how necessary are these items on the menu? Are they common items such as burgers or chicken fingers that must be on your menu at all times by the expectations of your target demographic? Keeping these factors in mind, eliminate items from the menu that are diverting diners from high profit items and hurting your client’s bottom line.
4.
Split all of your menu items up into categories. For example, appetizers, salads, sandwiches, etc. Each menu category should have 5-9 menu items. With your High Profit Item list, the two highest profit menu items on your list will be featured with a call-out design treatment. The subsequent 2-3 highest profit menu items will be featured as the first, second, and last menu items within their respective menu category.
5.
Next, look at the remaining menu items from your High Profit Item list. Take the high-cost/ low-profit items and position them next to the high-cost/high-profit items. With this placement method, a diner will not be off-put by the high cost of the adjacent menu item at a similar price point.
| design workflow
6.
Sketch a layout of your menu using the Eye Gazing Diagram found in this document. The numbers on this diagram denotes the order in which the eye travels when looking at a menu. Position 1, the position known as the sweet spot, is where your menus most profitable entrée category should be placed. Secondary high-profit menu categories should inhabit the subsequent postion numbers in the Eye Gazing Diagram accordingly.
7.
Remember to write description copy for high-profit items first. Use more copy for high-profit items and less on low-profit items. Make certain that the copy explains the reasons why this item is on the menu, it’s history, or geographic origin. Don’t forget to mention if an item is something that the restaurant is famous for. Make descriptions unique to your restaurant so that the dining experience in your restaurant is more memorable to your diners. Always explain primary and essential ingredients. Leave out ingredients implied in the menu item’s name for low-profit menu items. Tell diners if a dish contains garlic, cilantro, or other strong flavors that may attract or deter customers.
8. When the menu design is finally ready to begin, keep in mind the following rules for designing menus: - Make sure pricing of items omit the $ sign and the type treatment used matches the menu item description copy. Prices should always have 2 Spaces preceding them. - Menu item descriptions should always end with punctuation. - If photography is used, make sure that the photo is labeled with the menu item name. In the menu item listing, make sure that a unique treatment is attributed to menu items that are featured in photos. - Ensure that all instances of & or and do not appear at the end of the menu item description line. This will encourage diners to read the next line of the item’s description. - Never put any non-menu item related marketing promotions on your menu. It distracts from diners choosing the perfect menu item for their meal, potentially jeopardizing the satisfaction of their dining experience. Instead use table tents or other opportunities to drive promotions. 9. Include the following on every page of every menu that offers meat or fish in it’s menu item listing:
Consuming raw or undercooked meats, poultry, seafood, shellfish, or eggs may increase your risk of foodbourne illness.
*See page 42 for the Eye Gazing Diagram.
| design workflow
23
| menu covers A listing of menu covers with their unique properties, followed by the choices that must be made prior to ordering from vendors.
Classic Café Cover/Back: Clear Plastic
Interior Pages: Clear Plastic Catches: None Exterior Corner Protectors: Yes Interior Corner Protectors: Yes
1. 2. 3. 4. 5. 6.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Page Type Choose Corner Protector Style Choose Corner Protector Color
Covered Café Cover/Back: Solid Plastic
Interior Pages: Clear Plastic Catches: None Exterior Corner Protectors: Yes Interior Corner Protectors: Yes
1. 2. 3. 4. 5. 6.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Menu Cover Decoration Choose Page Type Choose Square Corner Protector Color
Royal Café Cover/Back: Solid Board/Vinyl
24
Interior Pages: Clear Plastic or Panels Catches: On Inside Covers/Panels Catch Styles: Corner Exterior Corner Protectors: Yes Interior Corner Protectors: Yes
1. 2. 3. 4. 5. 6. 7.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Menu Cover Decoration Choose Trim Material Choose Page Type Choose Square Corner Protector Color
| design workflow
Pajco
Cover/Back: Faux Leather Interior Pages: Faux Leather Catches: On Inside Covers/Panels Catch Styles: Top or Corner Exterior Corner Protectors: No Interior Corner Protectors: No Alternate Binding Options: Bungee Chord 1. 2. 3. 4. 5. 6.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Menu Cover Decoration Choose Catch Style Choose Alternate Binding Option
Club
Cover/Back: Solid Board/Padded or Non-PaddedVinyl Turned and Stitched Interior Pages: Clear Plastic or Panels Catches: On Inside Covers/Panels Catch Styles: Corner Exterior Corner Protectors: Yes or No Interior Corner Protectors: Yes 1. 2. 3. 4. 5. 6. 7. 8.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Menu Cover Option Choose Menu Cover Decoration Choose Page Type Choose Square Corner Protector Color Choose Square Corner Protector Option
Del Mar
Cover/Back: Solid Board/Padded or Non-PaddedVinyl Turned and Glued Interior Pages: Panels Catches: On Inside Covers/Panels Catch Styles: Top, Side, or Corner Exterior Corner Protectors: No Interior Corner Protectors: No Alternate Binding Options: Screw Post Interior, Screw Post Exterior, or 3-Ring Binding 1. 2. 3. 4. 5. 6. 7. 8. 9.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Menu Cover Option Choose Menu Cover Decoration Choose Panel Material Choose Catch Style Choose Catch Option Choose Alternate Binding Option
| design workflow
25
Corinthian
Cover/Back: Solid Board/Padded or Non-PaddedVinyl Turned and Stitched with French Corners Interior Pages: Silk MoirĂŠ Panels Catches: On Inside Covers/Panels Catch Styles: Top, Side, or Corner Exterior Corner Protectors: No Interior Corner Protectors: No Alternate Binding Options: Screw Post Interior or 3-Ring Binding 1. 2. 3. 4. 5. 6. 7. 8.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Menu Cover Option Choose Menu Cover Decoration Choose Catch Style Choose Catch Option Choose Alternate Binding Option
Bistro
Cover/Back: Solid Board/Padded or Non-PaddedVinyl Glued, Stitched, and Flush-Cut Interior Pages: Clear Plastic or Panels Catches: On Inside Covers/Panels Catch Styles: Top or Corner Exterior Corner Protectors: No Interior Corner Protectors: No Alternate Binding Options: Screw Post Interior 1. 2. 3. 4. 5. 6. 7. 8. 9.
Choose Insert Size Choose Pages &Views Choose Menu Cover Material Choose Menu Cover Option Choose Menu Cover Decoration Choose Interior Pages Type Choose Catch Style Choose Catch Option Choose Alternate Binding Option
| menu360 products Direct Mail Menus Folded Menus and Bound Menus.
1. Scale down the document by 65% for each panel. 2. If there is an odd number of pages, the front and back cover of the piece should have a page that is folded in similar to a trifold brochure flap. This extra page should be 0.125" smaller in width than all other panels in the menu. 3. Initially the document should be arranged as Printer Spreads. 4. Once approved internally, this document will then have to have artwork versioned to a Flat Size, Single Page document for printing. 5. Finally, folds and diecuts should be placed for production as noted in the Designing and Exporting Dielines for Prepress section of this Design Resource Document.
26
| design workflow
Mobile/Web Versioning Standard Version.
1. Export the document from InDesign as a High Quality Print, without crops and bleeds. Resolution should be 72 DPI. 2. Next, bring the file into Acrobat and Save As Reduced PDF… Buy-Up/Interactive Version.
1. In InDesign, erase all pages without menu items and add a Navigation Page as the first leaf in the document. Add all Menu Item Sections to this page, making links out of each section that anchor to their corresponding pages when clicked. 2. On the remaining interior pages of the menu, add Navigation Page buttons that will take the user back to the newly created Navigation Page when clicked. 3. Repeat Step 1 for the StandardVersion of Mobile/WebVersioning section of this Design Resource Document. 4. Repeat Step 2 for the StandardVersion of Mobile/WebVersioning section of this Design Resource Document. 5. Finally in Acrobat, Save As Reduced PDF… Dynamic Email Versioning
1. In MindFire, open a new campaign. 2. Click on Email in the campaign blueprint on the left side of the MindFire interface. Click Create New Email Message and in the From Name field input the ($custom2) MindFire variable placeholder. 3. Under the From Address field input ($custom1). 4. In the Email Message section under the HTML field, copy and paste the DynamicEmailTemplateCode. html code. 5. In Photoshop, design and ensure that all individual client logo artboards are 78 PX in height and Save forWeb. 6. Design and ensure that all individual client menu photograph artboards are 290 PX x 455PX and Save forWeb. 7. Design and ensure that all individual client Download Menu… buttons are 194 PX x 111 PX. 8. In Mindfire, upload all imagery and assets designed for all versions of emails into one common asset folder. 9.
In Excell, open a new spreadsheet file. This file will establish the look and feel of your email. Below and to the left of the / is a naming convention for the header row, or row 1, of your Variable Contact List. To the right of the / is direction as to what information should be input for the columns under the header row respectively:
($custom1)/Email From Address
($custom2)/Email From Name
($custom3)/Sending Company’s Logo
($custom4)/Sending Company’s Primary Brand Hex Color in #000000 Formatting
| design workflow
27
($custom5)/Sending Company’s Name
($custom6)/Full Filename of the New Menu Photograph Image
($custom7)/Full Filename of the New PDF Menu
($custom8)/Full Filename of the Download Menu… button image
($custom9)/Sending Company’s Full Facebook URL
($custom10)/Sending Company’s FullWebsite URL
($custom11)/Sending Company’s FullWebsite URLWithout “http://www.”
($custom12)/Sending Company’s Street Address
($custom13)/Sending Company’s City
($custom14)/Sending Company’s State
($custom15)/Sending Company’s Zip
($custom16)/Sending Company’s Area Code and Phone Number
10. In Excell, for each individual Sending Company’s Recipient Contact List, insert the headers ($custom1) - ($custom16) after the last column currently existing. 11. Next, for each individual Sending Company Recipient Contact List, copy and paste the appropriate rows for columns ($custom1) - ($custom16) from your Variable Contact List into your Recipient Contact List. Repeat this process for all contacts of each list with the proper variables accordingly. 12. In MindFire, import your Sending Company’s Recipient Contact Lists and map each list to a separate copy of your original email template created in Step 4. 13. Next, design all sending company’s ($WebVersion), ($RelevantYes), and ($RelevantNo) versioned emails respectively. 14. In each sending company version of the previously duplicated email templates, rename all instances of ($WebVersion), ($RelevantYes), and ($RelevantNo) variables within the email’s HTML and according to naming conventions established at the creation of all versions in Step 13. 15. Rename all file paths in all image and link tags with the same file path provided by MindFire when all images were uploaded in Step 8. 16. Finally, test and schedule each versioned email individually. *See page 44 for a sample layout of this Dynamic Email Temple design.
28
| design workflow
Web2Print Store Versioning*
1.
For editable Web2Print products only, inspect font selections in the design and ensure that all are available in 451. If not, fonts must be replaced in the design with fonts that look similar to original design from the 451 font library file. If an unavailable font must be used, contact 451 to request a font be uploaded to their system.
2. Export the document from InDesign with the Digital or Offset PDF presets. 3. After the PDF has been created, Reduce File Size of the document. 4. Upload the files to a folder on the Design Assets > ALC > Internal Documents > OnDemand Webstore > {Newly Created and Dated Folder} 5. Direct the Web2Print Programmer on where to find the PDF file for development. *A logo for a new client will have to be provided to Programmer for a entry on theWeb2Print portal.
| canvas awnings Specifications.
Design at 0.25% of the original size and keep all raster graphics at 1200 DPI.
Process.
1. Design all vector art in Illustrator. 2. Design all raster art in Photoshop and save as TIF files, bring TIF files into InDesign and tile edges of the art to fit the final document size. 3. Export final Illustrator files as EPS CS3 files. Export all InDesign native with the LargeFormat PDF settings.
| digital menu boards 32 Inch View Sonic Digital Menu Boards
1. Create a PSD document at 1920 x 1080 PX.
2. Make the resolution of this document to be 72 PPI. 3. Make the color of this document to be RGB. 4. Once the design is approved, in Photoshop go to File > Save forWeb. 5. Select JPG from the File Type drop down menu. 6. Select Very High for the quality. 7. Check the box for Optimized. 8. Check the box for Convert to SRGB. 9. In the Metadata drop down menu select None.
| design workflow
29
| purl campaigns â&#x20AC;&#x201C; list editing/building process This is the workflow used for a PURL campaign with complimentary print components.
1. Account Executive will be given a deadline for any PURL contacts that they have to invite to the event. 2. Account Executive sends their contact list to Project Manager to compile a master contact list. 3. Project Manager takes the list and formats it in the Door Frame Method. This means the top, left and right column fields are filled out with data for all rows in the list. 4. Project Manager then sends the list to Customer Service Representative (CSR). 5. CSR routes the list through mailing department to clean list and check addresses etc. The list then goes back to CSR. 6. CSR sends the list to the web development team. 7. Designer receives PURLS and QR codes generated in MindFire, exports list and maps the variables to artwork, including a sorting order number, then sends final art to print. 8. For any late sales contacts, a General printed invite leading to a GURL landing page will be printed as needed. They can be hand addressed information can be filled in by hand via 3 blank lines in the recipient address block. Begin with 25 prints and then print as needed thereafter. These General mail pieces do not need mailing indicias.
30
| design workflow
| design templates 1.0" Bleed
Retractable Banner Stands
1.0" Bleed
31.4375" Length
86" Height
7.0" Dead Space
DEAD SPACE
Note: There is dead space on the bottom of the banner stand that rolls into the base of the product. This area cannot have any vital graphics. It will be cut off in final display.
| design workflow
31
0.5" Bleed
Advanced Retractable Banner Stands
0.5" Bleed
31.5" Length
95.85" Height
12.0" Dead Space
DEAD SPACE
Note: There is dead space on the bottom of the banner stand that rolls into the base of the product. This area cannot have any vital graphics. It will be cut off in final display. 32
| design workflow
34.75" Height
Hop-Top Counter Display
2.0" Bleed
2.0" Margin
14.25" Length
4.0" Margin
34.25" Length
4.0" Margin
14.25" Length
2.0" Margin
Note: Artwork must stay within margins.
33
| design workflow
Hybrid Flex Menu Cover
0.125" Bleed
0.125" Bleed
8.25" Length
14.5" Height
0.375" Rounded Corners
Note: Occasionally inside front and back covers have plastic pages glued onto them using single-sided, printed inserts.
34
| design workflow
Hybrid Flex Menu Inserts
0.125" Bleed
0.125" Bleed
7.25" Length (Cover - 1.0")
13.5" Height (Cover - 1.0")
Note: All measurements are in correlation to cover sizes.
| design workflow
35
0.125" Bleed
Hybrid Hard Menu Covers 0.125" Bleed Trim 0.25" Length 0.75"
Difference in Height
9.5" Length
14.75"
Note: Actual fold mark measurements are variable dependent on the size of the cover. However, 0.75" flaps are the same for all cover sizes. 36
| design workflow
Hybrid Hard Menu Inserts
0.125" Bleed
0.125" Bleed
8.5" Length (Cover - 1.0")
13.75" Height (Cover - 1.0")
0.125" Bleed
0.125" Bleed
9.25" Length (Cover - 0.25")
| design workflow
37
13.75" Height (Cover - 1.0")
Hybrid Hard Inside Front & Back Covers
0.125" Bleed
0.125" Bleed
9.25" Length (Cover - 0.25")
14.5" Height (Cover - 0.25")
Note: All measurements are in correlation to cover sizes.
38
| design workflow
0.2957"
10.2362"
1.1811"
0.2957"
1.1024"
7.0866"
6.063"
8.2677"
Digital Menus
3.3858"
Video Specifications.
0.1458"
6.8504" 8.2677"
2. Still images should be saved as JPG files.
OUTSIDE BACK COVER
1. All stills and videos should be @ 800 x 480 PX for a 7" screen.
1.1024"
An introductory Still Image should be displayed in the menu when opened. Once a video is finished playing in the menu, the above mentioned Still Image is displayed again until the next video is played by the user. Menus have 5 videos and 1 still image, however, more videos can be added if approved by the vendor.
3. Videos should be saved as MP4 files @18 FPS with a 64 KBS bitrate.
5. Volume (+ and -) buttons must be used when videos being played in the menu have sound.
8.3465" 8.2677"
INSIDE FRONT COVER
Note: Bleeds need to be added at 0.125" all the way around, with the exception of the flaps. Art should bleed into the flap 0.0625". Finally, button placement is variable but must be confirmed by vendor.
OUTSIDE FRONT COVER
4. Play and pause buttons must always included in pieces that contain video.
11.4173"
| design workflow
39
32"
1"
Tradeshow Pedestal Graphics
32" 32" 32"
1" 0.5" Bleed
40
| design workflow
Menu Covers Specifications. 3.75"
Menu cover designs should be set up in an InDesign document at 13" x 19". Document Layering.
Measurements. The measurements to the right is the only element on this layer. Color used on this layer should only be a 100% Magenta Spot Color.
3.
2.5"
2. Artwork. This layer only includes logos or artwork featured on the cover. Drag the art from Illustrator into InDesign for placement and sizing. The color should be a 100% Black, Cyan, Magenta, or Yellow Spot Color depending on what provides the best visibility from the background.
2"
1.
Template. This will have a 100% Black Spot Color outline of the menu trim. Inside this picture box, a mockedup texture to show the client how final production of the menu will look. Mock-up art here can be a a low, 72 DPI resolution.
Final Art. 12"
When the menu cover design is approved by the client and the piece is ready for the vendor, the following steps should be taken: 1. Package the InDesign file for the menu cover. 2.
Delete the Measurements layer and delete linked texture photos in the Template layer, so all that is left is black line art and the logo and/or final art.
3. From InDesign go to File > Export, change the format to EPS. 4. Open the EPS file in Illustrator and adjust the artboard so graphics are centered on the artboard. 5. Go to File > Save Asâ&#x20AC;Ś Change the format to EPS. In the dialog box change the Format drop down menu to say Illustrator CS3. 6. Send only the EPS files to the vendor. 5"
| design workflow
41
1
Eye Gazing Diagram
2
3
VERTICAL MENU
3
2
1
7 5
4
6
SPREAD MENU
3
2
1
7 5
6
4
TRIFOLD MENU
42
| design workflow
42"
10' x 42" Skybox Banner 8.2925"
1. Setup artboard in InDesign at full size. Make the bleed in the document measure 3". 2. Create a dieline file in Illustrator. 3.
On a separate layer, place all vector artwork into Illustrator file and warp the imagery to follow the contour of the outer edges of the dieline.
4. Turn Off the Dieline Layer in Illustrator and save the artwork.
76.5"
6. Drag and drop the Dieline Layer from Illustrator into the InDesign file. Make sure it is centered to the artboard.
59.9536"
5. Turn On the Dieline Layer. Then turn Off the Artwork Layer in Illustrator.
7. Place your saved Illustrator artwork into your InDesign file on a different layer from the Dieline Layer. 8. Create, warp, and place any raster graphics needed from Photoshop into InDesign on the Artwork Layer. 9. Print out 4 copies of the design with the Dieline Layer in InDesign turned On. 10. Cut out your printouts and tape the left and right edges of each individual piece together to create a cone. Confirm that artwork looks straight when mocked up. 11. Export 2 PDF documents with and without dielines. Optimize with the LargeFormat settings. When generating the PDFs, ensure Use Document Bleed Settings is Checked. This will change the bleeds of the PDF to 3".
3.3681"
4.4176"
Note: This segment is printed 4 times
| design workflow
43
Dynamic Emails
44
| design workflow
0.5" Bleed
0.5" Bleed 1" From Center of Eyelit Mark
Spider Banners
All eyelit marks should be exported on their own Dieline layer. Eyelit marks should not be spot colors and there should not be a second PDF file generated without dielines. All eyelit marks should be 0.0451" in diameter. When generating the PDFs, ensure Crop Marks, Bleed Marks, and Use Document Bleed Settings is Checked.
63"
24.5"
1" From Center of Eyelit Mark
| design workflow
45
0.125" Art Bleed 0.875" Blank Bleed
Large Outdoor Banners
All eyelit marks should be exported on their own Dieline layer. Eyelit marks should not be spot colors and there should not be a second PDF file generated without dielines.
1.25" From Center of Eyelit Mark
All eyelit marks should be 0.0451â&#x20AC;? in diameter. When generating the PDFs, ensure Crop Marks, Bleed Marks, and Use Document Bleed Settings is Checked.
Variable Maximum Roll Width
63" (Max height)
Note: If the width of this type of banner exceeds 6', an eyelit must be added to the top center margin of the piece.
46
| design workflow
1.25" From Center of Eyelit Mark
Š Palios Design. All Rights Reserved.