• General Best Practices
15 Web Design Terms Every School Marketer Should Know
Keisha Croxton

At Finalsite, web designers get the amazing opportunity to work with a variety of clients, from independent schools to public school districts. From time to time, we get questions asking what certain design terms mean. We've compiled a list of a few terms you might hear while communicating with designers.

Usability Terms

1. Accessibility

Accessibility takes into account how everyone, including users with visual, physical, and temporary impairments will interact with and navigate your website. A website with little to no considerations for Accessibility will be impossible for a person with disabilities to use.

Related: 6 Easy Web Accessibility Best Practices Every School And District Should Follow

Related: WCAG 2.1 Is Here: What Districts Need To Know

2. User Interface and User Experience (UI/UX)

User Interface (UI) and User Experience (UX) are two parts of overall website usability. User Interface is what the person using the website sees and interacts with. User Experience is the journey and process of a person completing a task on your website. The website design (interface) is directly influenced by what you want your website visitors to achieve and the workflow of that process (experience).

Navigation Terms

3. Information Architecture

Information architecture is the organization of all the parts of something in order to make it more understandable. This includes the structure of your website pages. It also includes the content on your pages and how that information is structured.

4. Sticky Header

"Sticky" headers are the header bars that follow the user down the page as they scroll. They usually contain the site logo and website links. A useful sticky header can help speed up your user's navigation through your site, helping them find the pages they need quickly without losing their place.

Related: How To Simplify Your District’s Website: Tips From Wayzata Public Schools

Related: Why Your Website Visitors Will Love A Sticky Navigation

Font Terms

5. San-serif vs. Serif

Fonts are grouped into two main categories: Sans Serif and Serif. A sans serif font is a typeface that looks like Arial or Tahoma, where it has straight lines. A Serif font is a typeface similar to Times New Roman or Georgia, where it has a more traditional look.

sans serif font vs serif font

6. Weight

Font Weight is how thin or bold a font is. It can be written as both a word and number format. For instance "bold" can also be written as "700".

a diagram showing fonts at different weights

7. Style

Font style indicates whether a font is italicized or not.

example of two different font styles: italic and regular

Color Codes

8. Hexadecimal (Hex Code) 

This is a base 16 Color Code system used to define colors online. It uses a series of six numbers, 0-9, and letters, A - F to define each specific color. They are always prefaced with the # sign. This color code is used by all web designers.

9. RGB

RGB is an acronym for Red, Green, Blue. It is used for in web design because these are the colors monitors use. Each value is a number from 0 - 255 to display the amount of red, green, or blue it takes to make a specific color. Occasionally you'll see an "A" on the end, making it RGBA. This A stands for alpha and notes if a color has transparency. That transparency is a number from 0 (transparent) to 1 (full color). This is a color code that web designers use as well.

10. CMYK

CMYK is an acronym for Cyan, Magenta, Yellow, and Black. It is primarily used for off-set printing. Each value is a percent from 0 - 100% to display the amount of cyan, magenta, yellow, and black it takes to make a specific color. These codes can be converted to RGB or Hex codes, but they may appear different on screen versus when printed.

a diagram of various colors in CMYK

11. Pantone / PMS

PMS is an acronym for Pantone Matching System. Pantone colors are primarily used for spot color printing. These codes can be converted to RGB or Hex codes, but they may appear different on screen versus when printed.

Image Types

12. JPG (JPEG)

JPG is an acronym for Joint Photographic Experts Group. It is an image type that produces a minimal perceivable loss in quality. That means the image is compressed down to load for web, but it still appears high quality. This format is best for photographs.

a jpeg image of a flower

13. PNG

PNG is an acronym for Portable Network Graphic. It is an image type that is best used when an image has a transparent background or large areas of color. PNGs produce a similar quality to JPG.

two examples of a png, with one showing transparency

14. GIF

GIF is an acronym for Graphics Interchange Format. It is a format that is best for small image files with limited colors and animated images.

an example of a scalable vector graphic

15. SVG

SVG is an acronym for Scalable Vector Graphics. This format is designed for images that need to be scalable and provides support for interactivity and animation. One common use of SVGs are website logos. This file format allows for website logos to adapt to a variety of screen sizes.


click here for a free website audit


Keisha Croxton
ABOUT THE AUTHOR

Keisha is one of Finalsite's talented Web Designers and Front-end Developers. She is an outgoing graphic designer who is a fashion chameleon that lives to lift heavy in the gym. 

  • Web Design
There are no news posts to display

Virtual Social Media Workshop

Join us virtually on January 17, 2020 for a full day of social media strategy from the comfort of your couch, office, or favorite coffee shop.

FinalsiteU 2020 | March 4-6, 2020

Join 300+ school professionals from around the globe for the industry's "must-attend conference of the year."