Elementor Design: Creating brand-consistent layouts

What happens when you feel that the design style and texture of your Elementor layout is a bit out of tune with your branding? Is your logo super smooth but you are too sharp and angular in design? Does the branding tone and niche scream for another type of fonts, yet you are still stuck on Roboto and Raleway? Does the logo simply feel out of place in the context of a web page layout?

I have always been super geeky on logos, and see how the rest of the design supports the branding experience in a consistent way. And my belief is that if the proper steps of discovery and research have been executed upfront, a logo can tightly represent a whole design system. Or at least provide sufficient hints for designing one.

In this quick workflow, I will use my current design Software to extract a basic style scape from a logo. I will use Grammarly as an example. They provide a truly useful service and their logo, although simple, contains the hints for a complete visual language. After that, I will create a page layout in Elementor, and evaluate whether or not the design style creates a good design context for the logo.

Brand consistency in layout building

An Elementor layout should be in tune with the brand for which it layouts the content. Now, if you still have not figured out what your brand’s identity is, and how you ought to shape your content to be valuable to your visitor’s, I would suggest that you give this a deep look and re-evaluate its importance.

Giving a thoughtful look at the logo, one can find many visual hints that imply a suggested design style or texture. This texture will then need to be carried through the layout and block sections of our Elementor page. Think like extracting the design juice of the logo and translate it into a style-scape, based on which you will design in Elementor.

I always design first, then implement in Elementor. I cannot remember a single time that I jumped straight into Elementor without having at least a baseline mockup to refer to in my design software. Currently, I use Figma, which is awesome and tailored to UI design. There is a free version as well that you can try out, with all the features provided for a single user, so if you are a single person gig, trying out Figma can be a whole new approach to your Elementor workflow.

So, what can you extract from a logo?

There is essential intel that one can extract from a properly executed logo. When designed by a professional designer, the logo execution is based upon some solid research in order for the logo to reflect the essence of the brand, a visual representation of its values, becoming the pacemaker for any design asset.

A well-made logo can be a solid foundation for a huge number of things. Listing my favourites:

• Typography
• Colors
• Spacing
• Radius
• Texture and Character
• Implied photography
• Implied voice

Seeking inspiration

I really could not find a better logo to work with that grammarly. So easy to digest, comfortably neutral and smart. Their execution reminds me of FedEx logo. I love the icon. It is a counter-clock-wise arrow and a perfectly balanced G for Grammarly.

So if I had a client that would come for a website design, I would happilly assume that there has been some discovery phase and marketing discussion, summarised in a brief for the logo designer. I can see that the direction would be within a simple, super-friendly approach that would be easy to get broadly consumed. Priority would be the font selection, since words are the main thing the product works with. So we need a font that matches the usability that the brand implies. Would definitely need an icon that works well on small sizes, and that is neutrally easy to connect with. Ideally elements of the logo or icon would be used into the app UI gluing up the whole logo branding into a unified concept that simply delivers.

Typography

Looking at the logo typography I will surely know what type of fonts to look for. I can either go for style compatibility or focus on contrast. For example, I would pair a rounded bold font for the headings with a slab serif font for the main text. The geometric contrast on the smoothness of the two fonts is good enough to justify the pairing. A typewriter-ish font would further enhance the concept I am looking for.

I can also look for compatibility, and a rounded font that matches the logo well and I could use the bolder weight for headings and the regular for main text.

I will prefer this approach and pick up my font. Stay on it.

Colors

Can I also extract a collar pallet from the logo? Yes, I do. I get the green value which I port into Palettte and I get a pretty neat generated color palette that I will base my Elementor color picker on for rapid prototyping.

Spacing

Let’s just feel the icon in the green circle, and focus on the padding of the thing. See the tension between the border weight of the icon and the edges of the circle. Now see the margin on the right of the circle towards the type elements. Then the letter spacing. You really get a sense of tightness that is so well balanced that feels overly spacious and open at the same time. We will try to translate this into our element spacing and section paddings.

Texture and character

Now, from all this, I definitely get a feel of the flat texture that I will go after. If I must use any kind of icons I will use line icons with a low-value border-radius.

In my layout, I do not want them to compete for my logo, icon, so I will not use them in a negative context (e.g. would not use the icon white in a box with a green bg colour. I want my logo to be the only icon element to have this style applied to it. I will go after a flat style for the buttons. I breathe sufficient padding into them and use a filled style. I will use uppercase typography for the button text, using the Heading font and some letter spacing.

The character is humble, don’t you think? If I were to use illustrations I would definitely go for this kind of style, and I would definitely integrate screenshots from the app. I have plenty of smart ways to integrate meaningful marketing dialogues in the screenshots. As smart as my logo is!

Box corners. To round or not?

This is definitely one to check out. The logo implies a rounder corner radius for sure. Would set it to as low as 4-6 px. Be humble. I would not use borders on any columns/boxes.

I would use box shadows though. The UX pattern of the product itself happens on a slightly elevated popup context. I am not conflicting with the flat character of the logo here people. I will use box shadows to communicate depth consistently, leaving any flat elements to express themselves spaciously. Perhaps it would be a good idea to use box shadows for some of the most important features of my product, and communicate them in a way that is consistent with the product’s UX.

If you want to use backdrops or background overlay graphics for your sections, you should definitely use either something well-curved, like a circle or a blob, in any occasion something that matches your logo in a consistent way. Blend some shapes with it in your design program!

Implied photography

If you need stock photos you have plenty of room to experiment with authentic people writing on a keyboard and target the specific concepts to match your user demographics. I’d say the concept is pretty flexible with efficient high-quality stock at Unsplash.

Result

So, after translating the design from Figma to Elementor, I have quickly reached a point of confidence and consistency. When I am in Elementor, I am not experimenting, I am designing my way towards the look and feel of my design mockup.

Here is the final result in an Elementor layout.

Maintaining consistency

It is true that in an era of component-based design, we create so many layouts and drag so many elements so easily, that many of us do not bother to refer a single point of truth for design. Working with Elementor within a design system mindset is highly efficient and depending on your workflow, you may end up with a simple style scape, global widgets, blocks or CSS.