Free resources for graphic artists

Here’s a list of Free resources we built for graphic artists that someone suggested I post in 2015 on this blog:

Design freebies:

The best free graphic design software – From Creative Bloq

29 Free Online Design Tools for Creating Stunning Visual Content for the Web – From 11/19/15- Google Fonts are useful.

25 Design Freebies Websites Every Designer Should Know – from 10/3/16 – resources like Pixel Buddha & GraphicsFuel.

Our 10 Fav (& Free!) Design Tools From Around the Web – From 4/20/16, from WIX. Covers resources for Logos, Icons, Image Editors, Infographics, and Presentations.

 

Free fonts:

 

Free vector icons

A good place to find free vector graphics is Vecteezy. There were a lot of free user avatar person icons available. 

The Iconmonstr service also has a lot of person icons that could be used as user avatars in a web application. Icons are downloadable in five different formats (svg, eps, psd, png, font) and also embedable. The icons can used in non-commercial and commercial projects, services or products without attribution, you are just not allowed to resell them. 

 

Royalty free stock photo resources

Some good royalty free stock photo resources include Pexels and Pixabay.

The ODEE team at Ohio State uses the Unsplash, another royalty free stock photo site.

For instructors and educators he Canvas LMS has the ability to find free stock photos on Flickr. There is a Free Stock Image Flickr channel. There is also a way to view stock photos of Flckr tagged ‘free’.

 

Underling and the Web

It’s generally not a good typographic practice to use the default underline function in most applications including the <u> tag in HTML. Many designers believe that underling is not an appropriate method for adding emphasis to text.  It’s a holdover from the days of typewriters when other forms of emphasis, like bold text or different colors, were not available. On the web there is a convention that underling denotes a hyperlink so many web designers feel that underling should only be used to represent hyperlinks. Website users may get confused if they click on underlined text that is not a link. Bold ( <strong> in html) or italics (<em> in html) are more valid ways of emphasizing text. In HTML the <u> element, used for underlining,  was deprecated in HTML 4.01. It returned in HTML 5 but has a different semantic meaning.

Naming files for the web

Here’s an interesting article about naming files for the web: http://www.ragepank.com/articles/50/spaces-underscores-and-dashes-how-to-name-files/

It seems that dashes may be the best way to separate words in a URL. A dash provides better readability than an underscore. Spaces are a bad idea to use because they turn into %20 in a URL and can be misinterpreted by some browsers, be harder to remember, and be harder to communicate verbally.

Here’s another article about spaces in filenames and why they should be avoided in web content: http://www.blackbaudknowhow.com/blackbaud-sphere/spaces-in-filenames-and-why-you-should-avoid-them-on-the-web.htm

Typography Tips & Resources

Typography Glossary – covers the language of typography full of serifs, strokes, and swashes.

The All-Inclusive Guide to Web Typography Best Practices – From 8/27/14 – for Bootstrap websites.

5 Typography Do’s and Don’ts Everyone Should Know

Top Ten Web Typography Sins

Underlining for Emphasis?

Underlining in Professional Typesetting?

15 Best Web Safe Fonts That Work With HTML & CSS – from 5/8/17, by Robert Mening from WebsiteSetup. Arial is one of the most widely used fonts.
A Comprehensive Guide to Typography Basics – from 6/9/16 by Ed Wassermann of EvatoTuts+. Explains the differences between serif and sans serif typefaces.
Job Satisfaction in the Work Place infographic  – 2017 from Strategies Corporation. An example of nice typography in a poster/nfographic.

One or two spaces after a sentence?

Two spaces after a sentence is a holdover from the days before computers and desktop publishing. Typewriters used mono-spaced fonts where every letter had an equal amount of horizontal space. Adding two spaces after a sentence made mono-spaced lines easier to read. However most every font on a PC or Mac uses proportional typesetting so typing two spaces after a sentence are no longer needed yet old typewriter habits still continue. In proportional typesetting skinny letters are given less space than wide ones, white space between letters takes on a balanced appearance. Without the extra white space characteristic in mono-spaced type, breaks between sentences stand out in proportional typesetting without the need for two spaces after a line. Here are some articles with more information on the issue of one or two spaces after a sentence:

http://www.slate.com/articles/technology/technology/2011/01/space_invaders.html
http://en.wikipedia.org/wiki/Sentence_spacing
http://www.writersdigest.com/online-editor/how-many-spaces-after-a-period
http://desktoppub.about.com/cs/typespacing/a/onetwospaces.htm
http://grammar.quickanddirtytips.com/spaces-period-end-of-sentence.aspx

Visual Composition Design Principals

visual composition design principals Here are some descriptions of visual composition design principals that can aid in visual communication of ideas and concepts:

Alignment – Alignment refers to positioning elements flush with a grid or each other. Ins ome graphics software apps you can create a grid or guides on a layer to aid in alignment and then hide that layer before printing.

Contrast – Contrast refers to the contrast of text to background and legibility. If the color and contrast ratio of text to background is too similar people with visual disabilities may have difficulty reading it. Good contrast allows designs to be legible in either color or black & white printing.

Proximity – The proximity of elements is used to group related information together in visual communication. The proximity of elements to each other shouldn’t be too close, in many cases use of more white-space and padding creates a cleaner looking design.