The first tool that I used was Mockflow. This is a mockup tool that allows the user to create simple design documents, such as mockups and sitemaps. This is what I used this site for. The simple layout of the site interface allows the user to drag and drop elements in order to create a simple visual, helping map out site elements. I first created a sitemap utilizing this tool to help organize my thoughts, and figure out where I want content to be placed, and how the user-flow should look. Next, I used the same website to create a quick mockup for how I wanted each page of the site to look.
Mockflow LinkIn order to create a color palette to add to my design documents, I utilized the tool, coolors.co. This is a simple tool that allows the user to generate many color palettes with ease. All you have to do is press the space-bar, and five randomly generated will appear on the screen in five columns, along with each color's hex value. I really like this tool because it allows you to lock down colors that you like, and still generate other colors at the same time. this makes the decision process for creating a color palette much easier, in my opinion. I also enjoy the feature that allows you to view similar colors. So if a color that you like is generated, but you want it to be a shade or two lighter or darker, you have the means to do so. The user can also move blocks of color to the right or left, in order to see how the different colors look next to eachother.
Coolors.co LinkLastly, I used Google Fonts to select a few fonts that I thought would look good toghether for the text on my site. I selected three different fonts. One for page titles, one for navigation links, and content headers, and one for body content. Once my fonts were selected, I opened a google doc, and used the different fonts I wanted to create a simple typecard, which I screenshotted and added to my folder of design documents.
Google Fonts Link