White Label Coders  /  Blog  /  12 Tips on how to prepare your design for web development

Category: Software Engineering

12 Tips on how to prepare your design for web development

how to prepare design for web development
30.03.2021
4 min read

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?

Paweł_Zmysłowski

CEO / Team Leader

Serial entrepreneur in the IT industry. Former coder, graduated from Silesian University of Technology. His strong technical background coming from the former programming career, combined with business analysis skills and real-life business development experience, based on an 18-years track record as an entrepreneur, blends into a mixture of competences extremely helpful on a leadership position he holds in WLC.

Related Articles
SEE OUR BLOG
Check related articles
solid and kiss in programming
Best Practices in Programming Based on SOLID, KISS and Personal Experience

The guidelines a programmer should follow on a day to day basis are just as important as they are in any field. 

Read more
practical applications of design patterns
Practical Application of Design Patterns

The use of SOLID, KISS and other guidelines not only help maintain order in the code itself, but also in communication between programmers.

Read more
Why TypeScript
Why TypeScript?

Node JS is great for api development, we have used it for ages. We also have great web frameworks like express and koa, nice orms like sequelize, bookshelf, objection and mongoos, and we have a lot of other libraries and plugins that we love to use.

Read more
Rewriting IT Systems from Scratch
5 Reasons Why It Is Not Worth Rewriting IT Systems From Scratch

When clients are seeking IT services, they are usually in one of two situations: They have a new business idea based on an IT system, or they currently have this type of business and the system is seriously suffering. 

Read more
responsive web design
What is responsive web design?

Read more
delighted programmer with glasses using computer
Let’s talk about your WordPress project!

Do you have an exciting strategic project coming up that you would like to talk about?

wp
woo
php
node
nest
js
angular-2