Design and Development how to make them friends
Top

In order to achieve optimal performance and keep the customer happy it is advised to follow these guidelines. Before deploying, check if you have added these functionalities, and add them if you didn’t. Follow these guidelines to achieve the optimal performance and to keep your client happy. Before you deploy anything, make sure to implement everything described below. These are the things that our clients do not usually ask for, however, they add quality to our work and add value.

1. The Design

The Design

A lot of time has passed since the developers worked in the same editors as the designers. Now we have powerful instruments such as Sketch, AdobeXD, old school Photoshop for the designers and much simpler tools such as Zeplin, Avocode, and Invision for the developers. Also, I cannot ignore Figma as it’s becoming more and more popular, it is an all-in-one platform with a lot of benefits for developers and designers.

Zeplin, Avocode, Invision do not have superfluous stuff for the developers, just export, take sizes, margins etc. Everything you need in one place and you do not have to know how to turn off layers or save masks with multiply effect on it 🙂 So, the sources for the design is not necessary for developers now, just export to one of the most popular space and provide the link to it.

2. The Assets

The Assets

Developers spent a lot of time getting icons, images and other assets from the design. Usually that time does not include getting into the total project estimate time because we assume that all assets will be provided from the client’s side. In case with Photoshop the developer does not have another choice except manually transform layers into images with appropriate formats. That is why Photoshop is old school in nowadays and this part of work is already done in modern design editors.

Zeplin provides more powerful interfaces to for? the developers but in Sketch file all images and icons should be exportable, and the designer or developer should click on every layer “Make Exportable” only after that the will become accessible in Zeplin. My worst nightmare was when I received a huge Sketch file and spent almost a day clicking on images, icons and masks to make them exportable. So, do not forget to provide all the assets with the design or make them exportable in the source design.

3. Vector Images

Vector Images

We are living in the century of devices that have 2x and more device pixel ratio. It means that we should use SVG format for icons, masks, logos wherever we can. There are a lot of icon packs that are already ready for integration into the site. Developers becoming angry when they see icons in raster format, because it will be blurred on devices. For all small graphic like icons, logos it is better to use SVG or some of icon fonts pack.

4. Effects

Effects

Another problem with the designs that are coming from the Photoshop layers using effects on layers. For example you have images and masks with the multiply effect . So, you are trying to slice or at least get settings and you cannot because multiply is connected with the layer under it. Not all browsers support effects on layers, so it is better to not use them separately.

5. Fonts

Fonts

The fonts should be provided with the design. Without original fonts developers cannot export the original Sketch file into Zeplin, Avocode, Invision etc., with original view of the text view. So, if you will provide source of the design than always provide fonts that have been used.

6. Style Guide

Fonts

Style Guide is the key to success! When the development team has all views of the main components from the design it is really easy to develop every page like a constructor.
Also, should it is better to have mobile and tablet styles guides separately from the desktop.

7. Hidden Layers

Hidden Layers

Hidden layers always confuse. That is why always should be screens of all states, pop ups, tooltips in the project. From my point of view it’s better not to use hidden layers at all. Use separate artboard or layer groups but do not hide them.

8. Text

Lorem Ipsum

Lorem ipsum, in graphical and textual context, refers to filler text that is placed in a document or visual presentation. Without context it is hard to find out the semantic value of the block.

For example, there is a form:

Form

Can you imagine lorem ipsum fields in this form? In that case you will never guess what type of fields these would be or what the purpose of this form is. That is why original text is important in the design. Also, semantic text helps to understand where the links are and what the buttons do. Keep in mind the text is important.

9. Responsive

Responsive

It is probably the hardest topic of the whole article. We have collected all the main issues with what our team faced last time.

  1. There are the following dimensions in px for Mobile 320/375/414, Tablet 768/1024, Desktop 1280/1440/1920 so every dimension means breakpoint where the site should be rebuild.
  2. Do not hide the blocks on mobile/desktop view. On the mobile view should be the same content as on the desktop. You can transform list of post into gallery if they are not important but never just remove them.
  3. Do not move sections from one block to another. Webpage already has the grid and it is hard to move block form on row to another. For example, if you have desktop view with the image on the left side (1) and heading (3) with some paragraph (4)(5). On mobile view it transform into 1 column and image appears between heading (3) and paragraph (4) inside the container (2).

    image description

  4. All the texts should be the same across all responsive views of the design. Responsive could be develop in desktop or mobile first. It means that the developer starts from desktop or mobile view and it is really confusing when there is different text between two resolutions in the same block.
  5. Use the same factor for all sizes.

10. Specification

Specification

Any specification would help. In our fasting growing word we cannot image a website without animations. In order to be on the same page with the design we have to have animation specification with examples or animation wireframes that show us how it should work. That is why it is so important to have a document with detailed description of the animation effects, rollovers, form steps, etc.

Results:

So, let’s summarize what could increase development process:

  1. All views in Zeplin/Avocode/InVision with already exportable assets
  2. Fonts should be provided including all font styles (italic, bold, medium etc.)
  3. Icons should be separately in SVG
  4. Animation references must be. Help your team to understand how it should be.
  5. Style Guide could be really helpful
  6. UX Text is everywhere. No more “Lorem Text”.
  7. Information is never useless (Maps theme name, Highlight Code theme name if one of these were used)

Make sure to share down in the comments design mistakes that we do on a daily basis so others can learn from them too.

up

Please turn your device