Prepare your project
Communicate with us
Prepare your project
We need the following three items:
- A project description file
- Your design in a layered document
- Supported Document Types:
- Photoshop — Preferred
- Annotations for your design.
Project Description File
A project description file acts as a spec for the project you’re submitting.
Here is a quick checklist of items to include with your description file:
- Specific requests regarding the coding structure
- Description of functions, animations or other items that aren’t apparent in annotations.
Example of a project description file:
1. PSD: HEADER
A. Note the “LINKS: HOVER” layer for display when a user hovers over the link.
2. PSD: TABS
A. Note the “MY ACCOUNT: ON” layer for display on selection of a tab.
B. Note the “TABS: HOVER” layer for display on hover on a tab.
3. PSD: SEARCH
A. Note the navigation categories (My Account, Shipped, To Ship, Returned) should all contract on selection. See the “BROWSE CLOSED” folder layer for a similar example.
B. Note the options under the navigation categories (My Account, Shipped, To Ship, Returned) should display with the red background on hover and selection (see MY ACCOUNT –> MY LABELS –> HIGHLIGHT).
C. Note the “POPUP” folder layer for display on selection of links in sidebar.
D. Note the “DATES” are interactive sliders that should be hooked up with JQUERY.
E. Note the “SELECT DATES POP UP” folder layer for display on selection of the calendar icons in the Dates category.
F. Note the “BROWSE CLOSED” folder layer for display on selection of the “Refine your search” link.
G. Each category (Addresses, Cities, Zip codes, Countries, Purchase, Purchase price, Sell date) should be individually contractable. Display should replicate invididual display of “BROWSE CLOSED” folder layer.
4. PSD: RIGHT
A. Note the “SEARCH: SELECTED” folder layer for display on selection of the search box.
B. Note the “SEARCH BUTTON” layer should be coded to use coded copy and be expandable if a longer or shorter button name is used. The button with text should NOT be coded as one image.
C. Note the “ALL ITEMS: ON” folder layer in the “SUBNAVIGATION” folder for display when a user selects or hovers over a link.
E. Note the “See more” links for each result returned. These should display additional text without the “…”
A layered document is required in order for us to code a design.
Here is a quick checklist of items when completing your design file:
- The file is a supported file type
- Preferred – Photoshop Document (PSD)
- InDesign (INDD)
- Layered FireWorks File (Layered PNG)
- Adobe Illustrator (AI)
- Small file size
- Breaking out your files into individual pages can not only help reduce confusion when slicing, but can also bring them down to manageable sizes.
- Clean, organized layers
By annotating designs, turnaround time and the number of fixes required to complete a project are reduced. Annotations allow you to describe elements and specifics regarding items that otherwise would be missed.
To annotate designs , you can do any of the following:
- Include an annotations layer in your PSD or other layered document.
- Export any notes into a JPEG file.
- Use Jing Project (http://www.jingproject.com/) for notes, hosting and videos.
Two examples of great annotations:
Notes in PSD.
Notes on Fixes.
Communicate With Us
Contact us with any questions, comments or feedback.
Since we are working as your remote coding team, it’s important to keep communications as clear and concise as possible.
Here is a quick checklist of items to run through when sending us a note:
- For bug fixes, please include all necessary information.
- Did you clear your cache?
- Browser and OS you’re currently using.
- Detailed, annotated screenshot of the issue (example: xxxxxx ).
- Allow up to 24 hours to respond with fixes to your project.
- Limit your project to a single thread
- Multiple requests spread across multiple email threads can do more harm than good.
- Try to limit your fixes, questions, and feedback into a single message each round.
- Including your feedback and fixes as an attachment to a single note allows us to keep things centralized and reduce response times.
- All questions are valid. We are here to help.
- Use your intuition. Make sure to share any strict deadlines, and whether or not this is your first slicing experience.
Working remotely from your campus allows us to keep costs down and deliver a better service. By using tools like annotated screenshots and concise feedback, we can close the physical gap between us to code your project into a success.
Read some of our client interviews to learn what it’s like working with us.