Help Your Colleagues With A Web Design Glossary

Have you ever been in a web design meeting where someone had no idea what was going on? Sometimes people either don’t know what they don’t know or are too embarrassed to ask, especially if they’re new.

If you have a coworker or client that needs some education, or are in a new position at a company or agency, this post is for you. I’ve provided a basic glossary of web design terms to help you navigate these sometimes unfamiliar waters. Let me know what you think and enjoy!

Mary’s Web Design Glossary (volume 1)

Adaptive Design – a design approach in which the system detects the type of device being used, and then presents the appropriate layout and other features based on a predefined set of screen sizes and other characteristics.

Agile – a software development approach that emphasizes team collaboration and decision making over traditional project management. Agile promotes minimal waste, continuous iteration and planning. Learn more here.

Allocations – a comprehensive list of who’s working on what within a design firm or in-house agency to help manage resources effectively. Learn more here.

Analytics – A record of user activity on a website, such as unique visitors and page views. The most popular analytics tool is Google Analytics. Omniture, owned by Adobe Systems, is another popular analytics program.

Assets – every website is composed of HTML code that organizes everything you are looking at in the browser right now. This can include a variety of text, images, typography, audio and video elements. The collective name for all of these individual files is “assets”. When you type in or click a website address (URL), your browser goes to the website server and asks, or requests it to gather up all the appropriate assets and display them on your screen.

Back End – the “behind the screen” part of a website or app that is usually on the server side. This is where database calculations take place and other complex coding wizardry.

CMS – Content Management System. A CMS enables non-technical users to update a website without the assistance of developers.

Comp – short for “design comprehensive”. A comp is a layout of a proposed screen design. It’s usually presented to a client for feedback. Design comps show initial concepts for the overall look and feel of a product as well as relative positioning of text and graphics, often before the final content is available.

Components – these are little bits of code, also known as “widgets” that make up a certain section of an individual web page or screen. For example, an email signup form might be a component of content presented within a certain screen size.

Concept Model – Christina Wodtke at Boxes and Arrows defines a concept model as “a visual representation of a set of ideas that clarifies the concept for both the thinker and the audience. It is a useful and powerful tool for user experience designers but also for business, engineering, and marketing… basically anyone who needs to communicate complexity. “

Content – all the stuff that goes into a website or app; text, audio, fonts, images and video. It’s probably delaying your project right now. If that’s the case you may need a content strategy.

CSS – Cascading Style Sheets. CSS is a type of code that “tells” the HTML how it should look. It’s kind of like a personal stylist for a website. Before CSS, web developers had to individually code each line of text to describe how it should look. For example, a headline might need to be bold and in a specific typeface, or a bulleted list might need to be certain color. CSS handles this at a global or page level without having to code each individual entry.

Customer Journey – a document describing a customer’s complete experience of interacting with a company or brand from the moment they find out about it all the way to purchase (or return) of a product.

Database – also known as DB. Any time you enter any data into a web or form, it is collected and stored in a back end database. Think of it like a storage unit or utility closet. There’s a ton of stuff in there that’s important, but you won’t see it unless you need it.

Discovery – the beginning phase of any web design project. Learn more here.

Design – in a traditional waterfall model (see below), the design phase of a web project is when initial concepts and comps are created along with site content (see comps above).

Development – in the waterfall model, the coding phase of a web design project.

Deployment – in the waterfall model, this is the launch phase of a web design project.

Fluid Grids – in responsive web design, fluid grids define a maximum layout size for a design instead of using specific pixel dimensions.

Front End – see “Web Design” below.

GIF – a type of image file that supports animated and static images. Think giphy.com.

H1 Tag – After the HTML Title Tag (see below), H1 tags are the most important information that Google sees for SEO.

HTML – Hypertext Markup Language. This is the front-end code that started the interwebs. It’s very useful to know basic HTML if you are in any aspect of the web design field. It’s also relatively simple to learn.

HTML Title Tag – This is the information that appears in the browser window and is displayed as a link in search engine results.

HTTP – Hypertext Transfer Protocol – yep, it’s geeky. “http://” commands the browser to go look for a website address somewhere out there on the interwebs. Sometimes you might see “https://“. The “s” means “secure” and the site will likely ask you for a password.

Information Architecture – the art and science of organizing, labeling and structuring a website or app so that content is useful, useable and easily findable.

Iteration – the process of continuous refinement and/or revision of a product’s design or features. Multiple, planned iterations often lead to improved products and customer satisfaction.

JPEG – a file format for compressed image files. On websites JPEG’s are usually photos or graphics with very detailed and varied colors.

jQuery – a free, open source JavaScript library designed to simplify client-side HTML scripting. Common examples of jQuery elements include sliders, tooltips, buttons and dialog boxes. JQuery libraries are used in over half of the most popular websites on the web and its ongoing use is growing steadily.

JavaScript – a programming language used to create interactions within web browsers. An example of JavaScript in use is a simple pop-up box. JavaScript is commonly used in conjunction with HTML and CSS. Developers who specialize in these three languages are called “Front End” developers.

Keyword – in the context of SEO (see below), keywords are specific words or phrases that describe a web page’s content. Keywords are part of a website’s metadata (also see below) that help search engines find relevant content. This is why they are so important for effective search engine optimization.

“Live” – an expression used when a website is launched publicly.

Media Queries – a cornerstone technology of responsive design, media queries is a CSS3 module that defines how content should be displayed on a given device.

Metadata – “data about data”. In web design, metadata summarizes what is contained on a given web page. It’s the little description you see displayed in search engine results.

Page Views – a measurement of how many pages were viewed by website visitors over a certain time period.

PDF – Portable Document Format. PDFs are an industry standard file format from Adobe Systems used for reviewing designs and other website documents.

Plugin – a module, or subset of software that “plugs in” to existing software to provide additional features or functionality. For example, WordPress plugins make it relatively easy for non-technical users to add complex functionality to a website or blog.

Prototype – A preliminary first version of a website or app that is not quite finished, but gives the design team enough information to test and improve the design.

PSD – Photoshop Design file. This is the industry standard for delivering website design assets, also known as “Layered PSDs”.

QA – Quality Assurance. All web projects should go through a QA phase before launch to identify any bugs or content issues before launching a website publicly.

Responsive Design – A responsive website is a flexible design approach that uses media queries, responsive images and fluid grids (see above). The site “responds” to the device accessing the system and changes to display the appropriate layout.

Scrum – in an agile software development model, Scrum is a lightweight framework developed to help small, close-knit teams develop complex products. The word “scrum” originally comes from Rugby as a way of re-starting the game.

Screencast – also known as a screen capture, is a digital recording of a computer screen’s output, often accompanied by audio narration.

Screen Share – a live version of a screencast (see above), screen sharing applications such as join.me are extremely useful for collaborating with distributed teams.

Script – in web design, a script is a small piece of code that allows a web browser to display dynamic vs. static results. For example, a JavaScript popup can display multiple results depending on a user’s input.

SEO – Search Engine Optimization is a collection of strategies, techniques and tactics used to influence and improve a web page’s ranking on search engines such as Google, Bing and Yahoo.

Server – a computer that delivers, or “serves” website files to a browser.

Shared Vocabulary – a project will often have it’s own vocabulary, so it’s best to agree on a set of shared terminology at the beginning so everyone is on the same page. For example, when someone starts talking about the XYZ widget, do you know what that is? If not, sit down with your team and agree upon appropriate labels for project-specific terms.

Sitemap – A sitemap is a high-level overview of all the content in a website or app. A sitemap also illustrates a site’s content hierarchy.

Slice – “slicing” is a process used by web designers to export individual parts of a graphic design layout into separate image files that can be used by a website’s HTML code. Slicing is most often done in Photoshop (see “Assets” above).

Sketch – the initial thought process of designing a website or app, sketching is a very important part of the creative process because it helps teams clarify their thinking “on paper”. Sketching makes abstract ideas more tangible, and allows teams to explore multiple design options quickly. Learn more here.

Sprint – in an agile web development approach, a sprint is a “burst” of focused work, usually focused on a single feature. Most sprints are organized in 1-2 week durations.

SQL – Structured Query Language. This is a common type of back end relational database (see Tables below).

Stock Photography – photographs licensed for specific use instead of hiring a professional photographer.

Tables – A set of data values setup in a relational database. Similar to a spreadsheet, database tables use a specific number of columns and can have an unlimited number of rows. Because they have a specific number of columns, database tables can be difficult to change once they are established.

Unique Visitors – the number of unique people who view a website or app over a certain time period.

User Flow – Also sometimes called a “task model” or “task flow”, a user flow describes the steps a user must take to complete a certain task from start to finish. It often describes a series of website or app screens in a flowchart format.

User Experience – the complete experience an end-user has with a website, app, or computer program, and especially how pleasing or easy it is to use. Also known as UX.

URL – Uniform Resource Locator. Ok, this is really geeky. URL is a term for any website address that uses http:// or https://.

Viewport – in responsive web design, this refers to the viewer’s visible area of a screen. It varies on different devices. For example, the viewport on a smartphone is much smaller than that of a tablet.

Waterfall – in traditional software development, a “waterfall” model means one phase cannot begin until the previous phase is completed. In traditional web design, a typical waterfall model is Discovery, Design, Development and Deployment.

Web Design – this includes all aspects of the “Front End” of creating an online experience; the visual design, the user interface, user experience considerations, SEO, and sometimes standardized coding such as HTML, CSS and Javascript.

Web Development – this refers to the parts of a web design you don’t see; the front end coding and back end programming. Web developers do this work.

Widgets – see “components” above.

Wireframes – these are “blueprints” used for planning a website or app. Wireframes are usually black and white or grayscale diagrams that depict overall site structure, functionality, and content organization. They can be made from simple pen and paper or whiteboard sketches all the way up to fancy documents created with software tools.

WordPress – a free, open source content management system (CMS) that powers over 25% of the internet as of this writing.

That’s It For Now

There’s lots more, but this should be enough to get you through your next meeting. I hope it’s helpful!

Like this post? Please share it or signup for email updates to get a free PDF copy you can print out and keep close by. As always, thanks for reading!