Essential Tools & Websites for Beginner Web Designers

Now don’t be misled by the title of this post. Yes, I am going to be giving you some valuable tips on designing for websites but I am in no way even a beginner designer. I can still hear my primary school art teacher saying ‘everyone is a designer in their own way’ but that just isn’t a label I’m looking for. Don’t get me wrong. Design is crucial for front-end development but I believe there is a big difference between designing to complement your code and designing to create an experience.

I take my hat off to web designers. There are some people that can look at an ugly page and be able to visualize a masterpiece in their head. I am not one of those people. So to make up for this I rely heavily on tools, inspirational design websites and many other things that will hold my hand through the whole design process.

##Wireframes Most of my wireframes consist of messy drawings that only I can decipher. However, there are those times where you need to share your layout thoughts with other people. That’s where online wireframe tools come in.

###wireframe.cc Wireframe.cc makes prototyping less painful and best of all its free! You simply drag and drop within its grid and it creates different elements of the page. I would suggest watching the demo video to know what all the tools do. Once you get the hang of it you’ll never use any other free wireframing tool again(or paid for that matter).

###I Love Wireframes No this is not me declaring my love for all things wireframes. This is a website that is your go to place if you are looking for the newest information on wireframes. Not very useful for actual wireframing but includes some great free wireframes sometimes. Worth checking its recent posts now and again

##Colors & Backgrounds Colors are a challenge for me. I’m just not good at picking color palettes or know what goes with what. Thank god for real designers. Especially those who share their talents with the world for free.

###RGB Color Codes Chart This little gem is your one-stop-shop for all that is colors. It includes a color picker, RGB color codes chart and an RGB color table. It even has a description on how RGB colors are changed into hex codes.

###Subtle Patterns Subtle Patterns gives you a range of well…subtle patterns. Like all things on this list they are free and of high quality. I have used them in a number of client websites with few complaints. The only downside is it is limited in the number of patterns you have to choose from.

###Color Scheme Designer Paletton have created an amazing web application that will randomize color swatches to produce you a limitless selection of color schemes. You can choose a base colors and it will come back with a number of complimentary colors.

###Flat UI Colors This website is just a number of color samples that correspond to the trend of using flat display colors. Clicking on a sample will copy the hex code to your clipboard. Great if you need to quickly design a project.

###Colour Lovers Before accusing me of making yet another spelling mistake, it is actually colour. This crafty website offers a plethora of color samples, palettes and patterns. There are always new designs and colors on here. Watch out though. You’ll find that you will become very picky about your colors due to endless amount of choices.

###css gradient generator For those looking to take design to the next level css gradients are a must. A great cheat tool for developing gradients is this css gradient generator. You choose your colors, add color stops and opacity and your done. It even gives you gradient samples for those times you’re feeling lazy.

##Fonts Nothing changes the feel of a website more than the simple change of fonts. They convey so much about the feel of a website. I never knew there was so much to think about concerning fonts until I delved into web design. Luckily there are a lot of fonts available on the web.

###Web Safe Fonts There are a number of fonts that are included by default with most browsers (the most common browsers anyway). All that is needed is to include a property of font-family with the font name as its value within your css selector.

###Typekit, Font Squirrel and Google Fonts. Each three of these websites have a large selection of fonts that are unavailable with only web safe fonts. There are a number of ways in which you can input these fonts into your website.

##Graphics These tools focus more on tweaking images rather than where to find them. Quick shoutout to Shutter Stock and Graphic Stock for massive collections of stock images.

###LoremPixel When in need of a placeholder image look no further than LoremPixel. It is a quick and easy placeholder generator that allows you to pick the category and size of your placeholder. Just place the link it gives you into your image tag’s src and ta da!

###Resize Your Image Have an image but its proportions just aren’t right? Resize Your Image will take that image and crop it to the size you want. It’s easy, free and intuitive to use.

###Pixlr Pixlr, the simplistic and free alternative to Photoshop. It has most of the tools people use photoshop for and allows you to build an image from scratch. This is one tool you will need in your bookmarks bar.

##Filler Content Filler Content is a must when it comes to testing a website. While it is important to have copy that is relevant to the website when testing filler content is fine for your first phases of testing.

###Lorem Ipsum Generator Where would the web be without lorem ipsum? Ask any web designer and they will know those two words. It is the default filler content used worldwide. This little gem of a website will generate paragraphs, lists … whatever in lorem ipsum.

###Fillerama For those that are feeling a bit more creative fillerama offers filler content from movies and shows such as Futurama, Doctor Who, Monty Python and Star Wars. Thank you Chris Valleskey!

##Inspiration

###CSS Zen Garden Firstly this is brilliant. Had to get that out there. CSS Zen Garden displays a number of pages that have the exact same HTML but different CSS stylings. It demonstrates the power of CSS and creative design. It will blow your mind how powerful CSS is.

###Codepen Codepen is a digital playground for developers and designers. It is a great tool for testing your code without the hassle of creating a file structure on your computer. You can also view other people’s works of art. Truly, some of them should be considered works of art. This is another website you can spend hours, if not days searching.

##Final Thoughts This blog post has only just scraped the surface of what is out there to help web designers. Don’t let your lack of education or experience hold you back from experimenting with colors and building beautiful designs. Remember, expertise comes from knowledge and practice