Glossary for Agencies. Episode 2: How to Talk to „Creatives” About Website Design

The next part of our glossary will cover terms related to website design, from the initial concept, through sketches, to the prototype. This will not be an exhaustive list, as we could dedicate several posts solely to UX-related terms. Instead, we present a compilation of the most commonly used terms we encounter in the agency when designing websites.

UX / CX / UI

UX – User Experience – The term was first coined in 1993 by cognitive scientist and researcher Don Norman. However, even though it has been called differently throughout history, user experience can be observed over centuries – from Chinese Feng Shui, through Greek principles of ergonomics, workplace organization, and life-enhancing designs. UX encompasses various disciplines that study the relationship between design and usability (and consequently the level of satisfaction and perception of the brand by the user) of a website, application, or system.

CX – Customer Experience – This refers to the overall perception and feelings a customer has during interactions with a system, sales channels, or products. It often involves responding to customer feedback, observing their experiences, and adapting channels to meet their expectations. It doesn’t depend solely on how we build a website or app, as that’s only one element. Customer experience also includes interactions with customer service, packaging methods for ordered products, and satisfaction with the product itself.

UI – User Interface – These are the elements of a website or application that enable interaction between the user and the system. This term is often used interchangeably with GUI – Graphical User Interface. In short, UI refers to what the user sees – the space where interactions take place, utilizing and displaying graphic elements we’ve designed, such as menus, text layout, buttons, colors, animations, etc. Designing the interface is the final stage of building the user experience.

Wireframes, Mockup, and Prototype

A wireframe is a simplified sketch outlining the most important elements and information on a website. It’s often referred to as the site’s architecture (not the content), schematic, or blueprint. It serves as the skeleton upon which increasingly detailed views are built and should include all the essential elements that the final project must contain. We can classify wireframes based on their fidelity:

• LoFi wireframes (Low fidelity) – This is the first stage of designing the user experience. It includes the basic arrangement of elements and functionalities, which can even be prepared on paper or using dedicated tools like Adobe XD, Axure, or Figma. These initial sketches allow us to answer whether our message will be understandable to users, if it meets business goals, and if the navigation will be intuitive. It also helps determine whether the project is feasible within the intended technology.
  
  
  
  

• HiFi wireframes (High fidelity) – At this stage, we present elements in greater detail, using the target color scheme, graphic components, and final content. We can also plan the sequence in which content or screens will be displayed. At this point, we can assess whether the overall design meets our expectations regarding functionality while seeing nearly the final visual design (which will be further refined in the GUI phase).

Now is a good time to explain the difference between wireframes and mockups. In Polish, these are often referred to as “makiety” (mockups), but in English, they are distinct. The definitions of HiFi wireframes and mockups are very similar – some authors use the term wireframe exclusively for LoFi mockups, while referring to HiFi versions as mockups. Others may use “mockup” to describe the final graphic version of the user interface, which we often call a layout in Polish.

Personally, I lean toward distinguishing wireframes as low-fidelity mockups – the skeleton of the project – and using mockups for high-fidelity models. However, when we refer to UI mockup, we are talking about the page layout – a visual model. In all cases, these are static models, graphic visualizations without animation, motion, or interactivity.

Prototype is often confused with mockups or sketches, but it’s the version closest to the final product. It may not yet look exactly like the finished version, but it doesn’t stem from grayscale sketches or mockups. The main difference is that a prototype simulates user interaction with the interface – it’s clickable, allowing us to track the user’s path. You can select menu items, press buttons, or even fill out forms. Without engaging developers, we can test how the final product will behave, which is especially useful when planning user tests.

Summary

Once again, it’s only when attempting to organize and write down the information we encounter daily, as clearly and systematically as possible, that I realize how even the design community often uses certain terms interchangeably, and the boundaries between them may not be as rigid as they seem. While my approach to terminology might not be the definitive one, I hope this article highlights what’s truly important – that every stage of the design process is crucial, and each one helps us identify aspects that can contribute to creating a product best suited to our users.