A well-designed, strategic website is one of the most important pieces of a solid digital marketing strategy. This means that if you’re in marketing, especially if you’re on a small team, chances are at some point you’ll participate in a web design project to some extent, whether you’re creating a new site from the ground up, embarking on a full redesign, or implementing smaller, incremental changes. 

Most likely, you’ll partner with an outside web design team to work with you throughout the process. (That’s us!) When you work with an agency like Speak, we’ll set you up with a dedicated Brand Strategist and a team of experts behind them to guide you through the process from conception to design to development and launch. When we jump into a new web design project, our number one priority is to set you up for success at every step of the way – and that means making sure you’re well-informed and don’t feel like we’re speaking a completely different language. 

We’ve compiled a list of some of the web design and development terms we use most often, so you can navigate the web design process with confidence. Think of this as your pocket guide to web design for marketers… and an inside look at what we do all day. 

Read on for the guide!

Speak’s Web Design Pocket Guide

Discovery

Before we dive headfirst into building your organization a website we think you’ll love, we’ll set up a discovery call with your team to better understand what you really want to see on your site. This is when we’ll chat must-haves, absolutely-nots, this-or-that’s, and get an overall feel for what you need from your website. 

Roadmap to Success

We want to make sure that your team is fully on board with the vision we have for your design project, and that means understanding the strategic decisions that go into a design. We’ll present a roadmap to success to help you visualize our overall strategic direction and integrated plan. We’ll define specific plans and purposes of elements and features and highlight how your new site will incorporate the needs of your target audiences. Simply put, we’ll walk you through the path to success. 

Wireframe

A wireframe is a low-fidelity representation of a web page or mobile app's layout and user interface. It typically includes the basic structure of the layout, such as the placement of elements like text, images, buttons, and navigation, but does not include color, typography, or other design details. The purpose of a wireframe is to provide a visual representation of the overall structure and organization of a web page or app, and to guide the design and development process, which come after wireframes are reviewed and approved. 

Sitemap

Site mapping is the process of creating a visual representation of a website’s structure and organization. Typically sitemaps are presented in the form of a diagram or flowchart. 

Slickplan

You may also hear a sitemap referred to as slickplan. Slickplan is a website planning and site mapping tool that allows us to create visual diagrams of a website’s structure and navigation. With the drag-and-drop feature of Slickplan, sitemaps can be created and edited easily, which makes for a more collaborative process when we’re working with clients to ensure every page is in the most strategic and thoughtful place on the site. 

Heatmap

Web design teams will often retrieve a heatmap of the current version of a website before they begin a redesign process. If you’re imagining a weather heatmap, it’s quite similar! A heatmap shows website strategists exactly where people are interacting most with a website – which pages they’re going to, and which they’re avoiding altogether. That helps us understand what content people are engaging with on your site, and will help us create a more informed strategy to make sure your new website is built to drive clicks and conversions. 

Flat Mockup/XD Mockup

Firstly, a mockup is a visual representation of a design concept, typically used to showcase how a finished product will look and function. A flat mockup is a type of mockup that uses simple, two-dimensional illustrations to represent the design of a product. It is called ‘flat’ because it lacks the dimensionality and realism of a full 3D model. When we present our flat mockups, know that they are solely meant to show you design concepts – you won’t be able to see all the magic that gets dev’d in later, like button hover effects, video and motion graphics that make pages pop. 

You may also hear us refer to flat mockups as XD mockups. Adobe XD is a design software that allows our designers to easily present mockups to show design and layout of web or mobile applications in a visually appealing way. 

Banner Images 

Banner images are large, eye-catching images that are often used to prominently display a message, product, or feature on a website. They are also known as "hero images" or "header images". Banner images can be static or dynamic, and can be used to promote a specific product, service, or event, or to simply provide a visual backdrop for the website. We want to ensure that the first thing people see when your page loads is compelling and engaging, and not all imagery will work as a banner image. We’ll advise your team in selecting the best banner image or video for your website. 

Content Management System (CMS)

A website is only as great as the content management system (CMS) it is built on! A CMS is the software application that allows users to create, manage, and publish digital content, typically for websites. It typically includes tools for editing, formatting, and publishing content, as well as tools for managing users, permissions, and workflows. It also allows multiple users to collaborate on content creation and editing, and it can be used to manage and track changes to the content over time. At Speak, we build on Sitewrench, our proprietary CMS platform (we’d love to tell you about what makes it so great!) and WordPress. When we begin a web design project, we’ll discuss your needs with you to make sure we recommend the best CMS to fit your goals. 

WYSIWYG 

WYSIWYG (pronounced wiz-ee-wig) stands for “what you see is what you get”. And for good reason! It’s a type of editing interface that allows users to see and edit content in the same format that it will appear when displayed on a website/web page. That means no code needed, and you have far more control over the content on your site. 

Revisions

Speak’s design and development process allows room for our clients to provide feedback and for us to make revisions at every stage. We’ll clearly communicate with your team about the revision timeline so we can make sure any changes you need to see are implemented in a timely manner and don’t delay your website’s launch date!

Homepage

A homepage is the main page of a website that is more often than not the first page a user sees when they visit a site. A homepage’s design should captivate users from the moment it loads and should ultimately effectively drive people to other pages within the site through engaging content and strong navigation. 

Above the Fold / Below the Fold

This is pretty much exactly what it sounds like – content that is “above the fold” on a website is anything that’s visible when the page loads, before the user scrolls. And content that is “below the fold” is, well, everything else! This concept goes back to the beginning of newspaper printing, when the newspaper industry realized that in order to drive more sales, they needed to present eye-catching, attention-grabbing headlines and images on the top half of the page – the first thing people saw when the paper was folded and laying flat. The sentiment remains the same with digital content. A website should grab the attention of users right when it loads and convince them to scroll, and we do that by ensuring the most eye-catching content is displayed prominently above the fold. 

Framework 

This is a set of pre-written code or libraries that can be used to build software applications. It presents a structure for organizing code and can be used to facilitate the development process by providing common functionality that developers can use in their own code. 

Funnel

Your marketing/sales funnel plays an important role in building a conversion-driven website. To truly function as a top-performing member of your sales team (which it should!), your website should aim to capture users at every point in the funnel in order to drive better sales, stronger customer loyalty and more brand awareness. As we create your site, we’ll analyze your customer journey to map routes to conversion and beyond.

Mobile-First Design

Mobile first web design is a design philosophy and approach that prioritizes the needs of users on mobile devices when creating website layouts and interfaces. The idea is to design for the smallest screen size first, and then progressively enhance the design for larger screens. Wanna know why mobile-first design is vital? Check out our blog on why it matters. 

Responsive Web Design

More and more people are accessing websites (often for the first time) on a mobile device. As amazing as it is to have a stunning website full of video and movement, the reality is that these features don’t work well on a mobile device. People interacting with your site on a smaller screen need less frills, more usability. That’s where responsive design comes in. The design and development of your website should respond to the user’s behavior and environment based on screen size, platform and orientation. This ensures that the website looks and functions seamlessly on any device, big or small.

Visual Hierarchy

People don’t consume each design element on your page in a top-down way, so the placement of content on a well-designed website is actually quite strategic. When we talk about visual hierarchy, then, we want to focus on organizing design elements on a webpage so that users’ eyes are guided to consume each element in the order of intended importance. Visual hierarchy can be created using: Color and contrast, Scale, Grouping (proximity and common regions)

Key Content

Key content refers to the most important or valuable information on a website – the stuff that’s critical for the user to understand or engage with! Key content can be pieces like the main headline, key message, call-to-action, and any other information that is essential for the user to know in order to find what they need on a website. Key content should be placed prominently on the page, often above the fold, so that it is easily accessible to the user.In the context of web design. 

Got a website project in mind? 

We’d love to partner with you this year! We have a dedicated team of designers, developers and strategists to help you create your perfect website, see more conversions, and reach your marketing goals this year. What are you waiting for?

Let's Chat.