Screens are not arranged at random. Where each piece goes has a name, and you need those names to know exactly what "please fix the header" is asking for.
14 terms14 live demos
GNB and LNB are Korean-only terms
A few words here are used only in the Korean web industry — GNB and LNB above all. Work with a Korean team and you will hear them constantly, but they do not travel: search for them in English and you will find almost nothing. Each term notes what the rest of the world calls it.
01
Header
헤더
When this comes up
"Can you tidy up the header?", "Make the header stick" — this comes up when someone means the whole strip at the top of the page.
The topmost area of the page. Holds the logo, main menu, search, sign-in button and so on. Because it sits in the same place on every page, it is the anchor that tells people where they are.
See it Try clicking
Header — logo · menu · search · sign in
Content area
Footer
Easy to get wrong
The header is an area; the GNB is a menu inside it. They are not the same word. "Fix the header" might include the logo, search and sign-in too, so always confirm the scope.
Using it on the job
You have to decide whether it stays fixed while scrolling. Fixed means the menu is always reachable, but it eats that much screen. On mobile, hiding it on scroll-down and bringing it back on scroll-up is common.
Ask for it like this
Make the header sticky so it stays at the top while scrolling. Height 56px, and on mobile leave only the logo and the hamburger button.
"Put the business registration details in the footer" — this comes up without fail when the legally required notices get sorted out just before launch.
The bottom area of the page. Company information, terms of service, privacy policy, customer support and social links go here.
See it Try clicking
Header
Content area
FooterAbout · Terms · Privacy Policy · Business info
Easy to get wrong
Korean services are legally required to show the business registration number, representative's name, address and e-commerce filing number. Leave them out of the mockup and they get crammed in the day before launch.
Using it on the job
Convention is to make the privacy policy stand out from the other links (bold). Also watch out on pages with infinite scroll — the footer can become impossible to reach.
Ask for it like this
Add company name, representative, business registration number, e-commerce filing number, address and support phone number to the footer. Include links to the terms of service and the privacy policy, and set the privacy policy in bold.
"Add one more item to the GNB" — in Korean web projects this is almost always the phrase used for the main menu at the top.
The top-level menu shown across the whole site. The same items appear no matter which page you are on.
See it Try clicking
Logo
Product
Pricing
Support
Sign in
Content
The blue part is the GNB. The logo and sign-in belong to the header but are not usually counted as part of it.
Easy to get wrong
This term is used only in the Korean web industry. It will not land with international references or foreign clients. In English it is primary navigation or main nav.
Using it on the job
Keep GNB items to five to seven at most. Beyond that people stop scanning them. When someone asks to add an item, ask "and what should come out?" in the same breath.
Ask for it like this
Please add an item to the main navigation. Note that there are already six, and more will make it hard to scan — consider moving a lower-priority item down a level or grouping them into a mega menu.
"Give this page an LNB" — this comes up when a section has several pages underneath it.
A sub-menu used only inside one section. Click "Support" in the GNB and the vertical menu on the left that only exists in there is the LNB.
See it Try clicking
GNB — Product · Pricing · Support
Announcements
FAQ
Contact us
Content
The blue part is the LNB. It appears only inside "Support".
Easy to get wrong
Korean-only, like GNB. Elsewhere it is secondary navigation or side navigation. Because it usually takes the form of a sidebar, people mix the two up — but sidebar is a position, LNB is a role.
Using it on the job
On mobile there is no room to keep a vertical LNB on the left. The usual answer is horizontally scrolling tabs at the top, or collapsing it into a select. Draw that conversion in the mockup too.
Ask for it like this
Add an LNB (left-hand sub-menu) to the Support section. Mark the current item as active, and below 767px switch it to horizontally scrolling tabs at the top.
"Put the filters in the sidebar" — used for the supporting column beside the main content.
A supporting area attached beside the main content. Menus, filters, recently viewed items and ad widgets live here.
See it Try clicking
Content
Sidebar
Widget
Easy to get wrong
On mobile there is not enough width to keep a sidebar in place. Hide it in a drawer, move it above the content, or drop it entirely — decide which during responsive design, not later.
Ask for it like this
Add a category filter to the left sidebar. Fix its width at 240px and let the main content fill the rest. Below 1023px, hide the sidebar and open it as a drawer from a "Filter" button.
"Set the body to 1200" — this comes up when you need to stop content stretching too wide on large monitors.
An invisible box that caps the width of the content. However large the monitor gets, text stops running to the edges of the screen.
See it Try clicking
Container (e.g. 1200px)
Grey = the full screen width / blue = the maximum width the content sits in. Widen the window and the blue part does not grow.
Easy to get wrong
The 1200px in "set the body to 1200px" is the container width. The usual structure is to run background colour full-bleed while keeping only the content inside the container.
Using it on the job
Text-heavy pages want to be narrower (680–760px). When a line runs too long the eye struggles to find the next one.
Ask for it like this
Cap the content at a 1200px container and centre it. Let the background colour run the full width of the screen. Keep 20px of padding on the left and right.
"Line it up to the grid", "Set it on 12 columns" — this comes up when things look slightly out of alignment.
A rule that divides the screen into even vertical columns so positions and sizes line up. The web usually uses 12, because 12 divides cleanly by 2, 3, 4 and 6.
See it Try clicking
12-column grid
Content laid on top (8 + 4)
Content · 8 columns
Side · 4 columns
Easy to get wrong
A grid is a reason you can explain for why something sits where it does, rather than "it looked right". Mockups built without one end up with inconsistent values in development, which makes responsive work harder.
Ask for it like this
Set this on a 12-column grid — 24px gutters, 20px side margins. Put the main content on 8 columns and the sidebar on 4.
When a developer asks "what is the gutter?". This is the moment you need to hand over exact grid values.
The three parts of a grid. A column is a vertical slot, a gutter is the gap between two columns, and the margin is the outer space at the edges of the screen.
See it Try clicking
Blue block = column · the gap between blocks = gutter · inside the yellow border = margin
Easy to get wrong
Lump all three together as "spacing" and a developer cannot act on it. Name them and give numbers — 24px gutter, 20px margin.
Ask for it like this
Grid values are 12 columns, 24px gutter, 20px side margins. On mobile switch to 4 columns, 16px gutter, 16px margins.
"Add one more section" — on a landing page, the quote and the schedule are counted in these units.
A block of screen divided by meaning. A landing page is usually a run of sections like "hero + features + testimonials + pricing + contact".
See it Try clicking
① Hero
② Features
③ Testimonials
④ Pricing
⑤ Contact
Easy to get wrong
Freelance and agency quotes are often priced by the number of sections. Section count is workload, so it is safer to pin the number down before signing.
Ask for it like this
Build the landing page as five sections — hero / features / testimonials / pricing / contact. Use a consistent 80px of vertical space between sections (48px on mobile).
"Make the top of the main page impactful" — the first discussion on any landing page is always this.
The key visual, core message and CTA at the very top of the page. This is where someone decides in three seconds what the service actually does.
See it Try clicking
Header
One line of core messageOne line of supporting textGet started
Easy to get wrong
Often confused with "main banner", but the hero states the identity of the service while a banner is advertising or promotion. Rotating event banners in the hero slot weakens the identity.
Ask for it like this
Build a hero section — one line of core message, one line of supporting text, one CTA button. Do not rotate several slides in a carousel; keep it to a single fixed view.
"Make the CTA visible without scrolling" — turns up whenever conversion rate is being discussed.
The area visible when the page opens, before any scrolling. The name comes from the top half of a folded newspaper.
See it Try clicking
— The fold (below this you have to scroll) —
Easy to get wrong
"Put the CTA above the fold" means make the button visible without scrolling. The fold sits differently on every device, so the right instruction is "check on our target devices", not "at N pixels".
Ask for it like this
Make sure the CTA button falls above the fold, visible without scrolling. Check it against both an iPhone SE (375×667) and a laptop (1440×800).
"The modal is hiding behind the header" — this comes up the moment that bug report arrives.
The value that decides which element sits on top when things overlap. Higher numbers come forward.
See it Try clicking
z-index: 1
z-index: 10
z-index: 100
Easy to get wrong
Bugs like "the modal is hiding behind the header" are nearly always z-index. Agree the stacking order for header, drawer, modal and toast at the start of the project and this never happens.
Using it on the job
Write the layers down. For example: base 0 / sticky header 100 / drawer 200 / modal 300 / toast 400. Pick numbers at random and you end up with several 9999s.
Ask for it like this
Please tidy up the z-index layers — header 100 / drawer 200 / modal 300 / toast 400. No arbitrary values like 9999; use this scale throughout.