The A-Z Web Design Glossary – Trophy Developers

• AI

  Artificial intelligence (AI) is the ability of computers, programs, or machines to learn and adapt in ways that resemble human beings.

•  API

Application Programming Interface provides a set of routines, protocols, and tools for building software applications.

• CMS

A Content Management System separates a website's content from its code, allowing non-technical users to update, approve and post content.

Content strategy is the art of bringing the right content to the right person and place at the right time and context.

• CSS

Cascading Style Sheets are used to define the look and feel of a website outside of the actual content of the web page. Simplifying a site’s HTML files will increase search engine rankings and enable you to change the style of a site by altering just one file.

• Fixed Header

Where the navigation bar or other important ‘call to actions’ are fixed to the top of the browser to ensure they are always visible even after the user scrolls.

• Full Stack

Being ‘full stack’ refers to a web developer who is ‘cross-disciplinary and has the skills to carry a project through the first few major phases to completion. A full-stack developer handles everything from front-end developer, back-end developer, back-end server management, and much more.

• Hamburger Menu

A symbol consisting of three parallel horizontal lines (displayed as ≡) that’s used as a button in graphical user interfaces. It is often displayed in the top left or right of a page to save space.  It denotes a hidden menu that users can navigate when they click on it, and is good for showing videos or large images.  It’s called a ‘hamburger’ because it resembles one - the top and bottom lines represent the bun and its middle line the filling!

•  HTML

Stands for HyperText Markup Language, a markup language used by most websites consisting of symbols and codes inserted in a file to display content like text, images, and links on the web.

• Hybrid App

A downloadable app that combines elements of native and web applications. It runs some of its user interfaces in an embedded browser component.  A hybrid app is usually quicker to build and cheaper than native apps.  The code can be written in HTML, CSS and JavaScript, and leveraged across devices and mobile Operating systems.

• Java Script

Coding language commonly used in web development to achieve effects and functions on websites that normal HTML and its variants cannot achieve. It was originally developed by Netscape to add dynamic and interactive elements to websites.

•  Native App

In web terms, native means ‘original’ or ‘basic’. A native app is an application program that has been developed for use on a particular platform or mobile device. They’re installed directly onto the device and deliver the best performance and an empowered user experience. Users typically acquire these apps through an online store or marketplace such as The App Store or Android Apps on Google Play.

• Parallax

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight creating the illusion of depth and animation in a 2D scene.

•  PPC

Pay Per Click is a common term in Internet advertising where you purchase space on someone’s website and you pay a small amount each time someone clicks on your advert that links to your website.

• Prototype

The prototype is a partially completed mockup of your final website. Prototyping allows you to test certain parts of the final website, especially when it’s incomplete. This model can be as simple as paper and pencil drawings or as complex as actual working code. Prototypes can take the form of low fidelity wireframe prototypes, or more complete graphical representations ensuring a realistic version for testing UI and UX.

• Responsive Web Design

Responsive Web Design is a technique for adapting a website's layout across multiple devices. It is usually a combination of fluid stretchy containers and breakpoints that define the difference in layout between different sized devices. Responsive design gives a more consistent design, which utilizes the same containers at varying widths dependent on the device it is being viewed on.

• SEO

SEO Stands for ‘Search Engine Optimization and refers to the practice of tweaking website coding and content to achieve the highest possible search engine ranking.

•  Slider

Sliders are used to add a slideshow to a web page. Websites can feature their most important content in a visually appealing and interactive slideshow at the top of the page before their main content. Sliders allow users to quickly see the highlights and take action.

•  Sticky

This refers to a site’s ability to keep visitors on the site once they have navigated there or encourage them to return frequently and ‘stick’ to the site.  The stickiness of a site depends on the content that encourages the visitors to remain there but is not necessarily what the visitors went to the site looking for. For example, a site may add a glossary, stock quotes, games, community forums, news feeds or chatrooms to make the site more appealing to visitors.

• Subdomain

A domain that is behind another larger domain name in DNS hierarchy, but totally separate. Using sub-domains, you can effectively have multiple ‘domains’ on a single registered domain name and hosting account.  For example, in the domain name trophydevelopers.com, ‘trophydevelopers’ is a subdomain of the larger second-level domain ‘.com’.

• Tag

A command inserted in a document that specifies how a portion should be formatted.  Tags are a set of mark-up characters used around an element to indicate where it starts < > and ends. These can also include HTML or other code to specify how that element should look or behave on the page.

• UI (User Interface)

A User Interface is a junction between a user and a computer program.  An interface is a set of commands or menus through which a user communicates with a program. The UI is important because it determines how easily you can make the program do what you want - a powerful program with a poorly designed user interface has little value. The basics of UI: http://www.usability.gov/what-and-why/user-interface-design.html

• User Journey

Demonstrates the interactive path that a visitor takes through your website User journeys are used in designing websites to identify the series of steps that enable the user to achieve their goal as quickly and easily as possible.

•  UX

User Experience Design (UX, UXD, UED or XD) is a process that focuses on improving user satisfaction by enhancing usability, accessibility, and pleasure in the interaction between the user and the product. Rather than just focusing on the look and feel of the website, UX designers understand how users use the design to make it more intuitive and user-friendly.

• Widget

This is a generic term for the part of a GUI that enables users to interface with the application.  Widgets display information and invite the user to act in a number of ways. Typical widgets include buttons, dialogue boxes, popup windows, pull-down menus, icons, scroll bars, tear-off menus, menu bars, toggle switches, resizable window edges, progress indicators, selection boxes, windows and forms.

The term also refers to the program that is written to make the graphic widget in the GUI perform and look in a specified way, depending on what action the user takes while interfacing with the GUI.

• Wireframe

Wireframes are a visualization tool used in web development for presenting proposed functions, structure and content of a website or page.  A wireframe separates the functional elements from the graphic elements of a website so that you can easily see how users will interact with the site.

Some of the Website Styles:

• Asymmetrical Layouts:

Breaks away from traditional grid structures to create dynamic, less predictable designs. eg: Trophy Developers Website, a creative agency, and art galleries.

• Minimalist:

Focuses on simplicity and clean design. Utilizes ample white space, limited color palettes, and simple typography.

eg: Apple, Google.

• Flat Design:

Uses simple, two-dimensional elements and bright colors. Avoids shadows and textures.eg: Microsoft, Dropbox.

• Material Design:

This is a style guide developed by Google, it uses grid-based layouts, responsive animations, and depth effects such as lighting and shadows. Google’s suite of apps (Gmail, Google Drive).

• Skeuomorphic Design:

Mimics real-world objects and textures to create a more familiar and tangible interface. Early iOS designs, and calendar apps with leather textures.

• Responsive Design:

Ensures websites render well on a variety of devices and window or screen sizes. Uses flexible grids and layouts. eg: Any modern website that adapts to mobile, tablet, and desktop views.

• Parallax Scrolling:

Creates an illusion of depth by making background images move slower than foreground images as the user scrolls. eg: Nike, Spotify.

Single Page Application (SPA):

Provides a fluid, app-like experience with all content on a single page. Uses JavaScript frameworks like React or Angular. eg: Trello, Gmail.

• Grid-Based Layout:

Uses a structured grid system to align content neatly and create a consistent visual flow. eg: Pinterest, Instagram.

• Brutalism:

Emphasizes raw and unpolished aesthetics. Often uses plain HTML and stark, contrasting elements.

eg: Bloomberg, Craigslist.

• Typographic:

Focuses heavily on typography to create a distinctive look and feel. Often minimal in other design elements.

eg: Medium, The New York Times.

• Illustrative:

Incorporates custom illustrations and graphics to convey the message creatively and engagingly. eg: Mailchimp, Slack.

• Dark Mode:

Uses a dark color palette for the interface, which can reduce eye strain in low-light conditions. eg: GitHub, YouTube (optional setting).

• Neumorphism (Soft UI):

Combines flat design and skeuomorphism, creating soft, extruded shapes that look like digital embossing or debossing. eg: Concept designs often showcased on platforms like Dribbble.

• Vintage/Retro:

Utilizes design elements and aesthetics from past eras to evoke nostalgia.

eg: Some fashion and entertainment websites.

• Landing Page

  We hope you have found this web glossary useful and informative.  If there is a web term you are unsure of or you would like to add to the list, call us for a chat or email