| HuronResearch.ca —-Undergraduate Research Initiatives at Huron

Design Resources

Here you will find resources to help you in building your website. This includes graphic design, 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 Initiatives and User Services 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.

Iconography

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.

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 he 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

  • 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.