Language used during the software design and development process can be a bit confusing. Many terms are used interchangeably, even when they shouldn’t be. Here, we’ll explain the three often-confused components of the software design process. Before we dig into definitions of wireframe vs. mockup vs. prototype, it’s important to understand the purpose of the design process and how it relates to development. During website and app design, you’ll decide upon the look and feel of your product as well as how it will behave when users interact with it. The actual development doesn’t begin until design is complete. 

It’s important to follow this process because website and app coding, debugging and installation are time consuming and can be expensive. Even a small miscommunication can create issues down the road. To have a clear idea of what a new product will achieve and how it will do so, you’ll start with a wireframe, then create a mockup, and from there a working prototype. 

Wireframes, mockups and prototypes are each used to illustrate concepts, gather feedback and gain consensus so that development teams can create exactly what customers want. Although wireframes, mockups and prototypes may seem similar, they all serve a unique role at distinct times during the product development lifecycle.

Wireframe vs. Mockup vs. Prototype

How do wireframes, mockups, and prototypes compare to each other? Let’s start with the broad strokes.

The first step in design is similar to a sketch. Wireframes use simple elements to convey a concept. Next, the mockup adds logos, colors, and icons to make it more realistic. And finally, the prototype is usable and clickable. 

All three might not be necessary, but it’s helpful to understand the purpose and limitations of each before deciding on how to proceed with your own design process. 

What is a Wireframe?

Wireframes are the foundation upon which all other design elements are built. They are black and white depictions that rely heavily on boxes and text to represent what a final product will look like. They are usually low fidelity and easy to create. Wireframes are often used during brainstorming sessions to quickly and simply convey an idea. 

Because they are basic, design software isn’t usually required. It is rare to have a high-fidelity wireframe. Meaning can be derived with a simple sketch using paper and pencil or a whiteboard.

Initially, wireframes should be used to reach a decision about the core functionality of a concept. The absence of design elements like colors and logos is intentional, as critiques should be focused on whether the proposed layout will provide desired user results.

What is a Mockup?

It is easy to define mockup once you understand what a wireframe is. Mockups simply take wireframes to the next level with the addition of design choices such as color schemes, fonts, icons and navigation elements. It’s very common to generate several mockup types so there are multiple options and ideas to evaluate at once.

More effort and skill are required to create mockups. Therefore, they are usually crafted by a designer, preferably one with a background in UX design, using digital software specific to this task. It is during mockup presentations that detailed visual critique is encouraged. The realistic vision offered by mockups make it easy to determine what works about the design and what doesn’t. 

What is a Prototype?

And then there’s the question, what is the difference between a mockup and a prototype? Once a single design has been chosen, a prototype will be developed to test usability and gather feedback. Prototypes usually look very similar to a mockup, but with the addition of interactive elements. This is also accomplished with a digital design software. At this point, the app or website is not live. As such, prototypes are not fully functional, but elements are interactive enough to convey core concepts.

Once developed, prototypes are invaluable tools for user testing. This offers insight that is then incorporated into a new iteration of the prototype. After testing is complete, the project will be handed off for development.

The difference between the looks and functionality in a wireframe vs. prototype is vast. And each of the steps in the design process bring clarity to what customers really need, allowing for the creation of a useful product that provides a pleasant experience. 

Let Hungry Media Help You Design your Dream Product

Our unique approach to discovery and design means you won’t ever be confused by the creation process or benefits of wireframes vs. mockups vs. prototypes. We’ll collaborate every step of the way until the best version of your website or app has been realized. Contact us today to see how we can help make your dream product a reality. 

Website navigation refers to the menu and options that direct users through pages on your website. There are several types of website navigation, but the most common are header menus at the top of a website, side menus – usually located on the left side of the screen, and links in the footer. While defining “good” website navigation design can be tricky, we all know what it feels like to deal with poor website navigation design. So, let’s start there. 

Think of the times you’ve tried to accomplish something online that seems like it should be simple, but isn’t. Perhaps you go down a four- or five-page rabbit hole assuming you’re on the right track, only to realize that you’re not. And now you can’t figure out how to backtrack and head in a different direction. Or maybe your on a fresh, modern-looking website but you have no clue where to find typical website navigation elements like a shopping cart, contact information, or search button. The way you feel in these moments may be a result of poor website navigation design. 

What Makes Good Navigation

On a website, the best navigation creates a pleasant experience by offering clear, simple, intuitive options that help users find what they’re looking for and accomplish their goals. 

Furthermore, effective navigation structure design improves conversion rate and search engine optimization.  A thoughtful website navigation menu may also have the following benefits: 

• Improve website traffic.
• Increase session length – the length of time users spend on a website.
• Increase the number of pages visited per session

By contrast, ineffective website navigation techniques put you at risk of losing customers, creating a negative brand impression or both. 

Website Navigation Best Practices

When considering website navigation, the following practices can have a big impact.

Think like a user. User interface and user experience should be top of mind during all phases of website design, navigation included. What steps are users likely to take as they move through your website? Where do they expect to find each item? Website navigation elements and design should always start with users’ needs in mind.  

Use intuitive website navigation. What path are users likely to take before making a decision? Think through how they will arrive at a specific location or to a point of taking a specific action. Design navigation to remove as many obstacles along this intuitive path as possible. 

Stick to convention. Out of the box thinking serves us well in many situations. Website menu design is not one of them. Users have come to expect a few “standard” website navigation menu options, such as: 

• Main menu items within the header.
• Menus that condense on small screens. 
• Contact information and social buttons in the footer.

Deviating from standards can make web page navigation frustrating for users who expect something different than what you offer.

Avoid generic terms. Avoid non-specific menu terms such as “products” or “services.” Instead, include something more descriptive like “pet products” or “dog-walking services.” Not only does this help users decide where to head next, but it helps search engines predict what can be found on each web page.

Limit menu items. Users tend to scan websites, by default. So, the fewer options available at any given time, the easier your website navigation will be. A general rule of thumb is no more than seven menu items in your main website navigation bar. 

This doesn’t mean you have to minimize website offerings, only that you should provide a few options at a time. Instead of adding a menu item for each of ten pet products, consider menu items for “Cat Products” and “Dog Products.” From there, include links to each of the five products per pet. 

On this note, avoid using more than two menu levels in the top navigation bar. Doing so leads to more difficult decision making on the part of your user.

Put menu options in the right order. Users tend to remember the first and last items in a list more easily than those in the middle. Effective website navigation design places the most important menu items at the top and bottom of a vertical menu or left and right side of a horizontal menu. 

Use a sticky navigation bar. This simply means the navigation bar will remain at the top of the page, regardless of how far a user scrolls. When you have a large amount of content on a page, sticky navigation bars ensure users have easy access to menus at all times. 

Make hierarchy simple. Make it easy for users to understand your site organization by leveraging constructs they’re already familiar with. Examples include starting broad and narrowing with each step, alphabetized lists, chronological order, etc. The most appropriate construct depends on your business offerings and the amount of content on your site. Regardless of how you choose to organize it, sticking with an intuitive flow will yield the best navigation design for your website.

Guide users with visual cues. Sometimes users find your site without a perfectly clear understanding of what they need to accomplish. Effective landing page navigation includes links, calls to action, suggestions for related content, and anything else that connects users with your brand while guiding them through your site. 

How to Improve Website Navigation Design

If your navigation could use an upgrade, take the following steps. 

1. Find the needs of your user. Who is landing on your site, from where, and for what reason? Are they coming to collect information? Make a purchase? Find recommendations? 
2. Establish your goals. What is the purpose of your website? You need a clear understanding of your website’s primary function before you can construct effective navigation. Only you will know for sure what that is, but the most common include increasing sales, building a distribution list, improving brand awareness, or pointing users to social media sites. 
3. Create a site map. You can begin planning a web navigation site map after you’ve clarified the needs of your user and function of your website. This is a list of all the pages on your site, how they are categorized and how they connect to each other. 
4. Determine flow. Once you know how your site will be laid out, choosing header and side menu options will be relatively simple. Remember, your navigation guides users through your site, so it can be helpful to start with the end in mind and work backward from there. 

Hungry Media Helps Navigate Website Design

Website navigation design is just one of many factors that combine to create an effective online presence. If your head spins at the thought of web design and development, let alone successful design and development, we’re here to help. Our team of qualified professionals works with clients in all industries and in all phases of design to create a website that meets the needs of their business. Contact us today to learn how Hungry Media can help you make the most of your website and take your business to the next level.

contributed by Melissa Lucas, senior staff writer

Shopping, communicating, banking, even adopting a pet or finding a dinner recipe. We live so much of our day to day lives online. Imagine what it would be like if you weren’t able to easily access the digital world. For many people this is a reality, and it’s exactly what is addressed with the most common inclusive design principles.

Designing for accessibility and inclusion focuses on the diversity of experience which may exclude a person from effectively using a digital interface. Both inclusive design and accessibility practices ensure that websites and apps work just as well for those with disabilities or other limiting circumstances as those without. 

Accessible vs. Inclusive – What’s the Difference?

Accessible design focuses on the outcome of a project, specifically meeting accessibility guidelines set forth by governing bodies. It ensures that those with disabilities can access a website. 

While inclusive design is related, it isn’t the same thing. Inclusive design is more of an approach. It’s the process of creating a website which can be used by a wide range of humans, both with and without disabilities. Accessibility is one of the benefits of inclusive design, although focusing solely on accessibility will leave out large sections of the population whose experience would be enhanced by the use of inclusive design principles.

Inclusive Design Principles

What are the principles and practices that support inclusivity? When designing with website inclusion in mind, take the three A’s into consideration. Factors such as access to quality tools, computer literacy, financial means, culture, and language all combine to determine a user’s ability, attitude, and aptitude.

• Ability – physical and cognitive abilities
• Attitude – perception of the digital space, and of your specific website or app
• Aptitude – experience and proficiency with basic internet navigation

What is Inclusive Design?

There are several factors to keep in mind when striving for inclusive design. Tools which help businesses assess their digital inclusivity will often consider the following aspects. Keep in mind that while these aspects have some overlap with accessible design principles, they aren’t always executed with identical intention. 

Content Structure

Inclusive UX design structures content in ways that make it more easily understood by users with visual, language, or cognitive deficits. This can be achieved by: 

• Breaking up long form text into smaller sections, divided by headings and subheadings.
• Maintaining a minimum level of contrast between colors. 
• Using a maximum content width of 80 characters per line. 
• Ensuring lines are at least 1.5x the height of the website font. 
• Aligning text either right or left. Avoid centering or justifying long-form text. 

Content Markup

Regardless of what the website looks like on the screen, you want the backend to reflect an equal level of structure and organization. So, in addition to considering user interface design, consider the back end while creating your website.

For instance, heading tags should be used to indicate the visual structure created by different fonts for headings and subheadings. Using helpful alt text for images has a similar impact. 

Images with Text

Don’t place important content within images. This is because screen readers don’t recognize images as text, so therefore don’t scan them for helpful information. Alt text, as mentioned above, can explain what an image looks like, but it doesn’t describe the importance of that graphic. Furthermore, images with text can be very difficult to see as screen size decreases.

Language

Simple, clear wording goes a long way to maintaining an inclusive website. Not only will it benefit those with cognitive or learning disabilities, but also those for whom English is not a first language.  

Use inclusive design principles to prevent overcomplicating content for your user:

• Skip jargon. If this isn’t possible, clearly and contextually define terms with which the layperson may be unfamiliar.
• Use acronyms sparingly. If you must use an acronym, use the expanded version first and place the acronym in parentheses afterward. You can use the acronym on its own in subsequent sentences. 
• Leverage lists. Bulleted or numbered lists are easier to comprehend than long-form text. Plus, the visual hierarchy created by lists lends itself to the structured content we discussed above. 
• Employ images. Create and use images to clarify complex ideas. 
• Insist on accuracy. Make sure your content uses proper grammar and avoids slang. 
• Remove non-essential words. For instance, “Browse our catalog of products” could be pared down to “Browse products.” This reduces the number of words a user must read and comprehend by more than 50%.

Error Avoidance

First and foremost, you can help users avoid common mistakes by creating clear, concise instructions as well as programming automatic corrections of the most common errors. Beyond that, give the user time to verify input before submission, clearly label errors, and try to display error messages in real time. 

Layout

Nearly all inclusive web design principles insist on simplicity, and the layout of your pages is no different. Imagination and creativity should not be prioritized above usability. Sure, there are plenty of cool elements you could use to set your website or app apart from the rest. Unfortunately, the more dynamic a digital experience, the more challenging it can be for those with disabilities to connect with. 

Include Hungry Media in Your Next Project

Our experienced designers and developers expertly create websites that meet not just the needs of your business, but the needs of your end user. Our unique approach works to determine exactly what those needs are, and our team collaborates with you throughout the design and development process to ensure we’ve covered each of the inclusive design principles above. Contact us today to discuss including Hungry Media in your next digital project.

contributed by Melissa Lucas, senior staff writer

Regardless of hardware, software, language, location, or physical ability, websites should be accessible to everyone. When web design effectively achieves this goal, all people – including those with any number of hearing, movement, sight, or cognitive abilities – are able to use the web page in question. It is for this reason that accessibility is an essential concern for developers and businesses who which to create high quality websites and tools. Read on to learn why accessibility is important and how you can create an accessible website for your business. 

What is Web Accessibility?

Web accessibility means that persons with disabilities can perceive, understand, navigate, interact with, and contribute to the web. As such, when we define accessibility in web design the following concerns are addressed: auditory, cognitive, neurological, physical, speech, visual. 

Why is Accessibility Important?

While some may view accessibility in UX (user experience) as a design “bonus,” ADA compliance in UX design is actually a pretty important component of building a website. 

In many ways, the option to virtually interact can level the playing field for a person with a disability. This is because virtual interaction removes barriers to communication and engagement usually encountered in the physical world. In this sense, creating accessible websites supports inclusion.  

It’s simply good form to accommodate all users when and if possible. Additionally, section 508 of the U.S. Rehabilitation Act requires that information and communication technology ensure the accessibility and useability by individuals with disabilities. So, not only is making your website accessible the right thing to do and a beneficial business practice, but in many cases it is also a legal requirement.

Additional Benefits of Accessibility

There are also some secondary benefits to designing for people with digital accessibility needs. For instance, accessibility has significant overlap with best practices such as mobile first design, multi-modal interaction, and search engine optimization. In fact, studies have shown that accessible sites fare better in organic search results than non-accessible sites.

But the benefits of accessibility don’t stop with SEO. Large text options are great for users with smaller screens. And captions are beneficial for those who can’t turn the volume up on their smart phones. The ancillary benefits really add up and are what bring users back again and again, disability or not. 

What are Website Accessibility Standards? 

There are several components to the Web Content Accessibility Guidelines, which are essentially accessibility standards for web design. The most recent iteration of these accessible website requirements was developed in 2018. Each suggestion falls into one of four categories: 

• Perceivable. Information and user interface components must be presented in a way (or ways) all users can perceive. 
• Operable. User interface and navigation components should be controllable by all users.
• Understandable. Operation of and Information contained within the website must be understandable to all who may access it. 
• Robust. Content must be developed using industry standards that work across different browsers, both now and in the future. 

By adhering to these guidelines companies will ensure that they are not only meeting the accessibility needs of their users, but that they are building an ADA compliant website.

Examples of Accessibility

Understanding the broad strokes of accessibility is great. But exactly what does web accessibility mean, and how does one build a website based on these principles? Here are just a few examples of accessibility in user interface design.

Alt Text

Alternative text for images (or alt text) can be included in an image’s code. Alternative text describes the image for those who are unable to see it – whether they are blind, vision impaired, or simply choose not to load images on their device in an effort to conserve bandwidth. Additionally, describing an image provides information to search engines as they attempt to determine how relevant a page is to a user’s query.

Keyboard Input

An accessible website doesn’t rely on a mouse. All functionality is available using keyboard commands, which is helpful to any person with limited fine motor control. In this case, website visitors are able to input keyboard commands using assistive tools or assistive technology such as speech recognition. 

Audio Transcripts

Just like image descriptions accommodate users who cannot see, audio transcripts, or captions, can assist users who are unable to hear. This makes the information contained in a video or audio recording accessible to any person who is deaf, hard of hearing, or unable to use an audio output on their device.

Color Contrast

The contrast, or lack thereof, between foreground color and background color can have a major impact on the legibility of a website. For the sake of accessibility and a positive user experience all around, it’s important to ensure there is sufficient contrast between these two design elements. 

Translation

A trusted translating software interprets and localizes your website, thus making your content accessible by and engaging to anyone, regardless of the language they speak or the region of the world in which they live. 

Navigation

What may feel intuitive to some has the potential to be overwhelming and challenging to others. Website navigation, for instance, can be frustrating to a person with cognitive or neurological challenges, or perhaps a person who is very new to using the internet. Maintaining consistency goes a long way here. As does using breadcrumbs to provide an additional means for users to understand where they are within a website at any given time.

Hungry Media Builds Accessible Sites

With years of experience building mobile friendly sites and applications, Hungry Media understands why accessibility is important and how to maintain user accessibility requirements while building a beautiful, functional website. Our unique approach will first work to uncover the specific needs of your business and your project, and then our team of designers and developers will collaborate with you to build the accessible website of your dreams. Contact us today for more information. We can’t wait to meet you!

contributed by Melissa Lucas, senior staff writer

Website design and content work together to make a fantastic user experience, and there are two approaches to combining them as a site is developed. The traditional approach places design first. The more modern approach involves content driven design, also known as a content-first strategy.

Design-First Strategy

A design-first approach is pretty much what it sounds like. It is a strategy in which web design, structure, and aesthetics are determined first, and content is created afterward to fit within that design.

Content-First Strategy

Conversely, a content-first strategy involves determining the content needs of a website, creating that web content, and designing around it. In other words, the design is based on the content required for website success.  

Benefits of a Website Content Strategy

It’s natural to be excited about designing a new website. You likely have plenty of ideas about the color palate, which fonts to use, and all of the cool features you want to include. But if the importance of content in web design is placed secondary to the design itself, you’ll find yourself forcing information and functionality into a potentially unnatural, ineffective design. As you can imagine, there are several benefits to using a content-first strategy. 

Memorability

Of course, the design of your website will be memorable to you! You are the one who’s going to put thought and effort into creating it, after all. But as long as basic UX design principles are applied, website design isn’t memorable to your users. What will be memorable, however, is the information within and functionality of your site – i.e., your content and how it is accessed. 

Users don’t come back again and again because a website looks great or has some awesome features. They come back because they find value in doing so. Usually that’s because they can easily find and understand the information they are seeking.

Flexibility in Design

This may seem counter-intuitive, as designing for content does limit options, initially. But putting content first means you can determine the perfect placement and aesthetic for each text box, graphic, image, and video instead having to fit them into pre-determined spaces after the fact. In this sense, establishing a content strategy for a website before deciding on design features allows for greater flexibility overall. 

Effective Content Hierarchy

A content hierarchy prioritizes the information most important to users and makes that information easy to find. So not only is a content-first strategy more efficient from a design standpoint, but it is also more efficient from a customer service standpoint because it allows you to focus on the needs of your users instead of the needs of the website. 

Cost Savings

When you understand the needs of your website before it is created, designing with a content-first strategy reduces the necessity of alterations after it’s built. This results in fewer work hours for your developer, which usually results in a less expensive build. 

Content Design Process

All of this information is lovely, but how the heck do you go about creating a website using a content-first strategy? And what’s more – what content should a website have, to begin with? The good news is it’s probably not as complicated as you think. You don’t actually have to create all of the content prior to designing your site. You just need to know what types of content to include and where it should be located.

Website Structure

Begin with your website’s organizational structure. Establish a hierarchy by creating an outline that indicates which pages to include on your website and where they will be found.

Webpage Structure

Once you have a general site structure you can determine what type of information to include on each page. This applies the same hierarchical principle used above to prioritize what is displayed on each page within your site. After establishing page structure, you’ll have a good idea of the type of content included on each specific page. All of this is important for your designer to know before they go to town. 

For example, maybe you decide on a single page dedicated to each of the services you offer. You’ll then need to determine the type of information contained on each of those pages. Perhaps each page includes 200 words about the problem solved by the service, two video testimonials, a pricing grid, and a call to action – in that order. Sharing this structure with your designer gives them a great starting point as they strive to create the website of your dreams. 

Content 

After each web page’s content design is complete, it’s time to dig into the nitty gritty. Here’s where you actually write those two hundred words, choose the two video testimonials to include, and format your pricing grid. In short, this is where you get creative and flesh out your outline. 

Notes on Content Production for Websites 

Effective content creation is both and art and a science. Don’t be afraid to invest time, money, or both into this step, just as you will for the design and development step of your site. 

As you ponder your content, always keep the user in mind. What do they need to know about your product or service? Is your content easily digestible? Is there an effective call to action? Are you actually providing the information they need? The more you anticipate what works best for your users, the more successful your website will be. 

Hungry Media Puts Content First

Hungry Media understands the significance of creating a well-structured web content design plan, and the role it plays in the success of your website. Our expert team has years of experience creating websites that not only meet the needs of users, but that help take businesses to the next level. Contact us today to learn about content-first strategy, building the website of your dreams, or anything in between.  

contributed by Melissa Lucas, senior staff writer

Do you hear people use web design terms and feel like they are speaking a completely different language? If so, you’re not alone. Honestly, the digital world has come upon us so quickly that many of us simply need some time to catch up. That’s where our Website Terminology Series comes in!

Here, we’ll put some of the most common web design buzzwords into easily understandable terms. That way, when it’s time to talk tech, you won’t be left behind. Be sure to check out the first part of this series – Website Terminology 101: The Basics – which explains the meaning of some tech terms that aren’t necessarily web related, but are helpful to understand as you learn more about other web design vocabulary words. 

Web Design Jargon Explained

Use the following website design words list to help you decipher what, exactly, is meant by some of the most common web design terms and lingo.

What is a Sitemap?

A website map, or sitemap, provides information about the pages, media, and other files contained within a website as well as the relationships between them. Search engines use sitemaps to determine where to look for important information, which then helps them decide whether that information is what users are searching. 

While sitemaps aren’t 100% necessary, they definitely improve a search engine’s ability to quickly crawl and index websites, especially those which are particularly large or complex. 

What is Navigation?

In web design, effective navigation is a must. Basically, navigation is a collection of user interface components that help visitors move through a website in search of specific content and features. Most commonly, web navigation is found in the form of menus, text, links, and buttons.

What Does UX Stand For?

UX stands for user experience. But what is UX in terms of web design? UX design refers to a method of designing in which user experience is a top priority. This includes ensuring websites are functional, easy to navigate, load quickly, are pleasing to the eye, etc. Ultimately, UX describes a users’ perception of your site and their response after interacting with it.

What is Information Architecture?

Information architecture is focused on creating schemes and structures to organize website content in a way that helps users find information and complete tasks with ease. Effective information architecture includes labeling systems, navigation systems, and search systems, all of which are dependent on having a clear understanding of how visitors will naturally want to use your website. 

What Is a Website Wireframe?

A wireframe is a basic framework for website design. Wireframe designs are much like the blueprint of a building, which allow builders to easily visualize the location of important features such as plumbing or electrical elements and are devoid of any interior design elements. In this sense, a wireframe serves as a visual guide for building a website. This black and white outline tells the developer which elements to include, where they are located, and what functionality they must encompass. 

What Are Website Breadcrumbs?

Hansel and Gretel created a trail of breadcrumbs to help find their way back home, right? Website breadcrumbs are intended to help users accomplish the same goal – effectively backtrack without losing their way. Breadcrumbs in web design serve as a visual aid that indicates a user’s location within a site’s hierarchy and provide the option of moving back just a few steps, rather than starting over completely requiring use of the browsers back button. They are most often used when a site contains a large amount of information within a single, structured hierarchy. You often see this within large retail shopping sites where products are grouped into smaller and smaller categories. 

What Is a Webpage Header?

Website headers sit atop each page of a website and serve several purposes. First and foremost, they provide a sense of visual cohesion across all web pages included in a single site. But headers also include several key elements – logos, navigation menus, and page titles for starters. Finally, headers are the place users will look for ancillary features such as a search bar, shopping cart, login link, and notifications. 

What Is a Hamburger Menu?

A hamburger menu is the name given to the menu icon, usually found in the top corner of a webpage, that expands to reveal additional menu items. It is named so because the three horizontal lines resemble a hamburger patty between two buns. Originally developed for use on mobile sites, hamburger menus have been widely adopted for use on all screen sizes because they allow websites to offer the menu and navigation options users expect without cluttering the screen. 

What Does GUI Stand For?

GUI stands for graphical user interface and describes a visual way of interacting with a computer. It’s hard to remember a time when we typed commands which told our computers what to do, but this was the reality just a few decades ago. Graphical user interfaces simplified this task, making computers much easier for the everyday person to use. Instead of typing commands we click on icons, windows, or menus. These visual elements make up the graphical user interface. 

What Is a Style Guide? 

In web design, a style guide is a set of standards that includes instructions such as how and where a logo is used, how to choose the right font for any given text, what colors to include in each page, etc. The purpose of a style guide is to ensure uniformity across all web pages and platforms. 

What Does WYSIWYG Stand For?

What you see is what you get! WYSIWYG is one of the longest web design acronyms out there. A WYSIWYG HTML editor allows website content to be manipulated in a form that resembles its final appearance. For instance – instead of writing a bunch of code to determine the placement and aesthetic of a button on your website, a WYSIWYG editor allows you to actually choose the button you want and move it around your webpage until you find the perfect location. The end result is the same, but these types of editors (such as Squarespace) are much easier for non-developers to use. 

What Is Anchor Text?

Anchor text is the visible, clickable text of a link. While the link might be: www.hungrymedia.com/blog, anchor text can be utilized to make it part of a sentence. Perhaps we’d say: Check out our web development blog for the latest industry tips and tricks. 

Both hyperlinks will take you to the same page, but when you link anchor text, that text effectively describes the page to which you are sending users. When the anchor text and the link itself correlate, it is easier for search engines to determine that the linked page would be relevant to a searcher’s query. In the end, effective use of anchor text can improve SEO rankings.

What Is a Slider?

There’s no doubt that graphics and images are important to a website, but too much of a good thing can be detrimental to web design. A slider allows for the display of multiple images in a way that doesn’t create visual clutter on a webpage. When a slider is in use, you may see three or four images at a time but have the ability to easily scroll through many more. Some sliders may move on their own, while others require input from the user to scroll from one image to the next. 

What Is Mobile First Design?

Two of the most frequently used words in design these days are mobile and first. A mobile first strategy bases the functionality and aesthetic of a website on the needs of mobile users. From there, developers create versions of the same site for laptop or desktop users. 

This is different from traditional web design which assumed users were primarily viewing websites on desktop monitors. Sites would be designed for these users and then “condensed” for viewing on a mobile screen. In today’s market, starting small and adjusting larger is much more efficient (and cost effective) than trying to cram everything visible on a desktop computer into a single smartphone screen.  

Work with Hungry Media

When the time comes to build a website or app, it’s helpful to have an understanding of basic web design terms. But don’t let all of this web design lingo send your head spinning. Hungry Media’s team of project managers and designers works with a wide range of clients – from small companies whose CEOs are still using flip phones and aren’t familiar with any web page design terminology to large corporations whose IT departments can talk tech all day long. Contact us today to learn how we can help you build the website of your dreams. We can’t wait to meet you!

contributed by Melissa Lucas, senior staff writer

Conversion rate optimization isn’t just about design or copy. It is impacted by a variety of internal factors like pricing and your brand position, as well as plenty of external, psychological factors related to the customer, themself. 

The starting point of a conversion is a call to action, or CTA. This means that understanding how to write a call to action is paramount to any marketing campaign. Read on for five important truths to consider when learning how to write a call to action that works for your audience and your website.

What is a Call to Action?

First let’s define call to action. 

What is a CTA? In marketing terms, a call to action is a prompt that tells the user to take a specific action. CTAs are often written as a command and when used digitally, typically take the form of a button or link. 

In order to be effective, CTAs have to be well thought out. The size, shape and color of a call-to-action button, text choice, and placement on the page are just as important as the message itself. For instance, many find that placing an opt-in box below their best call to action phrases is ideal, while other marketers see an improvement in CRO when the call to action words are placed to the right of the opt-in field. 

This simply goes to show that the best CTA is the one that works. There are a variety of ways to approach creating a CTA and marketing it well. As you focus on how to write a call to action that works well for you and your company, it’s important to keep the following 5 truths in mind.

1. Trials Sell 

84% of users will leave your website if you ask them to make a purchase after their first encounter with your brand; Furthermore, among customers’ top concerns while making an online purchase is a lack of understanding surrounding the ways in which a product or service will benefit them, specifically. Offering a free trial removes both of these barriers by providing the same benefits to the user, without requiring that they take on additional risk.

Creating a call to action icon or button highlighting a free trial will serve dual purposes. You’ll capture users who wouldn’t have otherwise pulled the trigger, and you’ll have an email database rife with qualified potential customers – a marketers dream come true. In this sense, good call to action buttons don’t necessarily yield immediate results. Rather, they get the ball rolling towards those results.

Tip: If a free trial isn’t yielding the results you’d hoped, it doesn’t immediately mean that it’s not an effective tool. You may need to tweak your offer (Increase or decrease trial period, perhaps?) or reevaluate the results you are hoping for (Maybe you should be looking for an increase in email marketing effectiveness instead of direct sales following the trial?).

2. Consumers Want to Understand the Benefits

Why, exactly should a user click your CTA button? What’s in it for them? Good call to action buttons are accompanied by copy that explains what’s in it for the user.

Crafting an effective, benefit-oriented CTA begins by truly understanding what customers need. What problems do your potential customers face and how will your product or service help solve them? 

Good CTA copy highlights the benefits of a product or service before placement of the actual CTA button, icon, or link. But it doesn’t end there. If you choose to highlight the benefits you have to offer, ensure the CTA allows users to reap those benefits quickly. Perhaps the way you deliver them is through the free trial mentioned above, but it could just as easily be an e-book, phone consultation, or anything else users will value.

Tip: Use different landing pages with different value propositions depending on where users find you first. Someone who clicks through from a Facebook ad has different needs than someone who finds you on TikTok.  

3. Instant Gratification Is Huge!

The attention span of today’s consumers has dropped by a third over the past two decades. Amazon deliveries arrive within hours. The answer to just about any question is accessible within seconds via Google. We want what we want, and we want it yesterday. So don’t test your customers’ patience with your CTA. Calls to action must provide an immediate reward or you risk losing the potential customer forever. 

The best call to action button text conveys the promise of instant gratification. Subtle differences in the interpretation of your words can have a huge impact. “Download the Guide Now” implies immediate access to the information where “Download the Guide” does not. 

Tip: If you’re able to deliver immediately, make that clear – and then follow through. 

4. Humans are Naturally Curious 

Here is where you’ll really begin to pair your CTA with content marketing. Calls to action that create curiosity about what will happen when a user converts (i.e. clicks that button) can be incredibly effective. Describe your product or service and the benefits it provides. But create a bit of mystery surrounding the how. The more curious a user becomes, the more likely they will be to actually hit that CTA button or icon. 

In fact, it’s been suggested that piquing one’s curiosity creates chemical changes in the brain which allow it to more easily retain both the information sought as well as ancillary information learned along the way. This means that if you can create curiosity about what you have to offer, users are more likely to remember you even if they don’t make a buying decision immediately. 

Tip: When attempting to evoke curiosity, honesty is always best. Don’t lure customers in with power words and action buttons, only to give them something other than what you promised.

5. People Love to Feel Special

Which is why some of the best website CTAs offer special bonuses. And the best part, when you create a CTA that utilizes a bonus offer you can leverage many of the other truths, above. 

• Bonuses might stoke curiosity. What is actually included in that special bonus package??  
• Bonuses can make the benefits clear. I didn’t realize I needed this product/service, but now I totally do. 
• Bonuses may provide instant gratification. Order the product today and receive a free bonus ebook in your inbox right now. 
• A bonus could simply be the free trial. Order X today and we’ll let you try Y for free! 

In short, we all love to feel like we’re getting something a little extra. Which is why many CTA examples that really work will include some sort of bonus offer for converting.

Excellent Call to Action Examples

Converting users is like leading them on a journey through your sales funnel and calls to action are the directional signs along the way. That said, it is necessary to present users with different calls to action at various points throughout the journey. 

For example, while researching a purchase, you may wish to encourage users to signup for your email list so they don’t forget about you when it comes time to place an order. After a user has placed an order, you’ll want to make sure they know how to look up their order status. After they’ve received their order, you may want them to leave a review or refer a friend. 

Call to action marketing is just as much trial and error as it is a true science. That said, we recommend taking a look at a few examples of calls to action which have proven to be successful before putting your own call to action in writing. 

Hungry Media Knows How To Write a Call to Action That Works

Your landing page, contact us page, promotional banners, sales copy, and ad campaigns will generate quality leads when your call-to-action buttons, icons, and links are effective. Hungry Media’s team of designers and developers know just how to craft a call to action that helps you reach your conversion goals. Want to learn more? Contact us today and let us know how we can help. We can’t wait to meet you!

contributed by Melissa Lucas, senior staff writer

Designing your website involves so many considerations and requires more than a few decisions on your part. While the look of your text might seem inconsequential compared to the content of it, keep in mind that minor tweaks to font choices for websites can have a major impact on their overall impression and usability. Just like various colors or layouts can evoke emotion or direct users’ attention, so can the fonts used in web design. Continue reading to learn how to choose a font for your website and what to consider along the way.

Importance of Typography

It has been said that typography exists to honor content. In this sense, choosing the right fonts for website content can be an incredibly powerful design tool. In fact, the right typographic choice will reflect all needs of your project, including those that are technical and functional, as well as aesthetic, in nature.

The number of available fonts to use on the web is seemingly infinite, which is why uncovering the best fonts to use for websites can be a daunting task. But this also means that you can customize your website in almost any way you like, at least as far as your text is concerned.

Font Types

There are three main categories of fonts, called typefaces.

Serif
Serif fonts have been around the longest, and they include a stroke at the beginning and end of the main horizontal and vertical lines. These extra strokes are said to help the eyes move more easily from one character to the next – as if they are guiding the reader.

Sans Serif
Sans Serif fonts weren’t widely used until the 19^th century, and they do not include the extra strokes mentioned above. They are probably the most common fonts on the web, and it is said they came about as the need evolved for clearer headings that could be easily read from a distance.

Script
Script fonts tend to mimic handwriting. Formal script fonts are reminiscent of classical handwriting while casual script fonts include fewer flourishes and tend to reflect a more modern aesthetic.

Fonts Project Feelings
The best web design fonts to use depends on the feelings you want to convey. Serif fonts tend to project an air of tradition, respect, reliability, and comfort. Sans Serif fonts are generally viewed as modern and give the impression of cleanliness, objectivity, and stability. Script fonts are often used when trying to convey elegance, affection, or creativity.

Functionality vs. Design Features 

The stylistic range of a font can be broken down into two components, and the best fonts for websites are chosen in response to the need for each. 

Functionality refers to the available variety of visual options within a single font family. This might include options for italics as well as different weights from thin and light to bold and dark. Functionality can also include the spacing of characters ranging from tightly condensed to widely spaced. 

How to Choose a Font for a Website

Determine Scope

Continuity is important when choosing a font family, as major differences in fonts can be distracting at best and confusing at worst. So, before you randomly start selecting cool fonts for your web design, it’s a good idea to take a step back and look at the scope of your project. How many pages, headings, subsections, menus, or other text items does your website require?

The greater the scope of the project, the greater the need will be for a large font family with a variety of styles, weights, and variants from which to choose. Good fonts to use for websites allow you to differentiate various aspects of your website or app without confusing the user. 

Reflect on Your Brand

We talk about branding a lot when we discuss website needs, and learning how to choose a font is no exception. How do you want your users to feel when they look at your website? What “vibe” do you want to give off? What do you stand for? Once you determine a few of these answers, you’ll have narrowed down your font options significantly, making it much easier to see your remaining options for what they are, compare fonts, and make a decision. 

Create a Hierarchy

When deciding on professional looking fonts for website design, it can be helpful to choose different variations from the same font family for different areas of your site. One font could be an all-caps version, one could be italicized, one could be bold, one thin. And don’t forget that you can play with colors, too! The options are endless, but if you stick with the same general font style you’ll be less likely to create visual conflict within your site, which is one of the most common design mistakes we see.

• Primary Fonts are used for larger text such as headings and logos. Something that’s a little less conventional and higher contrast works as a primary font. 
• Secondary fonts are mainly used for body copy and will be seen most frequently throughout your site.
• Tertiary fonts are used as “accent” fonts and can be seen in places like menus, sidebars, and calls to action.

Assess Readability

Readability is always a consideration and should be a top priority for secondary fonts. Generally speaking, serif fonts are more readable when in hard copy, and sans serif fonts are easier to read in the digital space. Script fonts can run the gamut, depending on their intricacy. 

Confirm Scalability

A mobile-first strategy is a must these days. Which is why another factor to consider when determining good website fonts to use is what the text will look like on different screen sizes. Will your copy look just as intended when it’s viewed on a mobile device? What about on a wide desktop monitor? How about on a large television screen? The variety of screen sizes available is what makes this so important when deciding which font is best for your website. 

Determine the Correct Font Size

The length of your text is a factor to consider when determining the best-looking font size. And the font size you use may determine what style of typeface you go with. Serif fonts are often difficult to read on screens when displayed less than 16(ish) point. 

Think About Other Languages

Also of importance when choosing a font for your website is selecting options that include characters for other languages. This way, if your website is translated, your design will remain consistent. Many font families include multiscript support.

Font Pairing

Once you are comfortable using font variations on your website, you can begin to consider combining different fonts for even more impact. There’s no right or wrong way to do this, and the number of possible combinations is endless. However, if you keep the above web design font tips in mind, you’ll be much more likely to maintain a user friendly design.

How to Preview Fonts for Your Website

Flipping Typical is a great resource for previewing available fonts all in one place. Simply add your text to the preview bar and view it in hundreds of different fonts, side by side. This is a fantastic option to help you narrow down the best fonts for your website design before making a final decision.   

Find the Best Type for Your Site 

Website design is what we do, so don’t let learning how to choose a font or two overwhelm you. We can help with everything from UX and UI design, to creating content, to (you guessed it) picking the right combination of fonts to communicate your brand message, generate conversions, and look great to boot. Contact us today to learn more about our approach and how we can help you upgrade your site or build one from scratch. We can’t wait to hear from you!

contributed by Melissa Lucas, senior staff writer

As technology is advancing, so is our ability to support decent multimedia content online. It used to be that the role of multimedia in a website was minimal. This is because the use of multimedia slowed websites down and caused more problems than it helped solve. But as time goes on, technology makes it much easier to support a variety of multimedia. Today, animation, video, imagery, and audio all support and supplement traditional text. 

Why is Multimedia Important?

Why use multimedia? First and foremost, every website needs multimedia. It helps you meet the expectations of today’s users, But, in general, multimedia design and development is a powerful addition to any website plan. It increases engagement and the chance of users sharing your content, it grabs attention, boosts the amount of time spent on your site, and can have a major impact on your SEO. 

Elements of Multimedia Web Design and Development

So how do you design effective website multimedia features? Take a look below. 

Videos 

Using video is the ultimate in multimedia website development and a great way to share the personality of a speaker or express the identity of a brand. Furthermore, given the same amount of time, videos can cover more content than text. Although bandwidth constraints are becoming less of an issue, videos on websites today should still be relatively short and cover small(ish) viewing areas. 

• Explainer videos give the details about your product and why it’s so great. 
• Tutorial videos show how your product works and provides tips on the best ways to use it. 
• Testimonial videos allow users to connect with the subject of the testimonial in a way that plain text or even text combined with photos cannot. 
• Reviews are similar to testimonials but with a focus on objectively discussing the pros and cons of the products or services in question. 

Images

It stands to reason that if a picture is worth 1,000 words, then images can provide significant clarity to text. But that means, on the flip side, that images have the ability to confuse users, too. So before throwing images up willy-nilly, pay special attention to the ways in which they add or detract from your message. There are several types of images and graphics that can be used: 

• Photos are the most commonly used type of graphic. While they can (and should, at times) be used solely for the purpose of adding some flair to a website, they also serve many additional purposes. They can provide context, help clarify the text, and most importantly can foster a connection with the audience. 
• 2D Graphics are helpful when attempting to grab and hold users’ attention as well as convey meaning. Furthermore, graphics can provide a visual representation of a potentially complex concept within seconds, making it easier for users to scroll through your site without missing important conversion points.
• Infographics are a type of graphic that deserve their own category because they serve a singular purpose. They are a visual representation that creates an easy-to-understand overview of a specific bit of information. They tend to be a combination of text and graphics. 

Audio

Sound provides a channel that is separate from the visual display.

• Voiceovers create complimentary clarity without creating confusion on the screen. 
• Subtle background audio can be beneficial but should be used sparingly and should never draw attention away from the content on which you want users to focus. 
• Non- speech sound effects add an extra dimension of engagement as well as provide feedback to the user – think of the sound you hear when you click a button or make a selection. It’s subtle, but it lets you know that your input has been received.

Animations 

Moving images are very good at attracting our attention. Animation, used in the right way, can increase conversions by drawing users’ attention to the most important information on your website. However, poorly placed animations distract from that important message. Thus, animations should be used very thoughtfully. Examples of animations include changes to icons or text items when a mouse hovers over them, a loading indicator, or a photo carousel. 

Hungry Media Helps Make the Most of Your Multimedia Content

Whether you need some additional guidance about the importance of multimedia in websites, want to integrate animations into your homepage, add video to your testimonial page, or completely rework your webpage and multimedia design, Hungry Media has your back. Our four-step approach helps uncover the needs and scope of your project, and our team of expert designers and developers can take it from there. For more information on how to make the most of your website’s multimedia content, contact us anytime. We can’t wait to meet you!

contributed by Melissa Lucas, senior staff writer

It’s safe to say that every business should have a website nowadays. Whether your website IS your business or is simply a place for potential customers to access your contact information, it serves many purposes. Your website is a first impression and a resource, lets people get to know you, showcases what you have to offer, and of course in many cases is a source of income for your business. 

For these reasons and many more, your website should be treated as reverently as your signage, the interior design of your space, your logo, and all other marketing efforts. So, what should a business website include? Here are 14 website design elements that should never be overlooked. 

Essential Elements of a Good Website

Branding

Okay, so this first one isn’t quite a feature of good web design so much as the foundation upon which effective website design features are based. 

What do you stand for? Why do your customers love you? How do you want your business to make people feel? A solid branding strategy will help you choose the best web design elements for a cohesive, effective, aesthetically pleasing site that communicates everything you want it to, and nothing you don’t. 

Visual Elements

Among the requirements of a good website is consistency. Consistency in website design elements such as style, spacing, fonts, and colors has a huge impact. This doesn’t mean that all parts of a website must look exactly the same, but that similar elements are presented in similar ways. For instance, maybe button text is blue while regular text is grey. Or perhaps spacing between menu items is minimal, while spacing between photos is a bit wider. Consistency conveys meaning, which is helpful. But of equal importance is the fact that inconsistencies can be very distracting and create confusion for the user. 

Navigation Elements

Navigation is one of the most essential components of a website, and ease of navigation can have a huge impact on user experience. The easier it is to use your website, the more likely users will be to return.

Expected Navigation – Navigation elements shouldn’t be confusing. They must always be clearly labeled and easy to recognize; otherwise, users will be lost before they even begin moving around your site.

Search – A search function is a must. This will help those who are searching for something specific find it with ease. Furthermore, it will also help those who know what they want but aren’t quite sure what to call it or where to look for it. 

Common Headings – It can be tempting to get creative when naming different pages or sections of your website. But…don’t. Use expected headings, page titles, and navigation when designing your website, as this makes it much easier for users to know what to expect. Save creativity for the content contained within.

Informational Footer – Footers allow you to connect your users with the nitty gritty without sacrificing your design. A small site map, contact info, relevant links, job postings, etc. can all be placed in the footer, so they are easily accessible without overwhelming users with a ton of visual clutter.

Contact Info – Let’s be honest, a “Contact Us” page isn’t anything particularly impressive, but a lack of one is particularly noticeable. Make it easy for users to access your contact information or risk being perceived as thoughtless at best, and evasive at worst. 

SEO Elements

SEO strategy isn’t a website design “element,” per se. But it remains among the most important website components for effective design. Here a few keys to designing a website with SEO in mind. For more details visit our page on SEO basics.

Keywords – A little bit of research about which keywords to target can go a long way. Once you’ve determined those keywords, focus on naturally working them into your web copy. 

Page Load Speed – This is one of the most important parts of website design. Load times must meet the expectations of users, or you’ll risk losing them. 

Content – Frequently updated, informative content will ensure you remain relevant to both users and search engines. 

Mobile Responsiveness – This is a key attribute of a website. Your site should be easy to use regardless of the device on which it is viewed. It’s easy to ensure mobile users receive have a great experience by choosing a responsive or mobile first theme for your website. 

Internal and External Links – Utilize internal links (to content or pages contained within your website) and external links (to other reputable websites) not just to boost SEO rankings, but to make your website even more helpful to your users. 

Social Media Links or Integration

In today’s market, social media links are considered a basic part of a website. You don’t have to be on every social platform but linking to social media sites on which you are active is a great way to connect with your users.

Call to Action

A call-to-action is always among the elements of a good website. So, what action would you love your users to take? Pick up the phone and call you?  Make a purchase? Provide their email address? There are several call-to-action options. Decide which is right for your business, and make sure your design guides users to take that action. 

Make the Most of These Website Design Elements, and More

From the hottest new web app to mom-and-pop brick and mortars, Hungry Media can help you learn what to look for in a good website. Furthermore, we can help make all parts of your website beautiful, functional reflections of everything your business has to offer. 

Our 4-step approach involves a discovery process to uncover the unique needs of your brand and website elements. Whether you’re looking to improve the on-page SEO of your current site or want to build something new from the ground up, Hungry Media is equal to the task. Contact us today to get started!

contributed by Melissa Lucas, senior staff writer