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. 

To understand the difference between static and dynamic websites, it is best to begin at the beginning – with how websites are delivered to your web browser. 

When you visit a website, your web browser (Chrome, Firefox, Safari, etc.) sends a request to the server that stores all of the information for the site. The server, in response, sends the information – in code – back to the web browser. Then the web browser uses all of the information contained within the code to display the website on your computer or smart phone screen as intended by the developer.

What is a Static Website?

Sometimes called a flat or stationary site, a static website is displayed exactly as it is stored in a server. It relies on fixed content, which is ready and waiting on the server for delivery to your web browser upon request. Static web pages return the exact same information for any user. No recent search history, no “Welcome, John Doe!” in the top right corner of the screen, no shopping carts, etc.

What is a Dynamic Website?

Also known as a database driven site, content for a dynamic website is stored on a database to which the server refers before returning the webpage to the user. In this case, the browser tells the server what data is needed, the server finds that data in a database, loads it into a template, and THEN sends the information back to the browser.

In other words, dynamic sites generate web pages in real time based on the data input by the user. This means that different content can be generated at different times of day, based on the browser being used, where the user is located, information contained in their user profile, and so on. 

Additionally, changes to the information contained within the database – prices, inventory, etc. – change the information served to users, in real time.

The Difference Between Static and Dynamic Websites

The difference between a static website and a dynamic website can be easier to grasp if you understand the pros and cons of working with each. 

Benefits

Static Websites

• Easy to create and build. Static websites can be created with HTML code and nothing else. 
• Less expensive. Static sites are less expensive to build because they require less work. They are less expensive to host because they take up less space on a server. 
• Faster load times. Because they are ready made and literally waiting in the server to be sent to a browser, static sites load much faster than dynamic sites. 
• SEO is simpler. Since the pages already exist, search engines can crawl static web pages very effectively. This makes accomplishing SEO basics a little bit easier.

Dynamic Websites

• Easy to personalize for different users. Dynamic websites allow users to login and see information relevant to them and their accounts. 
• Updating and scaling are easier. Frequent updates and website growth are much easier on dynamic sites since the code required to make changes is already present. It simply needs to be modified instead of created from scratch. 
• Simpler to meet the needs of the end user. Websites which return information specific to each user make it easier to meet their needs and expectations. 

Drawbacks

Static Websites

• Harder to change. For the reason that dynamic websites are easier to update, static websites require more manual work to achieve similar changes.
• Difficult to grow. Similarly, a static website can be more time consuming to scale since every change requires manual work, and often a total rewriting of the code involved. 
• Maintaining more than a few static pages can be impractical. If there are more than a few pages involved, maintaining them over time can be quite a challenge. 
• Updates require development expertise. Even simple changes cannot be easily managed by the business. Instead, they must be completed by a web developer who understands the coding languages in use. 

Dynamic Websites

• Much more difficult to build. What makes a website dynamic also means more work at the outset because additional coding is required for server-side processing. Often databases must be built from scratch, too. 
• Expensive. This complexity makes dynamic websites more expensive to build and host.

Static vs. Dynamic Websites – Which Should You Choose?

Every business needs a website, and choosing whether to build a static website vs. dynamic website is a relatively easy decision these days. Most of today’s websites are 100% dynamic, contain a combination of static and dynamic pages, or include at least a few dynamic elements. This means that nearly every website requires some amount of database-driven processing. Even if you don’t have the ability to build a fully dynamic site right away, opting for a site with some dynamic options will make growing and scaling your site much simpler in the future. 

Dynamic Websites by Hungry Media

Hungry Media has years of experience building dynamic, database driven sites which help companies take their businesses to the next level. Whether you sell luxury vacations, are a starting a non-profit, or anything in between, we’ve got you! Our unique approach uncovers your needs not just for today, but for the long term. This allows us to build a website that grows with you, over time. Contact us today to learn more about how we can help you create the website of your dreams. 

contributed by Melissa Lucas, senior staff writer

If you thought standard web design terms sound foreign, just wait until you hear some of the most common web developer terms! But don’t worry. The basic terminology of web development probably sounds like gibberish to most people.

Here, in our web development glossary we put some of the most common web development words into easily comprehendible terms. Be sure to check out the other posts in our Web Terminology 101 series: The Basics and Web Design Terms. These will help you glean an understanding of tech phrases which aren’t necessarily development-related but are certainly helpful to understand.  

Accessibility

This web programming term relates to making a website accessible for people with disabilities. At the very least, all websites should follow the website guidelines outlined by the Americans with Disabilities Act. As a bonus, complying with these guidelines can make it easier for any user to navigate your website, which leads to an improved user experience and a boost in search engine optimization. 

Content Management System (CMS)

A CMS is a software system used to organize, update, and maintain all that is contained within a website. This includes everything from menu items to images to blog posts. Content management systems simplify the publication process without requiring you to become a web developer.

Domain Name Server (DNS)

DNS servers connect a website’s URL to its IP address. And yes, we’ve just saddled you with more jargon-y web development terms. Here’s an analogy to help explain. 

Think about the internet like a library. Each individual public website is represented by an individual book on the library shelves. Similar to the way in which a Dewey Decimal Classification indicates the exact location of a specific book on those shelves, an IP address tells us exactly where a website can be found within the world wide web.

In this analogy, the DNS is akin to the library catalog. It is a directory which connects the title of a book (domain name or URL) to that Dewey Decimal code (IP address). When you type in a web address such as www.hungrymedia.com, your web browser connects to a DNS, which looks up the IP address associated with our domain name and communicates it back to the browser. The browser, now that it knows where to look, finds our website and displays its contents on your screen.  

Hypertext Markup Language (HTML)

This is one of the most common coding acronyms around. Hypertext markup language is the type of code used to construct web pages and display content such as text, images, video, and links. Usually, HTML is used in conjunction with additional languages that allow the developer to add functionality to the website. 

Hyper Text Transfer Protocol Secure (HTTPS)

This programming acronym indicates that a website is using the secure version of the protocol for sending data from a web browser to a website, and back again. It encrypts all of the communication between the two, meaning the information transmitted is less susceptible to being hacked than if the secure protocol were not in use. 

Plugin

Plugins are like apps for a website. In web developer terms, they are little pieces of software designed to perform a specific task or add a specific feature to a site. It’s safe to say that nearly any function you can dream of is available as a plugin. Free and paid options are available for everything from SEO, to photo carousel creation, to social media sharing buttons. 

Secure Sockets Layer (SSL) Certificate

This is one of those coding abbreviations that has been around for as long as the internet. SSL is a standard security protocol which is required to establish encrypted communications between a website and a web browser. When a site has an SSL certificate, it can then include the “S” after HTTP in the web address (mentioned above). 

Coding

Coding is the process of translating the design of a website into specific website building terminology like HTML or CSS. You can view the source code for any website by right clicking anywhere on the page and selecting “view source.” 

Accelerated Mobile Pages (AMP)

AMP is a coding abbreviation that stands for accelerated mobile pages. This is a web standard, created by Google, with the intention of making mobile sites quicker to respond. By using a more rudimentary version of HTML, AMP enables pages with less data to load faster on mobile devises such as smart phones or tablets. Some regular web page code can’t be used for AMP, so there are limitations to the process. On the whole, though, this initiative has been widely beneficial for those on both the development and user ends of a mobile first strategy. 

Application Programming Interface (API)

An API is a software intermediary responsible for connecting one website to the database of another. For instance, an API is responsible for providing airline flight availability through a booking sight like Expedia. Expedia doesn’t store the availability and pricing for every airline, rather it uses an API to connect to each airline and return accurate information to customers when they request it. 

Bug

A bug is an error in website code which prevents a site from running the way it is intended. It’s impossible to test every single action available in a website or app, so sometimes bugs aren’t noticed during initial testing. Sometimes they are very obscure and only occur when a unique action is taken by a user. This is why it is very important that the steps taken prior to the error be recounted accurately. Otherwise, debugging will involve reviewing potentially thousands of lines of code until the error is found. 

Open Source

Open source is a web developer term that usually refers to software which is distributed with permission for developers to change its source code. This allows for easy manipulation of the way a website looks or functions, which in turn allows businesses to meet the needs of the end user without restrictions. WordPress is the most well-known open-source software on the market. 

Embed

Embedding means placing content – usually graphics or videos – directly on a web page rather than just linking to it. In this situation, users do not have to leave a page to consume additional content. As you can imagine, there are several benefits to embedding graphics or videos, namely increasing the time users spend on a page, building engagement, and hopefully improving return rates over time. 

Websites Made Easy with Hungry Media

When you’re building a website or app it’s helpful to have an understanding of basic web developer terms. But don’t let all of the jargon scare you away. Hungry Media’s project managers and developers work with businesses of all sizes and tech comfort levels. Whether you’re a startup in need of a brand-new app or an established business looking to revamp an old website, we’ve got you covered. Contact us today to learn how we can help take your app or website to the next level. We can’t wait to meet you!

contributed by Melissa Lucas, senior staff writer

Sometimes it seems as though you need a PhD in website terminology to complete the most basic of online tasks, and as technology changes so does the web jargon we need to understand. Additionally, website terms usually refer to items contained in a virtual space as opposed to a physical structure which can be visualized and touched. Grasping the meaning of web terms and definitions can be difficult at times.  

This is why we’ve created our Website Terminology 101 Series. Over the coming weeks we’ll go over all of the web acronyms and web lingo you’ll need in order to talk websites. We’ll cover design, development, and digital marketing terms in later posts. Today, we’re simply touching on the basics. 

Here are the answers to common questions about basic website terminology.

Website Jargon Explained

What are the Types of Web Browsers?

Web browser terminology can be more intimidating than is necessary. A browser is simply the software designed to view websites. Today the most common browsers are Chrome, Firefox, Safari, and Internet Explorer. 

What is an Algorithm?

In computer speak, an algorithm is a set of instructions that tells a machine what to do with certain inputs. Think of it like a recipe. Your inputs are flour, sugar, milk, and eggs. Whether you wind up with pancakes, cookies, or pasta depends on the recipe, as that’s where the measurements and instructions are contained. 

An algorithm tells Facebook what type of content to put in your feed. It generates a notification when it’s time to update your computer software. It zeroes out shipping costs when you reach the minimum order amount to do so. Almost every change you see within your web browser is due to an algorithm.

What is a Server, in Computer Terms?

A server is essentially a giant computer that contains all of the information needed for your website to function. This includes graphics and text as well as the structure of your site and the algorithms that tell it what to do and when to do it. 

In a very basic way you might compare a server to a bookcase holding a set of encyclopedias, where each website and all of the information needed to make it work is contained within one volume on one of the shelves. A different volume (i.e. website) can be stored on the same shelf but contain completely unrelated set information.

What is Web Hosting?

Web hosting terminology isn’t as complicated as it might seem. In our encyclopedia analogy, the host would be the owner of the bookcase, and you would pay them to keep your book on their shelf so others know where to find it. Translating to tech terms – you’re paying the owner of the server to host your website. 

What is Internet Bandwidth?

Bandwidth refers to the rate at which data can be transferred and is measured in bits or kilobits per second. Bandwidth can be compared to the capacity of a highway. The wider the road and the higher the speed limit, the faster vehicles can travel from Point A to Point B. Similarly, increasing bandwidth increases the speed at which data can travel online. 

What is Page Load Speed?

You page load speed is the time it takes (in seconds) to download and display an entire webpage in a browser. This term is also known as load time, and is a performance metric impacted by several factors including the speed of the server, bandwidth, design of the page, and complexity of the elements on the page.

What is a Website Cache?

Actually, the question should be “what is a cache?” (As opposed to a website cache.) A cache refers to the temporary storage space in a web browser. When you visit a website, your browser stores files needed to run that site in the cache. With the files already handy, there is less data to retrieve from the server the next time you visit the same page. 

What are Cookies?

On your computer, a cookie is a small text file that contains information about the websites you visit. This could be anything from login details, to the items in your online shopping cart, or simply the type of sites you tend to visit. Cookies help streamline the online experience. 

For example, cookies play a role in saving passwords so you stay logged into your accounts when you exit a browser. However, the use of cookies has privacy implications, which is why websites now have to ask permission to store them in users’ web browsers.

How Does a Computer Database Work?

A database is simply a storage and organization hub for data. The meaning of “database” in computer terms relates to the storage of all information needed for a website to function properly. It’s the long list of data that a computer will scan through when asked to provide a specific detail – such as how much those hot new shoes cost or how many calories are in the key lime pie at your favorite restaurant. 

What Does Pixel Mean?

Short for picture element, a pixel is the smallest unit in a graphic display or digital image. This isn’t website terminology, per se, but does play a role in the rendering of photos and videos on a website. Usually pixels are so small we can’t see them unless we look very closely. Images are referred to as pixilated when pixels are so large they’re easy to distinguish on screen. 

What is Display Resolution?

Display, or screen, resolution refers to the number of pixels in the vertical and horizontal element of a screen. The higher the resolution, the more pixels in a given area, the clearer the picture. 

What does E-Commerce Mean?

E-commerce is short for electronic commerce. The industry definition of e-commerce relates to the buying and selling of goods and services online. Any website which exists for the purpose of selling goods or services is an e-commerce site.  

What is a Domain Name Used For?

Think about it like this. You purchase a house, and now you own this empty structure. You can tell your friends the street address of your new house right now, but you aren’t having them over to visit until you actually move in. Purchasing a domain name is like purchasing the house. It gives you a place to call your own. Turning that place into something people want to visit is totally different. 

A domain name is simply the address that tells people where to find your website. The website is everything contained within the address. 

What does URL Stand For?

URL stands for uniform resource locator. The meaning of URL in internet terms is simply directional. It is a combination of your domain name and the Hypertext Transfer Protocol (HTTP). A URL tells the web browser to search for a domain name as opposed to any other web address. For instance, our domain is hungrymedia.com, and our URL is https://www.hungrymedia.com. 

While they don’t technically mean the same thing, someone asking “what’s your website,” actually means “what’s the URL for your website?”

Hungry Media Speaks the Language of Websites

If you find that deciphering web page terms and definitions is a full time job that you simply don’t want to take on, Hungry Media has your back. Let us deal with the website structure, terms, planning, and execution while you focus on what you do best – running your business. 

With years of experience in the web design and development world, we understand website terminology and know what it takes to make websites successful. Whether you’re looking to build something from scratch or simply want to optimize what you already have in place, we can take your website to the next level. Contact us today to learn about our unique approach and how we can help your business grow. 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

When it comes to a digital presence, there are two ways customers can access a business: website and app. If you’re just beginning to establish yourself in the digital space, where should you focus your resources? Here are a few things to consider when debating between creating an app vs. a website.

What’s the Difference Between an App and a Website? 

What is a Mobile Responsive Website?

Design elements like the types of images used, the way information is organized, and the number of options available to users at any given time all change based on screen size. A mobile-first design (for a mobile responsive site) makes considerations for mobile users the priority.

What is a Mobile App and How is an App Different from a Website?

A mobile app is built specifically for use on the mobile operating systems of smart phones and tablets. Each operating system (iOS, Android, and Windows) has its own App Store for users to search, purchase, and download mobile applications. Apps differ from a website in that they must be specifically created for each operating system.

Why Use an App Instead of a Website?

Access to Phone Features

Cameras, GPS, gyroscopes, and other sensors will always work best with a native app compared to a website.

Information Stored on Device

Apps can load and operate quickly because they store data on the device, compared to a website which needs access to server data anytime it is in use. 

Offline Access 

Whether in basements, train tunnels, airplanes, or anyplace else internet access and cellular connection may be limited, apps continue to function. 

Why Use a Website Instead of an App?

While the benefits of a mobile app over a website might seem significant, don’t count a website out of the running yet. 

Lower Cost

According to Clutch.io, the average cost of developing a decent app is around $100K. And while the cost of developing a website is also a significant investment, a good website can come with a price tag starting at about $10K. 

Develop Once 

Remember the three operating systems mentioned above? When developing apps, you’ve got to develop for each platform, which means that you’re actually launching three times, and anytime updates are required or new features established, those require three times the amount of work as well. Websites only require one launch and one set of fixes. Not only does this save time and effort, but it helps keep costs down. 

Fast to Launch

Apps must be downloaded, an account must be created, and customers must login before they can even begin to use an app’s features. Websites on the other hand, don’t require anything other than a web browser to get started.

App vs. Website – Which is Right?

Don’t decide on an app vs. a mobile website solely based on current tech trends, because they are just that – trends. They change faster than many companies are able to adapt. So, as you’re just getting started in the digital space, make your decision based on the current priorities of your business. You can always add to your offerings or beef-up functionality down the road.

When Does an App Make Sense?

If your product is an app, then that’s what you should launch first. You can save money in the beginning by starting with only one operating system and opting for hybrid app or mobile web app. Bottom line – if the ultimate goal is to operate as an app, then don’t start with something different. 

App Launch Example

OrderEx, an app used by in-person restaurant patrons, streamlines the dining process for both guests and restaurant employees. This is an example of an app-based service which would not function well as a website. In this sense, the product is an app. In this case starting with an app uses resources more efficiently than starting with a website, which would have been turned into an app down the road. 

While it’s true that every business needs a website, the purpose of that website may vary. The only real need OrderEx has for a website is simply to educate anyone interested in learning about their offerings and how the app works. Users don’t access the website to place their order, call their server, or pay their bill. All of that is done through the app, alone. So, the OrderEx website functions as a sales tool that aims to provide information for, and connect with, prospective restaurant clients. 

When Does a Website Make Sense?

Unless your product is an App, then start with a website. Once your website is fully functional, and you’ve gathered and analyzed user data, you can begin to consider ways to leverage a mobile web application or native app. This saves time and money up front, of course. And collecting data to gain a clear understanding of what your customers want and need will save you time and money on app development down the road. 

Website Launch Example

Olive and June, a company that sells at-home manicure and pedicure systems, is the perfect example of a business that should (and did) launch a well-developed mobile-responsive website instead of an app. 

Their website was clearly built with mobile-first and UX design principles in mind, and it provides all the functionality customers want and need. Users can browse Olive and June products, make purchases, and watch video tutorials from any device, with ease. 

They could easily make their website an app down the road, but it’s not a requirement. If the company opts to go that route, they can use website analytics to gather data about the operating systems on which customers access their site (so they know which system would be the best to launch an app), easily determine which of their web pages are accessed most often (so they know what is most important to their guests), and have plenty of time to get their operations, products, and customer service right before taking on the large-scale task of app development. 

App vs. Website: Let Us Help You Decide

Don’t wait until you’ve decided on an app vs. a website to reach out. If you’re stuck in the decision-making process, Hungry Media’s four-step approach will help you uncover the best option for your business – and then we can get to work for you! Whether you decide on a full-scale launch of a mobile app, or an MVP launch on a basic website, we can make it happen. Contact us today to share your ideas and see how we can help make your vision a reality.

contributed by Melissa Lucas, senior staff writer

Smart phones, tablets, watches, computers. It’s no secret that technology rules our lives. And increasingly, consumers make purchasing decisions based on information found using that technology – that is, customers use information found online to decide what to buy and when to buy it. So, why does a business need a website? In 2021, it’s assumed that most businesses have one. It’s that simple. 

Why Does a Business Need a Website? 

That said, if you’re still on the fence, here are answers to some common questions about the need for an online presence in today’s market. 

Question: Why do you need a website if you’re not looking to grow your business? 

Answer: Because websites provide 24/7 customer service, allowing you to take some time off to enjoy what you’ve worked so hard for. 

A website designed with user experience in mind creates opportunities to serve your customer on their terms, allowing your business to function effectively even if you’re not tied to your computer or storefront. 

This means you can connect with potential customers while you’re catching some Z’s, answer user questions while on vacation, or make a sale while watching your kid score the winning soccer goal- all because your customers are utilizing your website. 

And the benefits aren’t just about allowing you a little bit of freedom. Customers appreciate easy access to the information for which they are searching. And the more you give them what they want, the more likely they are to return. 

Question: What does a website do for a business that’s undergoing change? 

Answer: Change often comes with a rebrand, and websites make brand building easy. 

The internet makes it very easy for consumers to learn about and connect with brands. We’re not talking about connection on a transactional level. A brand is so much more than a logo and a tagline. Today’s customers want to connect with a company’s mission and values on an emotional level. 
When creating a website, brand image should always be a primary consideration. In-depth About pages, excellent product descriptions, a blog that’s consistently updated with relevant content – all of these allow the customer to connect with a business. Over time, this creates brand loyalty, and leads to repeat customers and word of mouth referrals.

Question: I’m always busy hustling for the next sale. Why should I have a website for my business? 

Answer: Websites are amazing lead generation tools.

Regardless of whether they’re buying a $4 lipstick or $400,000 boat, today’s customer almost always conducts research online before making a buying decision. And of course, that research usually starts with a good ol’ Google search. 

A website that is optimized for search engines and receives a healthy amount of organic traffic is perhaps the most important lead generation tool in your arsenal. When consumers search for a product or service like the ones you offer, you want to show up in their search results, right? And you certainly can’t do that if you don’t have a website.
To learn more about optimizing your website for search engine rankings, check out these SEO basics.

Question: Why do small businesses need a website when they’re just getting started?

Answer: You have to get your name out there in order to be successful, and websites are more affordable than traditional marketing.

Years ago, the only ways to reach customers were referrals or traditional advertisement methods. If you wanted to spread the word about your new product or recently launched business, you probably had to pay an arm and a leg to advertise it. 

Don’t get us wrong, advertising is still a must today, but so much of what was contained in traditional ads can be placed right on your website for potential customers to view at any time. The cost of developing and maintaining a website is minimal compared to the recurring costs of traditional advertising methods.

Question: How will a website help my business evolve? 

Answer: Website analytics can provide unexpected information about the wants and needs of customers. 

Web analytics act as a barometer, providing insight into the needs and wants of customers, often in unexpected ways. The analytics and data collection tools available online are invaluable. They help track trends, eliminate pain points, evaluate the efficacy of specific efforts, and ultimately determine where to focus efforts moving forward.   

Question: I’m already on a tight budget. Why should I have a website for my small business? 

Answer: Websites can be monetized in so many ways!

A website provides additional opportunities for monetization such as selling advertising space, creating a “hire me” page, or offering digital products like an e-book or online course. These aren’t usually huge money makers, but they can help generate a little bit of extra cash to inject right back into your small business. 

Question: Why do I need a website if I’m doing just fine without one? 

Answer: Because customers expect it.

More than anything, your business needs a website because your customers expect you to have one. When a customer decides to make a purchase, there will almost always be multiple options from which they can choose. The first place they’ll look to research those options is online. If you don’t have a website for them to check out, the chance of gaining their business is pretty darn slim. 

We know following trends and working within the status quo aren’t what makes businesses successful, but an online presence isn’t a trend. It’s a non-negotiable. You’ll surely find and retain customers who have never seen your website, but that’s the exception, not the rule.

Elevate Your Business with a Hungry Media Website

Even if you recognize why a business does need a website, it doesn’t mean that building one must fall on your shoulders, alone. From engaging e-commerce sites to state-of-the-art mobile apps, and everything in between, Hungry Media creates from-scratch, user-friendly websites that help our clients make the most of their growing businesses. 
We’ll be your web guru so you can focus on what you do best – running a successful company. Contact us today to learn more about creating a website that elevates your business and sets you apart from the rest.

contributed by Melissa Lucas, senior staff writer

You only have a few moments to capture users’ attention and prove to them that your app is worth their time (and possibly their money). This is where effective mobile UX design comes into play.

Did you know that 75% of downloaded apps are only opened once? Think about it. Or better yet, glance at your phone. How many apps have you abandoned within the first few minutes of trying them out? How many have sat unused on your home screen for months, or years? What might these apps have in common? Bad UX design. Apps are innately different than desktop-focused websites, which means that developing an app must be done with a different set of principles in mind.

What is Mobile UX Design?

User Experience (UX) design is the discipline that concerns itself with creating a positive experience for the end user of a system. When we discuss mobile UX design, the system we are referring to is a mobile device, most often a smartphone.

Why is Mobile UX Design Important?

The best mobile UX design ensures that your app is not only useful, but usable. That it’s not only desirable, but enjoyable. When users download an app, they’re looking for more than just a mobile-friendly version of your website. So, great mobile app design provides a more robust, personalized experience than users receive when browsing your site on a desktop computer.

Considerations of UX Design for Mobile Developers

User First

Of course, the user always comes first. So, it stands to reason that you have to figure out what the heck the user wants before you can truly grasp how to design for him or her; this is especially true when approaching UX design of apps intended for use on mobile devices. You must accurately assess and address the needs of your mobile users in order to retain them.

Priorities

It’s so easy to get carried away in the beginning of the design process. You have so many great ideas and so many features you want to deliver. However, too many features can actually be unappealing, confusing, and frustrating to new users. The most successful apps on the market start small and expand from there. First, prioritize the features that impact your core objectives.

As your business and user base grow, you can grow your app by adding those “nice-to-have” features along the way.

Intuitive Navigation

Navigation on mobile apps needs to be even more intuitive than that of a desktop site. Most likely, users will be glancing at your app while multitasking, so they to easily identify how it works. Use recognizable icons, gestures, and designs to make using your app as intuitive as possible.

Consistency

Users should also be able to easily identify your brand whether they are using your desktop website, mobile site, or app. This means that you must remain consistent with your design elements for each potential point of access.

Hand Reach Comfort Zones

Consider the way in which users will access your app, or more specifically how they’ll hold their phone while doing so. The natural reach for typical users comprises about half of the screen. Individual hand reach comfort zones are based on whether the user is right- or left-handed and whether they hold their phone with one or both hands. Great mobile UX design ensures that the majority of features, especially those which are most frequently used, are within comfortable reach for all users.

Finger Targets

Remember, when it comes time to interact with the app there won’t be a mouse cursor to point and click. Users will be targeting selections with their fingers. Ensure each tap target is large enough for easy selection. Considering the size of the average human fingertip, controls that measure at least 7-10mm are ideal.

Visual Clutter

For the most part, less is more in terms of the display itself. The devices on which your app will be accessed are usually pretty darn small, so space is at a premium. You don’t have to display every piece of information at all times. Establish organized, easy to follow options that provide your users with a clear understanding of how to access the content they are seeking.

Gestures

We’ve said it before, and we’ll say it again. It’s great to think outside the box, but not when it comes to UX and UI design. Mobile app UX design includes ensuring that your customers are able to comfortably engage with your app. Like it or not, consumers are comfortable using their mobile devices in certain ways. Swipe, tap, pinch, repeat. Take advantage of the gestures commonly used on mobile devices and it will be that much easier to engage with your app.

Feedback

Users need to know that the input they are providing is being received. They need to know that they actually pushed that button or completed that swipe, even if it takes a few moments for the results to become apparent. Tactile and visual feedback are the simplest ways to provide this information. Loading indicators, “depressing” of virtual buttons, or dimming of the screen can all be great ways to indicate that input was, in fact, received.

Data Input

And speaking of input, don’t require your users to provide a ton of it all at once. The more data a user is required to input, the more likely they are to abandon the task. One way to address this is to allow your users to access other accounts (such as Facebook or Google) as a means of sign-up, rather than requiring them to input all of their demographic information in order to access your app. The simplicity of this “one-click” method can make or break your app’s success.

User Experience Design for Mobile Applications vs. Websites

User experience in mobile apps is vastly different than in desktop web browsers. Many from-scratch design principles and UX design principles are similar, but companies cannot rely on a desktop strategy to provide a great experience to mobile users. Here’s why.

• Desktop orientation is horizontal, while mobile orientation tends to be vertical.
• Desktop screens are significantly larger than mobile screens.
• Desktop devices use a keyboard and mouse for input, while data is input on a mobile device via fingertip.
• Desktops tend to be used for important, longer-term tasks such as office work or shopping. Mobile phones are used for much faster, often casual interactions.
• Desktop users can open multiple windows side-by-side, while mobile users cannot.

Mobile UX Design Made Easy – With Hungry Media

It’s not nearly as easy to succeed in the digital space today as it was twenty, ten, even five years ago. And the ever-evolving world of technology can make it difficult to break into the mobile market. If you’re unsure where to start, we can help!

Hungry Media has years of experience in the digital creation space, and we specialize in developing apps and websites that help build businesses and revenue streams. Our mobile UX designers know exactly where to start to get your idea off the ground. Contact us today to see how we can help make your vision a reality!

contributed by Melissa Lucas, senior staff writer