[{"data":1,"prerenderedAt":79},["Reactive",2],{"ETyn9NOEot":3,"_apollo:default":78},{"pageBy":4},{"glossary":5,"__typename":77},{"item":6,"__typename":76},[7,17,24,28,32,36,40,47,54,61,69],{"description":8,"entry":9,"image":10,"tags":14,"url":15,"__typename":16},"This is a UX technique where you use the initial viewport to display the most crucial information about the site. Usually includes the menu, the main H1 and a Call to Action (CTA) button","Above the Fold",{"srcSet":11,"mediaItemUrl":12,"__typename":13},"https://jalokim.graphics/api/wp-content/uploads/2023/02/fold-glossary-500x281.jpg 500w, https://jalokim.graphics/api/wp-content/uploads/2023/02/fold-glossary-300x169.jpg 300w, https://jalokim.graphics/api/wp-content/uploads/2023/02/fold-glossary-1024x576.jpg 1024w, https://jalokim.graphics/api/wp-content/uploads/2023/02/fold-glossary-768x432.jpg 768w, https://jalokim.graphics/api/wp-content/uploads/2023/02/fold-glossary.jpg 1280w","https://jalokim.graphics/api/wp-content/uploads/2023/02/fold-glossary.jpg","MediaItem","fold",null,"Page_Glossary_item",{"description":18,"entry":19,"image":20,"tags":23,"url":15,"__typename":16},"This is a \u003Ca href=\"?word=component\">\u003Cem>component\u003C/em>\u003C/a> that can toggle (show / hide) a part of its content. Often used in forms that have many steps, or on a FAQ component.","Accordion",{"srcSet":21,"mediaItemUrl":22,"__typename":13},"https://jalokim.graphics/api/wp-content/uploads/2023/02/accordion-glossary-500x281.jpg 500w, https://jalokim.graphics/api/wp-content/uploads/2023/02/accordion-glossary-300x169.jpg 300w, https://jalokim.graphics/api/wp-content/uploads/2023/02/accordion-glossary-1024x576.jpg 1024w, https://jalokim.graphics/api/wp-content/uploads/2023/02/accordion-glossary-768x432.jpg 768w, https://jalokim.graphics/api/wp-content/uploads/2023/02/accordion-glossary.jpg 1280w","https://jalokim.graphics/api/wp-content/uploads/2023/02/accordion-glossary.jpg","toggler, expander, collapse",{"description":25,"entry":26,"image":15,"tags":27,"url":15,"__typename":16},"Banner blindness is a phenomenon in which website visitors ignore or overlook banner-like advertisements or other design elements that are perceived as ads. Users have learned to filter them out as irrelevant noise.","Banner Blindness","ads, adverts, bad ux",{"description":29,"entry":30,"image":15,"tags":31,"url":15,"__typename":16},"A CTA is a button that you want your users to press. A call to action, enticing the user to click the button. Examples include: \"Add to Cart\", \"Write a review\", \"Contact us\"","Call to Action","CTA",{"description":33,"entry":34,"image":15,"tags":35,"url":15,"__typename":16},"A component is a functional part of a website. Components can be really small for example a single button, or a component can be something like a search bar with a button. Making reusuable components and treating them like LEGO bricks, where you can mix and match components to make new components is the best. Reinventing the wheel when something can be built from existing components usually ends in extra tech debt that you don't need","Component","module, element",{"description":37,"entry":38,"image":15,"tags":39,"url":15,"__typename":16},"Similar to User Experience. It's about making a developers life easier. This includes various automations, documentation, ease of use of tooling.\r\nBy prioritising DX, development teams can create a productive and collaborative work environment that fosters innovation and produces high-quality code.","Developer Experience","DX",{"description":41,"entry":42,"image":43,"tags":46,"url":15,"__typename":16},"Menu icons have a couple forms. The most popular being the hamburger menu used in most cases. A Kebab menu is usually a context menu, and a chocolate box menu usually opens a grid of options","Menu icons",{"srcSet":44,"mediaItemUrl":45,"__typename":13},"https://jalokim.graphics/api/wp-content/uploads/2023/02/menus-glossary-500x281.jpg 500w, https://jalokim.graphics/api/wp-content/uploads/2023/02/menus-glossary-300x169.jpg 300w, https://jalokim.graphics/api/wp-content/uploads/2023/02/menus-glossary-1024x576.jpg 1024w, https://jalokim.graphics/api/wp-content/uploads/2023/02/menus-glossary-768x432.jpg 768w, https://jalokim.graphics/api/wp-content/uploads/2023/02/menus-glossary.jpg 1280w","https://jalokim.graphics/api/wp-content/uploads/2023/02/menus-glossary.jpg","hamburger, kebab, meatballs, candy box, chocolate box",{"description":48,"entry":49,"image":50,"tags":53,"url":15,"__typename":16},"A modal is a dialog window that popups up and covers the entire \u003Ca href=\"?word=viewport\">\u003Cem>viewport\u003C/em>\u003C/a>. Its used to fully grab the attention of a user and makes the content under the popup not interact-able. Best used for login modals. User hate promotional popups or adverts in modals, which can lead to \u003Ca href=\"?word=blindness\">\u003Cem>banner blindness\u003C/em>\u003C/a>.","Modal",{"srcSet":51,"mediaItemUrl":52,"__typename":13},"https://jalokim.graphics/api/wp-content/uploads/2023/02/modal-glossary-500x281.jpg 500w, https://jalokim.graphics/api/wp-content/uploads/2023/02/modal-glossary-300x169.jpg 300w, https://jalokim.graphics/api/wp-content/uploads/2023/02/modal-glossary-1024x576.jpg 1024w, https://jalokim.graphics/api/wp-content/uploads/2023/02/modal-glossary-768x432.jpg 768w, https://jalokim.graphics/api/wp-content/uploads/2023/02/modal-glossary.jpg 1280w","https://jalokim.graphics/api/wp-content/uploads/2023/02/modal-glossary.jpg","dialog window, popup, popover, overlay",{"description":55,"entry":56,"image":57,"tags":60,"url":15,"__typename":16},"A tooltip shows additional information when a user hovers over a trigger. Usually a trigger is an info icon or text. This component hovers over an element.","Tooltip",{"srcSet":58,"mediaItemUrl":59,"__typename":13},"https://jalokim.graphics/api/wp-content/uploads/2023/02/tooltip-glossary-1-500x281.jpg 500w, https://jalokim.graphics/api/wp-content/uploads/2023/02/tooltip-glossary-1-300x169.jpg 300w, https://jalokim.graphics/api/wp-content/uploads/2023/02/tooltip-glossary-1-1024x576.jpg 1024w, https://jalokim.graphics/api/wp-content/uploads/2023/02/tooltip-glossary-1-768x432.jpg 768w, https://jalokim.graphics/api/wp-content/uploads/2023/02/tooltip-glossary-1.jpg 1280w","https://jalokim.graphics/api/wp-content/uploads/2023/02/tooltip-glossary-1.jpg","bubble, info, explainer, popup",{"description":62,"entry":63,"image":64,"tags":67,"url":68,"__typename":16},"Vertical (and horizontal) Rhythm is about maintaining the same multiples of 4px in all spacing, margins, sizes.","Vertical Rhythm",{"srcSet":65,"mediaItemUrl":66,"__typename":13},"https://jalokim.graphics/api/wp-content/uploads/2023/02/rhythm-glossary-500x281.jpg 500w, https://jalokim.graphics/api/wp-content/uploads/2023/02/rhythm-glossary-300x169.jpg 300w, https://jalokim.graphics/api/wp-content/uploads/2023/02/rhythm-glossary-1024x576.jpg 1024w, https://jalokim.graphics/api/wp-content/uploads/2023/02/rhythm-glossary-768x432.jpg 768w, https://jalokim.graphics/api/wp-content/uploads/2023/02/rhythm-glossary.jpg 1280w","https://jalokim.graphics/api/wp-content/uploads/2023/02/rhythm-glossary.jpg","grid, vertical, spacing","/articles/vertical-rhythm-keep-spacing-unified",{"description":70,"entry":71,"image":72,"tags":75,"url":15,"__typename":16},"This is the visible window that the user sees before scrolling. This is the entirety of the real estate that you can use for your design. It's recommended to place some key information \u003Ca href=\"?word=fold\">\u003Cem>above the fold\u003C/em>\u003C/a>","Viewport",{"srcSet":73,"mediaItemUrl":74,"__typename":13},"https://jalokim.graphics/api/wp-content/uploads/2023/02/viewport-glossary-500x281.jpg 500w, https://jalokim.graphics/api/wp-content/uploads/2023/02/viewport-glossary-300x169.jpg 300w, https://jalokim.graphics/api/wp-content/uploads/2023/02/viewport-glossary-1024x576.jpg 1024w, https://jalokim.graphics/api/wp-content/uploads/2023/02/viewport-glossary-768x432.jpg 768w, https://jalokim.graphics/api/wp-content/uploads/2023/02/viewport-glossary.jpg 1280w","https://jalokim.graphics/api/wp-content/uploads/2023/02/viewport-glossary.jpg","window, viewarea","Page_Glossary","Page",{},1713287128996]