The key to creating a visual identity is to get something on paper (or rather on the computer screen). It’s okay if the first version of your logo has been built with a logo generator; it’s okay if the first hue of bright fuchsia is not the exact, perfect shade of fuchsia you felt the project demanded. What matters is that the prototype is complete. When you’re a web developer (or really anyone building a digital project), there are so many things to consider – database design, server setup, speed, security, implementation. It’s taken me a while to realize that to push digital products out, I need to focus on the things I do best, and bootstrap the things I don’t do well. Because once that first version of the project is done, I can always find people to help make it not just functional, but beautiful.
The essential basics of a visual identity of a digital project are the fonts, the colors, and the logo. A great headline will help, but the first impression made by your site matters. I’ve put together a list of my favorite tools to cheat at graphic design, from picking beautiful, free stock photos (once you take a look at Pexels, you will see these photos everywhere), to creating stunning graphics in minutes. Let’s begin.
I need stock images
Pexels – Pexels is a site with hipster photos in stunning muted tones that are perfect for site banners or background images. It’s sometimes hard to search for photos on Pexels, but you can usually find anything you need if you look for it in as general terms as possible.
Unsplash – For anything I can’t get on Pexels, I use Unsplash.
Icons8 – These photos are a bit tackier (think women laughing, while rapturously eating salads), but Icons8 has sets of photos that you can combine together to make visually-cohesive prototypes.
I need a logo
Logo Joy – Logojoy is a site that generates a logo after you fill out a survey with the name of your business, the tagline, a color palette, and a list of logos style you prefer. It will generate 5-8 logo variations that you can edit and customize. It’s not perfect, but I really like using logo joy to find inspiration to then create a logo on my own.
Flaticon – If you just need an icon, Flat Icon has thousands of vectors that you can pick, in a variety of colors and styles.
I need help picking site colors
Colormind – When I have one primary color in mind, I love using this site. Colormind will generate a random color scheme, including a primary color, two accent colors, a ‘white’ shade, and a ‘black’ shade. The middle color on the generator is the main one, and I usually input it, lock the color and tap generate until I’ve found a scheme I like.
Palette Generator – If I have no idea what I’m looking for, the Canva Palette Generator is a fantastic tool to get a color, or a color scheme from an image.
I need to find a font
Font Pair – There is nothing that will transform your site as quickly and painlessly as changing the default ‘Times New Roman’ font to a more modern font such as Raleway or Lato. Font Pair is a collection of Google Font pairings of header and footer fonts that work well together. I really like that there is an option to choose and combine sans-serif/serif fonts.
Fonts.Greatsimple.io | Google Font Pairings – If the first link is a soft landing into custom fonts, these are a deep dive. These font libraries are perfect for setting a distinct mood with the typography of the site. I don’t have the space to get into the philosophy of how typography matters here, but perhaps in another post.
F@$K, I just have no idea what I’m doing
Canva – When I want to pretend I’m a graphic designer, I just use Canva. It took me about three minutes to put together the poster for this post. Canva has a nearly limitless collection of templates for posters, banners, invitations, anything you may need. Canva is the reason all the the sites I build do not look like Geocities back in 1995.
This post will be continued in my UI/UX Toolkit Part 2. Did I miss anything on this list? Let me know!
Also published on Medium.
Web Designers helps you to make your thoughts into reality.