The Social Media Dictionary:
Web Design Elements

SMPerth // 18th May 2017

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


Your email address will not be published. Required fields are marked *