12 Simple Design Tips to Speed Up Your Web Development

How to improve your design to save time on development and feedback

  • Fact:

    good graphic design can influence the effectiveness of web development. And we’re not talking much about visual style here but rather how easily your creative ideas can be translated into code. We asked our very own WordPress programmers what criteria, in their opinion, the design files should meet to be smoothly implemented online. So all the points below are based on the actual feedback.

    And while no single silver bullet will magically make all your development woes disappear, following these simple steps can help you improve the designer-dev collaboration and get the project done with fewer development hours and effort.

  • Website development depends on the quality of the design files. It is impossible to achieve a pixel-perfect result based on a single source file, given that the site should look and perform well on different screens and devices. Instead, online tools like Sketch or Figma allow you to process and export all layouts directly from the browser. And it will save developers time creating variables if they precisely understand your design’s interactions, styles, and behaviors. So you can start seeing results much sooner and receive a live version that looks and behaves just as you imagined.

    Yurii Nifontov,
    WordPress Unit Coordinator

Check list

  • Tip #1 Use the right software

    Avoid using programs meant for creating newspaper layouts, flyers, illustrations, or blueprints. Instead, there are multiple instruments for creating website interfaces, such as Figma, Sketch, or Adobe XD. They will ensure that you have a professional-looking layout that is easy to navigate and translate into code.

  • Tip #2 Use relevant file formats

    If you are exporting images or attaching assets, it’s best to save logos in the SVG format to preserve image quality. We strongly recommend using PNG for graphics and JPG for content photos.

  • Tip #3 Use the grid

    The grid ensures design flexibility which is vital for adapting the design to different screen sizes. It also speeds up the work with the design and reduces the possibility of errors and elements displacement.

  • Tip #4 Use the actual size

    Let’s not forget to scale the layout to 1:1 to ensure the site meets your expectations (remember to set “zoom” to 100% in your editor). Use pixels to measure the size of objects.

  • Tip #5 Blocks shouldn’t change drastically in the mobile version

    If the appearance, order, or functionality depends on the screen size, it results in hidden sections, adds a lot of complicated code, and negatively affects the ultimate page speed. In cases when it is necessary to create a different behavior for mobile devices, it would be reasonable to discuss the differences between the desktop and mobile versions with the developer to find out how it will affect the page speed and if the game is worth the candle.

  • Tip #6 Display different states of interactive elements

    If it is crystal clear what the hover effect on a button or a link should look like, your developers don’t have to come up with something on their own. Hence, there will be fewer surprises for the client. The same applies to the text fields (active, inactive, hover, error).

  • Tip #7 Properly prepare files for developers

    Double-check your Figma/PSD/Sketch project for hidden files and layers, such as images not being used, blocks from another website, or draft versions. Your final design file should only include what’s applicable and necessary for the current layout. It’s also a good idea to connect colors and fonts with the styles and use proper names for layers and screens based on content rather than just some random “Copy Frame 173”. Another great bonus for your developers would be receiving a list of all icons, colors, fonts, and sizes used in the project.

  • Tip #8 Do not use Caps Lock

    Just don’t. Even if the design requires uppercase, styles can solve it. So please insert the text in lowercase.

  • Tip #9 Accessibility

    Do not forget to check and ensure that the design follows accessibility standards, including contrast, size of the interactive elements, and margins. Also, remember to keep margins between the content and the edge of the screen in the mobile version.

  • Tip #10 Do not add features realistically impossible to implement

    For example, keep in mind that the margin will be based on the edge of the elements and that a developer cannot make a button precisely 13.3px high.

  • Tip #11 Maintain design consistency

    Creating and working with a website with no more than 3-5 basic colors and 2-3 fonts is much more pleasant and easy. Of course, there can be a broader palette if it aligns with your existing brand style. The main point is to ensure that elements and sections are reusable. Ensure the same sizes/margins are used in similar sections, even on different pages, to keep the design consistent.

  • Tip #12 Consider current web capabilities

    At the moment, not all overlays and effects can be achieved using styles. Please note that the developer can add a hidden image to the layout to implement a complex hover on a picture, which will negatively affect the page speed. If the client is looking for a non-trivial and ‘wow’-feature, it’s best to discuss the design with developers to determine potential bottlenecks for site performance.

    Fill out the form to see more tips

    Looking for help with your WordPress development project?

    No matter your WordPress project needs, we have the skills and resources to get it done.