Figma is evolving at an incredible rate. With a recent edition of FigJam and updates such as Cursor Chat and Audio, editors and viewers can collaborate even more effectively, saving time and resources.

One of the best things about Figma is the ease with which you can install all sorts of incredibly helpful plugins. If you’re new to Figma, it can be hard to know where to start – so here’s my guide to the best Figma plugins of 2021.

Master

Are you wanting to attach objects to an existing component or merge two main components? No problem. This plugin can help create, clone, and move components without losing overrides. While it might take some time to master this plugin, it’s absolutely worth it. Find out more about Master here.

Convertify Figma to Sketch/XD

In a previous blog, I touched on the differences between Figma and Adobe XD. For those designers that still have to toggle their design work between the two platforms, you might find the Convertify Figma to Sketch/XD plugin very useful. It easily converts and exports your design files from Figma to Sketch, Adobe XD, or After Effects with one click.

Adee Comprehensive Accessibility Tool

Adee is the plugin for you if you need to test your design out for accessibility. Adee is a powerful tool that offers a wide range of functionalities, including the game-changing colour-blind simulator. This feature lets designers select their design frames and preview them in eight colour blind modes within the Figma app.

Find / Focus

Alright, we’ve all been there – the larger the project, the harder it is to find that one layer. The Find / Focus plugin solves the difficulty of manually searching through endless layers in your document with its find, select, and zoom feature. Just type the layer name into the search window and refine your search with additional regex or case sensitive options.

Status Annotations

For those who use Figma’s free Starter Plan or like to keep all their design versions on one page, Status Annotations could be a helpful plugin addition. Although the status labels are quite small, this plugin does the job. It indicates the status of the design process for any selected element – a collaboration feature we needed!

Font Scale

Fonts can be difficult at the best of times, especially for those who are just starting out in design. Font Scale helps designers achieve harmony and consistency in a typographical hierarchy. With several scale factor options to choose from, Font Scale generates font size previews.

Figma Chat

As previously mentioned, Cursor Chat does a great job as an instant messenger within Figma; it’s innovative and super helpful for collaboration work. However, if you are looking for something a bit more old school, the Figma Chat plugin is a great option.

This plugin lets you communicate with other people inside the Figma file. You can also select a frame or an element and attach it to your message so that the recipient can find that element quickly.

Final thoughts

As we’ve discussed in a previous blog post, the design team at Verve Search uses Figma because of the sense of community that the platform encourages with features that allow for enhanced collaboration between creatives. If you’re new to UX and UI design, check out our selected plugins to see how they can work for your workflow and improve the collaboration on your team.

---

Interested in our content marketing and digital PR services? Get in touch.

For this post, you’ll learn about the benefits of using mood boards to communicate ideas to clients with different types of requirements. I’ll be using real examples created by Verve Search’s designers.

But firstly…

What is a mood board?

A mood board is a type of visual presentation that consists of several design elements in one composition. It’s a way to visually communicate your imagination with the world, as well as convey a general idea or a feeling about a particular topic. 

Mood boards can be physical or digital. For example, a UI designer might find a digital version a better option for organising inspiration for a new mobile application. 

Conversely, someone like a perfumer may want to use a physical mood board to include textures and objects to convey the emotion and mood of a unique perfume scent.

The benefits of using a mood board for client work

Mood boards are a valuable step in the design process as they help establish a strong foundation to the look and feel of a project and can be used to creatively align with project stakeholders early on. 

They are a fundamental transition between an initial thought and a first draft, and help save on resources and energy when maturing ideas. 

Mood boards should be a jumping-off point for discussing, refining, and trying out ideas without commitment, while also making sure that the team and the client are on the same page as the designer.

At Verve Search, we use digital mood boards in the production process to communicate the mental model of a designer who is working on a campaign. Mood boards help transform ideas into a collage of useful visual references, and there are lots of options you can explore on what to include in your own digital mood board.

What to include in a digital mood board for a client

A mood board is a collection of elements, such as colour, typeface, UI framework, or theme, that visually unifies a set of images. You might also want to include customised design elements that will be used in the final design. 

That being said, content visualised on a mood board doesn’t necessarily have to appear in the outcome of the project; the visuals could just serve as a way to describe a feeling or aesthetic.

Below is an example of a mood board I presented to our client Paxful for the Video Game Investments campaign. As you can see, I’ve included different icon ideas, a colour palette, an example of typography, UI inspiration, imagery, and a logo. 

On your mood board, you might also want to include different textures, shapes, and interactions between elements to give the client an idea of how you visualise your project’s look and feel.

Mood boarding approach

The way you should approach mood boarding at the beginning of a project depends on the type of project it is; is it a personal project or work for a client?

Working on a client project often means there is less freedom to experiment with design concepts, as there might be some existing client requirements or style guides in place. This is true especially for clients that already have an established design vision. 

In this case, the mood boards should give a sense of the client’s taste and requirements while also exploring some potential design directions. 

Below, I’ve detailed the ways the design team at Verve Search has approached three different client requirements and included some examples of our resulting mood boards and final designs… 

1: Clients with a style guide and extensive requirements

In the first example, I will talk about clients that provide a style guide and have strict requirements when it comes to the look and feel of the final product. 

Below is an example of a mood board that was put together for Lookfantastic’s Instagram Emotions campaign. The mood board includes some imagery from existing assets belonging to the client that serve as design reference, and some elements from their style guide, such as colour and typography. The mood board also includes some inspiration for the way our findings could be visualised in a map and pie chart.

Looking at the final design below, you can see how I maintained a similar layout and colour scheme to the ones showcased in the mood board.

Working with clients that have strict design requirements and style guides in place might seem like a bit of a creative challenge, but having access to a client’s style guide is a helpful way of understanding the client themselves – especially if you are new to working with them. Overall, their style guides will contribute to better communication and a mutual understanding of what will be expected from the designs.

2. Clients with a style guide and minor requirements

For The Jargon of Jobs, our client Canva provided us with both a style guide and some minor design requirements to keep in mind. We were tasked with creating a playful feel, using Open Sans as our font choice, and selecting an accent colour from the two they had provided us.

The resulting mood board for this campaign included some style guide references, inspiration for data visualisation in the form of a map, and some examples of trending design choices that we believed would work well as a design direction for this project.

The final design included all client requirements in terms of font, colour, and mood. On our side, we added a custom-made illustration depicting confusion (which worked well with the campaign’s theme) and a trendy radiant gradient to complement the logo.

For this type of client, I’d recommend not getting too attached to a particular style or a design vision. It’s a good idea to have a few options in mind, for example a more experimental design and also a safer design option. In the case of the first design option being rejected, you can always fall back on another design option that you have at hand.

3. Clients with no style guide or specific requirements

For our client Admiral’s campaign Home Alone 2021, the client gave us complete freedom in terms of design choices. We did however have to create a layout similar to the previous Home Alone campaign, for which this campaign served as a 2021 update. 

Since the topic for this campaign was vacant homes, we thought it would be great to reflect this with visuals like architectural blueprints. Therefore, a clean feel and accents of blue can be recognised in this project’s mood board. Other mood board elements included inspiration for the navigation aspects and snippets of the previous campaign.

Home Alone 2021’s final design featured a clean layout and an aesthetically pleasing colour scheme, with a large illustration of a lonely, isolated house on the splash page that made the interface more engaging.

From personal experience, I have worked on various campaigns and they all differed in their look and feel. Each project had its own concept that needed to be projected through design.

There have been campaigns that required more effort regardless of it having or not having a client’s style guide in place. No project is the same, but this is why mood boards exist – to help creatives in starting a project in the right direction.

How do the designers at Verve Search approach the mood boarding process?

The steps outlined below refer to the design stage of the campaign creation process. This is the standard mood boarding process as followed by the design team at Verve Search and may be a helpful guide if you’re starting out on a design project. 

Step 1: Campaign kick-off

Campaign kick-off is the first meeting we have as a team when starting a new campaign. During this meeting we get briefed on the campaign’s concept and have the opportunity to ask campaign-related questions. For designers, this would usually be the time to ask about the client’s requirements and the creative team’s expectations.

Spending some time researching will help you visualise the ideas better during campaign-related meetings. This could apply to prior campaign kick-off or data handover.

Tips at this stage:

1. Understand the concept of the campaign
2. Understand the client and what they want to achieve
3. Note down relevant keywords

Step 2: Brainstorming

At this stage, the key is to write down as much relevant information as possible. Try to combine all the knowledge you’ve gathered on the project so far and start to think about what could inspire you, products to be inspired by, colours, and anything that could impact the design. 

One way to do this is to take a piece of paper and start writing down keywords. You can then categorise them into groups like style, font, or colour. This process will help to organise your thoughts and transform mere imagination into a workable concept.

Tips at this stage:

1. Create a word cloud using relevant keywords and associations
2. Note initial thoughts on the look and feel of the campaign
3. Research possible ways to visualise the data

Step 3: Initial mood boarding

The initial mood boarding process should set the mood of the campaign and define a desired emotional response. These are the emotions a viewer should feel when looking at the mood board. 

Try jotting down adjectives that define the style that needs to be achieved and organising all the images you’ve collected according to their common visual theme. It’s important to eliminate any images that look alike or unnecessary – less is more.

Tips at this stage:

1. Analyse the client’s style guide
2. Analyse the client’s website or similar platforms 
3. Search for visual references and concepts on Dribbble or sources alike
4. Explore fonts (if not provided by the client)

Step 4: Data hand-over and mood board refinement

Once the data has been handed over to the designers and the content of the campaign is clear, it’s time to make final refinements to the mood boards by adding and removing visuals where appropriate.

Tips at this stage:

1. Refine the mood board according to the campaign’s content
2. Refine the mood board according to the campaign’s data

The takeaway from all of these steps is to organise your work, even if you are just brainstorming. Doing prior research and making a note of initial ideas could really help you later in the project. You will be able to go back to the initial ideation process and understand why you made a certain design decision. This is also helpful when presenting your work to clients or your team.

Final thoughts

Mood boards are an uncomplicated way of communicating a design concept that minimises any misunderstandings that might arise from trying to describe a concept verbally.

A good starting point for any designer is research, including reading through the client’s style guide, looking for the market’s standard in colour psychology, typography, and overall design. 

Since mood boards are usually shared with non-designers, it’s important to arrange them in a way that will make sense to viewers who are new to design as well. 

Further reading

Take a look at the below resources for further mood boarding inspiration:

Dribbble

Behance

Awwwards.

Typewolf

Muzli

---

Interested in our content marketing and digital PR services? Get in touch.

With remote working presenting new challenges to our creative process and our production team wanting to experiment with new design features, we’ve recently switched to a new design tool. But which option would work best for you?

In 2016, Figma introduced an innovative browser-based interface design tool. The same year, Adobe Inc. released its own version of a UX design tool: Adobe XD.

Alongside other popular editing software options such as Sketch, both Adobe XD and Figma have evolved into competitive design platforms, and our production team decided to investigate the pros and cons of each. Here’s what we found:

Platform and performance

The most obvious difference between the two platforms is that Figma is browser-based, whereas Adobe XD is a downloadable desktop application.

Adobe XD allows users to work with local files offline. It also allows users to share and get feedback on their design, thanks to its cloud capabilities. In its recent update, Adobe took a step further and XD now integrates with apps and services across the Creative Cloud suite. This means that sharing assets between apps and users with Creative Cloud Libraries is now easier.

Some might assume that Figma’s browser-based approach to designing is limited to internet connectivity. However, Figma allows its users to work offline on a pre-opened file via a desktop app (available for both Mac and Windows).

When comparing the two, it all comes down to individual preference and work style. However, working on a browser-based platform like Figma definitely has some advantages when it comes to collaborative work and live updates.

Pricing

Both Figma and Adobe XD offer free and subscription-based pricing options. XD’s single-app plan for professionals and small teams costs £9.98 per month (without a trial) and is free for personal use. Figma’s pricing options break down as follows: free for personal use; $12 per editor/month on the Professional Plan; and $45 per editor/month on the Organization Plan (annual billing only).

It’s worth mentioning that Figma’s free version allows unlimited editors on 1 project and 3 team files, as well as a 30-day version history, unlimited cloud storage, and unlimited viewers. Adobe’s free starter plan only allows for collaboration on one shared document and one additional editor, limited cloud storage (2GB), and a 10-day version history.

Here a more detailed view on the price differences between the two:

Features and functionality

Figma and Adobe XD are becoming more similar in terms of features and functionality. Each platform seems to adopt something new with every update. For example, Adobe XD has been working hard to achieve something similar to Figma’s game-changing collaboration features. On the other hand, Figma only recently introduced its Smart Animate feature, which is very similar to the Auto Animate feature that Adobe XD introduced some time ago and changed the prototyping experience completely. However, there are still some visible differences in workflow. Let’s discover them below:

What are we using at Verve Search?

At Verve Search, we’ve chosen Figma over other prototyping design options.

Here are the five reasons we decided to go with Figma:

1. Figma is free

Team accounts are paid but individual accounts are free and include all the same key features as the paid version.

2. Simpler developer handoff

Our developers can get dimensions, styles, and download icons and images from the project URL. Resources such as images and SVGs can be exported globally and locally.

3. Easy collaboration

Co-designing alongside your co-workers is no longer a fantasy. Our team can now edit files together in real-time, leave comments with mentions, and follow along via Observation Mode. This has been particularly useful for remote working.

4. All-in-one platform

It’s an all-in-one platform that does not require switching from one system to another in order to complete or share the design process. Designing, prototyping, reviewing work, and sharing feedback are all in one place.

5. Design features

Tools like ‘deep selection’ provide more control over design elements and save time during editing. Other features that our team enjoy working with are instant arcs, overlays, gradient borders, smart animate gradient transitions, and much more. Figma helps our designers to expand their creative ideas and showcase their visions throughout the design process.

Final thoughts

Figma made the right choice to focus on collaborative work and the ability to access files from the browser without installation, while I find that XD’s strength is in finding new design processes, such as Scroll Groups, 3D Transform, and Repeat-Grid features.

Only time will tell which platform will gain more recognition among designers. So far, Figma and Adobe are doing well at listening to user feedback and transforming it into real features, bringing visual design onto another level.

Features and images presented in this article are extracted from the official websites of Figma and Adobe. Figures for both are correct as of May 2021.

---

Interested in our content marketing and digital PR services? Get in touch.

For a designer, it’s essential to have a clear understanding of UI principles. UI principles are high-level concepts that serve as guidance when designing a user interface, which is the point at which human-computer interaction occurs. The hierarchy in the UI design is fundamental in determining what the user will take away from their experience when using the interface. 

The goal of a UI designer is to anticipate what a user might need to do by producing an interface that naturally encourages exploration and avoids confusion. 

For this post, I’ve designed a simple landing page for a fictional learning platform. This landing page design – that in its current state follows all of the UI principles correctly – will be used as a point of reference to demonstrate six key design principles.

I’ve accompanied each section in this blog with a version of the above page that demonstrates how a bad design decision could affect the overall image and the usability of your design. 

So, let’s get started…

Typography

Typography is one of the most important principles in user interface design. It’s the technique of arranging text to make it readable and visually appealing. The arrangement of the text includes selecting typefaces, font sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.

Good design doesn’t need to feature lots of different typefaces. Unless the typography is a core design element, you simply don’t need to use lots of typefaces to convey a message.

More often than not, simplicity is key, and a strong design might only feature one or two typefaces. The typography principle is there to lead the reader’s eye to the right place at the right moment. It sets the tone of your page and helps to establish a visual hierarchy in your design. 

For example, a larger font size and bolder font-weight have a higher chance of being seen by the user, but if we were to compare…

this lightweight text in a bigger font

with

this bolder text in a smaller font

…the chances are the first example would stand out more.

One way to improve a website’s readability is to increase leading (or line-height, in other words). This spacing between the two lines of text has a key impact on legibility; correct line-height helps the reader’s eyes travel from one line to another.

Although the standard leading is 120% the point size of the font, the leading can be set to automatic adjustment and can be modified according to the typeface needs. The body text in the example below illustrates poor use of leading.

The text is clustered which makes it difficult to read. Overall, this page does not give its viewers a sense of flow when reading the material from start to finish. The various alignments and improper use of fonts does not convey a story, nor does it urge users to take an action.

Scale

Scale in design refers to the sizing and the proportion of the elements on a page. Every element, whether a piece of text, a shape, or a line, has a weight.

The weight is created from the size, colour, or texture of an object. A symmetrical, well-balanced design is formed by aligning equally weighted elements on either side of the centre line. With the scale principle in mind, the designer needs to make sure that the page doesn’t look either overcrowded or empty.

One way to achieve this is with the use of padding and white space, or by simply adjusting the scale of an element. Scale can be used to direct viewers’ attention from the most to least important elements.

Objects of a bigger scale tend to attract viewers’ attention more, so the scale principle can be used as a way to rank design elements and influence the order in which users view them.

Below is an example of badly scaled design. The scale principle should help in guiding the users through their experience, but on the page below, the viewer can’t focus on any of the elements. The header is too big, the action buttons are too small, and the social media links (already highlighted enough with colour) are unnecessarily large.

Alignment

Alignment is the arrangement of elements in a straight line or correct relative order and is recognised as one of the core UI principles. Any two connected points are referred to as a line.

When executed correctly, alignment creates a hierarchy within a design and helps direct the user’s attention towards specific information. Arranged content is easier for the user to scan through which increases readability and the viewer’s engagement.

Alignment can be achieved with a clearly defined boundary or a division. A defined boundary can be perceived in a group of elements that share a common area. When the elements are close or proximate to each other they tend to be visually grouped.

In the example below, an excess of misaligned elements strips the viewer of a clear visual path. It’s now unclear where the viewer should start and finish navigating the page.

As the human eye naturally seeks perfection, an intentional misalignment of an object could sometimes be used as a way to attract a user’s attention. One way to do so could be by increasing the y-axis of a navigation bar link of a selected page as a way to highlight the user’s current location on a site.

White space

For a design to work, it needs to have an adequate amount of space between its objects. In our example below, the area around each object is white space, which also happens to be the negative space and another key UI principle.

Unlike positive space, which is the area of interest on a page, negative space is the background area around the subject of interest. The right amount of white space can simplify and break a design into chunks of information that are easier to comprehend.

A larger white space around the text helps improve readability. A design that has a very minimal use of white space could overwhelm the reader’s eye.

In the example above, it’s obvious that the design lacks white space, making it heavy on the eyes.

Here are a few reasons why this is happening. First, although the CTA buttons are emphasised with boxes, the text inside of them lacks padding and subsequently looks too big. The visuals on the right side of the page are too large and too close to the top navigation bar and the text on the left side of the page.

Elements on the left-hand side don’t have enough space to breathe and are overwhelmed by the size of the visual element. Header one and header two seem to be too far apart – despite them being part of the same group, they seem isolated from one another. The same issue can be seen with the CTA buttons, which once again are too far apart.

Colour

Users often perceive an aesthetically pleasing design as a more usable design, and they’re technically not wrong. More and more brutalist-inspired websites are receiving recognition among younger users. Their ruggedness and complete lack of usability is what makes them unique and memorable.

Sometimes the simplest, most intuitive, and most accessible user interface is not as popular as a modern design that has scarce consideration for usability. By and large though, if a website lacks aesthetics, it will most likely drive away visitors too.

Colour is another hugely important UI principle. Colour can establish the right tone, whether it acts as the main standalone component or is used as an oomph in other design elements. Colour can set boundaries, define shapes, and give emphasis to an area of a page.

In the example above, the colour selected for the design doesn’t reflect the brand nor enhances usability. The colour combination looks tacky and lacks contrast, creating difficulty when reading the page and identifying the navigation elements.

Contrast

Contrast is the state of something being different from something else. For elements to contrast, there should be an evident difference between the two. Colour, scale, or a combination of both can be used to contrast two or more elements and create space.

RGB, hexadecimal, and HSL all have an impact on whether a colour will have enough contrast. The Web Content Accessibility Guidelines (WCAG) 2 – the international standard for designing for accessibility – is a good way you can learn more about the specifics. WCAG 2 expresses the brightness differences between colours in a form of a ratio, which ranges from 1:1 (e.g. white on white) to 21:1 (e.g. black on white). If we were to check the contrast of RGB values on white background, the ratios would look like this:

Red = 4:1

Green = 1.4:1

Blue = 8.6:1

(*the ration value will remain the same even if the text colour is reversed with background colour)

According to WCAG 2, the minimal requirement of the AA level of contrast ratio is 4.5:1, though this ratio requirement drops to 3:1 if a large-scale text is used. This requirement can be avoided altogether when referring to the contrast in decorative text and text in logos, as these do not affect the accessibility of an interface.

It is important to note that there are many colour hues and shades out there and the ratios cannot be rounded. If the colour contrast is 4.2:1, it automatically does not meet the minimal contrast requirement.

Below is an instance of how contrast should not be used:

The above design is an example of ineffective contrast use because the elements are difficult to read and identify. Lack of contrast strains the viewer’s eyes and can result in users experiencing frustration.

Final thoughts

The different elements of a design should all work together as a team to tell a story and guide viewers through their user journey.

To all budding designers, I would strongly recommend familiarising yourself with UI principles before taking on a design project. The proper use of these principles will contribute to the flow and the outcome of your design, and significantly enhance the accessibility of the page.

Take a look at some of our previous campaigns to see how the design team at Verve Search have used design principles in their award-winning work.

---

Interested in our content marketing and digital PR services? Get in touch.