How to work with developers without losing your soul.
It’s hard, but it’s possible.
We begin a series of short articles, in which we will feel sorry for ourselves as designers (but not only!). We’ll describe how our team deals with the implementation of individual projects. We’ll show you solutions to problems we encountered during design phase and development of production. We will also share the backstage of projects creation, starting from the brief, through the preliminary sketches, unused / discarded versions, up until the final feedback from the customer.
At the beginning we want to point out some quick tips on one of the most important part of our work — how not to go completely MAD in one room with a developer.
A developer?
When designing websites, apps or anything that requires code, each designer is at the mercy of the developer — the enigmatic man that everyone rumors about. Some of them supposedly haven’t seen daylight for several years, others haven’t changed their flannel shirts over the last season. We even heard of those who feed themselves through the process of photosynthesis from the monitor, slowly sipping blood of designers who had any remarks to their work.
In short they are specialists in their field, appreciating the accuracy and meticulously planning of every project that is entrusted to them.
What designers need to understand at the very beginning of cooperation with a developer is that the process of creation of things in graphic design and programming is not symmetrical — we can’t expect that our developer will take exactly the same amount of time as we (designers) will, in order to introduce amendments in the layout (although this often happens).
What you should look for and what to remember when working with developers? Here is a list made by us with the most important points that make life easier for both parties.
1. Speak the same language
The biggest challenge is to develop a common language and nomenclature which will help you to avoid unnecessary misunderstandings.
Usability, Sass, Less, Compass, Bootstrap grids, RWD, break points, generic header, hover, margin, padding, hex, etc.. If a programmer says something you don’t understand and you’re just nodding your head — it doesn’t bode well. Don’t assume that everything can be programmed — yes, it can — but often it is simply unprofitable and too time-consuming. It is better for both parties to consult the feasibility of one solution before starting to design.
2. The devil’s in the detail
By providing a ready project to a developer you have to be careful what you say. Even a small misunderstanding while working on a slideshow can be a nail in the coffin for good relations between the two of you. Speak with the maximum precision and consider all the possibilities — whether something in the project scales, if so, in which way, how do you want your slide title to look like if it will be longer than provided space, how pictures inside the boxes will crop if they’re too large / disproportionate etc.
There are many factors that make a designer’s and developer’s vision for the project quite different, so your common interest is to develop an universal alphabet and ways how to verify design with implementation.
3. The developer is not your enemy
We don’t like when someone pries into our work — it’s enough when our clients impose on us their brilliant ideas that we need to pursue with a smile on our faces and pain in our hearts.
When there is an extra factor — stress — we become unpleasant to the environment. What our developer can know about design?!
From our experience we ascertain you that he can know something. Even more than just something. Use the knowledge and advice of your developer. Don’t worry if he wears sandals and socks. Swallow your pride. The look from a developer’s perspective as well as revision of proposed solutions often saves a lot of time, tears, and sweat.
4. Follow the latest webdesign trends and build with “good bricks”
There is nothing that helps us more in creating a modern and fashionable project as tracking news about trends in design. However, the mere knowledge on the latest trends is only half the battle. Remember that the developer must meet every whim of yours. Keep in mind that knowledge about what can be used in a project as a timesaver is incredibly valuable for the whole team. It is always worth verifying your ideas with already existing solutions. You can go ahead and check sites such as unheap.com, where you can find ready-to-use scripts that can be successfully adapted to your project, or if you are looking for some web elements inspiration try calltoidea.com
5. Notify up to date on changes in the project
Supposedly there will be a disaster and the client comes up with another genius idea and it’s not just about making the logo bigger. We are talking about situations when the project suddenly turns around 180 degrees. Remember — always (always!) start your amendments by talking with your developer. Changing the project and submitting it without much explanation can be very annoying and will lead many men to blind rage. Take time to accurately describe changes that must be made, ask for expert opinion and start working with a clear conscience.
6. Be neat
Everyone designs in their own way. Thousands of layers without names doesn’t surprise anyone anymore, but the person finding and cutting that one tiny element will be screwed. Make sure to segregate and make descriptions — detailed documentation of typefaces letters, colors, RWD etc. accelerates work sufficiently. It can also help the dev in finding better solutions.
If you‘re responsible for cutting graphics, set the rules for naming the layers in Photoshop. Here are some examples from our studio:
- File naming only in English:
banner.png | header.png | logo.png
- Each element of the name separated by hyphen:
upper-menu.png
- States of elements (buttons, icons, etc.) separated by underscore:
login.png | login_hover.png | login_active.png
- The order of words in the name of the file — first name of the object, then type, then state:
arrow-left.png | arrow-right_hover.png
This way of naming your files will also help you make rapid amendments directly on the files.
Recently we started to use Creative Cloud Extract. It’s a nice tool that makes cutting elements and collaboration with developers less painful. Yet it’s still far from perfection.
7. Share knowledge and keep your finger on the pulse
Usually the final webproject is the result of a great battle between the client’s remarks, ideas of a designer and skills of a developer.
When this uneven fight ends, designer faces another challenge which is to control compliance of design and product (website or an app).
It’s impossible to move the entire project pixel by pixel among dozens of pages and headings. (OK, it’s possible but it takes angelic patientce). Thoroughness of a designer has its limits, that’s why it is important to gradually educate developers a bit about the basics of composition, typography, color theory and visual hierarchy — of course without delving into details, because we will be laughed at ;) It takes some time, but effects in the form of lack of unnecessary questions such as: “Why is it like that and not otherwise?” are priceless.
8. Trust your developer
Trust is the key in any relationship. You won’t achieve anything beautiful while being skeptical on someone’s suggestions. If the developer tells you that certain solution will be perfect for your project — trust him. He may, of course, be wrong, but be aware of the fact that his intentions are good and ruining your work is not in his interest. Certainly, trust can’t be built in one day, but sometimes you should listen to a specialist in another field to ensure that the project in the final stage will satisfy the customer, developer and you.
Summary
These tips are based on our experiences and problems encountered while working with a whole team of developers. Unfortunately, the specificity of projects where each case requires a different approach and usage of new/ different technologies makes cooperation model changing all the time. Get to know the style of work and the “language” of your developer. Discuss with him as much as possible — solutions, new technologies, trends. If you find something useful on the web (interesting animations in CSS, unusual page) — share it! These little things will bring your relationship with a developer to a whole new level.
