DEV Community

Sarah Dye
Sarah Dye

Posted on • Edited on

How to Use Visme to Help Your Design Projects Stand Out

On July 11, I was tagged in a Twitter thread where developers were sharing their 5 favorite tools or apps they couldn't live without then tagging more developers so the list of resources would continue to grow. My tweet listed five things I regularly use when I code or blog. My 5 favorite tools are:

  • Google
  • Twitter
  • GitHub
  • CodePen
  • Canva

You've already seen CodePen here on some of the code tutorial posts. GitHub is an online platform developers use to host their code on the web. Canva is an online graphic design tool.

I regularly use Canva to create banners and logos for websites. After this tweet was published, I went on with the rest of my day. A few days later, Visme sent me an e-mail about the tweet I posted.

They asked me if they knew about their design tool. They asked me to take a closer look at their tool and play around with it so I could share it with you here. Visme gave me a complimentary premium account to use for this review.

I started playing around with Visme once I finished the Skillcrush 300 series. After playing around with the tool and making some projects, here's the official guide I promised for Visme. This post will show you how to use Visme to create your design projects such as the blog graphic I made for today's post.

What is Visme?

Visme is a data presentation and visualization tool that allows users to make a variety of visual content. Users can use the platform to create different professional graphics and presentations. Think of this tool as a mix of Microsoft PowerPoint, Adobe Photoshop, and Google Drive. You can learn more about Visme from this video on their YouTube channel.

How much does Visme cost?

At the time of this post, you can buy Visme as an individual, school, or business. You can pay per month or yearly. Individual basic membership is completely free. You’ll be limited with the number of projects, storage, and templates but you’ll still be able to get the main benefits from Visme.

The individual standard plan is $14 a month. You get more storage and projects you can keep on the platform. Other perks include creating color palettes, downloading projects as PDFs, and no Visme brand on projects.

The individual complete membership is $25 a month. Members get the full benefits of the platform including privacy controls, slide library, and downloading as HTML code. Do you want to use Visme for your business or at your school?

Visme offers standard and complete packages for businesses and schools. A business single package is $25 a month while an education single package is $30 a semester. You can contact the customer service team to learn more. If you would like to learn more about Visme's pricing, head to the Visme website and see how they break down their prices.

==> Click here to learn more about Visme!

So how do I use Visme?

You can make a Visme account by creating your username and password. Users can also use their Google or Facebook accounts to log in. Once you log in, you will be taken straight to the dashboard.

At the top of the dashboard beside the help icon and the bell for notifications, you will see your account name and e-mail. If you click on this, it will open a sub-menu with the account type and account number. You will want to keep note of this in case you need to contact Visme customer service and discuss your account.

Visme Dashboard

When you log in to Visme, you'll see all the projects you made here. You can also see these projects in all projects or my projects on the black sidebar navigation menu. Other things you can see on the sidebar menu are the Share with Me, Slide Library, and My Folders.

Share with Me is where you can see projects others have shared with you. The Slide Library is where you can find all the slides you have saved for future presentations. Then My Folders is where you can make or see folders.

At the end of the sidebar is the trash, my brand, analytics, and form results. Trash is where you find all the projects you've deleted. My brand is where you'll be able to save your brand information such as fonts, color palettes, logos, and templates.

Analytics is where you will be able to track users visiting your published projects and download this data. Form Result are where you can find data from any forms you make. Like the analytics, you can download this information too if you like.

Let's create a brand-new project!

You can create a brand-new project in two ways. You can click the button in the main dashboard window at the bottom of the create button at the top of the black sidebar menu. Once you click the create button, you will be taken to a page to decide which project you will make.

At the top of the page, you will see a black navigation menu with the types of projects you can make. Visme allows users to create presentations, infographics, documents, printables, web graphics, social graphics, and custom size. Custom size allows users to create any size project they would like.

Users can set the width and the height of their projects by pixels, inches, or centimeters. You can also select by common sizes such as presentation (16.9), presentation (4.3), US letter, A4, Infographic, and business card. Once you click on a type of project you want to build, the page will show users theme templates Visme has created or a blank project.

If you click on presentations, users can access libraries of ready-use slides Visme has created. Documents, printables, web graphics, and social graphics will have a sub-menu at the top of the page which shows users the different types of projects you can make. So if you would like to make a menu, you can find menu templates by clicking printables and then menus in the sub-menu that appears underneath the black navigation menu.

Creating a Pinterest Graphic

Let's start with the Pinterest graphic. Once I click the social graphics and pick the Pinterest icon, I'm taken straight to the Visme workspace. The image below is what the Visme workspace looks like for almost every project.

Visme Canvas

At the top of the page is the black navigation bar. You can click on the three bars icon go back to the dashboard, view the options, change settings, and modify your canvas size. Besides the three bars icon, you'll find the save, undo, help, and project name.

You can click on the project name to change it to anything you like. I changed mine to sample-pinterest for this review. Now let's start with the left side of the workspace.

The left navigation bar is where you'll find everything you need to make any project. Here you'll find layouts, basics, graphics, data, media, theme colors, and my files. When you click on each of these icons on the navigation bar, a window will open up to show samples and different content you can use to create your designs.

Some of these items will give you the ones Visme provides but you still can add your items for your design. I'm going to start by adding text to my blog graphic. When I add text to my Visme canvas, a menu bar will appear for the text.

This is where you can change the fonts, colors, font size, and more. You can add effects, animation, or arrange the text on the canvas. You can even turn your text into a link.

As you add items to the canvas, Visme will show you a preview of your project on the right side of the screen. You can also click the preview button at the top right navigation menu to preview your project up closer. If you would like to add more pages, you can press the add page icon at the top of the right window.

When you are working on your project and what to edit on the text, you click on the text you want to change to get the text menu. Clicking the text once will give you the following menu. This menu allows users to change the text by adding the following to a text box.

  • spacing
  • fill
  • border
  • special characters
  • alignment

Text Menu at the top of the Visme canvas

The rest of the menu gives you similar items that were in the original text menu such as effect, animate and duplicate. If you double-check the menu, you will be able to change the fonts, font size, and colors. I am going to add a line between my logo and graphic text.

To add shapes, I'm going to click on the graphics icon on the left menu and click lines. I just picked the line I wanted and double-clicked it to have it appear on the canvas. Then I just need to move the line and change the line size by clicking on the black dots that appear when I click on the line. If you click on the line, you can open up the icon menu to change the color, and thickness or flip the icon vertically.

Ready to publish?

It is time to think about how you want to publish it. Now that you are satisfied with your project, you can publish it. I'm going to download my Pinterest graphic.

To do this, I just need to click on the download button on the top right of the black navigation bar. When I click the button, a window opens with several options. These options include downloading the project as an image, document, or HTML5 file.

Visme gives users two options for image and document. You can download the project as a JPG or a PNG file. Visme gives users the option to download the image as a high resolution at the top so just switch the button if you want a high-resolution image.

How to Use Visme to Help Your Design Projects Stand Out

If you would like to download it as a document, you choose between the PDF or PPTX. PDF files have a button that users can click to show bleed marks. Bleed marks just show the areas that need to be trimmed after the project is printed.

So if you want your project professionally printed, you can turn the bleed marks on. Visme encourages users to use HTML5 if they plan on using any animations or effects since this file type will preserve all these so you can use them offline. They even include a gear icon for advanced settings for HTML5 files so you can change the page design, display options, social/engagement, and audio controls I am going to click the PNG image.

As soon as I click the PNG option, my design project is generated and the project is downloaded to my computer. If it doesn't automatically download, you might get a window saying that you've been chosen to open your Visme file from the Visme website. It will ask what you want to do with this file from opening it or saving it.

Sharing Projects Online

If you would like to share your project online, click the share button on the black navigation bar. This opens a window with three options. First, you can publish it on the web and get a shareable link.

This will also allow Google to index your project. You can share your project privately. Two, you can share your project privately and allow certain people access to your project.

Third, you can embed your projects on your website or blog. On the top right corner of the share online window, you'll see the gear for advanced settings. Advanced settings are where you want to change page design, display options, audio controls, and social/engagement. You can change any of these settings for any of the share online options.

Conclusion

This is everything you need to know to start making design projects on Visme. If you need any help using the Visme workspace, Visme has tons of great ways to help you with your projects. You can get tips from the Visme blog.

There are tons of great posts on their blog for creating awesome Visme designs. You can also use the Help icon on your Visme dashboard to find more guides and tutorials. You can also e-mail the Visme customer service team with any questions.

Once you've made a Visme account, you can register for one of the free webinars Visme hosts every Thursday. Each webinar has the Visme team walking viewers through the Visme tool and answering any questions live on the webinar you might have. You can ask the customer service team for a webinar link if you would like to attend the webinar.

Have you used Visme before? Share your experience with the Visme tool in the comments. You can also share any design tips you have in the comments.

This post was originally published on September 28, 2019 on the blog BritishPandaChick Codes. I made minor changes to the original post for DEV.

Top comments (0)