How to Make Your Web Redesign Successful: Decode Web Design Terms




  • — April 29, 2019

    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.

    How to Make Your Web Redesign Successful: Decode Web Design Terms

    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.

    How to Make Your Web Redesign Successful: Decode Web Design Terms

    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.

    How to Make Your Web Redesign Successful: Decode Web Design Terms

    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).

    How to Make Your Web Redesign Successful: Decode Web Design Terms

    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.

    How to Make Your Web Redesign Successful: Decode Web Design Terms

    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).

    Digital & Social Articles on Business 2 Community

    (3)

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.