UI Designer Starter Kit: 5 Awesome Free Design Resources

Are you an aspiring designer looking for some super cool free design resources? If the answer is yes, then this is the article for you! Check out these five free things that’ll jumpstart your dive into the design world!

#1 Need A Design Platform?

Start out with Adobe XD. It’s free, and it’s great starter tool for design & prototyping.

free design resources adobe xd

#2 Need Icons? Need Them For Free?

free design resources icons


Try Flat Icon. They have tons of free, high-quality vector icons that you can download and use in any design.

#3 Need Some Cool Fonts?

Check out Google Fonts. You can get a comprehensive, & professional library of fonts that are free to download and use. 
free design resources fonts

#4 Need Some Color Pallet Inspiration? free design resources color pallets

Coolors is a free, fast, and easy to use color generator.

#5 Need Some Bitchen High-Res Royalty-Free Sock Photos?

Look no further than Unsplash. These photos are professional, high-res and absolutely beautiful. You can download as many as you want, and use them for whatever you want.

free design resources stock photos

Free Design Resources Are Pretty Cool

If you know any aspiring designers, send them this list! If you are an aspiring designer, good luck!

You might also want to check out:

How to create a custom brush in Photoshop CC

4 Sketch Plugins To Improve Your Workflow

7 Free Sketch App Resources

Need some cool, free, and useful Sketch App Resources? Look no further. This list of things is the list of things for you.

#1 Sketch App Resources

“Sketch App Sources is the largest source for high-quality Sketch downloads. The site is a collection of plugins, tutorials, tips, articles, UI kits, wireframe kits, templates, icons, and many design resources created by Sketch users around the world. Our community thrives by those who want to learn, teach, collaborate, and share their work and passion for design. One of the best ways to learn new techniques and design principles is to study and analyze the work of others.” – Sketch App Resources

Sketch App Resources


#2 Flat Iocn

“The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.” – Flat Icon

Sketch App Resources


#3 Freebies Bug

Sketch App Resources


#4 Sketch Repo

“Sketch Repo is a great place to discover Sketch App resources for your next design project.” -Sketch Repo

Who doesn’t love free design resources?

Sketch App Resources

#5 Sketch Plugins

“Sketch’s functionality is extended thanks to our fantastic third-party developers who have created some of the plugins below for you to download.” – Sketch App

Sketch plugins add powerful additional functionality to your workflow.

Sketch App Resources


#6 Sketch App Rocks

“ is a place for all Sketch enthusiasts. We collect high-quality resources by designers and developers from all around the world, which help user interface designers to optimize their workflow and to make designing in Sketch easier and more fun.” – Sketch App Rocks

This extensive list of other Sketch resources officially makes this post meta. I love making things meta.

Sketch App Resources


#7 Sketch Talk

A collection of Sketch tutorials, talks, and answers to commonly asked questions about Sketch. Get advice straight from sketch experts. Learn how to be a sketch power user.

Sketch App Resources

4 Sketch Plugins To Improve Your Workflow

#1 Spell Checker

Ever wonder why design programs don’t have spellcheck built in? I know I do. Lucky for us, someone on the internet created this very useful Sketch Plugin that keeps your mockup copy error-free. Check it out here.

#2 Zeplin

This is one of the most useful plugins/tools I use in my design workflow. It’s a handoff tool that does an excellent job of smoothing out all the typical wrinkles you’ll encounter handing your designs off to developers.  It’s taken out %90 of the work on my end when it comes to creating style guides. It does # that make my life infinitely easier:

  • Pulls the document colors, intuitively names them
  • Pulls all the document text styles
  • Creates decent code snippets for the styles

As long as a text style or color is defined in the source file, it’ll show up in zeplins pre-generated style guide.

When you go into a screen within the mockup, it does a few more very useful things:

  • Gives you a Git-Style view of updates made to each screen. You can go back in time and see how your design progressed, and it even allows you to add “Commit Messages” to each iteration.
  • Point-And-Click exports.  Never again will you need to send a zip file of all of you’re assets. As long as you’ve sliced out your assets, anyone who’s added to the project can click on them directly in the mockup, and download whatever file type they need.
  • Spacing. Zeplin allows you to select any element within a mockup and view its dimensions, and spacing relative to other elements.
  • Code Snippets. If you click on an element in Zeplin, you’ll get a pretty reliable code snippet of the styles of that element. This is especially useful for gradients, drop shadows and text styles.

#3 Symbol And Artboard Organizer

There’s nothing more satisfying than having all of your symbols and artboards perfectly aligned and organized. It makes things a lot easier to find too. This plugin allows you to group symbols and artboards together by category. You can even Choose the size of your margins and how many levels deep you want it to organize your artboards.

#4 Sketch Material

This super awesome plugin allows you to create Material UI assets on the fly. It’s got a powerful library of assets that you can quickly and easily insert into your projects. This plugin is more of a design framework than a simple collection of UI elements.

Thanks For Reading!

Philadelphia Sketch Meetup #1

We just hosted the first ever Sketch meetup in Philadelphia. Check out our meetup group here. If you attended the event, thank you for your interest and I hope to see you again soon! If you missed it, or couldn’t make it, don’t worry there’ll be more events coming up soon.

Some upcoming meetups will include:
Design Workflow with Sketch – Learn about my design workflow and how I create a UI from start to finish.

How to make a Front End Framework – keep consistency throughout your projects

If you’d like another class on the basics of how to use sketch, just go to the event page and click the “interested” button to let me know!

If you want some more info on sketch, Here’s a list of cool sketch resources:

Premium Sketch Resources

FREE Sketch Resources

List of Sketch Features

Git Directory of Sketch Plugins

List of sketch plugins

Sketch ProTips

Full Sketch Documentation

Sketch Tool Box (easily access sketch plugins)

How to create a front-end framework in sketch

“I didn’t know Sketch could do that!”

So you’re looking to hire a Web Professional

So you or your company is looking to hire an online or digital professional, and you don’t know where to start.

The first step is evaluating your needs. This might be difficult if you aren’t very tech savvy, and once you actually start putting some thought into it, you may discover that undertakings, like building a website, or launching a social media marketing campaign, are more involved then you thought. Keep in mind that your needs will likely change throughout the project as you begin to discover what methods, strategies, and services you need to implement.

Photo by Jens Kreuter on Unsplash

Let’s say your company needs a website.

Things To Consider Before You Hire Anyone

  1. Communication. Make sure that you designate a single point of contact before the project. What this means is that only one person should be communicating with your designer/developer/web-professional. This person should manage the expectations and needs of your company in terms of this project. If your designer/developer/web-professional starts getting emails, calls, and texts from a group of people all requesting different things without communicating with each other, things will get confusing very quickly. Your project may go out of scope because too many requests were submitted, or you may even end up with conflicting requests. All of this will cost you time for your web-professional to sort out what actually needs doing.
  2. Scheduling. Good time management is key to keeping your project on track. Keep in mind that it’s very likely that your web-professional has other clients, and that things take time to do. Make sure you work with them to set a timeline of when work should be completed. It’s also important to note that with this type of work, it’s very difficult to give accurate estimates of how long something will take, especially when it comes to development. New requests when the project is in progress or unforeseen technical issues will add unknown amounts of time to a project. Please be respectful of your web-professionals time and try to keep communication within regular business hours unless it’s an emergency.
  3. Pricing. What kind of price range should you expect to pay? Well, this depends on the services you need, the scope of the project, and the level of experience of the people you hire. Generally speaking, you’ll likely be able to find a web professional for almost any price range. Just keep in mind, you’ll get what you pay for, for example; a $600 car isn’t going to run as well as a $6,000 dollar car.
  4. Hire Individual Contractors, or Hire a Firm? You’ll have to decide if you want to find a web firm that can do several, or all phases of your project, or if you want to seek out an individual content writer, designer, developer, and any other service you may need such as SEO, or online marketing. Some contractors may offer several services.

Designing A Website

  1. Content. First, you need to figure out what kind of content you want to put on your website. Websites are designed around content. If you skip over figuring out your content, or at least get a general idea of your content and hire a web designer first, your designer is going to be left with a lot of guesswork. You’ll end up either having to pay for more revisions to the design later to fit the content, or you’ll end up having to make your content fit your current design.
  2. Don’t know what kind of content you need? The best thing you can do is get a solid rough draft of what your website’s content will look like, and then have your content writer work with your web designer to come up with a design that best suits your needs. Remember that you don’t need a polished draft in the beginning, and worrying about details too much may slow down progress. At the beginning of the design process, it’s important to know what types of content you’ll need (blog posts, testimonials, services list, etc.) and how long you want each piece of content to be.

Make sure to send your designer any branding materials they will need to include in the design.

Once the design is finalized, make sure that your designer has provided you with the source file (.psd, .ai, .sketch), exports of all images within the design, the names of the fonts they used, & files of any non-standard fonts.

Hosting & Prepping For The Development Phase

After you get your content and design finalized, you’ll need someone to actually develop your site. If you’ve already set up a hosting account, make sure you give your developer any login credentials they need at the start of the project. They’ll need access to any existing website before they can do anything. If you don’t have hosting already set up, they’ll help you configure everything you need. Keep in mind that hosting is a separate monthly fee that varies depending on your needs and the company you use. If you plan on switching your hosting platform, your developer can assist you with this but this process usually takes up to a couple of days so it’s best to get all that settled before you even begin the development phase of your project.

If you have an existing website set up and need your developer to access it, you’ll need to give them your sites FTP login. FTP stands for File Transfer Protocol. This is how your developer will access the files on your website.  This login information is not the same as your hosting account login. If you don’t know your FTP login credentials, your developer will likely have to call your hosting provider and reset it, which will add more time to your project, as some hosting companies may take up to 24 hours to reset your FTP login credentials.

Once your hosting is all set up, and your developer has access to it, the development phase begins!

Developing Your Website

Functionality. The amount of functionality & custom styling is what determines how long it will take your developer to actually create your site. Your developer will give you a rough estimate on how long things will take & get to work.

Hands Off. During this phase of the project, you won’t be doing much except waiting on periodic progress updates from your developer. Keep in mind that you really shouldn’t be requesting any changes to the design at this point, and if you do, it can drastically slow down progress. Imagine if you were building a house, and halfway through building it, you decided you want to add another floor. It’s not going to go very smoothly.

Progress Looks Messy. Don’t worry if your site looks bad at first. Websites under construction will look messy. It doesn’t mean your developer is doing a bad job, it just means the job isn’t done yet.

Mockup ≠ Finished Product. Websites are almost never an exact match to the original design. Now, this doesn’t mean that your developer is going to change the design around, it just means that a fully functioning website is likely going to look slightly different for the sake of functionality.


Test. Make sure all of you content is error-free, and that the website is fully functional.

Up And Running. Now you’ve got a website.


If you’re not sure what you need, here’s a list of Web Professionals and what they do.

Web Developer – A web developer codes and configures websites and web apps.

Software Developer – A software developer creates computer software.

SEO – (Search Engine Optimization) These are the people who guide you through how to optimize your website to rank higher on Google and other search engines.

Content Writer – Content writers create articles, blog posts, and other forms of written content.

Digital Marketer – These people specialize in online marketing. They do things like run online ad campaigns and help come up with strategies to market your company online.

UX Designer – User Experience Designers specialize in engineering your user experience to be as effective as possible. Ux Designers often provide a range of specialized services like split testing (setting up multiple versions of a website & testing each with real users to analyze how they interact).

Graphic Designer – Graphic designers create illustrations, icons, and images.

Web DesignerWeb Designers design interfaces specifically for the web.

Web Manager – Web Managers maintain your website and manage all aspects of your web presence.

Web Consultant – A specialized consultant who can audit your web presence and tell you where you can improve.

Style Guides, Style Tiles, Wireframes and Structure

Style Guides, Style Tiles, and Wireframes are all essential elements of the design process. They serve as a foundation for your design project, and knowing what they are and how they can be useful will improve your design process. This will give the structure and consistency of your project. Let’s start with what each of these elements is and how they generally integrates with the process of designing an interface.

So What Are Wireframes?

Wireframe – an image or set of images which displays the functional elements of a website or page, typically used for planning a site’s structure and functionality.

WireframeWireframes are your layout. They help you plan your UX and UI elements without having to focus on any design elements. They are the foundation you will use to create the look of your project. They help you plan out measurements for things like responsive design.

When creating a wireframe for your project, you should consider asking yourself these questions before you get started:




  1. What do I want the User to focus on when they first view my site/app/interface?
  2. What information or functionality should be easily and immediately accessible to the end User?
  3. How should the information/functionality options flow as the User continues to scroll down and interact?

If you can answer these questions beforehand, it will give you a much clearer approach to creating your interface, and give your designs a much more purposeful look and feel.

Style Tiles –  a visual reference to the design language of a website.

Style tiles are a collection of design and style elements that give an idea of the types of fonts, colors, UI elements, and images that will be incorporated into a full fledged mockup. These are a more refined version of a mood-board. They help give your client a suggestion of a style without having to create an entire site mockup. You may even want to create several style tiles to let a client choose from. They are meant to be a guide in the early stages of a design to help get an idea of what kind of stylistic choices you’ll make throughout the project.

They are useful when you have a client who is undecided, or unsure of the type of look and feel they want in the design. Style tiles save you time by giving you the ability to suggest a style, without having to create an entire mockup. You could also present a client with several style tiles to choose from, instead of having to take the time to revise an entire mockup.

Style Tiles Style Tiles Style Tiles



Style Guides And Consistency

Style Guides – a set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field.

Style Guides are an established and finished set of UI guidelines that are used to keep branding and styles consistent. Unlike a Style Tile, a Style Guide is a finished product to be delivered along with a finished mockup, to keep any future changes, and/or development of the interface consistent. Style Guides are meant to be an all-encompassing reference to all of the design elements that are going to be used in a finalized project. They are generally larger than style tiles, and more detailed. A Style Guide is something you will add to, and edit throughout the project.

Here’s an example of a finished Style Guide:

style guides




Further Reading: 

The Fight for a Living Style Guide

The web designer’s guide to style tiles

Web Design Tutorial: Getting Started with Wireframes


How to create a custom brush in photoshop CC