Website Lingo to Know - Katie Polansky Freelance Digital Designer

Website Lingo to Know



March 20, 2020



2 min read

First of all, I’ll start by apologizing to all of my previous clients. Sometimes I start throwing hamburgers, heroes, and carousels together and then BAM! we’ve got a website. If you’re a retainer client then you may have already heard them all but wondered, is she making this sh*t up??

Well, fret no more to all of my current clients, future clients, and friends. This is a list of the top 13 website phrases and terms that I use on a daily basis. I regret to announce that I did not coin this website terminology but I am here to give you a breakdown and definition of common website design jargon.

This is definitely not a complete glossary but it is the website vocabulary I use consistently. So, if you’re looking to work with me, collaborate with another developer or designer, or even DIY your own site then here is a quick vocabulary lesson to strengthen your website design knowledge.

Firstly, is the Hero area of your website. This is your prime real estate on your entire site since it is the first impression your users will get when landing on your website. We have to make a BIG impression here so we put our best foot forward.

1. Navigation Bar – Your navigation bar (or nav bar or primary navigation) houses your website’s logo and main navigation links. I recommend keeping your navigation menu to 6 items or less.

2. Hamburger Menu – More commonly found on mobile and responsive devices, the hamburger menu (named for the icon resembling the layers of a hamburger) minimizes the navigation menu on tablets, smartphones, and smaller screen sizes.

3. Hero Copy – This is where your impactful, eye-catching statement is on display to draw the website user into your brand. You can compliment the hero statement with sub-text as well. Keep in mind, that this copy needs to be short, sweet, and to the point!

4. Call to Action – Also called a CTA for the sake of laziness, these buttons are strategically placed throughout your website to direct your users where you want them to go. For example – “Learn More” to learn about your brand or company; “Read More” to direct readers to your latest blog post; “Shop Now” to prompt customers to shop your most popular items.

5. The Fold – Like folding a paper, this is the invisible bottom line on the landing area of your home page. To clarify, think of it as the bottom of your screen before you scroll. If an item is Above the Fold then it is peeking over that invisible line, which can consequently prompt users to scroll down.

Next, the body area of your home page. This is where you give the viewer more information. It could be about you or your company, your best sellers if you have an ecommerce website, or maybe your most recent blog posts. This will let the user dive in to what your website has to offer.

6. Heading Copy – Ranging from Header 1 (H1) to Header 6 (H6), Headers exist to give your prominent typeface some variety while establishing a hierarchy in the copy’s design and flow. Having consistent Header settings is also good for SEO (aka Google loves it). Without getting too deep into it here, establishing your H1, H2, H3, H4, H5, and H6 goes a long way for you, your users, and for those Google spiders 😉

7. Paragraph Copy or Body Text – In addition to Headers, body text is typically smallest sized font used primarily for larger bodies of text. Blog posts, About sections, and long-form sentences will almost always use the settings set for the paragraph copy or body text.

8. Ghost Button – This refers to a button or call to action that is not a solid color but an outline only with the text inside. For example, I use this style for a CTA when we want to draw less attention to the button but still want to prompt the users to take action.

9. Tri-Section Grid – Sometimes it will even be a Quad-Section but I am a HUGE advocate for a sectioned grid on your home page. On most of my designs I work in a grid to highlight the top pages on your website. I could write a whole post about this topic (don’t tempt me) but just take my word when I say this plays a big part in most of my website designs.

Lastly, we’ll cover the bottom area of your home page. This is section is most popular for getting your user involved and interacting with you and your brand. Contact forms, social media feeds, and subscription forms are typically all found in this area of your site.

10. Contact Form – A pretty straight-forward and common term, the contact form helps your audience reach out to you quickly and easily. The contact area is an important section for pretty much every website.

11. Instagram Feed – Also a pretty common term nowadays but I thought it should be included anyway. This shows a live feed of your Instagram feed and update automatically when you post new content. Typically, we will display this as a Carousel, which is a horizontal scrolling image gallery.

12. Footer Navigation – In the footer area lies the Footer Navigation where we list less referenced pages such as an FAQ page or Terms and Conditions page or you can list the same pages as our Navigation Bar.

13. Footer Logo – A logo in the footer area can be accompanied with directions, contact information, or whatever you want depending on your needs.

To sum it all up, I hope this list was helpful and informative for anyone wanting to learn some easy website design terms. If I missed any lingo you were wanting to learn or if you have more to add, drop a comment below! Thanks for reading

March 20, 2020

Cheers,

Katie

Related Articles

Hack #3 to Level Up Your Creative: Convert Users with Creative

Hack #1 to Level Up Your Creative: DIY Your Brand Identity

How to Build a Website in 24 Hours