The idea of embarking on a website redesign can be intimidating. It’s best to get familiar with common web design terms to prepare yourself for a successful redesign process and ongoing website maintenance.
Decoding Web Design Terms
Accessibility
The ability for websites to be usable and readable to all types of visitors, including those with disabilities, so they can use the information. This includes everything from responsiveness to adding image alt tags to making sure color contrast doesn’t impair readability.
image: https://cdn.business2community.com/wp-content/uploads/2019/04/YL45ldy_2xMUocgv_UcjwmjWDZxCb959wHPzgCRs6vGqh6W5PTy0RkK_Ga0KDG3IWjAuPv0eovYazGzgoopO-V_M1efeaFTfBea7Fr01_rywTYi0fQ1n5KJijb220TvRk0J_En1A.jpg
Breakpoints
Relating to responsive design, breakpoints are points where a website’s layout will adjust based on the size of the user’s screen in order to best display the content. Each type of device has a basic breakpoint width. Mobile devices showcase the layout between 320 pixels and 480 pixels tablets showcase layouts between 768 pixels and 1024 pixels, and desktops showcase 1024 pixels and above.
Bleed
When an image width stretches to the edge of a webpage and is not cropped. Many hero images bleed edge to edge (more about hero images in a bit).
CSS
Cascading Style Sheets, which control the appearance of a webpage. It is code that applies color, images, and fonts to the structure and produces the visual design you see.
Design Mockups
Usually presented as flat files and not interactive, a design mockup is a preview that showcases how the design will look in the real world (but before the developers jump into the code). This step always comes after the completion of the sitemap and wireframe. Branding, typography, images, and graphics are applied along with visual hierarchy, whitespace, composition, and balance.
image: https://cdn.business2community.com/wp-content/uploads/2019/04/M6f0mQXYsq3e40VCHkx0leVtdIIqGmDMUMqRRyRzKfpoiy-rD6jwwXCLFWUo_b1lpjJt4ZIlfx8sC-b7LFMoDyBV6dlhDcn5y5dfWqKQhZlQYc2Dhu01R6rp7UAaNkVHUUdfSNhg.jpg
Favicon
A small icon showcased in a tab or URL.
GIF
Graphics Interchange Format. It’s a smaller file size than a jpg and best used to showcase graphics and animation because of its compression. Gifs are often used for animated banner ads.
Hero Image/Header
The main banner directly below the navigation on a webpage. It usually includes the value proposition and the main CTA.
HTML
Hypertext Markup Language. It’s the code that tells the web browser how to structure a webpage’s layout and content.
Javascript
A scripting language that creates and controls dynamic content on a webpage.
JPG
The most common file format used for images on the web.
image: https://cdn.business2community.com/wp-content/uploads/2019/04/JLmko2EIkRnfixcCYX-fq5c6GExp_1UrvORkuxQ0c-ILc4De2oGP3yWSQSJhXv1GL6o7O3jBmM9b1RWf60ZNDbhIKX1EywVlqYEbfFtZIh_CuYAO_0eQDIMej_vzuwnp1AoNj6o8.jpg
Lorem Ipsum
This is garbled Latin placeholder text that is applied to a wireframe and/or design before the copy is written. This is used to demonstrate how the design will look once the copy is placed.
Pixels
These are the smallest unit of measurement used to showcase any type of element on your computer screen. Thousands of pixels together make up an entire image. It’s also the unit of measurement for the width of a website.
PNG
Portable Network Graphics. This file format allows an image of a graphic to have a transparent background and is for static webpages only (not used for animations like GIFs).
image: https://cdn.business2community.com/wp-content/uploads/2019/04/jdCJJfLWUO772bNrBmw_3Uv8estah9wRkWwiZcr1E5xNbXppuCe4nNDSR3cQEsRcVZomsWvsJwaE5z82DodF1Ck3sGus7WNC_IHHxmq3YSxpCuRZVIIp7xEfXwpyasb9NbcnPWCz.jpg
Sitemap
A planning exercise that organizes webpages and web content on a flow chart or list. It communicates the site’s structure and is critical before starting a complete website project.
SVG
Scalable Vector Graphics. It is a file format that is scalable, responsive, and can be used in interactivity without distorting the pixels. It’s best used for icons, logos, and other simple graphics.
Template
A set of pre-designed webpages that are reusable. You can quickly add content and images because the layout is already created.
image: https://cdn.business2community.com/wp-content/uploads/2019/04/oTT623J6W_n14-gPTqkRwBaXbSFdRqPWGGLX6wnkB8pSiXO_rPXn90VABuCuUexX__lrO3CT_xlwgi9MsF5UtdH_8VK3h_BYqvT6SAee5NtnBwSmEmnyKY6D7rh9Qr_mBP-1d2yk.jpg
Typography
The art of arranging type, which can help set the mood and tone of the design style. It also ensures that content is legible. Good typography adds emphasis to the design and grabs a reader’s attention.
Visual Hierarchy
The visual prioritizing of information on a page from most important to least, using knowledge of how people scan information. This includes applying typography, color, contrast, size, and white space to create order.
Website Staging
A staging site is a copy of your website before it is pushed live. This website is not public facing and is used for testing purposes to make sure everything is implemented correctly and working well before it goes live. This is also a chance to test the functionality and make sure the design works correctly in different browsers.
White Space
Also referred to as negative space, white space is the part of a page that does not include any design elements or content. This adds balance to the page composition and provides room for your eyes to rest (avoid busy layouts which can be distracting and push visitors away).
[“source=business2community”]
