Lately, as the web becomes more and more diversified, more and more designers having limited technological knowledge manage to build successful sites. From the beginning, we must admit that designers are totally dependent on the developers to bring their creations to life. On our own, most of us are able to create a static demo or a basic animation if we are lucky, but that doesn’t mean that’s all. Thus, we need a developer to translate our design into the code that any device would understand and execute anywhere in the world.
How do designers communicate with the developers, most of the times? The designers send a bunch of images, sites for example, mixed up PSDs and incomplete documentations. Once the development phase begun, changes in the graphics or the basic structure occur, inevitably. This bunch is held together by short meetings and superficial notes and, at the end of the project, everybody hopes that it bears resemblance to what the designer had sent in the first phase.
We all agree that there is a gap between the designers and the developers. I don’t have a simple solution in this respect, but I do have a few pieces of advice received in time.
The drawing of a plan is essential to the building of successful websites, but also for the developer to understand what your client’s expectations are. A good solution in order to avoid misunderstandings is to show the developer right from the start what your wireframe is and ask if what you want to create is achievable. Now is the best time to ask questions such as: “Can we produce this thing within the established budget?” or “Do you see (add your concern here) as a problem which might make us exceed the deadline?”
Before opening the Photoshop, structure the site in a grid that is adequate for different resolutions and devices. Using a content width of maximum 1080 px is a good manner to make sure you will make the developer’s life easier. Generating a grid is also an easier method for him to observe the things as they are in line. Using a grid based layout is the easiest and best way to get a “Pixel Perfect” design.
Once the design is ready, it can be modified by the client or it can move on to the development phase, where it is important that you foresee how it will look scaled on the mobile phone, tablet and desktop. How will your layout be affected if another category is added, or if the client wishes to add 5 more text paragraphs? All these questions should have an answer before you send the project to development.
Organize the PSD is such a way that others also understand which layers or groups to work with. A good solution is to group the layers and name them as they would be named on the web (Header, Footer, Content, Video, etc.). Do your best to make sure that each graphical element is on a separate layer; there is nothing worse than trying to separate two elements from a single layer. All these things sound natural, but they significantly reduce the development time if they are organized.
Moreover, it is essential to also have a few images of details (different states of the buttons, hover menus, calls to action, etc.). A good application for communicating feedbacks on an image or other details is “Skitch”.
When you create different elements with special features or animations, the best thing you can do is to find examples or write clear documentations. The developers cannot read your mind (yet) if you only give them a static image with no observation or demo.
Once the developer has finished his work, there will be reviews from you or the client. Hardly ever does it happen for him to achieve the final version on the first review, so, you will have to present to him as clearly an as specifically as possible the changes you want him to make. In order to avoid any kind of confusion it is recommended that you consider the modifications through versions.
In conclusion, the more organized you are, the easier it will be for you to make changes or to make others understand and appreciate your vision. If you are new in webdesing, do not let any opportunity pass by. Ask your developer how you can save him a few hours and at the same time create things that are as innovating as possible. Learn from your mistakes so that, as you move forward, you can comply more easily with the established deadline.
by Ovidiu Mățan
