| HuronResearch.ca —-Undergraduate Research Initiatives at Huron
| HuronResearch.ca
Stained Glass Banner Image

Design Resources

Here you will find resources to help you in building your website. This includes graphic design, photography, HTML and CSS resources, as well as information on what plugins we are using on HuronResearch.ca. If you have any questions at all, please do not hesitate to contact Ryan Rabie, the Digital Scholarship Librarian.

Web Design, HTML, and CSS Resources

  • HTML Cheat Sheet – Quick reference for all things HTML.
  • Mozilla HTML Element Reference – Excellent Element quick reference list, from the creators of the Fire Fox browser, Mozilla.
  • Mozilla HTML Attribute Reference – Excellent Attribute quick reference list, from the creators of Fire Fox.
  • CSS Cheat Sheet – Quick reference for all things CSS – This one is extremely helpful for those times you want to alter theme elements but are not sure what the names of those elements are.
  • CSS-Tricks – Not just for CSS, but also HTML, JQuery, SVG, WordPress, PHP, etc. This one is more of a blog that also has excellent reference material and guides, check out the Almanac specifically for quick reference on CSS Selectors and Properties.
  • Codeacademy – If you want to go a bit more advanced, this site offers free HTML courses.
  • w3Schools – Excellent resource for beginners that offers reference materials and courses, similar to Codeacademy. You can live preview any example you are looking at, edit any examples in real time, and preview any changes that you’ve made, all within the same browser window.

Recommended Text Editors:

Notepad++ –  An open source text editor for PC only. Has specific colour coding for the different attributes and elements. Also shows you when you have an error or have not closed a tag properly. There are also themes available to help differentiate the colour coding of elements and attributes more or less than the default theme.

Brackets – Very similar to above but with a bit more modern UI and available for both PC and Mac. One of the bigger advantages to Brackets over Notepad++ is the Live Preview feature.


Recommended Web Design Books:

Graphic Design Resources

Some general resources on graphic design and design philosophy.

  • Creative Bloq – Covers everything from general graphic design, to specific areas like typography, illustration, and web design. This one also has an excellent “How to” section that covers different tutorials ranging from photography, illustration, web design, 3d rendering and design, etc. They also give a few in-depth tutorials on specific software.
  • Mirador – just looking for inspiration? Mirador is a simple feed of different designs, usually based around physical items like packaging, books, posters, corporate design, etc.
  • Adobe Create Magazine – Excellent resource for any aspiring graphic designer, or any lover of all things graphic design.
  • Digital Arts – A blog similar to Creative Bloq. Find tutorials, guides, reviews, and various stories on modern graphic design and art.
Photoshop Alternatives

You will often have to resize or alter images when creating various graphics for your webpages. You also might be creating custom graphics or images. Remember, all images should be sized to their purpose and be a proper resolution. Always set your images to 72dpi and size them according to need. Remember, shrinking an image is OK, but enlarging an image will spread the pixels out and create a blurring effect. Here is a list of free and opensource alternatives to Photoshop:

  • GIMP – Free and open source, GIMP is seen as one of the best alternatives to Photoshop and has been around almost as long. It was originally created in 1996 and has a long pedigree of use and plugins to add functionality. GIMP works on Windows, MacOS, and Linux.
  • Photopea – This is a web-based alternative to photoshop that doesn’t even require a login. You can just visit the site and create a new project. It also allows you to save or edit various file formats, including PSD. This is browser based, so it works on all OS platforms.
  • Krita – This one is more for creatives who want to edit images or create their own digital art. While it is listed as a digital painting software, it also offers a robust amount of tools and features, including use of vector art. This one works on Windows, MacOS and Linux.
Iconography & Illustrations

If you are planning on using icons, always remember to use ones that are distributed under the Creative Commons License CC0, no attribution required, or “No Rights Reserved” license or icons distributed under an attribution required license. Check out the below websites for icons that are both CC0 as well as attribution required.

  • Iconmonstr – Icons, CC0 license, no attribution required
  • Flaticon – Icons, Attribution required
  • unDraw.co – Vector illustration resource, open license, no attribution required
  • ManyPixels.co – Similar to unDraw, open license, no attribution required
  • scribbl – Hand drawn art, open license, no attribution required. The site does have paid assets, so stick to this link when looking for open access illustrations
  • Ira Design – Great free resource for customizable vector illustrations

Recommended  Graphic Design Books:

Photography Resources

Whether you want to create your own images or use stock photography, these websites will help you out.

  • Fstoppers – This photography blog offers some great tutorials for those just jumping into photography, as well as some great tips and tricks.
  • Digital Photography School – Another resource that offers great tutorials and tips for photography.
  • Lightroom Killer Tips – Have an interest in photo editing? This website deals specifically with Adobe’s Lightroom and offers all sorts of tips, tricks, and tutorials on how to use its powerful photo editing features.
  • Adobe Create Magazine, Photography – Adobe’s own “Create” blog has some great resources available under their “Photography” section, including the occasional free images!

If you are planning on using stock photos, always remember to use images that are distributed under the Creative Commons License CC0, no attribution required, or “No Rights Reserved” license. Below are some great CC0 stock image resources. These do require you to create an account if you want higher resolution images, but if you are just using images for the web, there is no need to create an account.

Colour Palette Resources

The use of colour dictates the “feel” or “mood” of your designs. They can also be used to evoke certain emotions or environments. Check out these resources to get a sense of what types of colour palettes are out there.

  • Canva: 50 palettes to inspire you.
  • Encycolorpedia – Great website to get colour hexcodes for HTML / CSS.
  • Coolors.co – This website offers a colour palette random generator to help you find your inspiration. It also gives the option to test your palettes against the varying types of colour blindness, to help you choose colour palettes that are more accessible.
  • Colormind – You can upload your own images, or generate a palette randomly. This one uses AI to generate a page with images that fall within your chosen colour palette. You can click on colours you like to lock them in, then click “generate” to randomize the rest of the palette.
  • Adobe Color CC – Another generator, but this time you have control over the colour wheel.
  • Colorhunt.co – A great resource to just peruse if you want to look at varying colour palettes. You can also search by colour, which will populate your feed with palettes that contain that specific colour.
  • Colr.org – This resource allows you to pull colour palettes from photos. Upload your own, or pull up an image from Flickr.

UX Design Resources

One thing to always keep in mind when designing your websites is the user experience. Check out this blog post by Abbey Fitzgerald on UX Pin, it gives a great breakdown on UX design, and give some of these resources a look:

  • UX Planet – This is an excellent resource for getting started. You can read up on UX trends, view their UX for beginners section, or get a jump start on how to do user testing.
  • UX Magazine – This blog gives great insight into the world of UX design. While you might find a lot based around application development, most of the theory is still applicable to anything that can be considered a user interface, including websites.
  • Awwwards – This is a great resource to see what other sites have done to become recognized as some of the best and most innovative sites on the web. While we may not have the resources to create something quite on this level, it is a good idea to see what others have done to gain a little inspiration when creating your own website.
  • UX Design, by designmodo – Another good resource that covers UX design from many perspectives.
  • UX Myths – A great resource that debunks some common misconceptions in UX design philosophy.

Recommended  UX Design Books:

Plug-ins and Other Resources Available on HuronResearch.ca

  • Draw Attention Pro
    Create annotated images. You can highlight specific areas of an image that will reveal information on hover or click. See the Digital Initiatives Librarian, Ryan Rabie for more details.
  • Divi Page Builder
    Divi Page Builder is a powerful visual builder that allows for much greater customization in any theme. This plugin does have a bit of a learning curve, and is not recommended for novice users.
  • Envira Gallery
    Envira Gallery is a plugin that allows users to create a fluid, easy to use image gallery for both content editors and site visitors alike. This tool allows for “drag & drop” building, and includes features like albums, metadata, social media integration, slideshow and full-screen support, video support, optional password protection, and comes with pre-built gallery templates.
  • Feed Them Social
    Gives the ability to add social media feeds to your website, including those from Twitter, Facebook, Pinterest, and Instagram. Certain feeds work differently, for example, Twitter requires consumer tokens from an active Twitter account in order to display reliably. If you are having any issues with getting this particular plugin working, please contact Ryan Rabie.
  • Knight Lab TimelineJS
    As a plugin, Knight Lab TimelineJS works only as a short-code to insert a timeline created via their website. See Ryan Rabie for more details about this plugin. This is a free service, and details, as well as an example of the software can be found at: timeline.knightlab.com
  • MetaSlider
    As an image Slider, MetaSlider gives users quite a range of flexibility. It is easy to use, compatible with mobile devices, and allows you to create four separate styles of slider: Flex Slider, Responsive Slides, Nivo Slider, and Coin Slider. Users can place any number of image sliders in their blog posts or webpages with ease.
  • Photobook Gallery
    Allows users to import images that will display in an interactive flip-book, where users click to “turn” the page in real-time. Supports custom width and height, touch, auto-play, navigation tabs, and the ability to zoom.
  • TinyMCE Advanced
    TinyMCE is an advanced text editor plugin for WordPress, allowing for further customization in how you build out your pages. It also allows you to add “anchor” or “jump” points on a page to create faster navigation for your end-users.
  • WP Google Maps
    Create custom Google Maps with markers (pins) that contain locations, descriptions, images, video, and links! You can also highlight sections of a location, draw lines or shapes, and even create heat-maps.  This plugin is great for creating a geographical visual of anything from past battles, boundary lines, key events, historic migrations, etc.