.svg)
Many web agencies start by designing a website with a design tool like Figma, and then they develop the site afterwards (with custom code or a website builder like Elementor).
At Azuro Digital, our custom web design services take a different approach. This approach is rapidly gaining popularity in the web design and development industry.
Instead of starting with a design tool like Figma, we design and develop directly within the Elementor website builder for a couple of reasons:
1. Development tools like Elementor have become so advanced and user-friendly that it makes design tools like Figma unnecessary and redundant for most projects. Designing and developing with Elementor is almost as fast as designing with Figma, and it takes much less time overall because you don’t need to go through the process of converting your Figma design into a developed website. In the past, it made sense to start with Figma because development tools weren’t nearly as easy-to-use as they are today. Times have changed!
2. When you design something with Figma and then convert it into a real website with a development tool, sometimes it doesn’t get converted as you expected. It might look and behave a bit differently, and there are certain things that the development tool might not be able to achieve or that would be problematic for a real website. By eliminating Figma from the equation, you’re able to view exactly how the real website looks and behaves throughout the entire process, allowing you to mitigate issues and make better decisions.
Bonus tip: instead of developing your website with custom code, we always recommend using Elementor or a similar website builder that uses visual drag-and-drop functionality. This way, not only is it more effective for the agency to build the site, but it also allows your company’s employees to make simple adjustments to the website themselves instead of relying on the agency to make every small change. With a bit of training, your non-technical employees can be equipped to make minor updates to the site.
Since your website’s design will revolve around the content, it’s vital to create a content outline from the onset of the project. Be sure to establish a sitemap to identify what pages you need and what types of sections you want to display on each page. You should also determine what order you want the sections to be displayed in (from top to bottom), and how long each section should be in terms of written content, number of images, number of subsections, etc.
Once you have a rough content outline established, some people like to create a basic wireframe to get a sense of the desired layout for each page (but this is totally optional in our books). You can use any design tool such as Figma to create the basic wireframe, but it shouldn’t be anything close to a completed design - its only purpose is to brainstorm the layout of the page in the form of a rough sketch. From there, you’d design/develop the site with Elementor. Alternatively, you can jump straight from the rough content outline to the design/development process in Elementor.
In most cases, we recommend designing several concepts - at least for the homepage of the website which will set the tone for all pages. Comparing multiple design concepts is helpful as it allows your team to identify the strengths and weaknesses of each. It’s difficult to know what design concept is best for your company until you’re actually looking at some completed concepts. You might even end up combining some of the elements and merging the best parts of each concept.
Many companies will have some form of “brand guide”, and it’s important to follow those guidelines to ensure that the company’s website is consistent with all other marketing materials. In some cases, you might be able to make some minor branding alterations for the benefit of the website, and you might even decide that it’s time for a more comprehensive rebrand that would also affect the brand guidelines for other marketing materials. Brand guides typically outline the rules related to color scheme, font families, font sizes, spacing requirements, logo, messaging, etc.
If you place bright text on a background that’s also bright, or dark text on a background that’s also dark, it’ll make your website look sloppy and unprofessional. It’s also an accessibility issue, making the content difficult to read especially for people with visual impairments. On top of being an issue for the user experience, it’ll also negatively impact your SEO performance as Google prefers to rank websites that are perfectly accessible.
Some font families are simply way too fancy and hard to read for some people. For that reason, we recommend choosing font families that are clean, crisp and easy to read - such as Montserrat. You also need to make sure that your text is large enough. Having sufficiently large text is one of the important elements for creating a modern aesthetic in your design, but it’s also important for accessibility purposes. You need to ensure that your text is large enough for people who have visual impairments. For most font families, we recommend using a font size between 16-20 pixels for the body text.
One of the easiest ways to end up with a sloppy design is to not focus on sufficient and consistent spacing. This is one of the most common mistakes in web design. Many designers spend all of their time trying to create the most extravagant design elements imaginable, but then they forget to add enough spacing between sections or consistent spacing between sections. If all of your sections and design elements are squished together, it’ll start to look messy and overwhelming. It’ll also look messy if you have large gaps between some items and much smaller gaps between others. You need to create some “spacing rules” for each project so that all of the spacing is consistent.
For starters, it’s crucial to ensure that all of your icons, graphics, images, videos, etc, have pixel perfect resolution and aren’t blurry whatsoever. From there, assuming that you’re using stock libraries to gather most of your media, we recommend investing in the top-tier libraries and avoiding the free or default libraries.
For example, the Elementor website builder natively integrates with Font Awesome for free icons. However, these icons are aesthetically very basic and are used by too many other websites. For better-looking and more unique icons, and to gain access to a much larger variety of icons, we recommend using premium libraries such as IconScout and Flaticon. IconScout also offers a large library of larger-scale stock graphics, illustrations, motion graphics and more.
When it comes to stock images, instead of using free websites like Unsplash, we recommend investing in libraries like DepositPhotos and Shutterstock which have a much wider selection - allowing you to find the best and most relevant images. Lastly, for stock video footage, try using iStock or Vimeo.
We recommend spending a substantial amount of time searching for the right stock media and making customizations when needed, as the media placed on the website will make a huge impact on the overall quality of the website. It’s also worth considering investing in your own original media to make the website as unique, targeted and relevant as possible.
Having a beautiful custom design simply isn’t enough to drive business through your website. During the design and development process, your designer/develop should be leveraging the best practices that allow your website to maximize the percentage of website visitors that take action. Once all of the best practices have been implemented, it’s also ideal to do ongoing A/B split testing to continuously make adjustments and enhance the conversion rate going forward. You should also consider investing in search engine optimization to drive more traffic to your website.
If you’re providing custom web design services, we recommend giving your client the ability to request unlimited revisions prior to the launch of the website and for a period of time after the site is launched. It might sound risky to you because some clients might be picky or might constantly change their mind, but think about it from the client’s perspective - if you fail to meet their expectations the first time around, why should the client be required to pay extra in order to request some revisions or see a new concept?
To mitigate and minimize the number of revisions requested by the client, we recommend having an in-depth discussion with the client to learn about their design preferences, required functionality, page count, content strategy, etc, before getting started.
From there, they might change their mind about a few things throughout the process - but that’s expected and designers/developers shouldn’t penalize their clients for that unless the requested revisions are beyond the scope of the agreement. For example, they might want to add a new functionality such as eCommerce or a booking system that was never discussed before - and you should definitely charge extra for that. But if the client is simply changing their mind about the layout, content, design concept, etc, we don’t recommend charging extra for that because it won’t feel fair from the client’s perspective (they might be requesting a revision as a result of being dissatisfied with your work). Treating every client relationship like a true partnership is the best way to thrive as a web designer/developer!
.svg){kind=small}
