As part of our digital jargon buster series, here is the jargon you might find when talking about web design. Whether you’re a newbie designer who wants somewhere to start learning, or you want to know what your web designers are talking about, this is the list for you!
A
Above the Fold
Content seen on screen once the page has loaded, without having to scroll down.
Accessibility
Design of products that can be accessed by disabled people. There are various methods that help achieve good accessibility, for example, writing clean code that is understood by screen readers, adding alt tags to images that explain what is shown, adding subtitles to videos, etc.
.AI
File extension for Adobe Illustrator. Graphics saved as .ai can be easily edited using this software.
Axure
One of the most popular pieces of software used for creating wireframes and clickable prototypes.
B
Breadcrumb
A trail of links that shows user how deep they are within the site’s hierarchy. It usually sits just below the header and is clickable so that it’s easy to go up a level. It’s most commonly used on eCommerce websites, displaying all the categories a product belongs to.
Brand Characters
Mascots that a part of the overall company’s image. A good example is Kellogg’s Tony the tiger or CompareTheMarket’s meerkats.
Brand Guidelines
A document that holds all of the company’s branding, including rules of using it. It includes elements like digital and print colour palettes, typography scale, various applications of the logo, brand marks, tone of voice etc.
Branding
Visual identity of a company. Usually, when thinking about branding, you’d think about logos, colours, typography and maybe tone of voice, but branding is a very broad term and can encompass many more elements, such as mascots, brand marks, photography or even motion and interaction guidelines.
C
Colour Palette
A selection of colours that go well together.
Competitor Research
Researching a company’s competition in the market to see what they’re up to and what makes the company different from them.
Content
In digital, content means anything from text to images that have been created for specific purposes on a website. The content on this page is the images and text within the blog.
F
Flat Design
A trend in web design, focused on use of clean typography, flat colours and simple graphical elements. Any effects that suggest depth, such as gradients and shadows, are dropped, making the interface look flat.
Focal Point
A spot within a design, illustration or photo that is meant to grab your attention. Focal points can be achieved through use of accent colours, high contrast or composition that leads the eye towards a particular area.
Font Family
A collection of typefaces that have the same letter shapes and look related to each other, but come in different weight (thickness) varieties.
Font Style
This refers to various properties that can be applied to a font, such as colour, size or line height.
Font Weight
Thickness of a typeface. The most common ones are light, regular and bold, but there are many other options, such as hairline, thin, book or black.
G
GIF
Graphics Interchange Format – format of graphics that have a limited colour palette, but support animation. Also, it’s pronounced ‘gif’ (with a ‘g’ like in ‘good’) and you can all fight me on that.
Grid
An underlaying layout that the design is based on. It can have any number of columns and rows. For web, a grid will usually be between 1100-1400px wide, with 12 or 16 columns. If the grid is meant for print it will usually have rows as well, allowing for more precise alignment of elements.
H
Hamburger Menu
The three parallel horizontal lines that apparently look like a hamburger (it could as well be called a hot-dog menu) that when clicked on open up a full screen navigation. Hamburger menus are most commonly used on mobile devices due to lack of space, but can sometimes be spotted on desktop as well.
Hero Banner
A landscape image (or series of images, in a scrolling banner) that is normally found above the fold, usually on a homepage or key landing pages. Usually contains key information or advertisement that will attract users to browse the site further.
Hex Code
Colour written down in a hexadecimal format that is understood by computers. It consists of a # symbol and 6 digits that represent red, green and blue components of a colour (two digits each).
I
Icons
A small graphical symbol used in visual interface. It can be part of a menu, a link or illustration.
Illustration
An artwork that portrays a concept in a visual way. It can be hand drawn, created from pre-existing elements, or even computer generated. By definition, illustrations should, well, illustrate or interpret something, but there are many that are created purely for decoration too.
Illustrator (Adobe)
Software commonly used to create graphics and layouts for both print and digital.
Infographic
Information presented in a visual way, usually in the form of diagrams, graphs or maps. Infographics are often used to present complex data in a digestible way, making it easier to notice patterns and trends.
InVision
A popular web-based app that allows users to create clickable prototypes from static designs.
J
.JPEG / .JPG
A common image format that uses compression to minimise file size. It’s often used with photographs or complex graphics. The more compressed the image is, the smaller its size will be, but also its quality will decrease.
L
Logo
A visual symbol representing a company – one of the most important pieces of branding.
M
Material Design
A design system created in 2014 by Google. As a response to usability problems introduced by Flat Design, Material Design takes its minimalism and flat colours, but enhances them with light and shadow, making it more obvious what elements are clickable and what are not. It’s based on a grid and shows content primarily on highly responsive cards with animated interactions.
Moodboard
A collection of images that are meant to represent the overall look or mood of something else. Moodboards are often used in the first stage of creating a new branding or a website to show the client the general ‘feel’ of it, before any concepts are produced.
N
Navigation
A collection of links that form a menu bar and can take the user to main pages of the site.
P
PhotoShop (Adobe)
Software which primary function originated in retouching photos, but is now also used for designing and creating digital artworks.
Personas
An imaginary person that represents a group of users. A full persona profile will include their name, age, occupation, photo, bio, information on their tech skills etc. Personas help designers focus on user needs. By asking ‘will Emma use this?’ or ‘will George understand how this works?’ they can prevent potential problems early on.
.PNG
Portable Network Graphics – file format that has lossless compression and supports transparency. In terms of quality, it’s the best of the common graphics formats, however, the more complex the graphic is, the bigger the file size is going to be, which can be a problem when uploading to the web.
Pop-up
An advert or offer which “pops up” on the screen. It’s usually an overlay centred in the middle of the page, covering the content below, but sometimes it can also slide up or down, taking part of the screen.
POS
Point of Sale – display material used in any retail outlet (store or online) to draw attention to a product, service or offer.
Process
This refers to design process, which is a series of steps a designer takes to find solution to a problem, such as a new branding, or a website. Design processes can vary for different agencies or freelancers, but every professional will have a more or less defined process that was tried and tested, and has helped them arrive at the finish line. The most common steps include a research phase, exploration phase, production phase and testing.
Prototype
A work-in-progress version of a product. In terms of websites, prototypes can be paper sketches, clickable wireframes, or high fidelity, interactive applications done in a prototyping software, such as Axure or InVision. Prototypes help in quickly adjusting functionality before the design goes into development, saving time and money for the client.
R
Rich Media
Advanced technology on a web page that interacts with the user, like a streaming video, or something which starts as the user’s mouse hovers over it, or scrolls down to where it sits in the page.
Responsive Design
Way of designing and building websites that allows them to adjust to various screen sizes. Through what is called “media queries”, the browser can display a piece of code that is relevant to a particular device, rearranging the default layout, displaying/hiding certain elements or changing how it looks completely. This way, a single website is completely fluid and device-agnostic, meaning it should display correctly no matter what device it’s opened on.
S
Sticky Nav
A menu bar which “sticks” to the top of the page when the user scrolls down.
Stock Photography
Photography that comes from any of the online photo libraries. Some stock photography is free, but in most cases you have to pay for a licence to use them.
Stop Motion
A type of animation that is essentially a series of photographs. The camera is turned on for a certain amount of time, then turned off, the scene is slightly adjusted and then the process repeats. This creates an illusion of movement.
Style Tile
Most often a style tile is a page with common website components, such as colour palette, typography, buttons, basic interactions etc. It’s the first step in designing a website, setting the style for the rest of the elements. In the case of very big websites, style tiles tend to substitute the actual page designs, but are much more detailed and include all of the components, allowing for pages to be created on the go.
T
Typeface
Design of a type, for example, Source Sans Pro or Lato. Typeface is the “family” of fonts – the way it looks visually, whereas the fonts will determine the varying weights and styles of that typeface, like bold, light, italic etc.
Typographic Scale
Type shown in different sizes, from small type, body copy and small headers, all the way to H1.
Typography
Branch of design that deals with arranging type.
U
UI
User Interface – visual elements of the website, application, or a piece of software
User Stories
Once-sentence long chunks of information that tell us what the user would want from the product. A usual user story follows this pattern: As a [type of user] I want to [desired functionality], so that I can [outcome]. They help to focus on users and prioritise the functionality according to their, not the client’s or team’s needs.
User Testing
Testing the product on its future users. Ideally, user testing should be conducted throughout the process of creating a new product, to ensure that any potential problems are picked up early on. It can take the form of surveys, interviews, workshops, or remote testing.
UX
User Experience – a branch of design that deals with improving accessibility, usability and the user’s pleasure from using the product. UX designers make sure that the visitor’s experience is seamless and enjoyable and they they can achieve their tasks efficiently.
V
Vector Graphics
Graphics created using mathematical formulas rather than physical pixels. Vector graphics are much more limited than bitmaps, but also take less space and can be expanded to any size without losing their quality.
W
Wireframe
A model of a website built using simple text and boxes, used to plan a site’s structure and functionality. Wireframes can be anything from simple hand-drawn sketches on paper to clickable prototypes. Visual design is omitted to help focus on the layout and functionality rather than colours or imagery.
Whitespace
Empty space around elements. The more whitespace is used, the more airy and light the design looks. Because whitespace can be seen as ‘wasted space’ by some companies, exclusive brands often use it a lot, creating a feeling of elegance and luxury. Try to compare PC world with Apple’s websites and you’ll know what I mean.
Phew! That was a long read! We hope that it was useful, though, and you’ve learnt something new. If you’re interested in more blogs like this, check out our digital jargon buster one!
