A list of design-related web sites that you can explore to enhance your experience in the class. This list is frequently updated.
| RESOURCE | DESCRIPTION |
|---|---|
| Stock Photos | |
| Unsplash.com | Hundreds of thousands of pictures contributed by photographers. Credit isn't required, but it would be nice if you would give some exposure to the photographers. High resolution images browsable by categories or searchable by keywords. |
| Pixabay | Nearly 900,000 free high quality images. Allows you to choose sizes for downloading. |
| Pexels.com | Pexels provides high quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable and also easy to discover through our discover pages. |
| Pixy.org | No-fuss Creative Commons downloads. Also, each image has swatches with RGB's of the main colors in the image. Beautiful and rich looking images. I do not see a way of filtering, but there is a way to browse categories. |
| Creative Commons | Creative Commons is a type of licensed attribution where authors can specify that their work can be used in a certain way. You usually do not have to request permission or payfor the images. However, keep in mind that Creative Commons works are protected by copyright law. |
| Nappy | Many free images of black and brown people. |
| WikiMedia | It's quite interesting. |
| FreeImages.com | For sure, we have an embarrassment of riches with free stock photos. Here yet another one. |
| FreePik | Includes collage Vectors, photos and Photoshop files. Must give credit for free files. Searchable by FREE. |
| Stockphotosecrets.com | This is a good source for pay. It costs $99 for 200 per year, plus 69 for additional images. If you're a professional designer, you'll find these types of quality websites worth the money. |
| Snipstock.com | PNG and Photoshop images. The small and medium sizes are free. |
| iconmonstr.com | Nice and straightforward. Icons are simple and download as SVG files. |
| VectorGrove.com | Combination of free and paid vectors. It prompts a few times for attribution, but does not require registration. |
| pxhere.com | Another creative commons site, but you have to log in to download for large pictures. However, if you want a fairly large file to be used within our webpages, simply right click and Save As. |
| publicdomainpictures.net | I learned about this one from ATC textbook. Seems great! |
| Wallpaper style backgrounds | Large images to be used on websites as well. |
| CanStock Photos | Good pricing and a variety of photos. |
| Punchstock.com | Stock photos that are good for practicing. Otherwise cost $79 each. |
| Flickr.com | If you get an account, you can "right click" to save pictures. |
| stockvault.net | Free high resolution pictures |
| Freedigitalphotos.net | Looks like only the small versions are free. |
| stockio.com | Thousands of free Photos, Vectors, Icons, Fonts and Videos. You can find premium pictures as well. |
| PNG Images, with isolated backgrounds (mostly photo-realistic) | |
| rawpixel.com | Free and premium, and it's good you can filter based on "free." It does require signing up and it's worth it for the quality of images. |
| Pngtree.com | Png, vector, and Photoshop files. Downloadable in different sizes. However, must log on to download. |
| It prompts a couple of times for attribution, but doesn’t force you. The red/pink button tells you the resolution and format. | |
| PngHost.com | Quality designs, but registration needed. |
| Freepngs.com | Seems to be associated with SnipStock |
| FreePik | #two| Includes collage Vectors, photos and Photoshop files. Must give credit for free files. Searchable by FREE. |
| cleanpng.com | This is a trouble-free website. It does not require a password and does not have a lot of popups. |
| PNGImg.com | The quality of this site seems to have deteriorated. The only reason I'm keeping it here is to remind myself how bad it is. The images have huge amounts of dead space, which means you constantly have to crop them. Also, it is not easy to navigate once you search. Finally, too many popup windows. |
| PNGWing.com | It is difficult to download. Seems tricky and misleading. In fact, when you try to download it takes you to a circus full of clowns. |
| Icons | |
| FreeIcons | This is one of the best sites I've seen. Once you find your desired icons, it cleanly gives you the choices of sizes and other options |
| FlatIcon | You can filter for free icons. No login is needed. There are choices of sizes from 16 to 512 px. |
| IconFinder | Over 6 million. They are good! and they offer choices of sizes from 48 to 512. No logon needed. |
| Web Design Elements | |
| Transparent Patterns | Fabulous! The patterns are semitransparent. Therefore you can change the color on the fly. |
| Subtlepatterns.com | Good place for modern seamless backgrounds, over 375 of them. Weakness is that they are not categorized, but you can search on keywords. |
| Website Bullets | A website with simple bullets fit for many occasions. They are correctly sized and not flambouyant. |
| CSS and other generators sites | |
| cssmenumaker.com | Truthfully, some of the ones listed below are from the late 90's. However, this is a newer type of menu generator that uses CSS rather than images. |
| CSS3Generator | Very nice. It has about 12 different techniques, and attempts to give you a view of your choice as you type in parameters. |
| CSS3 Maker | It has a modern and friendly interface, and generates visual results quickly. |
| Colorzilla.com/gradient-editor | This only does one thing - gradients. However, it provides indepth options for creating and editing gradients. |
| CSS3gen.com | This does the same techniques as the others, including animation. Admittedly, most of these techniques can be just as easily created by typing from scratch. However, for speed of generating, they may be useful. |
| html-css-js.com | Comprehensive website including generators as well as general reference. |
| Webcode.tools | The Ultimate Web Code Generator. The CSS3 is especially useful and time-saving. |
| Older web art | These three sites are older, but you may find them useful for a quick embellished heading or design element: |
| Tutorial and reference sites | |
| HTML Elements Reference | This Mozilla site is authoritative and handy |
| Vanseodesign.com | Includes design principles topics and many others. A repository for his prolific wrting about a variety of design topics. |
| htmlprimer.com/ | Contains easy-to-read tutorials. Also contains a user forum where you can ask questions of others. |
| webdesign.about.com/cs/html | www.about.com is a very comprehensive site. It contains lots of material relating to web site development. One of its most useful areas deals with design tips and principles. |
| www.w3schools.com | At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced coding and scripting. |
| www.htmlhelp.com | This is a solid and authoritative site that offers help on a wide range of topics. The site does not look fancy, but provides great information in a reference manner. It focuses on material that helps you to create sites that work in all browsers. |
| Special Characters listing | From an HTML reference website. Nicely organized and easy to find. |
| Special Characters from W3C | This is a nicely displayed and organized chart and comes directly from https://dev.w3.org/html5/html-author/charref |
|
Special Characters (from a Univ of Texas site) |
Special characters. This is just one of the many sites that provides a convenient list of special characters. Thanks to University of Texas. |
| CSS references | |
| CSS3 Generator | Automatically generates common CSS3 styles |
| Free web hosting | |
| Text Editors and HTML Editors | |
| Notepad++ | Features include opening multiple files, drag & drop, toolbars, numbering lines, etc. There are two versions--Lite and Pro. |
| Brackets.io | Free from Adobe |
| Colors (hex and RGB lists) | |
| easycalculation.com | Hexadecimal color chart |
| Color Chart - 100 plus, colors | RGB to Hexadecimal color converter |
| Another Color Chart | Wikipedia's entire color page |
| HTMLcolorcodes.com/color-names | When you're practicing HTML, and don't feel like looking up colors |
| Cookwood.com | Hexadecimal equivalents - from 0 to 255 |
| Color Schemes | |
Best for exploring existing schemes and downloading text version. Click “Explore” then “View”. Then copy the hex color. |
|
| schemecolor.com | I happened upon another site that might become my favorite. It has about a dozen colors on the top row. You click on the one that you want as a dominant color. Then it generates many palettes for you to choose from. I also like the fact that you can simply download as text and paste into your .CSS file. |
| html-color.codes | Found this in 2022 and immediately fell in love with it. It has many features, but one of my favorites is seeing a variety of similar hues next to each other. Would be great for choosing monochromatic scheme. |
| december.com/html/spec/colorchips.html | An old site, but great for choosing monochrome scheme. Scroll down to the main color area. Reds: www.december.com/html/spec/color1.html |
| Click “Explore” to see schemes. Must copy & paste each hex color individually. |
|
|
|
| colr.org | For choosing colors based on a picture. |
| Palleton | Gain quick confidence with your choice of colors. Use this tool to generate color schemes of good-looking, well balanced and harmonic web pages. Overall, a useful and sophisticated website. Best to read the brief instructions on using it. |
| Multimedia (Audio & Video) | |
| online-convert.com | Quickly convert various types media online. No software installation needed. Free |
| Others | |
| www.lipsum.com | Generates placeholder text. Also tells the story behind "Lorem Ipsum Dolor Sit Amet" |
| www.blindtextgenerator.com | Generates placeholder text |
| www.websitehostingrating.com | This is a useful reference for web hosting. It appears to have objective ratings and is updated frequently. |