12 Tips on how to prepare your design for web development

Admit it or not, we simply judge things based on their look. And that goes for websites design too. If you make them look and function well, as designers and developers try to do, people are going to trust the content more. That’s how things are.

Communication between designers and developers is crucial for every great website development project and can be the advantage of it, or the final nail in its coffin.

Read the article to find out more on:

• How to run effective web design and development project for the end client
• How to prepare graphic design to make a web developer’s work easier

Designers and developers often work separately. Therefore, problems with the technical implementation of the website frequently result from poor communication between these two. Remember good communication is the key here. To avoid frustration with the final result and make the end client happy with the finished website follow the guidelines and get the job done nice and easy.

Good graphic design can influence the effectiveness of web development

• Providing detailed description of graphics is a good practice. Especially for animated and dynamic elements, since static graphics do not always show all aspects of the site’s dynamic elements.
• Designer and developer should opt for the pixel-perfect method vs. automatic content scaling, which depends on the screen width. Read more about responsive web design here.
• The coordinated elements with similar functions on different sub-pages of the website should be the same, since it allows to design and develop a consistent website. It also saves a lot of time at the development and testing stages because of using elements that are already coded. The Gutenberg editor of WordPress allows you to easily prepare, insert, and parameterize elements in different parts of the website through the administration dashboard. However, this requires carefull planning and designing such elements at the UI/UX design stage.

Good website design tools make the website development run fast

• Do not use Photoshop. Please. For years, Photoshop has been the most popular graphic design software, often used to create graphics for websites. But this one is definitely past its prime. Exporting elements, copying content from Photoshop is much more time consuming than using modern tools that offer browser access to the project.
• Tools like Figma, Adobe XD, or Sketch allow you to export the design to a browser or a Zepelin-like application to check the properties of each element: its size, margins, colours, and font formats. They also make it easy to add comments to specific site elements, such as hovers, sliders, and other dynamic elements.

• Don’t use tools that serve other purposes, such as book typesetting or DTP graphic design. We once received an inDesign designed website and it was a torture…

Website design to code

• The project for client’s approval should be provided in a browser. It should have adequate resolution to show the sizes of fonts, images, and all website elements on the screen as they will appear once coded.
• A good practice is to provide icons, logos, etc. in vector format (SVG). This not only allows them to scale well. They are usually also lighter, so the website loads faster.
• We are also grateful for already extracted elements. The designer is usually more skilled at using graphic design programs than the developer, and he knows better how to prepare graphic files with graphic elements separated from the background.
• Handing over the design approved by the client to developers. Sometimes even small changes in graphic design software in a matter of seconds can mean a lot of work, if an already coded project needs changes.

Website fonts and typography

• Fonts. The best practice is to use fonts that are available in Google Fonts, which makes them easy to use in the design. They are also free and can easy to optimize. If the fonts are not available in GF, please provide them in woff and woff2 format.

• It is a good practice for the graphic designer to use a consistent typography for the whole website, including headings, paragraphs, different types of text, buttons, images, the way the content encloses them, etc. They should look the same on all sub-pages of the website.

It allows the developer to prepare global styles to use when implementing graphics on sub-pages.

Complex website development

• For complex websites with many functionalities, such as e-commerce websites, it is a good idea to involve a developer, who is aware of the technical limitations of WordPress and WooCommerce at an early stage of graphic design.

Of course, any design can be coded. Theoretically. However, sometimes a design that does not take into account the specifics of the pre-built solutions used by the developers to save time and money, can mean a lot of unnecessary work.

These limitations can be agreed at the design phase, which saves a lot of time and work. This approach allows the client to be presented with a design that already takes the limitations into account.

Communication and good cooperation between designer and developer can be the real competitive advantage. That is why we should use it to make great websites and our clients happy.

Do you have an exciting new project coming up?