Having joined ICS from outside the design world, my digital design learning curve was steep. It turns out that many of our clients, although experts and leaders in their own industries, are also frequently new to the digital agency world, and may not always be up to speed on the terminology that we use on a daily basis.
Because my colleagues here at ICS are industry experts (and awesome people to boot), they got me up to speed quickly, and helped me flesh out a glossary of those design, development, brand terms we use so often. For those folks who are ready to embark on an agency partnership and need some priming, we hope this glossary will give you a running start.
Don’t see a term you’re looking for? Comment below and we’ll add it! We plan to come back to this glossary periodically to keep it up to date and relevant.
A/B Testing
A/B testing is used to test the success of two different design or content variables within a single website component. This may include image choices, colors, or placement of a button or CTA. Various service will randomize which versions users will see and then data is collected to determine which version was more successful for a given task.
Back-End Development
Back-end development involves transforming working proofs of concepts (prototypes) into written code that makes them fully functional and populated with real data. During this stage, the website is connected to a content management system. Tools used in back-end development can include PHP, Rails, Linux, ASP, C#, C++, Python, and .NET. Typically done as an early step in website development, back-end development provides the structure and foundation for front-end developers or designers to apply front-end code.
Brand
A brand is a distinctive product or service that is defined by a suite of visuals, messages, values, and design elements that help to distinguish it from competitors.
Brand Platform
A brand platform is a defining document that encompasses all of the artifacts that externally define a specific brand. These may include, but are not limited to; mission, vision, values, promise, DNA, and visual style guides.
Color palettes
Color palettes define the family of colors and hues that will be used throughout a brand or website. These are typically driven by the brand’s style guide and can be harmonious, contrasting, or monochromatic.
Content Management System (CMS)
You’ll mostly hear this as “CMS” and it refers to the platform where people who manage an organization’s website can log in to edit and publish content. Examples of CMSs are WordPress, Joomla, Sitecore, Episerver, Ektron, and Umbraco. ICS almost always recommends WordPress for its user-friendliness and flexibility.
Customer Relationship Management (CRM)
Organizations that need to manage customer information use a CRM tool that will store things like contact information, status (eg lead, prospect, active customer), sales or service history. Some examples of CRMs are Salesforce, Zoho and HubSpot.
CSS
Part of front-end development, CSS (Cascading Style Sheets) are coded stylesheets that apply color, typography, style, and layout to a website’s HTML.
Call to Action (CTA)
This refers to a direct action for a user to take. Examples include “add to cart”, “download now”, or “call today”. CTAs typically take the form of a button styled to ensure users are able to distinguish it from other content.
Domain & Domain Name System (DNS)
Every site has its own unique domain name. Ours is www.icscreative.com. It is the thing which allows a site to claim territory on the web. The rules and procedures for domain names are set by the Domain Name System (DNS) however domain names themselves are purchased through a registrar. Hosting providers are sometimes also domain registrars.
Discovery
Discovery is a deep dive to learn more about an organization. It is an effective tool to help uncover unknowns in a project. It provides clarity and provides an opportunity to align goals and desired outcomes for both the agency and client.
Font
A font is a digital file that allows a computer application or browser to render a specific typeface. Web fonts are essential to displaying stylized fonts across websites.
Front-end Development
Front-end development involves writing the code that defines the UI of the site, or how a website looks and interacts when it’s displayed in a browser. Languages used for front-end development include HTML, CSS, and Javascript.
Check our related (and most popular) post: “5 Essential CSS, Javascript, and HTML Snippets for Front-end Developers”
Hero
A hero is a piece of content (usually an image or video) that serves as the focal point for a particular design. Designers use images, video, or illustrations in the “hero area” to make a first impression on users, to let them know exactly what content they are about to see.
Hosting
A host is a third party service provider that users servers to store and “host” your website’s data and display it on the internet. There are many options out there to host your site, and it’s important to use one that is reliable, flexible, scalable and secure. For these reasons, finding a good hosting provider is a key part of building your website. We could write a whole other post (and don’t worry, we will) about why hosting is important and what you should look for in a host. We work almost exclusively with WP Engine for its reliability, customer service, and scalable plans.
HTML
“Hypertext Markup Language” is a foundational component to front-end code that makes content render in a web browser.
Launch
The act of migrating a staging website to a production server or site, making it live and accessible via the World Wide Web.
Mobile-first
Mobile-first refers to the approach of designing for the restrictions of mobile display and using that as a foundation upon which to expand features for tablet and desktop versions. This approach ensures that mobile users get the same, rich, digital experience that a desktop user would.
Moodboard
A moodboard is a digital collage of images, colors, and typography from content found “in the wild”. Moodboards can help designers, and clients, begin to create a visual language that resonates with the goal of a project whether it’s choosing a photography direction or brand identity. The next iteration after a moodboard is typically style tiles. Below is an example of a moodboard that provides examples of illustrative design.
Personas
Personas are models of archetypal users of a given website or product. Personas are useful in defining the goals, pain points, motivations, and opportunities for a typical website user, and are invaluable in creating an experience that is optimized for the users of a website.
Pay-Per-Click (PPC)
Pay-per-click is a type of digital advertisement that uses search terms to place a relevant, text-based ad at the top of a SERP (Search Engine Results Page). Using PPC, you’re charged a set dollar amount, depending on the specific keyword, anytime a user clicks on the ad.
Prototypes are interactive mock-ups of what a website could look like. After colors, imagery, and typography have been set, designers create prototypes for clients to visualize and test what final product will look like before coding work has begun.
Quality Assurance (QA)
In the course of design and development, somebody needs to review all the work produced, verify that everything is built as it was designed and intended to function. In addition, during the QA process, the site is tested in multiple browsers and on multiple devices to ensure that it is responsive to the most likely use cases.
Responsive Design
Responsive design aims to create sites and other digital platforms that give an optimal viewing experience across all platforms. This usually means the layout adapts to the screen size, so a site that looks great on a desktop computer will also function in a way that is more friendly for devices when viewed on a mobile or tablet, with scrolling or panning that makes sense on that particular screen. For additional reading, we recommend this article by Ethan Marcotte. He’s the one who coined the term and is largely responsible for making responsive design the norm in modern web design.
Also, check out our related post: “But seriously, you need a mobile-friendly website”
Search Engine Optimization (SEO)
SEO refers mainly to the process of choosing the correct keywords for your website and then optimizing them so your audience can find your site. We recommend establishing an SEO plan so your site is kept fresh and is leveraging best practices on an ongoing basis. While you’re dabbling with all the tenets of SEO, remember this: even if you are able to get users to your sites with good SEO (keywords), if your site’s content is not interesting or updated, you’ll lose that user. If you have good content, users will find you and stay.
Server
A computer that hosts a website on the Internet. A web server first has to store the website’s files, namely all HTML documents and their related assets, including images, CSS stylesheets, JavaScript files, fonts, and videos. Servers are run and maintained by hosting companies. Web servers can host multiple websites.
Staging Site
This is a fully developed preview of a site, and is typically used as a bridge between the development site and the production site. Typically QA happens on the staging site.
Style tiles act like a bridge between moodboards and fully designed prototypes. Where a moodboard is a stitching together of samples or references that one finds “in the wild”, style tiles are a more custom visual reference for the overall look and feel that a website will have. Not quite a full prototype, style tiles will show how different elements, like navigation or calls to action, will look when styled.
Typography concerns the design and use of various typefaces in a way that helps to better visually communicate ideas. Common classifications of typefaces include:
- Serif: Look professional, authoritative, and traditional in appearance.
- Sans Serif: Have a more modern, stylish, and cleaner than their serif counterparts.
- Slab Serif: Tend to look sturdier, stronger, and bolder.
- Script: Elegant, personal, and/or more casual, depending on how embellished they are.
- Display: Usually expressive, playful and are often used in large, attention-grabbing applications as opposed to body copy.
Check out our related post: “Another four-letter F word”
User Experience (UX)
UX is the act of designing an optimal experience for a user. A UX designer will use a suite of tools, including wireframes, personas, user flows, journeys and empathy maps to create a deep understanding of the goals, pain points and motivations of a particular user, and then design an experience that is optimized to enhance that user’s satisfaction.
Check out our related post: “Deliverable Breakdown Vol. 1: Personas”
User Interface (UI) Design
User Interface Design, often called UI, is the visual design of how things look, feel, and interact on screen. Color, layout, typography, style, and animation effects all exist within the context of UI design. UI designers have a solid understanding of the principles of graphic design, branding, and website usability.
User Stories
User stories define specific requirements of a website or digital product through the lens of a particular user persona or type, and are described in natural, narrative language.
Software that is used to access information on the World Wide Web. Popular browsers include Chrome, Firefox, Safari, and Edge. Website functionality and design presentation can vary across browsers.
Web Fonts
Before web fonts, a site could only display a font that already existed on a user’s device. To avoid fonts not loading, web designers just stuck to fonts they knew everyone had (Times, Arial, Helvetica, etc.) A web font however, is served up with page load allowing designers and brands to use more custom type without having to worry about the user having a particular font. By using real type (as opposed to images of type in the past) websites are able to have better SEO and provide a better reading experience for users on smaller devices.
Wireframe
A wireframe is a visual guide representing the framework, layout and structure of content within a site or digital product. A common tool used during UX design, wireframes are like blueprints and are used to visualize the structure and flow of content of a site.