Getting back to basics! This is a blog discuss simple principals and new trends in web design.

Webtools to help the day-to-day process of designing and developing a website

Over the years of designing and developing websites I have slowly collected a wealth of bookmarks for designing and developing. Here’s a quick list and synopsis of what I use on a day-to-day basis.

DESIGN Bookmarks

Lorum Ipsumhttp://www.lipsum.com/
This one is a no brainer. Using fake text for a placeholder is a common as socks. This site make is easy to grab paragraphs, words, bytes and even lists.

Lorum Pixelhttp://lorempixel.com/

Need a free placeholder picture? Lorum Pixel will easily supply you with a color or grayscale photo in the size and genera you choose. They even supply code so you can pop it straight into your HTML.

Internet Gold. Book mark it!!

Kulerhttps://kuler.adobe.com

Adobe has built a color theming community based web app. Here’s a great place to find new color palates or color relationships to the color your working with. Plug your hexadecimal, RGB, CMYK, LAB, or HSV color code in and Adobe will serve up 5 swatches based on the selected rule (Analogous, Monochromatic, Triad, Complementary, Compounds and Shades).

This is an invaluable tool. You can also find it in Photoshop CS 5.5 or higher in the Windows -> Extension section.

Tiled Pattern Backroundshttp://subtlepatterns.com/

Coming up with subtle backgrounds and page fills can be time consuming. Free tiled images on the web are often overly aggressive visually or just “cheesy”. Subtle Patterns has a great resource for small tiled patterns. Their great website makes it easy to find and try out what your looking for.

This one is a jem. Book mark it!

Color Palate Generator – http://bighugelabs.com/colors.php

Love the colors in your photo? Have a screen shot of a page you really like?
Upload your photo to “Big Huge Labs” and have it instantaneously process you a swatch theme generated from your picture.

CODE Bookmarks

Convert to Plain Texthttp://jhy.io/tools/convert-word-to-plain-text

Clean that text! Text formatting (styling) baked into the text copied from a word document or email is frustrating. It can often mess up your style sheet or cause weird rendering issues that are troublesome. Take a moment to clean that text up and remove those awful Microsoft tags with this easy step.

HTML Symbols http://tlt.its.psu.edu/suggestions/international/web/codehtml.html

Can’t remember the HTML code for special characters like (enter symbols)? This Web page contains lists of common special entity codes needed in HTML to generate special characters. It’s a real time saver for little codes I can never remember.

CSS Ruleshttp://www.w3schools.com/css/

I’m a designer so my code retention is not always 100%. Here’s a quick and easy cheat sheet for CSS.

Web Fonts – http://www.bestwebfonts.com/

Web Fonts are still new to my day to day workings but as CSS3 and HTML 5 become the standard the ability to use custom fonts is not only feasible it’s highly desirable.
Best Web Fonts not only give you a handpicked selection of web fonts form the Google font directory they also supply 20 CSS text effects and the code to back it up.

This is a great way to jump into custom fonts and CSS styling in your web design.

Resize my Browserhttp://www.resizemybrowser.com/

Quickly see how your newly developed web page looks in a variety of browser sizes.

ICO Maker http://www.convertico.com/

ICO’s are a small detail on the web but a necessity non the less. This tool is a quick and easy converter that will transform your .jpg, .gif, .tiff into an .ico

SEO Browserhttp://www.seo-browser.com/

Take a look at how a web crawler views the site you’ve just made. Here’s a great toll for not only seeing how much SEO content is recognized in your site but it’s also a good tool to show a possible client how bad there current site is.
Hope this helps. These links are more for the all-in-one designer/developers working on small projects.

Feel free to email me or add on anything you think would be valuable.

Speak Your Mind

*