Format for Animated Web Banners

If you’re reading this you have probably seen a web banner. Maybe there’s one on this screen at this very moment. Try hovering over it. Does it have a loop if it is left untouched? Depending if it is a good web banner it would have a; seamless loop, hover animation, and a call to action. There are six things to take into consideration in making an animated web banner: responsiveness, animation, file size, design unity, simplicity, and eye-catching.

Responsiveness

Having a fully functional responsive web banner is very significant because it allows the potential customer to at least look at the web banner. Perfect responsiveness creates a professional look with out bothering the potential customers.

Animation

Never ever put too much animation in a web banner or else it will annoy the viewer of the website and (1.) drive the viewer off the website and most important (2.) not want the viewer to click on the web banner out of suspicion it will cause a virus or possibly because the web banner is terrible. Less is more; even a slight animation is enough to attract the viewer’s eyes to the ad.

File Size

Careful now, file size is super important. I doubt anyone is willing to wait for an ad to load unless you’re the creator of the web banner. File size should always be kept to a minimum so it loads on to the web page easily and rapidly. One way to do this is to keep your frame rate to 24. However, if your web banner does not have many elements it would be acceptable to use 29 FPS (frames per second) which is supported by Google.

Design Unity

The design of your web banner must be similar to the website or landing page in order to prevent confusion to the potential customer. If the design of the web banner does not match the website, then you’re a bad designer! Sorry to break it to you, it’s not variety that you want, it is the repetition of elements with the product and designs of all platforms. If you’re still confused, look up the Joshua Tree of Design.

Simplicity

The final design should be simple and not overcrowded. Too much information can be overwhelming to the viewer and will make it harder to pick out the purpose of the ad and what it is exactly.

Eye-Catching

Try making a web banner that is clever. Thoroughly think about your web banner. Plan out what kind of animations you want to use. Create a storyboard to help visualize the web banner.

To learn more click here

Photo by Serge Kutuzov on Unsplash

Top 5 Annoying Ad Sizes

Medium Rectangle

The medium rectangle is 300 by 250. It is currently the most popular because it “tends to have more ad inventory available from advertisers, which can increase earning when both text and image ads are enabled” according to Google support.

Large Rectangle

The large rectangle is 336 by 280. It is pretty much the scaled up version of a medium rectangle. This ad size is typically located at the bottom right or left of the website.

Leaderboard

The leaderboard is 728 by 90. It is often located at the top of the website. It is in the shape of a long rectangle. According to Google Support, it performs well when embedded within text content or at the end of articles.

Half Page

The half page is 300 by 600. It is the shape of a tall rectangle or half a square because  The ad size creates a great impression on the website because it covers almost 33% of the website in my eyes. It can be located on the right or the left side. It is often preferred by brand advertisers because of the amount of space the half page allows (for more information to be added).

Large Mobile Banner

The large mobile banner is 320 by 100. As said in the name, it is best used for mobile devices like phones, iPods, and tablets. It is often used as an alternative to the medium rectangle or mobile leaderboard. The large mobile banner is typically located at the bottom of  a website

 

User Testing

There are five popular testing methods: usability testing, focus groups, beta testing, A/B testing, surveys. Each type of method has its own purpose but come down to the same area of testability and satisfactory of users in websites.

Usability Testing

Usability testing consists of trials of legit users to test the product to see if it is actually usable. Usability testing is the best way to understand how real users experience your website or app. It is also easy to acquire new information the user might say or even through the users’ actions can the product be more efficient for the end result. Usability testing falls under the category of UX otherwise known as User Experience which follows almost the same testing as does usability testing. To learn more about UX, click here!

Focus Groups

Focus groups are a tried and true method of communication between a researcher and users. In a focus group, you bring together 6 to 12 users to discuss issues and concerns about the features of a User Interface (otherwise known as UI, the design aspect of the website/product.)The group typically lasts about 2 hours and is run by a moderator who maintains the group’s focus by asking a series of questions and allows users to give important feedback. It is also important to note that focus groups cost money, but in the long run, it will be all worth it.

Beta Testing

Beta testing allows you to roll out a near-complete product to individuals who are happy to try it and provide critical feedback. This testing method allows you to ask users questions after they have the new product, track their usage and have them file bug reports. Beta testing can take a ton of hours from each user to make sure there are no bugs left in the website/product.

A/B Testing

An A/B test is ideal as the appropriate testing method when designers are struggling to choose between two competing elements. This testing method consists of showing one of two versions randomly to an equal number of users and then reviewing analytics on which version accomplished a specific goal more effectively.

Surveys

Questionnaires and surveys are an easy way to gather a large amount of information about users, with minimal time invested. A researcher can create a survey using tools like Wufoo, SurveyMonkey or Google Forms, send it out, and receive hundreds of responses in just minutes.

To learn more about the methods of User Testing, click here.

Photo by Ryan Wallace on Unsplash

 

Page Size Optimization

Page size optimization means boosting a website’s speed and performance to the max. So switching from “About Us” to “Home” button will take one fifteenth 1/15 of a second instead of fifteen seconds. Finding the problem is the first step of optimizing a website.

Most slow websites consist of:

• Multiple CSS files
• Scripts
• Heavy images
• Third-party plugins
• Marketing tags
• Tracking tags

Use the list above as things not to do when making a website. Be aware of the content in the website and make sure its short and on the point for whatever purpose the website may serve.

Next step is to optimize code in CSS and JavaScript (JS) to erase any extra lines or even shortcuts to make it easier for the computer to process and display in shorter time allowing for better performance for the website.

Gzip compression is a powerful tool that can guarantee any website better speed and performance overall. Gzip compression cuts down the size of the requested resource by almost 90%. This creates a ton of space to add in more elements to websites like more images, icons, text, buttons, graphics, and videos!

Almost nothing looks pretty without an image. recent studies show that page sizes consist of 64% on average. Most times, images are added in high quality to make a website have a crisp design. However, high quality images take a heavy toll and ultimately slow down page size optimization. Luckily, there is image compression to minimize the loading time of a website. Another great contribution is the metadata added when a picture is taken like the aperture, shutter speed, iso, and geo information which should be removed as well.

Browser caching is another technique to improve page size optimization. Using the cached data allows it to not need to redownload the resource again. It reduces the load server and allows more space for graphics and other elements.

Lastly, web fonts are used to minimize space held in the text. Unfortunately, some browsers do not support it web fonts.  Web fonts can be attained from external resources along with CSS and JavaScript. When using custom fonts, it is best to use it locally.

To learn more about web performance and page size optimization click here.

To learn more about more direct instructions to improving your website click here.

Photo by Kirstyn Paynter on Unsplash

Landing Pages: Tolerable vs. Terrible

After attempting to create a landing page on my own I learned several things. My text was oversized, as well as everything else: icons and graphics. Another flaw I was told by a very experienced designer suggested keeping my information to a minimum. The purpose is to download the app. It does not require a whole website based on the app.It is only a landing page!

If you are new to Adobe Muse or website making, in general, I recommend using a UI/ UX (user experience) template to get a sense of what sizes to make the font for desktop and scale down for tablet and mobile version.

It is important to make sure the user does not get distracted by the landing page. Too much information will result in a confused potential customer and maybe even lose the user from downloading the app. It is easy to mislead yourself from thinking your font is too small for the desktop version of the landing page. DONT MAKE IT BIGGER. Huge mistake buddy, Keep your font size under 60 unless you’re doing something design-wise.

Tolerable

Here is a list of qualities a landing page is recommended.

• Functioning download buttons
• Responsive web page (desktop, tablet, mobile)
• Showcase application
• 44pt to 18pt font from headings to paragraphs
• Animations
• Little text
• Graphics
• Joshua Tree (Contrast, Repetition, Alignment, Proximity)
• Functioning Call to Action
• Color scheme (Analogous, Complimentary,  Monochromatic)
• Focuses on downloading app

Terrible

Here is a list of things you should not do in a landing page.

• Make a whole website dedicated to the app
• Unresponsive/ broken breakpoints
• Oversized text
• Too much test
• Non-web responsive fonts (acts as an image)
• Clutter of any kind
• Broken Call to Action
• Too many colors
• Too much information
• Poor use of Joshua Tree

Examples

View these sample landing pages by clicking this link here to get a better understanding of tolerable and terrible landing pages. Click here to see my own landing page for my Trax app.

Photo by Dan Gold on Unsplash

Bootstrap CSS

A bootstrap is a line of code that makes the framework for websites easier for developers. They are also used as templates for typography, buttons, tables, navigations, models, and several other functions. Bootstraps prevent repetition between projects, add consistency to design and code between projects and between developers, quickly and easily prototype new designs and ensures cross-browser compatibility. Another advantage of bootstraps is that they are responsive. This means that they adjust to whatever device is being viewed on like smartphones, tablets, laptops, and desktops. Ome way to get bootstraps to create a website is through the website getbootstrap.com. This website allows any web developer to get a bootstrap to include in their work.  These shortcuts also have pre-styled components like dropdowns, button groups, navigation bar, breadcrumbs, labels, badges, alerts, progress bar, and several others.

Essentially, bootstraps are shortcuts of code in HTML and CSS; instead of typing fifteen lines of code, it could be shortened to three with the power of the bootstrap! Here is an example of a bootstrap being used for accommodating to different electronic devices that are accessible to the internet.

When creating a page layout for websites it is essential to use the grid system which allows the creator to easily make a website with efficiency.

• “Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
• Use rows to create horizontal groups of columns.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
• The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.”

These key points to starting a website are from the website itself that makes bootstraps, https://getbootstrap.com/docs/3.3/css/#overview.

Photo by Ryan Everett on Unsplash

Design Strategies for Websites

Website designing requires a lot of planning. The goal of designing a website is to create a public interface that is not only pleasing to the eye but also creates easy and self-explanatory access to its content. In order to achieve this, one must think about typography, layout, photos.  Use the elements of web design to help forge a website. Along with design, the functionality of a website is essential; I would say it is more important because there is no purpose of a website if it does not work. There are six steps to strategically thinking about designing a website.

1.Establish your objectives

Before designing and tediously typing code, make checkboxes to be organized and clear about goals. This builds a strong relationship between the client and the web designer. Ask several questions like: What are you trying to achieve with the new website or redesign? What is the website’s main purpose? These types of questions should be discussed and made unambiguous.

2.Identify your Target Audience

Customer demographics can alter and form how a website is designed. Things like age, gender, and opinions of whatever might influence a website’s information or design. For more information about target audiences for websites, click here.

3.Determine your Brand Image

Find out what kind of theme the website will be. A bad graphic designer would take “inspiration” and copy it word for word. Instead, think about color, and the feel that is trying to be conveyed. This also applies to typography and every design aspect.

4. Syncing goals with design

Now that objectives and design themes have been thoroughly reflected, it is time to put it into action. Use color and contrast to make the website pop-out for a lack of a better term. Keep the website clear and concise so that it will be easy for the public to use.

5. Measure Results

This step tells a designer how well the design platforms are. If not, then it would not be known if the website is effective in fulfilling the objectives specified in the first step. To measure your results you need feedback from users of the website. Look for repeated issues that come up from the feedback to fix.

6. Revise

There is no harm in fixing a few details to make the website better. And there is always a way to make improvements to make the website more functional and better looking.

https://www.smashingmagazine.com/2008/11/strategic-design-6-steps-for-building-successful-websites/

Photo by Sacha Styles on Unsplash

 

Targeting Audiences for Web Pages

To make this topic simpler to digest, ask yourself; who am I (what is my website) reaching out to? Whomever that may be, would be considered as your target audience.  Many people mistake their target audience for everyone because it is on the internet and it is accessible to everyone. It would be nearly impossible to satisfy everybody’s needs or wants. That’s why it is important to have a specific target audience like teenagers. Be mindful to not be too specific because it would result in a small audience.

Websites are reached through a search engine like google, bing, yahoo, etc. It searches for websites through keywords that are typed in by a potential visitor or customer. Therefore, it is important to keep your website’s name related to the purpose of your website that the target audience would type. However, this is only a small step to getting the target audience’s attention.

Target Audience is everything. It determines how your web design looks like, what kinds of products are being sold/ what kind of information is being told, and even what font should be used! Insane, right?! Satisfaction and reuse of any website, all depend on how web pages or websites are designed, made, and written.

Information should be gathered through questionnaires either through an online Google doc or even pencil and paper. Remember to ask important questions regarding a bit of personal information like age, gender, and location as well as comments as a customer of one’s service or product. Here are some suggestions in asking for marketing purposes: Full name, Zip code, How did you hear about us?, Do you have any other questions for us?, What do you like about our product the most? Keep questionnaires short and easy for the customer to fill out. This way the customer wouldn’t have to waste too much time on something they probably do not want to do and complete the survey with ease without any frustrations to keep the customer happy.

Overall, according to http://www.cleart.com, there are four main attributes:

1. Your Target Audience’s Age & Gender
2. Your Target Audience’s Platform of Choice
3. Your Target Audience’s Educational Level
4. Your Target Audience’s Location

To learn more about targeting audiences for web pages click here

To learn more about web design marketing click here

Photo by Spencer Imbrock on Unsplash