please what’s the difference between a drop down and a drill down? For more information, check out our privacy policy. Web designers are the more creative of the two, dealing with the visuals and layout of the website. Page headers are like miniature versions of the home page that sit atop each page and do many of the things that home pages do, but in a limited space. Headers provide site identity and global navigation, with search and perhaps other tools. Thanks for the feedback, Eleanor! share. A design technique used to smooth out edges of a feature. A homepage is essentially the cover to your website. save. The lines that make up a letter in a typeface. The number of DPIs refer to the resolution of a printed digital object -- the higher the DPI, the higher the resolution. The logo may also include a slogan or brief statement about the site to give visitors … In addition, the elements are easily scannable in a layout that efficiently presents them all. The components of a web page are: images, text, audio, video, animations and other multimedia content interacting with Internet users. This involves inputting code into websites for optimum performance. With technology and smartphones being the forefront of the world, it’s crucial to make sure your website is optimized to be mobile friendly. What on earth is a CTA? An acronym standing for the colors red, green, and blue. An image file format that's best used when the image has large areas of uniform color, or a transparent background (unlike JPEG). Especially the acronyms. W… This guide should help explain some of the structure vocabulary (Parent page, child page, etc.) This functionality is helpful for site visitors that may know exactly what information they’re looking for but don’t want to browse through your navigation. HTML (another markup language) is used to determine the structure and content of the webpage. What colors do we want to use? It’s an additional (but optional) way to let users understand where they are located on your site. A small line attached to the end of a stroke in some fonts. A website header is located at the top of each page of the website. Make a powerful website for your growing nonprofit. The accentuation of differences between colors, shapes, spacing, or any other design element. Stands for cyan, magenta, yellow, and black. 33 comments. A file format that compresses several files and combines them into a single folder. I’m so glad to hear this was helpful for you! They'll sort it. These are the three main building blocks of every website. These elements can be aligned to both the page and to each other. Most companies have a particular font or typography that they use to help their customers immediately identify them versus their competitors. Colors that appear adjacent to each other on a color wheel. A file format best used to represent documents and presentations. The header typically looks the same from page to page and contains an organization’s logo and navigation, creating a central hub to get elsewhere on the website. Colors that consist of a base color, plus the two colors that lie next to its complementary color. The positioning of the elements in your design (e.g. OC. Premium plans, Connect your favorite apps to HubSpot. Some organizations opt to keep this as simple as possible, with only copyright information. The smallest element of an image on a computer. A Call to Action is exactly what it sounds like; a visual element asking users to complete an action. Free and premium plans, Sales CRM software. Here are some foundational website anatomy terms to get comfortable with as you start to talk about the layout and design of your site. It’s vital that this space be used wisely. A design principle that visually orders and emphasizes different parts of your content’s message by using colors, sizes, and layouts. The elements that make up the layout are supporting one another, so that the user sees the text content with equal importance. what we call to a section of landing page which seen on the first impression, like we don’t have to scroll down, like first visible screen? Visual hierarchy is often a conscious decision as a result of an Information Architecture process. Here, users can type in a word or phrase they’re looking for more information on and then be taken to a results page listing website pages that may have related content within them. Color scheme in which three colors located at 120 degrees from each other on the color wheel are combined. A Strong, but Limited, Color Palette. So I was looking for a business and checked out their contact page. A sidebar can be a very diverse piece of a website and typically appears on the majority of a site’s internal or child pages. The end of a stroke that doesn’t include a serif. Plug-In. hide. Hi Michael, that’s a great question. Also know as the "median," as depicted below. All links, regardless of how they are visually represented, should have some sort of hover state to indicate its clickability. A design collection of characters, including letters, numbers, and punctuations. Logo: A logo is a custom graphic that represents a business brand. EN 60127-7:2016 - IEC 60127-7:2015(E) covers requirements for miniature fuse-links for special applications. They're logical and tend to have b… But navigation again? There are specialized terms referring to all sorts of aspects of web design. It's often considered the best color scheme. hbspt.cta._relativeUrls=true;hbspt.cta.load(53, '4afe9b8e-78ab-40ee-8285-08b9042e0c1e', {}); We've been there -- and we know we're not the only marketers who have, at some point, needed to become fluent in this vocabulary. Your site’s overall look is, of course, a crucial component of web design. For example, this paragraph of text is aligned to the left margin, whereas the lines depicted in the image below are aligned to the right. This acronym should be part of any website owner’s basic website terminology. Want a certain colour there? Your email address will not be published. By no means is this the be-all-end-all of design terminology, so feel free to add your definitions in the comments as well. Social media links are another popular item for website footers. It is just one part of your SEM strategy. Great post, thanks for sharing this useful information. Some of the elements used in SEO include keywords, formatting, content, images, and links. And when it comes to things like blogging and social media, sure, you've got this. Instead of using pixels to represent images, vectors use lines and shapes. Below is an overview of the major elements of a web page. Here are some common areas of a website and the correct terms for them: Header: The header is the area across the top of a website. What other web design terms would you add to the list? The file extension is .otf. A website is composed of many web pages, documents and files which have unique addresses (URL), usually organised into a hierarchy. On the color wheel, four colors are spaced evenly from each other. But before you dive into these details, make sure you’re familiar with basic web design vocabulary. See ascender, cap height, and descender. The primary vertical stroke in a letter. Here's what we have, organized alphabetically. In recent years, designers have received a larger selection of fonts to choose from, making it easier for brands to more accurately express themselves … A drop down menu simply refers to the menu that “drops down” from the parent navigation items to reveal child pages as a user explores a site’s navigation. When you're new to marketing, especially on a small team, you might have to do a lot of things at a moment's notice. SERP. They focus on the technical aspects and make sure everything works. A footer is typically a very structured section of the site that serves as the last opportunity to get various information to your site visitors. Given above are 11 usability characteristics that every website must display. Required fields are marked *. Examples include Times New Roman, Helvetica, and Arial. Reducing a file size by eliminating excess data. But soon enough, you're being pulled onto design projects. Below is a chart of HEX color codes: The computer language used to display content like text, images, and links on the web. A purely hypothetical map of vertical and horizontal lines that helps align images and text within a document. Terminology for a Website Structure. "Sans serif" refers to fonts that don't have this line. You can refer to the larger section with all of your main information as the “page content” or “body content”. 10. An image file type that uses lossy or lossless compression, with little perception in a loss of quality. With website layout terms under your belt, you’ll be able to talk to your designers and developers with additional confidence. great post. Let us know in the comments. Some headers include other content, such as a menu, social media icons, or a search bar. Giving feedback on a prototype, rather than coded sample pages, will … So we decided to share a larger glossary, to help us all step up our game a bit. A lot of times you’ll find action items like Log In, Donate, or Volunteer. These elements can be aligned to both the page and to each other. A search bar is typically located in the upper right-hand corner of the website’s header. A breadcrumb is essentially a trail at the top of any given web page that shows a user where that particular page lives within the site structure. It is usually noted by the word “Search” within a form field, or includes some sort of magnifying glass icon. The list is regularly updated in order to have the latests readings available on our website. Gave ma good laugh. Hope this helps! That’s a great question. Resource: 5 SEO Questions to Ask Before Building a Website. An orphan can also be a word or very short line that appears by itself at the end of a paragraph. Search engines use this information to categorize websites and display information in search engine results pages (SERPs). The section of text at the end of a paragraph that spills over into the following column or page. Web developers will then use CSS to style this content; in other words, CSS tells the browser how the HTML elements should be displayed. A visual effect that displays a graphic as if it had a shadow behind it. That’s a nice list of terms. Similar to the pixel for the web, dots are the smallest unit of measurement when printing digital images. Hopefully with this list of web design vocabulary, you’ll feel more confident talking with web designers and developers as you work together to create something you’re proud to show the world. Balance of power for elements in a silhouette view. Banner – a long, horizontal, online advert usually found running across the top of a page in a fixed placement. An image file format that's best used for small image files with few colors and designs, or animated images. As opposed to lossy compression, this format allows the image's detail to be restored. Compressed files do not lose any data to become smaller, and are easily restored by unzipping the ZIP file. In typefaces, the thickness of the stroke’s width. In a sidebar, you may find additional navigation, pertinent CTAs, upcoming events, or even just additional bits of highlighted content. An easy-to-see marker placed over the top of photos on the web and in print. Images can be highlighted with some sort of color overlay, words or symbols to make it obvious that it’s clickable. Largely used in print design, and used to match printed colors to those that appear on the screen during the digital phase of design. Are there additional words or phrases that should be added to our list of website terminology? For someone just getting started in web design, or someone looking to have a site designed, all the technical jargon can be overwhelming. A website header is located at the top of each page of the website. Alex. 8 Modern Website Design Elements and Trends Element #1: Unique and Large Typography. It is one of the factors that sets a professionally designed website apart from the rest. Yes! HTML5 deprecated elements that are used for styling, such as . A selected state is usually found in a list of navigation links to show what link is selected at that moment. You can actually create a website using CMS without coding. An example would include Times New Roman Semi Bold in size 14. What would you call it and how would you describe that? Website, Content, and Design Terminology . Overall Layout and Visual Appearance. really helped my understanding. It's common for them to have backgrounds in graphic design and art, so they'll know how to make things look pretty! We love hearing when our posts are able to help people out. Because they do not rely on pixels, enlarged vector images still maintain image clarity and quality. More site designs include vast spaces, increased spacing between lines of text, and an overall use of open space. A file format used for vector images that contain both text and graphics. A page layout for website pages. The blank space surrounding an object in design -- also see negative space. It’s the meat and potatoes of the website after all. It contains both the screen and printer versions in a single file, and is compatible for both Windows and Mac. Website Layout and Design Elements/Terms: Mock-Up/Prototype: A representative sample or preview of the design for a website. The current standard in font formats. I believe what you’re referring to is called “above the fold”, an old newspaper term that followed us to the web. The empty space surrounding a design, whether a webpage or single image -- also see white space. Thanks for the comment, Scott! Mobile-Friendly. 1) Alignment. Start Designing. For example, this paragraph of text is aligned to the left margin, whereas the lines depicted in the … Let’s hash them out in the comments. Looking for a web design company? Guide visitors further into the websiteHome pages can be long or short, containing a lot of information or just a little, depending on your goals.Keep in mind that the home page is not always the first page t… Love it ! Design Terminology for Website Design. Mia, I’m so glad to hear this was helpful! While the primary navigation is considered the main nav, secondary navigation can include helpful items for users that maybe need to be highlighted. We’re using these broad terms to cover a range of reactions you want your visitors to have. You feel woefully unprepared -- and that design vocabulary?