How to bring together design and front end

The original knowledge was presented at Drupal Cafe #12 by a Lead Designer Lera Tkacheva (ADCI Solutions) and a front-end developer Artyom Chugainov (ColdBrain).

In this article, we’ll tell how web-designer and front-end developer can work together efficiently. Web-designers will find some tips how to avoid making typical mistakes in layouts, front-end developers will find information what to be careful with. You’ll learn more about trends and how to organize layouts and workflow and which technologies make the development process easier.

Please note that the most of described examples are about Adobe Photoshop though there’re a lot of other great tools for web-design such as Sketch or Adobe XD. But the main rules are rather universal and will work for any tool.

How to befriend design and front-end 1

Issue 0: where the problem is? 

The mess in the front-end delivery could be caused by the source file made laid-back, by the styles the previous front-end developer worked with. All this wild carousel of loads of pages, layers without groups, inappropriate names is a headache for the front-end developer. He or she may forget which layers are already sliced, may accidentally turn some of them on or off or change them somehow.

The main rule sounds like “Group the layers”. Web-designer can group all layers after completing the design of a page (if grouping distracts him or her from creative flow) or keep logical structure during a process of creating a layout.

So group everything by folders avoiding deep hierarchies and hidden folders ones inside others. Give each layer or group appropriate name according to the logical structure of the layout. Check if you designed all on-hover and active states for all clickable/interactive elements.

You can also color folders, each large meaningful group of layers as header, footer, etc. It makes navigation through the document easier for designer and front-end developer, but only if one group has it’s own color and all the elements within the group have the same color. So it’s better to group elements as they are placed on your layout: from the top to the bottom.

Issue 1: styles’ structure

Let’s talk a little bit about styles and front-end. These processes are pretty close to design. You need a page for all the HTML-elements that you will use on the website. Having done such page in both design and the website  itself you make the front-end process much less painful: it will be easier to slice all the main website’s elements and based on them - create the pages.

You can find the main elements here http://getbootstrap.com/css/#type and the components (which by the way you can restyle and then use) going with Bootstrap there - http://getbootstrap.com/components.

Get prepared the following: the additional files, pics, backgrounds, vector elements, fonts.

We stick to the writing files of styles in separate files and then distributing these files into different folders. The separation criterias are components and pages. Feel free to use preprocessors (less/sass/stylus) along with task-runners (grunt/gulp/webpack) to avoid the pluging in/ switching on all the mentioned elements on each page. Preprocessors and task runners compilate files into the one and even mimimize it if needed. What’s more - these tools can form the file-map for the sake of more convenient debugging.

The typical folders’ structure in authors’ projects:

  • Pages
  • Blocks
  • Components
  • Mutual styles
  • Variables

Also it’s very convenient to use the browser sync module while coding: this module saves lots of time. You change the styles and the task-runner catches these files’ changes. Then it compilates the new CSS from the thick air, and the browsersync automatically applies the styles to a browser so you don’t have to refresh page. It’s especially neat and convenient if you work with two displays.

Issue 2: layers, hidden and abandoned

We often see the extra or turned off layers in the source files. You’re lucky if you have a feeling which layers you need and which you don’t. Moreover, some of the layers can reflect the particular elements’ condition or the various background types. Always remove all unnecessary stuff from final version of your design.

Issue 3: too many source files

If you as a designer leave too many files and never care to comment on them you put the front-end dev in the bind. What are these files for?..

Cross the fingers - and maybe the front-end developer cursing and swearing will finally find out how he should use the files given. But what’s more probable - the dev is to apply the wrong fonts, the wrong backgrounds and you will have non-relevant mockup.

So always keep only actual source files in the root folder of the project. In case if you need to keep some old versions of a design, just put them in a special folder and add prefixes or suffixes with the date to each item’s name.

Issue 4: lonesome blocked layers

You can block a grid layer (if you have it in your draft) and a layer or folder with the page’s background. Otherwise the front-end developer has to look through all layers searching blocked ones or use search by attribute.

Issue 5: Raster layers for the simple elements

You must have faced with gradient backgrounds implemented as the raster layer. Probably even with the applied transparency. The front-end dev can take the parameters/ features/ properties from the file he or she is setting up: the initial color, the eventual color, transparency. But when it comes to the raster layer - beware. The reason is that the gradient is not the same as in the source file. The same is applicable to the icons of different elements not in a vector but in a raster pic. Sometimes you may need this icon on the transparent layer.

All complex and extandable elements should be saved as vector shapes - this way you could change their size anytime (for example, when you need to change a width of an object with rounded corners; the vector shape will keep the same corner radius).

Issue 6: not liking smart oblects

The reason of all the difficulties - the same as in the previous issue.The smart-object keeps image with its all original characteristics, so it’s the way of harmless editing. It allows to make design more flexible. Say, many UI elements created in Adobe Illustrator are in vector format. And when you place these objects inside Photoshop layout as the smart-object (by dragging or Copy-Paste command), later you can edit them without losing a quality.

Smart-objects are also great for complex illustrations with usage of variuos blending modes and for global (constant) elements of the website. For example, a global element such as a footer or a header could be saved as the smart-object and then you should just copy-paste it inside the new page design of the website.

Editing photos as smart-objects is also very helpful. If later you will need the photo in an original size, you can get it from the smart-object.

Smart-objects are also great for repeatable elements as list bullets and the same stuff. You can create one element and then just duplicate it. In case if you need to change its design somehow, just fix the original element and all others will be updated automatically. Easy.

Issue 7: Thousands of guides

We don’t mind guides when they’re appropriate: they do help to measure the elements, count the margins and the paddings and check the elements alignment on the page. Guides are helpful as the vertical and horizontal grids which could be switched on and off easily. Too many guides are rather got in the way than really help in work.

Issue 8: Any layer blending modes except Normal

Sometimes you have to play with colors to imitate the designer’s idea / vision.

In the final layout you shouldn’t have layers or groups of a layer with blending modes non other than Normal or Pass Through. If blending modes are used for complex illustrations, those illustrations should be pasted as single smart-object.

Issue 9: The lack of specifications

Having specifications means no extra questions: why this button is 20 pixels away from another on the page 1 and 17-18 pixels away - on the page 2. If the specification says the gaps are 20 pixels we just make up the page without double-checking. The same applies for fonts and other elements.

Creating a special source file where all website’s elements and spacings between them are collected is very helpful for development process. Developers can quickly check all the fonts, colors and typical sizes used in the project. It’s also helpful to create a “Typography” page. It’s a page where font styles are collected together. You also can paste here: buttons (in different states), lists (ordered and unordered), tabs, system messages and other stuff. It’s better to create such a style guide after approving the main page. So you can just grab elements for all inner pages from here. It allows to avoid mess in your files and keep up with existing font styles and be consistent in designing through the whole project.

Issue 10: The abscence of non-system fonts and images used

Remember: the fonts for web must be enclosed with the layout. And the designer is in charge of checking how the fonts are rendered in different browsers. He or she should give special attention to those fonts that are used in the menu.

All source images and assets should be collected in a special folder named “source” or “assets” or something like this. So even if the layers in PSD-file were merged, it’s possible to get a separate image.

There is always a great chance that frontend-developer doesn’t have fonts used in the psd-files. So web-designer should care about developer and provide all necessary fonts in a separate folder.

Issue 11: Neglecting the “Save for web and devices” option and compression of the images

We’ve seen the websites where the page was about 5 MB heavy because of the pictures. Don’t ignore the compressing. When saving your design in Photoshop choose “Save for web and Devices” option. If you use just “Save As” option, image will have too much useless information. It increases size of an image, so try to avoid it.

Issue 12: Missing out the SVG graphics possibilities

It’s quite usual when the website contains 5 different - let’s say- telephone icons, all of the different colors.
If you use SVG-graphics you don’t have to draw the same element from scratch in different sizes and for different screen resolutions. SVG is a vector file format; SVG-image could be scaled without lacking in quality and blur. You can also use iconic font (it’s a font consisting of SVG-images) or create your own one with special online tools.

Conclusion

So, to sum it up, let list which files web-designer should provide to front-end developer:

  • final approved versions of all pages;
  • designed responsive layouts (if needed);
  • specifications (PNG-files with marked margins and paddings, font parameters, etc.);
  • folder with fonts used for a project;
  • folder with images used in the design;
  • folder with SVG-files (logo, icons - as much elements as possible);
  • specifications for animation and interaction effects.

All these rules will improve communication in the team. It’s good for a project: everything is done with high quality and on time. It’s also great for your professional growth - never ending process for those who really love their job.

You might also like