Design
Marketplaces:
99designs![]() 99designs is a design contest marketplace. It brings together a pool of designers from all over the world and SME businesses, which need design solutions. Projects categories include logos, web design, banner ads, and even merchandise design for things like t-shirts and clothing.
|
Visual.ly![]() Visually is a one-stop shop for the creation of data visualizations & infographics. Tapping into Visually's vibrant community of more than 35,000 designers makes it easy for the buyers and sellers of infographics to get them made, distributed, liked, commented on and shared.
|
iStockphoto![]() iStockphoto is the web's original source for royalty-free stock images, media and design elements. iStockphoto offers vector illustrations, videos, music and sound effects, Flash and logos. All iStock files are royalty-free, so you only have to pay once to use the file multiple times.
|
BigStock![]() Bigstock is your fast, easy-to-use marketplace for quality stock images. We offer over 13 million royalty-free photographs and illustrations from talented photographers and artists around the globe, available for almost any purpose.
|
Inspiration:
Deviantart
![]() Deviantart is one of the largest artist showcases on internet. You can find some great inspiration here.
|
The Design Inspiration![]() TheDesignInspiration is created by a group of designers who are seeking design inspiration every day.
|
Stylevault
![]() Stylevault is a design showcase where web designers show off their talents and get inspiration as well as giving it.
|
Behance
![]() Designers use Behance to showcase their creations and millions of visitors come to discover creative work.
|
Web Design Library
|
Colour Theory for Designers![]() Before you start designing anything, read this excellent three-part article from Smashing magazine on the theory of colour for designers and get a basic understanding of how colours work, what they mean and what they look like on websites.
|
COLOURlovers
|
Benchwarmer
|
Colour:
Adobe Kuler
![]() Kuler is a web-based application by Adobe that helps you create and share colour themes.
|
Colour Scheme Designer
![]() Colour Scheme Designer (CSD) is designed to easily create a set of matching colours. The CSD generates several different types of colour schemes based on one (base) colour, supplemented by several complimentary colours selected to make the best visual impression.
|
The Color Wizard
![]() Submit a base color and the Color Wizard automatically returns a set of hue, saturation and tint/shade variations, as well as suggesting colour schemes based split and complementary colours, analogous colours and other variations. The Color Wizard also has a randomise function that lets you generate colour schemes you might not have thought of on your own.
|
The Color Wheel![]() Spin the Color Wheel and get a selection of three random colours from among some 16 million colour options. Each spin produces three different colors, so that gives endless combinations. Find a good colour combination that you would never have thought of on your own or take a colour that you like and plug it into the Color Wizard to get the theoretical matching colours.
|
Colr.org
![]() colr.org is a tool to let people fiddle around with colours. Using a photo as a starting point for a color palette, find a photo that has the “feel” you’d like for your colour scheme, upload it to this site, and watch as it generates a palette of colors that are pulled directly from your image.
|
ColorPicker
![]() Construct a palette of colours using ColorPicker, the site uses a coloured square (and colour bar) which you hover over to choose your hues. It generates the web equivalent of the colours and builds a palette with each colour choice. The emphasis is on web-safe colour and ease of use.
|
ColorPic![]() The ever popular Color Picker has an inbuilt magnifier and allows you to grab and save palettes of up to 16 colors at once from a photo or website and use four advanced color mixers to select a spectrum of colour possibilities.
|
Colorotate![]() With ColoRotate, you can work with colours in 3D, in real time, and in a way that matches how our minds process colour.
|
Smilebox![]() Smilebox is a new way to bring your photos and videos to life by letting you quickly and easily create slideshows, invitations, cards, collages, scrapbooks and photo albums. With more than 1,000 customizable templates to choose from, you'll find inspiration around every corner.
|
Smush.it![]() Smush.it uses optimisation techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimises the images without changing their look or visual quality
|
Pixel Ruler![]() Know the exact size and position of any element with this screen ruler. Pixel Ruler features horizontal and vertical orientation, dynamic mouse measurement tracking in pixels, cool design.
|
Color Hunter![]() Color Hunter is a place to find and make colour palettes created from images.
|
Photo Editing:
Pixlr![]() Pixlr is a fully featured photo editor available directly in your browser. It combines image design and paint tools with photo editing and adjustment features more convincingly than any other online image editing program. Pixlr is capable of producing results on a par with many of its software-based counterparts. Yet, despite its deep feature-set, Pixlr remains easy to use, intuitive and user-friendly.
|
Skitch![]() |
Gimp![]() |
iPiccy![]() iPiccy is an innovative online photo editor. iPiccy makes your photo awesome with many easy to use photo tools. Edit pictures, apply beautiful photo effects, add text and even paint! Enjoy free photo editing online and show your creativity with iPiccy editor! Free! No registration required.
|
Essential Chrome Extensions
ColorZilla![]() This browser-based colour pickers is really useful and includes a colour picker, eye dropper and gradient generator, along with additional advanced colour tools. You can get a colour reading from any point in the browser (and save these colours in custom palettes), make edits on the fly and paste the output (in CSS, Hex, RGB and more) into other apps. The ability to analyze DOM elements on a webpage and inspect its palette of colours is a particularly valuable feature. You can also pick colours from Flash Objects at any zoom level, and generated or sampled colours automatically copy to the clipboard.
|
Pendule![]() Pendule complements the built-in developer tools of Chrome and makes website edits easy, such as viewing CSS, disabling styles, reloading CSS (without having to reload the entire webpage), viewing JavaScript and much more. The extension itself is unobtrusive, quick and responsive, featuring an extensive toolset. The the ability to switch off both images and CSS is particularly useful when designing and developing websites. There is also a color picker, display ruler, link checker and several script validators, with each feature neatly arranged into groups. The option to change the display resolution, for checking how your website renders on multiple screen resolutions, is neat, and you can even set keyboard shortcuts for the extension from the Options menu.
|
WhatFont![]() The days of right-clicking to "view source" are long over. WhatFont identifies all the fonts used on a webpage and gives in-depth details, such as the font family, font size, along with the color, weight and line height (you can even tweet this information). Apart from native web safe fonts, it detects the services used for serving the font and supports Typekit and Google Web Fonts. It gives you the fall-back string, and if a font called for is not installed, it's striked-through, showing the actual font used. It's important to remember it only works for online pages, not locally. Once activated, hover on text and a pop-up displays all the selected fonts information.
|
Screen Capture![]() Screen Capture is an official Google extension that quickly captures visible objects, whole pages, visible sections of pages and drawn selections as PNG files. Each snapshot can be edited and annotated (before being saved), and highlighting, lines, arrows and redacting and adding text are fully supported. It intelligently detects floating objects on a page to avoid repeating the capture of the same objects if the whole page requires scrolling. It works quickly, even when capturing large pages, and will also scroll the page horizontally if necessary. Share the snapshots on Picasa, Also of note is Awesome Screenshot, which boasts a rich feature list for capturing and annotating webpages.
|
Evernote Web Clipper![]() When we spend most of our time using a web browser, storing and cataloging information effortlessly becomes essential. The Evernote Web Clipper for Chrome makes it quick and easy to store just about anything you find on the web in your Evernote account, including selected text, articles, links, PDF's, images and even entire webpages. Tag each snapshot when saving and select an Evernote notebook in which you'll store the snapshot. The "intelligent," context-aware functionality is impressive, with the pre-selection of notebooks (and tags) based on website content.
|
MeasureIt![]() With MeasureIt, draw out a ruler which shows the alignment and exact pixel width and height dimensions of any selected element on a webpage, an especially useful tool when designing and developing websites. To use the extension, just click and drag out the ruler to find an element's dimensions quickly and easily. While not as feature-rich as its Firefox counterpart, it is especially useful when tweaking CSS, where accuracy down to the last pixel is necessary. MeasureIt works on local installs of most CMS's but does not work on local HTML files.
|
Palette![]() Colours play an important role in design, and it can be challenging to create the "perfect" palette. Having an extension such as Palette at easy reach within your browser can make this particular task much more efficient. Palette for Chrome can create up to 64 colour palettes and is useful for grabbing ideas and inspiration for colour palettes from images around the web. The interface is intuitive and easy to use; simply right-click on the desired image, select "Palette for Chrome," and choose the number of colours you want the palette to generate. A new tab will open, displaying the image and resulting colour palette.
|
Lorem Ipsum![]() When testing content or typography, dummy text can be useful. For those who don't use alternatives, try Yet Another Lorem Ipsum Generator. It will generate text (paragraphs of variable length), titles, dates and dummy email and web addressees, with other options available via the toolbar button. You can configure the date format and choose specific dates or generate a random date. Copy text to the clipboard for use in other apps; the extension itself is extremely lightweight as it doesn't include any external libraries or require access to other online resources.
|
On Screen Elements:
Stripemania![]() Stripemania is a simple and tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can even add a colour gradient effect.
|
Icon Finder![]() Iconfinder is an icon search engine with over 100,000 free icons, it provides high quality icons for web designers and developers in an easy and efficient way.
|
More Icons![]() |
Arrows![]() |
Fonts:
Google Web Fonts![]() Hundreds of free, open-source fonts optimized for the web. Search or browse hundreds of font families, then add the ones you like to your Collection. Grab the code and you’re ready to add the Collection to your website!
|
Fontstruct![]() FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.
|
Dafont![]() Dafont is a great website which allows you to browse fonts alphabetically, by themes, or by date. Most of the fonts are free to download.
|
Whatthefont![]() Seen a font in use and want to know what it is? Submit an image to WhatTheFont to find the closest matches in our database. Or, let cloak-draped font enthusiasts lend a hand in the WhatTheFont Forum.
|
Typetester![]() The Typetester is an online application for comparison of different typefaces. Its primary role is to make web designer’s life easier.
|
Typeface.js![]() With typeface.js you can embed custom fonts in your web pages so you don’t have to render text to images.
|
Lorem Ipsum![]() Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
![]() |
Design Training
creativeLIVE![]() creativeLIVE unleashes the creative potential of millions of people by connecting them live with the world's most inspiring instructors. creativeLIVE will help you grow your creative and entrepreneurial expertise. Learn from renowned professionals in photography, business, productivity, software development, design, film, video and more. Watch in-depth, live seminars for free in an interactive social platform. Ask the instructor questions, or connect with other course participants, via Twitter. Stay in touch after the seminar and become part of a community of dedicated creative professionals. If you missed a class or want to know more, you can purchase copies of each course at any time.
|
Free Stock Photos
The Best: pixabay.com &morguefile.com Mid-range: public-domain-image.com &www.sxc.hu Pretty Limited: myfreedigitalphotos.com Vintage Photos: vintagepixels.com Imagery and Icons: iconfinder.com www.sxc.hu Wikipedia also has an article with additional links:http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources. |