The Social Media Dictionary: Web Design Elements

Digital marketers need to have their finger on the pulse, at all times and on all things and web design is one of those important ‘must-knows’.

Hopefully, you’ve read our first post of web terms for digital marketers and now have an understanding of some of the top level terms we looked at because now we’re going to get deeper into the design elements and terms used. Ready?

Website design

• fixed width layout: website will appear the same regardless of resizing the browser or viewing on different devices, the traditional way of building websites
• fluid design: websites use relative units for width such as percentages rather than fixed units
• adaptive layout: uses fixed units, multiple fixed widths are in the design so media queries detect the width of the browser and inform the layout
• responsive design: web pages that use a fluid grid and relative units to adapt the design layout according to the user’s device. They’re informed by media queries.
• parallax design: provides depth and a sense of movement when scrolling
• infinite scrolling: rather a website consisting of numerous pages, all content is contained on a single page that is scrolled by the viewer to access different areas of content

Page layout

• visual hierarchy: the emphasis given to elements on a webpage relative to their importance through the use of colour, size and layout.
• the fold: divides the page in half, important information should be ‘above the fold’ as viewers need to scroll to see content ‘below the fold’
• alignment: the elements on a page can be left or right aligned to other elements and/or the page
• negative space: refers to the empty areas of a design

The words

• font: the chosen typeface style and size
• font-family: the group of fonts used in a CSS property to allow for browsers that don’t support chosen font
• font-style: property in CSS that determines if chracters are italic or oblique or normal
• font-weight: how thick the characters appear, bold/medium/light
• em: relative unit used for font sizing in CSS
• px: size unit in CSS, not relative to font and not a constant length but appears the same on all devices
  serif: fonts that have small lines or ‘feet’ at the end of the strokes of characters
• sans serif: fonts without the feet
• tracking: consistent increase or decrease of the space between characters in block of text, also called letter-spacing
• kerning: is applied to adjust the space between individual characters
• leading: defines the space between lines of text
• widow: when the last line of text spills over into the next page or column and is isolated
• orphan: when a paragraph is split over two columns, the first sentence is said to be ‘orphaned’ in the first column

The images

• CMYK: this is an acronym for the colours used in printing – cyan, magenta, yellow, key (black)
• RGB: these are the colours used in digital – red, green, blue
• resolution: images are measured by the number of dots or pixels per inch (dpi/ppi)
• web safe colours: the palette of 216 colours that display as continuous flat colours on digital screens
• hex colours: each colour on the web is represented by a six digital hexadecimal number preceded by (#)
• pixel: the dots that make up images on digital screens
• pixels per inch (ppi): the number of pixels
• alt attribute: is alternative text for images, in the case that it doesn’t display or the viewer is visually impaired
• favicon: small icons that are displayed next to the website address in browsers; also called shortcut icon, website icon, URL icon, bookmark icon and tab icon
• vector image: formed by lines and shapes rather than pixels

Visual effects

• gradient: the gradual blending of colours in an image
• drop shadow: design effect that gives the appearance of a shadow behind objects
• feathering: to create soft edges on web graphics and images
• cropping: the resizing and reframing of images by removing the outer areas
• stroke: an outline around an image that can have a number of different styles such as colour, thickness
• saturation: the intensity of a colour
• contrast: difference in design elements such as size, shape and colour of objects for emphasis