Must-Do’s When Delivering Your Design

Are you a designer? Do you ever wonder why setting up an image with a transparency layer and icon on top that shows a title on rollover take a developer at least 3 times longer than the time it took you to design it? Believe it or not – most of the time it’s all about finding the layers you used for each of these components. Stop the madness and cut down your costs!

The following is a list of must-do’s when delivering your design to Digital Trike. Although this list could have easily been 10 times longer than its current length, we find ourselves lucky when half the list is included in your delivery. We also recommend this to everyone seeking to reduce their expenses when delivering their next design to developers in general.

Delivering your Design in Photoshop

Although Adobe Illustrator has much flexibility when designing your website, app or tool, Adobe Photoshop file is much more functional and cost-effective for coding your website, app or tool. Photoshop allows all parties to see what dimensions and resolution are specified. Here is a quick guideline to help you setup your design in Photoshop to facilitate integration:

1. Define the width of your website, tool or or app

The industry’s recommended sizes are:

Website: 960 pixels in width and 700 pixels in height to retain page fold line or a one-page vertical scroll iPhone 5 App: 640 pixels in width and 1136 pixels in height in portrait mode

iPhone 4 and earlier: 640 pixels in width and 960 pixels in height in portrait mode

iPad App: 768 pixels in width and 1024 pixels in height in portrait mode

2. Create the background layer

Setup a single layer with your desired “background” ­- is it a color, gradient or image? Even if it is white! Annotate your layer if your background should scale as the browser increase or decrease.

3. Create the header folder

Setup your “logo” and/or “navigation” as distinct folders or layers. Isolate and setup other functionality as additional folders including “language” drop down, “search” field, “social media” icons, “contact” information, etc. Create necessary layer within each folder for any action including rollover (on, off, hover), drop down (on, off), click on (on, off) functionality.

4. Create the footer folder

Setup your “copyright” line and/or navigation in a distinct folder and any other functionality necessary including “footer navigation”, “social media” icons, “contact” information, endorsement “logos”, “disclaimers”, etc.

5. Create your template or page/screen folder (as many as necessary)

Label each folder with the name of the template or the page/screen. Isolate “content”, “images” and “videos” in distinct folders. Create necessary layers within each folder for any action on the template or page including rollover (on, off, hover), field action (on, off), etc.

6. Create layer comps for each view

Step back and click the necessary folder for each template, page/screen, state and extreme cases (long page title that needs to wrap to the next line) of your website, app or tool so that each view or case has a layer comp in place. Label each layer comp with a logical name convention.

7. Isolate elements used on multiple screens into a folder

To ensure that elements are consistent on each screen when used multiple times, isolate those elements in a folder and turn on/off the layer comps. Do not duplicate these elements multiple times as they will most likely make the design look inconsistent from screen to screen.

8. Be mindful of clickable/ tappable elements

Avoid putting two links or two buttons close to each other where user will have a hard time clicking or tapping to go to the next step. The minimal size of a tappable user interface element for iOS is 44×44 points.

9. Crop images

Crop images according to their sizes.

10. Avoid blending modes

It is impossible to integrate blending modes at this time and most browsers do not support them.

11. Create the CSS layer (optional)

Provide an outline of desired font styles, colors and kerning (RGB value) for each variation used in your design. Please use web or iOS safe fonts and whole numbers (11 pixels versus 11.5 pixels).

12. Create the notes tool (optional)

Create any necessary annotations to facilitate understanding elements.

Delivering Responsive Design in Photoshop

Responsive websites are a great way for users to easily view them  on various sized screens. Though the content of a page is similar for each screen size, there are important steps necessary when designing responsive behavior.

1. Setup your responsive web design using the Bootstrap grid

Setup your guides according to the Bootstrap grid. Refer to http://getbootstrap.com/ for more information on the specific framework’s design philosophies

2. Fit your elements within the grid

Ensure elements start and fit within the grid system. Avoid floating elements within the spaces of each grid.

3. Make sure elements are resizable

Your choice of elements (images, backgrounds, videos) must easily resize between states. Any breaking behavior between states will increase the cost and time to build your website.

4. Provide design for each state

Unless we are scoped to adjust your design to other states which we will follow Bootstrap’s framework by standard, please provide a PSD for each state of your website. The common states include desktop, tablet and mobile.

In Conclusion

We hope you’ll refer to this guide in the future before delivering your design projects to Digital Trike. It will save both of us time and energy that we can use to start building your solution!