LibGuides: NU SpringShare Playbook: Web Design Best Practices

Web Design Best Practices

Choose a color scheme and use approved colors for NU and department.
Be consistent in colors, fonts and other elements.
Use the Brand Style Guide to find colors, fonts, do's & don'ts and other helpful information.

Don't overdue the use of color. Stick to around 2-3 different colors to keep it looking organized and not busy.
Choose a color scheme and use approved colors for NU and department.
Follow the Brand Style Guide.
The most common forms of colorblindness make it hard for some users to tell the difference between these colors:
- green and orange
- red and green
- blue and purple
- red and brown
- blue and green

Be consistent to your branding throughout all pages.
Adding images help break up written content and give a deeper explanation of content when right image is used.
Leave white space between sections to help visually separate content
When adding buttons/CTA, make them stand out with a bright color and stay consistent throughout all pages.
Simple navigation will help people find what they are looking for.
Keep fonts easy to read and consistent. Don’t add more than 2-3 different font families.
Make sure to check that the page is responsive, looks good on tablets and phones.

Saving icons, logos or anything without a background color should be saved as a png.
- Saving images, icons or anything with blank areas as jpegs will add a white background automatically, that’s why icons/logos should be pngs.
Use high quality images and icons and make sure the size (pixels) isn’t too big (for a screen wide image, nothing bigger than 1200px wide)
Icons are great visuals to help explain what follow content is about
Images are good to use when breaking up sections of text.
- Free image sites: unsplash.com, pexels.com, pixabay.com
Always compress them so the page load time is as fast as possible.
- tinypng.com is a good/free tool to compress images.

If copy/pasting text into LibApps, make sure to paste as plain text so no styling is brought over from other documents or pages. Style settings from other sources might not match LibApps.
Headings/Titles: H1 are the biggest font and explains what the page is about. H2 are secondary topics supporting helping to organize the page. The same goes for the rest of the headings. P(paragraph) is the body text.
Body/paragraph font size should be at least 16 pixels.
Bullet points are great to help people understand/digest your content.
If you add text on an image, make sure it is easily to be seen and read.

Springshare Branding Taskforce Proposal Final
Powerpoint presentation summarizing taskforce findings and proposal for implementation. 10/19/20
Building Branded Icons in PowerPoint
Tool for creating NU branded icons using simple graphics available in PowerPoint.