Andrew Tralongo The Best Free Design Tools in 2020 - Feature

The Best Free Design Tools in 2020

Whether you’re a student, freelancer or full time designer, there are heaps of free design resources to help you. Whether you need icons, images, illustrations, fonts or even just some inspiration to get started, here is a list of the best free design tools in 2020!

Icons

Andrew Tralongo The Best Free Design Tools in 2020 - Icons - Material Design and Human Interface Guidelines Image

Material Design and Human Interface Guidelines

In any design, consistency is key. So creating a UI design with familiar visuals to the OS they run on is a sure fire way to boost your platform’s user experience. Better yet, it helps throughout the development process! Both Apple and Google have published their design guidelines online for designers, developers and marketing teams to study; Google with Material Design and Apple with Human Interface Guidelines.

While they both have a great icon library, they are some of the best free design tools for UX design!

Andrew Tralongo The Best Free Design Tools in 2020 - Icons - Flaticon Image

Flaticon

With over 2.6 million icons and counting, Flaticon is the go-to stop for illustrative icons. Download them as PNGs, SVG vector images or even add their icons right into your Google Drive document. While there are some Premium icons, there are plenty free options available – all you have to do is credit the creator for their work.

Andrew Tralongo The Best Free Design Tools in 2020 - Icons - The Noun Project Image

The Noun Project

Founded by Sofya Polyakov, Edward Boatman, and Scott Thomas, The Noun Project aims to create a repository of common icons, like bicycles, planes and people. This icon library has been created by designers all over the world, containing both free and premium icons. They have also developed handy plugins for Mac, Adobe, G Suite and Office.

Images and Illustrations

Andrew Tralongo The Best Free Design Tools in 2020 - Illustration - Undraw

Undraw

In this day and age, if you’re a designer, most clients assume that it means that you’re an illustrator. If you’re like me and you can’t draw, Undraw is one of the best design tools to add illustrations to your web design or video project. All their vectorised assets are open source which means that you don’t have to attribute it’s creator. Launched in 2017, Undraw’s illustrations have been used by the likes of Microsoft, Google and Facebook.

Andrew Tralongo The Best Free Design Tools in 2020 - Illustration - Unsplash and Pexels

Unsplash and Pexels

Chances are that many of your clients are going to have little to no quality images that can be used in your design – it’s pretty normal in my experience. In this case you will need to use stock photos, and using Shutterstock can get quite costly. Unsplash and Pexels are two great stock library sites which let you download high resolution images for free. You do not need to credit the creator, and better yet, they both have Sketch plugins to directly search and insert images right into your mockups.

Andrew Tralongo The Best Free Design Tools in 2020 - Illustration - Vectorstock

Vectorstock

Similar to illustrations, icons and vector images are something which clients assume can just be ‘whipped together’. With over 18 million assets, Vectorstock is a great site to download more detailed and illustrated images, with a selection of both free and premium images to download.

Fonts

Andrew Tralongo The Best Free Design Tools in 2020 - Fonts - Google Fonts

Google Fonts

Google Fonts is the go-to stop for web design. They are all free and extremely easy to integrate into any web design project.
You can even use Google Fonts with SkyFonts to easily sync them straight to your computer.
The only downside is that as it is such a popular platform, it may make the design appear generic, especially in web design projects as many themes use Raleway or Montserrat as their default fonts – but don’t get me wrong, they can look great in a lot of designs!

Andrew Tralongo The Best Free Design Tools in 2020 - Fonts - Font Squirrel

Font Squirrel

Font Squirrel have done the research. Compiling fonts from all over the net, everything is 100% free for desktop commercial use. Better yet, they have a handy visual guide showing you which extended licenses are included for the font; Commercial Desktop Use, @font-face Embedding, Ebooks, and PDFs and Applications. So while you won’t have the entire selection of the font family for free, it will direct you to the author’s site which is a great way to understand pricing for the complete typeface.

Andrew Tralongo The Best Free Design Tools in 2020 - Fonts - Dafont

Dafont

I feel like Dafont is the first place everyone looks for fonts when they were in high school. With a wide variety of typefaces from graffiti to christmas themed fonts, there is something there for everyone. However, do browse carefully; not all of them are free. They are either freeware, shareware, demo version or just public domain which doesn’t give the 100% go ahead for commercial use, but makes it a good place to start looking for something a little different.

Tools

Andrew Tralongo The Best Free Design Tools in 2020 - Tools - Sketch Cloud

Sketch Cloud

If you’re a UI/UX designer using a Mac, then chances are you are using Sketch for everything from wireframes to full-blown prototypes. While you can create your prototypes through the app itself, using Sketch Cloud you can share it online or to your phone/tablet. It’s one of the best free design tools to partner with your Sketch creations and a great way to test, refine and share your designs with your clients! One of its best features is their Inspect tools, perfect for developer handoffs. It allows you to inspect elements of the design and code your new website/web platform accordingly.

Andrew Tralongo The Best Free Design Tools in 2020 - Tools - Material Colour Palette

Material Colour Tool

Much like the Material Icon System, with Material Design, Google has developed the Material Colour Tool that helps you choose perfect colours and tones for your palette. While they have a pre-set list of colours, they also let you add custom colours to help you find Light and Dark tones for your primaries, as well as displaying text legibility percentages for black and white of large and small text.

Andrew Tralongo The Best Free Design Tools in 2020 - Tools - Google Drive

Google Drive

It might seem a little obvious, but Google Drive is one of the best free design tools that anyone can have in this day and age. Online storage, word documents, sheets and presentations with the ability to share and collaborate with anyone and on any device. From writing project notes to a full blown proposal and presentation, never underestimate the power of a document.

Inspiration

Andrew Tralongo The Best Free Design Tools in 2020 - Inspiration - Designspiration

Designspiration

Designspiration, as the name suggests, is the place for design inspiration. Launched in 2010 as a collaborative community space to share great design ideas from around the world, there are few rules for posting — no nudity, no selfies, credit your source, nothing not design related. You can save images, each having its own page highlighting its creator and colour palette.

Andrew Tralongo The Best Free Design Tools in 2020 - Inspiration - Dribbble

Dribbble

Dribbble is a great place for inspiration, acting as a “LinkedIn” for designers; a social media and self-promotional platform for designers to share their work online. Started in 2009;

“The name Dribbble came about from the dual metaphors of bouncing ideas and leaking your work.”

Andrew Tralongo The Best Free Design Tools in 2020 - Inspiration - Awwwards

Awwwards

Awwwards is a global competition body from Valencia, that aims to find the best in innovative web design. Founded in 2009, it’s a great place to get inspiration and trigger new ideas for not just web design, but for typographic layouts and compositions. From Site of the Day to Site of the Month to Site of the Year, every entry is annually published in their The 365 Best Websites Around the World book.

Andrew Tralongo The Best Free Design Tools in 2020 - Inspiration - Reddit

Reddit

If you can think of it, there’s a place on Reddit for it. Again, it may seem a bit obvious or simple, but never underestimate Reddit – it covers every corner of the internet as we know it! With any user being able to contribute to the site, all you have to do is find your people. Expand your horizons and gain inspiration from anything and everything.

Well there you go -the best free design tools in 2020! I’ll be sure to update this article when I find more great free design resources, so be sure to keep posted!


andrew tralongo how to create a brand style guide feature

How to create a brand style guide

Creating a brand style guide is a great way of determining not just the look and feel of a business, but defining the tone and language of the overall brand. It might seem a bit daunting at first, but there are a few easy steps you can take to create a brand style guide!

What is a brand style guide?

A brand style guide, also referred to as a brand guide, defines the way in which a brand should communicate and present itself. This can be through written content, the design choices of their website, or even something as basic as using the correct logo in a word document.

For companies big or small, it is a great way to ensure that every team member understands the brand’s values so they can consistently and effectively communicate that to their clients and greater audience across all media.

You can now gather why a brand style guide is also referred to as The Bible of a brand!

Although, while it is the foundation for the brand, it is never set in stone. A brand style guide needs to reflect the brand, therefore if the brand’s values change, so does the style guide.

Before you start! Designing for digital vs print

In this day and age, creating a brand style guide for businesses means that you have to consider both digital and print mediums.

The difference between digital and print is the pretty simple;

  • For measurements, digital will use px and print will use mm.
  • For font sizing, digital will use px and print will use pt.
  • For resolutions and sizes, digital will refer to Desktop, Tablet and Mobile screen sizes and print will refer to A5, A4, A3 paper sizes.

While you can define both web and print usage in a single brand style guide, it is something which should be clearly defined within your scope of work!

The 7 things you should include in a brand style guide

There are 7 things you should include in a brand style guide;

Throughout these steps, we are going to be going through the brand style guide I helped develop for Lenscape at Xugar. If you want to check out the project, click here to see more.

Mission and Vision statements, or Brand Story

You should always start your brand style guide with their story. This introduces the brand through a mission and vision statement, while simultaneously defining the target audience and brand’s voice.

Now I know that this is a lot of points to group in the first step, however, all these elements are key in defining the brand’s identity! They can also be answered in 3 simple questions;

  • What do you do?
  • Why do you do it?
  • Who are you doing it for?

Now let me break them all down.

A mission statement defines what the business actually does. For example;

“Lenscape is an optometrist, currently located in Manor Lakes.”

A vision statement however is why they do what they do. This often reveals the core values of the business, and therefore the overall brand. For example;

“The average customer traditionally visits their optometrist when their vision is already blurry. At Lenscape, we want to get ahead of it and prevent their vision from getting worse.”

Lastly, asking who they are targeting is key. You can’t please everyone and a design always needs to be tailored towards an audience. For example;

“As we are located in a shopping centre, we have a wide target audience due to the foot traffic. This includes 20-35 year olds who need blue light glasses for work, 40-60 year olds who need reading glasses and families.”

andrew tralongo how to create a brand style guide brand vision
Bonus

Defining a niche

While many businesses know their target audience, clearly defining a niche can help the brand communicate to the best-suited audience and better yet, tailor the design towards their likes and needs.

Tom Ross recently released a great guide on defining your niche, click here to check it out!

Brand Voice

Defining a brand’s voice is something which is answered throughout all these questions, and throughout your initial discover meeting with the client. It’s their personality and character. This is important as every asset of the brand needs to be consistent.

While you can pick up these points throughout these questions, if you are having difficulty establishing a brand’s voice, a quick and easy branding exercise is to list off a few adjectives or general descriptors of what your brand values, and a few your brand does not. For example –

Good: Educational, Ethical, Conscious
Bad: Close minded, Short of time, Wasteful

Writing down these two lists will help you expand upon your design reasoning throughout the brand style guide, but also help the business in learning how to effectively communicate the brand’s values.

Logo

The face of any branding; the logo. If you are creating a new logo, redesigning an existing one, or building a brand style guide, you should introduce the logo and share its meaning.

However, what this section should further explore is its usage. This includes;

  • Arrangements: Are there other arrangements of the logo?
  • Size: What is the minimum size the logo should be?
  • Placement: Where should the logo be placed?
  • Spacing: Does the logo require empty space around it? If so, how much?
  • Colour variations and usage: Does the logo have colour variations? When should they be used?
  • Lockups: If it is used in conjunction with another logo, how should it be displayed?
  • The Don’ts: Ways the logo should not be used. For example: Can it be rotated, stretched or altered in any way?

andrew tralongo how to create a brand style guide logo spacing
Bonus

Digital or print - which is it?

Knowing the purpose of your brand style guide will determine how in-depth you need to go. Do the measurements need to be in px or mm? Does the placement need to include just screen sizes or also paper sizes? Think of every scenario your logo could be used within the scope of your brand style guide, and define it.

Colour palette

Next comes the colour palette. Once the logo is created, then defining your colour palette is not too difficult as it has already been defined in the logo!

When defining your colours however, regardless of whether you are creating a digital or print brand style guide, you need to define your colours across both mediums as the brand presence will eventually move from one to another. Remember, consistency is key!

In the brand style guide, for each colour you should list them in;

  • HEX: HEX is a digital colour system constructed of a hash (#) followed by 3 pairs of characters, representing the intensity of their RGB values.
  • RGB: RGB stands for Red, Green and Blue, each value ranging from 0 to 255. This value is used for digital colours.
  • CMYK: CMYK stands for Cyan, Magenta, Yellow and Key (Black), each value ranging from 0 to 100. This colour type is used for print.
  • PANTONE U: This is for Uncoated PANTONE prints, like matte finishes.
  • PANTONE C: This is for Coated PANTONE prints, like gloss finishes.

After picking your colours, you also need to include your tones – the lights and darks of each colour. For this, I usually use the Material Design Colour Tool to help me choose the secondary and tertiary colours. It is also a great tool to help with text legibility, showing you how black and white text will be on your colours, as well as the minimum opacity you should be displaying them at.

To discover the right Pantone colour for your chosen colours, use the Pantone Colour Finder to convert your HEX, RGB or CMYK colours to PANTONE Coated and Uncoated.

andrew tralongo how to create a brand style guide colour palette
andrew tralongo how to create a brand style guide colour usage

Typography

Next up is the typography, something which to many designers, may seem quite daunting. However when choosing typefaces for your brand, there are two main usages you need to consider – Headings and Body text.

Heading fonts typically are more bold and extravagant, displaying character that resembles the brand’s values that have been determined in the Mission and Vision statements.

Body fonts on the other hand should sit further down in the hierarchy with legibility being their top priority.

Once you have chosen your Heading and Body typefaces, you need to define how to use them in the brand style guide;

  • Font: This defines the specific font you have chosen within the font family.
  • Font weight: While this is often pre-defined within the Font’s name, like Roboto Light, when designing for digital and web, developers will easily understand this value.
  • Kerning: In web design, this is also known as the letter spacing.
  • Leading: In web design, this is also referred to as line height. For many fonts, the optimal line height is considered as 120-140% of the font’s size.
  • Text transformation: Should headings be written in UPPERCASE, Title Case or Sentence case? Define how content should be formatted in basic scenarios common for the brand.
  • Web-safe and System font alternatives: It is important to choose which web-safe and system fonts should be used when your chosen typeface is not available. Remember, for emails and 3rd-party softwares, you often cannot import/embed fonts!

There are two other points which we have not yet covered, font sizes and colours. Choosing a font’s size and colours are all dependent on the design itself. If you are creating any collateral material such as document templates or web design mockups, then it is a great addition to your brand style guide! If not, determine whether these definitions are within the scope of your project.

andrew tralongo how to create a brand style guide typography
Bonus

Free Libraries

Depending on the scope and budget of your project, you may need to choose a free font for the branding – and there is nothing wrong with that! Unless you are working with a massive corporation that has the flexibility to purchase a license for a few fonts, platforms like Google Fonts and Font Squirrel may be your only options.

However, be warned! As these platforms are so widely used, choosing one of the most popular fonts, such as Google Font’s Lato, Raleway or Roboto, your typography, as well as the overall brand aesthetic, may appear generic.

Hunt through these libraries and you may even be able to discover a few hidden gems throughout that will let your brand stand out from the crowd.

If you’re looking for some of the best free design tools in 2020, checkout my blog post at the end of this article!

Imagery and Iconography

You’ll be surprised how many businesses, big or small, are using free stock photos. Some of them are good and some of them… not so much…

With so many stock photo libraries out there, both paid and free, you want to make sure that any photo selected is consistent with the brand and matches their values and overall aesthetic!

Defining the brand’s imagery is essentially creating a mood board of images. After selecting a few images, in the brand style guide it is great to describe what others should look for when choosing images;

  • What is the lighting like?
  • Should they be monochromatic or should a colour treatment be applied?
  • If there are faces, what feelings should the characters be emoting?

The same goes for icons. If there is an icon library, advise them where they can find them, if not, find a few icons that best suit the brand. Other points to note on;

  • Should they be monochromatic or should a colour palette be applied?
  • Should they be used for navigational items?
  • How large can they be displayed?

andrew tralongo how to create a brand style guide photography

Collateral Material

This is a great way that you can upgrade your project and build a brand style guide that can be commonly referred to for other designs in the industry. Get their files ready so that their assets can be visually consistent. Templates, templates, templates!

  • Collateral print material
    • Business cards
    • Brochures
    • Advertising Material
  • Collateral digital material
    • Email footers
    • Global web elements (Buttons, Text Fields, Navigational elements)
    • Social Posts
  • Global collateral
    • Icon sets
    • Photo shoot
    • Document templates (Word, Pages, inDesign, Google Docs/G Suite)

Now, go create your brand style guide!

Now begins the fun part – go out and create your brand style guide! Whether it is a short document or hundreds of pages long, this will be the foundation of how the brand and their team will present themselves. It all depends on the scope of the project and the needs of the business!


andrew tralongo cut from the same cloth feature

Cut from the same cloth

Xugar has been a great opportunity for myself to develop a vast variety of skills – it is something I did not expect from applying for a web design internship nearly a year and a half ago. And with the way the company has grown and developed, I have quickly risen to the top. Don’t get me wrong, I appreciate it greatly, but I also wish that it progressed a little differently.

From A-B and B-C

From just a Digital Graphic Designer, I moved to Design Director as the company developed – in terms of the role and responsibilities I had, nothing drastically changed as I had already created my own work and developed a new arm of the business in content creation and design.

However, it is once I became the Design Director and Project Coordinator that things became a little different, now managing the design and development departments of the business. Having to manage and train people below you is much more difficult than I thought. Your time gets eaten into defining and delegating tasks, checking other peoples work before it gets sent out to the client or even other departments, replying to emails and the nitty gritty of it all. It’s funny how productive a day can feel and still not know exactly what you did that made you feel so productive. Trying to keep on top of it all sounded so easy, but I never realised how hard it actually was.

It’s funny how productive a day can feel and still not know exactly what you did that made you feel so productive.

Towards the beginning it was real difficult. All the inherited tasks of the previous manager (late projects, half completed websites, little-to-no briefing and supporting documentation, and most importantly frustrated clients) it was a load of stress that to be honest, wasn’t the easiest to deal with. As a matter of fact, I didn’t deal with it at all – it felt so overwhelming. I was taking all of the blame on my shoulders and it was tearing me down bit by bit. I wanted to prove that I could clean all this up, not just to the company, but to myself; That I could get through this and prevail on top.

While in the ‘storm’ of it all, after one day where it all felt like way too much, something had to change. Not just the way I was managing the tasks, but the way that I have to be to be able to do this kind of work. The first I knew was going to be how to actually manage the projects and daily tasks; because what was done before, wasn’t working.

Refine, refine, refine.

I had helped the previous project manager develop a clearer project development process so I already understood how that worked. The best way for it to improve is to simply use it when we receive a new project and refine, refine, refine.

Image sourced from eBooks.com

Bullet Journaling

The bigger task however was managing tasks on a day-to-day basis. I could track all the tasks in our project management platform, Teamwork, however for things like Ring client in regards to X, Draft up email to Y or even just your odd favour for someone that you know you should write down otherwise you’ll forget, it just gets too time consuming compared to just writing a note. I tried to write your good old, big standard To Do lists but it was often just on pieces of paper that would be eventually lost within the stacks of scrap notes and paper. Then I attempted to move to digital and keep a typed up list going, that I could copy and paste uncompleted tasks over from the previous day, but then I might as well have been doing it on our Teamwork system.

Walking around Milligram with my partner, we found a few books about Bullet Journaling. I had no idea what it was, but my partner told me that it would be a good idea to do. There was one book however which stood out amongst the bunch – The 365 Bullet Guide by Zennor Compton. So I flicked through a few pages, liked the vibe, and picked it up.

A notebook always ends up messy and in-organised to a degree, but I liked that you can design order within that chaos. Customise the way that you want the diary/journal to be laid out in within every spread. Combine both meeting notes and daily task lists neatly into the one book. I thought that it would be a good starting point to start, with the possibility to further develop and refine the journal.

Podcasts

The next thing was something which I have been trying to work on for a while now – finding other designers to connect and relate with. Being able to relate and even just vent to others who are experiencing the same kind of day-to-day issues. Building new relationships is something that I am trying to work on, however I have been wanting to be more productive in my down time. Not being a big reader, I though I would try listening to a podcast before investing in audio books. After researching a few design related podcasts, I discovered The Honest Designers Show and Design Life. I tried a few other podcasts but I didn’t find them that relatable, often like mini TED Talks. Why I connected to these shows was that it was simply a few authentic people having a conversation, finding out ways to overcome their problems at hand or learning about something new they are genuinely interested in, with advice that isn’t limited to a single form of design.

And now…

And now many of these projects have been completed and handed off to their respective clients, and the last of them nearing a close. I’m actively listening to these podcast, and even started tuning in to Tom Ross’ The Honest Entrepreneur Show to discover if there is another area I can explore. Even though we have been working on Xugar’s YouTube channel, a YouTube presence has been something that I have been thinking of delving into…


andrew tralongo blog xugar design week 2019 feature

Xugar Design Week 2019

Xugar Design Week 2019

A few weeks ago, I gave myself a challenge; To write, film, edit and release a design-focused video every day for a five days straight. This would be the very first Xugar Design Week.

As soon as I planned all the videos out and fully committed to it, I already thought I had bit off more than I could chew. Although as soon as I started actually figuring out what video was about and writing the scripts, I felt more confident in myself that I was going to see it to the end. I decided to try a new format of Podcasting and by the end of the week I had successfully completed the very fist Xugar Design Week! Now that’s its been a few weeks I am still really proud of the content that is out and am keen to give myself another ‘impossible’ task or goal in the next few weeks!

To find everything that we created, here’s a link to find all the content we released.

Now the planning for Xugar Design Week 2020 begins…