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.

HTML & CSS     Graphic Design     Photography     Colour Palettes     UX Design     Plug-ins

Web Design, HTML, and CSS Resources

  • HTML Cheat Sheet – Quick reference for all things HTML.
  • 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.
  • LinkedIn Learning – Your Western University ID grants you access to tons of learning materials through LinkedIn Learning, which houses content from the now retired Lynda.com.
  • w3Schools – Excellent resource for beginners that offers reference materials and courses, similar to Codeacademy.

Recommended Web Design Books:

  • Beaird, Jason, and James George. The Principles of Beautiful Web Design. 3rd ed. SitePoint Pty. Ltd., 2014.
  • Duckett, Jon. HTML & CSS: design and build websites. Wiley, 2011.

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

Recommended  Graphic Design Books:

  • Branding & Logo Design
    • Airey, David. Logo Design Love: a guide to creating iconic brand identities. 2nd ed. Peachpit Press, 2014.
    • Evamy, Michael. Logotype. Laurence King Publishing, 2015.
    • Wheeler, Alina. Designing Brand Identity: an essential guide for the whole branding team. 5th ed. Wiley, 2017.
    • Wiedemann, Julia, and Jens Muller. Logo Modernism. Taschen, 2015.
  • Layout & Page Design
    • Samara, Timothy. Making and Breaking the Grid. 2nd ed. Rockport Publishers, 2017.
    • Tondreau, Beth. Layout Essentials Revised and Updated: 100 Design Principles for Using Grids. Rockport Publishers, 2019.
  • Typography
    • Lupton, Ellen. Thinking with Type: a critical guide for designers, writers, editors, & students. 2nd ed. Chronicle Books, 2014.
    • New Perspectives in Typography. Edited by Scott Williams and Henrik Kubel. Laurence King Publishing, 2015.
  • Inspiration
    • Bierut, Michael. How To: use graphic design to sell things, explain things, make things look better, make people laugh, make people cry, and (every once in awhile) change the world. Thames & Hudson Ltd, 2015.
    • Draplin, Aaron James. Draplin Design Co.: Pretty much everything. Abrams, 2017.

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 Common 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 specified 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 every perspective.
  • UX Myths – A great resource that debunks some common misconceptions in UX design philosophy

Plug-ins and Other Resources

  • CommentPress
    CommentPress is a tool for digital annotations, where users can highlight areas of a document and create comments that appear in a menu for each separate page. Check out their website for a demonstration.
  • 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.
  • Page Builder by SiteOrigin
    This plugin is for the more tech-savvy user who wants a bit more control over their webpage design. It adds a bit more customization to pages through a column-based layout, all of which is controlled through an intuitive interface that looks and operates just like the WordPress Dashboard. This option does not work with some themes, so be sure to check if it is compatible. It is not recommended for novice users, it has a bit of a learning curve, but easy enough to learn should you have the time to play around with it. This plugin is also mobile-friendly – meaning the pages you build will be accessible and display properly on mobile devices.
  • 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.