Why Web Designers Should Understand Web Development Terms
This doesn’t mean designers and developers should work in isolation. In fact, the best results come when both collaborate closely.
It is best practice for designers to have a basic understanding of web development before designing a website so they can design with the end in mind. Understanding key terms helps designers plan and brainstorm functionality with developers before any design work begins, reducing potential issues later in the process.
Here is a list of 10 terms every web designer should understand.
1. Accessibility
Accessibility refers to designing and developing websites that can be used by as many people as possible, regardless of their hardware, software, language, culture, location, or physical or cognitive ability.
It supports inclusion and ensures digital experiences are usable for all users.
This includes considerations such as:
- Screen reader compatibility for visually impaired users
- Providing alternatives for audio content for hearing-impaired users
- Ensuring sufficient colour contrast for readability
- Avoiding problematic colour combinations (e.g. red and green CTAs side by side)
Accessibility should always be considered during the design planning phase, not added afterwards.
2. Below the fold
“Below the fold” comes from print newspaper terminology, referring to content placed below the physical fold of a newspaper.
In web design, it refers to content that is not visible on a screen until the user scrolls down.
Because screen sizes vary, what is “above the fold” is not fixed, but it generally refers to the first visible portion of a webpage.
Designers often use visual cues such as arrows or scroll indicators to encourage users to explore further content, improving user experience (UX).
3. Hypertext Markup Language (HTML)
HTML is the core language used to create the structure of a website.
It forms the “skeleton” of a webpage and defines elements such as:
- Headings
- Paragraphs
- Images
- Links
- Navigation menus
These elements are represented using tags, which browsers interpret to render content correctly.
HTML does not define appearance, it defines structure.
4. Cascading Style Sheets (CSS)
CSS is the styling language used to control the appearance of a website built with HTML.
While HTML defines structure, CSS defines how that structure looks.
It controls elements such as:
- Fonts and typography
- Colours
- Spacing and layout
- Alignment
- Backgrounds
CSS is what transforms a basic HTML structure into a visually designed interface.
5. Content Management System (CMS)
A CMS is a platform that allows users to manage website content without needing advanced technical skills.
Common examples include WordPress and Joomla.
A CMS typically allows users to:
- Add or edit text and images
- Publish blog posts or pages
- Manage website structure
It also supports user roles and permissions, allowing agencies to restrict access so clients can update content without breaking core website functionality.
6. Favicon
A favicon (short for “favourite icon”) is a small icon associated with a website or brand.
It typically appears in browser tabs next to the page title and is used for easy identification of websites.
Favicons are usually simple versions of a brand logo and are typically 16x16 pixels in size.
7. Responsive Design
Responsive design refers to designing websites that adapt to different screen sizes, devices, and orientations.
This ensures a consistent user experience across desktops, tablets, and mobile devices.
A common approach is mobile-first design, where the mobile experience is designed first before scaling up to larger screens.
This helps ensure usability across all devices and reduces design issues later in development.
8. Search Engine Optimization (SEO)
SEO is the process of improving a website so it ranks higher in search engine results and attracts more organic traffic.
It involves optimising content and technical elements such as:
- Title tags
- Meta descriptions
- Image ALT text
- Site structure
- Keywords and content relevance
Good SEO ensures a website can be discovered by users searching for related products, services, or information.
9. User Experience (UX) Design
UX design focuses on the overall experience a user has when interacting with a website or application.
It includes how easy a site is to navigate, how intuitive it feels, and how effectively it solves user problems.
UX is analytical and strategic, focusing on:
- User flows
- Functionality
- Usability
- Problem-solving
It forms the foundation of effective digital design.
10. User Interface (UI) Design
UI design focuses on the visual and interactive elements of a website or application.
While UX defines the experience, UI defines how that experience looks and feels visually.
UI designers work with elements such as:
- Buttons
- Layouts
- Typography
- Colour systems
- Interactive elements
UI brings UX wireframes and concepts to life in a visually engaging way.
Bonus: Wireframe
A wireframe is a simplified visual representation of a website or application layout.
It shows structure rather than design details and helps teams plan:
- Layout
- Content placement
- Navigation
- Functionality
Wireframes can be low fidelity (simple sketches) or high fidelity (more detailed layouts with content and styling).
They are an essential step in aligning teams before full design and development begins.
Final Thoughts
Understanding these core web development terms helps designers collaborate more effectively with developers.
When designers understand how websites are built and structured, they can create more realistic, functional, and efficient designs that improve both user experience and development outcomes.
Ultimately, better communication between design and development leads to better digital products.
