24 Practical tips for better communication between designers and engineers

Designers and engineers communicate often is're same page, cow head to do not horse mouth, in order to help students to fix this problem, a foreign designer and developer to organize a list, help students with the engineer barrier-free communication, is very practical knowledge point, strongly recommended reading >>>

@ Yourzine Tezign: Developers are generally not stunning designers, and designers are not usually great developers. Although there are many exceptions, these two lines of the doorway to the other side is a difficult to speak of the riddle, but both sides to cooperate in this case to complete the project. As a person who has worked in two areas, I've compiled a list of designers that will help developers develop applications and Web sites better.

　　Photoshop

Developers often need to deal with Photoshop PSD files made by a designer, so anything that is good for a designer can be useful to developers, including drawing PSD files that are easy to maintain and understand.

　　1. Effective version control

Designers often meet with a variety of folders filled with a bunch of PSD without a clear version of the name. To solve this problem, designers can determine in advance a suitable version naming format (the ideal format should be to automatically arrange the files in alphabetical order).

　　2. Maintain layer

Don't merge layers easily. When exporting, it is done by combining, hiding/displaying layers, exporting and then restoring the file to its original state. Do not easily destroy useful data. Computer performance is less of a reason to merge layers-if you're limited by this, you should be buying more memory and better performance computers.

　　3. Make a meaningful name for the layer

While naming layers is cumbersome, it does help to understand, especially when reusing file elements. You should make sure that the name of the type layer responds to its contents when named. Duplicate layers also have a meaningful name, rather than a simple "accessory."

　　4. Properly grouping layers

You should make a group of visual elements that are scattered across different layers. For a single design file, the grouping should be consistent in order from left to right, top to bottom, as a whole. Hierarchies and orders are better than color-coded layers because the color needs to be maintained when the layer moves.

　　5. Remove unwanted layers

Older versions, templates, and reference materials, as well as temporary copies, that are no longer needed should be removed from the layer in a timely manner. Periodically browse through all of your layers and delete unwanted items in a timely manner.

　　6. Use Layer Comp

Photoshop's layer composite feature allows you to create multiple layers of state, such as visibility, location, and even layer style. You can use the layer composite function to flexibly integrate different parts of the design in a single document (such as multiple tags of a site, multiple pages of application). Doing so reduces the file size without having to keep repeating layer marshaling.

　　7. Save vector files and scalability effects

In the design of applications, it is likely that the original design twice times the size of the picture to adapt to the new device with double pixel. Make sure you don't need to redraw all the icons in this situation.

　　Helping developers

There are also some specific recommendations related to application and web design, each with corresponding requirements and restrictions.

　　8. Learn to save rounded corners when zooming

The operating system often unifies angular radii of rounded corners (iOS is typically 12 pixels). Adobe Fireworks keeps the corner radius of the rounded rectangle, but Photoshop does not. So make sure you use the Direct selection tool to select rounded points and scale the image in a traditional way.

　　9. Design under 72ppi

A pixel is a pixel, and more pixels will only generate larger files. Don't muddle through by changing the resolution.

　　10. Snap to pixels

Make sure the related shape tools are set to snap pixels. Use tools such as pixel grids according to your needs. Always use even size to facilitate cropping.

　　11. Use RGB mode

This is not only important for color display, but it is also critical for developers to correctly write colors to the code.

　　12. Resource preparation is part of your job

Many (most) developers have nothing to do with Photoshop other than basic editing capabilities. Designers need to export crop maps that might be used on applications or Web sites in a timely fashion because they are the people who are most familiar with files and Photoshop.

This work is painful and time-consuming, but it is 90% of the work in addition to "design".

　　13. Use fonts carefully

Different device and operating system preset fonts are different, so there is no guarantee that these devices have fonts on the computer you are designing (in fact, you have more fonts on the device than most people). Basically, the application or the text on the site in the actual text format will have a better effect, but this also makes the choice of fonts is not only based on vision, but also the feasibility of consideration.

It is also worth noting that permission to allow personal design may not allow you to use the font entirely on applications or Web pages. Be sure to communicate effectively with your developers or customers before selecting the fonts used in your design.

　　14. Determine the design size

For mobile device applications, screen size is not all information, you also need to consider the existence of the system status bar, and how they affect the size of the screen in the horizontal and vertical rows (such as the top status bar of the iOS device reduces the size of the smaller side in the horizontal, reducing the size of the large edges in the vertical row). It is necessary to confirm with your developers whether the application is full screen.

　　15. Use Platform Style

Each platform (operating system) has its own unique user interface elements and interaction styles (depending on different devices). Pay attention to these styles in design, and do not make a design that is too different from the style of the platform except for special reasons. For example, on the ipad, you'll find these things to be aware of:

Strong need to support both screen orientations

Two-column design is acceptable in both screen directions

Use pop-up boxes as an interface element and grouping mechanism

Determine the style of the file browser

In a higher-level navigation bar, the return button is the left-pointing icon

Therefore, be familiar with the platform design, because your design to adapt to it. No single design can accommodate all platforms.

　　16. Design the horizontal and vertical rows separately

Different screen orientations require different interactive design styles, not only because of the screen aspect ratio, but also because of the difference in appearance, weight, and balance when the user is holding the device in different directions.

It is only a poor compromise strategy to design for a screen-wide ratio.

　　17. Design for each major dimension and scenario

The same applications on mobile phones, tablets and computers on the content and interaction should be different. For mobile devices, we also need to consider the duration of attention, distraction, reduced body coordination when using equipment, and the likelihood of users using the device in mobile or dangerous situations (such as walking obstacles, traffic when crossing the road, and driving safety).

These use scenarios have an undeniable relationship with the size and nature of the equipment, and effective design should take these factors into full consideration.

　　18. Use of pure, at least actual sample content

A good sample content standard has the following:

The sample content covers the possible length of the application, not just for the convenience of the prototype design.

Design the required data by default when displaying scenarios, especially for user photos.

Consider an undesirable input example, such as a picture that is too wide or too long to be cropped.

Contains examples of extreme or uncommon names, including extremely long or uninterrupted surnames and names.

Addresses are not restricted to local address forms, but include various possible lengths and formats.

No "Lorem Ipsum" was found in any corner of the design.

　　19. Localization Considerations

When most people think about supporting other languages, they think of text. When designers or developers consider localization, they should consider the layout. To achieve localization, your design should make all text support the width difference with English 50%.

When displaying the same content, Asian languages need less space than English by nearly 50%, and European languages are close to 50% more than English. This issue is especially important when designing buttons and help text.

　　20. Consider the screen global light source

As a designer, you should have known for a long time that each platform has its own immutable screen global light source (for example, on iOS, just above the center, or 90 degrees). All the high light and shadow effects should be coordinated with the light source of the peace station.

　　21. Clear navigation and organization control design

Give your developers a clear display of the tags, pull-down menus, or other closing mechanisms that are included in your design. In the design of this control, we should respect the design convention of the platform. Developers need to have a clear understanding of the level of information in their development, so make sure your design clearly shows your intentions. Layer comps are useful in this case.

　　22. Do not compress when exporting graphics

Save in PNG alpha channel format when exporting unless explicitly notified of other save methods. Do not use the JPEG format unless specifically requested. Do not consider image file size because the developer or their development environment optimizes the image. Export each element as a transparent background, not a solid color, even though some of the background in your design is actually solid.

　　23. Ask about Shadow Processing

Communicate with your developers whether you want to include the shadow effects in the export diagram. Typically, developers use CSS or write code to apply shading, which is actually easier than using a previously saved shadow bitmap. Do not assume that the shadow effect should be included in the image, although the shading effect is displayed with layers when you design the prototype.

　　24. Understanding the way the button is constructed

Almost none of the buttons on the application or Web page are created with a single picture, usually in the following two cases:

· 3 partial image, left-end image, right-end image, duplicate single pixel wide middle section (allow image to be extended horizontally)

· 9-part image, upper-lower-left image, upper-lower-right image, and 3 repeat upper-lower middle section (allow horizontal and vertical extension of the button)

　　The last Thought

Any software should be the result of collaboration between graphic design, interactive design and development, all of which are equally important. Knowing the needs of other areas is very helpful to our own work.

By the way, I enclose the translator's micro-signal: