Best Format for Animated Web Banners

The first thing to understand before figuring out what the best format for an animated web banner is, one must know what an animated web banner is at all. An ad banner is one of the most common forms of advertisement at this day in age and a great deal of revenue from the ad goes to the company advertising. The ad is displayed by the owner of the site offering a space on his site for the web banner and makes money off the company for wanting to place an ad on it.

A designer must understand that ad banners usually are posted on someone else’s site so as one would use his common sense to see, therefore, the designer has zero control over the design of the site his banner is going on, especially if the banner is going on multiple sites. A good starting point when planning out an ad banner is the IBA (The Interactive Advertising Bureau) in order to go under the same specifications that most ads follow. The guidelines display different ad banner sizes that are common so that the designer can make his banner a proper size so that he will have more chances of finding an advertising space, this isn’t necessary if the designer already knows where he will be displaying his banner. There are more specifications that are in the guidelines on the IBA. Other things a designer should consider when creating an ad are the maximum frame rate, and the limit of the Z-Index of the unit and file size. The listed items are nothing more than guidelines but if followed, the designer can create a successful web banner that not only works properly but looks just as amazing as it works.

In order for the web designer to captivate the attention of the people visiting the site, the designer should add some eye grabbing photos because the person seeing the ad dd not go to the site to see the ad, the ad just happened to be there when the person went to the website to see content. A massive don’t when designing the banner include making it wordy. The reason the ad is there is to bring the site visitor to another site from the ad,  therefore, the ad banner should not have the entire Harry Potter series and a half worth of words on it, the website that the ad directs to should have all the information needed. However, there is no cookie cutter form of how an ad banner “should” look, for instance, they do not need to look minimalist like the Apple product ad banners to look nice. Ad banners are like people, they are all different.

Bibliography:

https://webdesign.tutsplus.com/articles/best-practices-for-designing-effective-banner-ads–webdesign-15766

Advertisements

Top Web Banner Sizes

When creating an ad banner, it is important to know what the most common ad banner sizes are and why they are the most common so that you know which size is best for the purpose and placement of your ad banner on a website. The most common sizes are (in this order) medium rectangle: 300×250 px, leaderboard: 728×90 px, wide skyscraper: 160×600 px, banner: 468×60 px, and skyscraper: 120×600 px. The medium rectangle, the most common ad banner size, and has an ad impression share of 33%. An example of a medium rectangle ad is the Google banner. The leaderboard is the second most common ad size on the internet with an ad impression share of 32%. The third most used, the wide skyscraper with an ad impression share of 13%, the fourth, banner, with 3%. And last (and least), the skyscraper with 2%. The ad impression share indicates how much of each kind of ad banner size is displayed online.

For a designer who is first beginning to create web banners, it would be in his best interest to use one of the top three most used sizes because doing so would give him 78% of all ad impressions, therefore, would make the ad more usable. All the ad banner sizes that are beyond the top ten sizes collectively make up 10% ad share impression and are not very usable for most designers because the sizes are not standard.

Another thing the designer should consider when designing his ad is that the larger the ad banner, the more attention it will attract. This is because the objective of a web banner is to generate click throughs to bring people to the website. However, it costs more to create a bigger ad banner, so the designer will have to decide if he needs to spend the extra dollars to advertise himself. No matter how big the banner is, this further proves that using standard banner sizes is the best option for someone designing one because they are more likely to get recognition for their ad if it is a standard size because more people will be willing to click on it.

Bibliography:

https://www.stefanmaescher.com/top10-banner-sizes/

http://www.designpax.com/blog/5-most-popular-banner-ad-sizes/

UI and UX

The average casual may not know what the terms UI and UX mean, however they are crucial to design and interface and are often confused in meanings. The term UI stands for user design interface and UX stands for user experience design.

UX is a more analytical and technical field, rather than UI which is more like the design itself. With UX, the product designer is attempting to make the product more user friendly and to maintain a loyalty with the customers and clients, as well as speaking to the consumers. UX does not have anything to really do with the design as it is the customer satisfaction of the product. UX is used in the design for just about anything: cars, lamps, shelving, and so on and so forth. UX is useful in the digital design field because it requires conversing with the customer about the outcome of the design, however, UX is not a career int eh design world.

UI is often mistaken for either graphic design or for user experience design, but in reality it is just the design, layout, research, and process of the product being put together. However, UI is strictly digital. Someone who is working with UI is working with the planning of the idea, like the storyboard, design research, customer analysis, and doing research on the product. After the planning, executing the product, so prototyping, animation, adaption to the proportion to all monitor sizes, and implementation with the developer.

So basically, UX revolves around the relationship between the customer and the developer. It is not entirely necessary, but it reflects really good on the developer to reach out to customers and to try to improve the product or service in their favor. If a company practices UX, it is bound to attract more and more clients and people who will be willing to give them money because they are proving that they care about the feedback from their customers and want to make their product/service better. And there is no better way of finding where there are areas in need of improvement than from people who have tried or purchased the good or service. UI is the planning and design of the product from the storyboard to the execution of the product to the public.

Bibliography:

https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

Usability

One of the most important things to consider when creating a new website, among several other aspects, is the usability of the site. The usability is how easy an object on the site is to use. The usability is important to the website because if a website is not usable, whoever is visiting the site will just leave it forever, and nobody wants that to be his website.

Usability testing is having other people test aspects on a website. Typically, when setting up a usability test, the host develops a list of tasks that the test people must accomplish. Whilst completing the tasks, the people must take note of the website’s performance. Watching other people test the website is a good way to tell if it is usable because one gets to see immediately how his website runs.

There are three main categories of usability testing, these include explorative, assessment, and comparative. Explorative is used in early product development to figure out the usability of a prototype. Assessment is used in the middle of product development, and it works to evaluate the effectiveness and real time workings of the website. And comparative is used to compare to sites or products and seek out their strengths and weaknesses.

As there are multiple methods of testing usability itself, there are a multitude of ways of gathering people to test it. For instance there is hallway testing. This method takes random people who are trained in web design themselves to test the usability of a website. Sometimes one reaches out to people all over the world to participate in his usability testing session, this is called remote usability testing. There is also, of course, testing it through an expert where she will go through the site and evaluate the usability of it. There’s also the holy grail of testing usability, that is automated usability evaluation. This method is so legendary because the evaluating is done by a prototype designed to do so. But there is always self testing, which implies that you yourself go through your site and evaluate its usability.

Bibliography:

http://usabilitygeek.com/an-introduction-to-website-usability-testing/

Size Does Matter

The make or break of a business not only comes down to the business itself, but its website. A slow and useless site will only drive potential customers away from the business. The average person will click away from a website if it takes longer than four seconds to load and will not return to a poorly operated website. To prevent the potential loss of consumers and money, when making a website for a company, consider the page size and content.

Content that can slow the flow of the website can be found in the code. Lines of code in a JavaScript file can greatly increase the loading time of a site. For the sake of the site’s loading time, the person creating the site should try his best to eliminate any unwanted white spaces and comments in the script. Gzip compression should also be enabled because it can drastically minimize the size of the file, which allows more content to be downloaded in a shorter period of time.

A webpage essential is images. They have the ability to draw the attention of any casual who is just surfing the web and possibly draw people to a business. However, the number of images on a website can possibly slow down the webpage response time. The solution to this issue is image compression. This action minimizes the load time without changing the quality of the photo. And along with image compression, getting rid of image metadata can speed up the site’s response time.

Another method of quickly rendering a website is to enable browser caching. Doing this will make it so that the browser will never have to download the information to display the site again. Therefore, the webpage response time will be much quicker.

The last thing to look out for is custom web fonts. While these have gained popularity, now every browser is able to display the font and will have to download it. And to do this, the font will be downloaded as an external source with CSS and extra HTTP requests. When using a custom web font, it should be hosted locally so these extra steps do not need to occur.

Bibliography:

http://blog.catchpoint.com/2016/08/31/web-performance-101-page-size-optimization/

Landing Page Designs: The Good, The Bad, The Ugly

A landing page is the homepage of a website. As it is typically the first thing someone will come across when accessing a website, the creator of the website will want his landing page to appear superb to his site visitors. However, a beginner at web design may not know how to make his site appear beautiful to the visitors of the page.

A more desirable landing page will consist of only necessary details to eliminate any scrolling that would come with paragraph upon paragraph of useless words that take up the entire page. (That is what the description is for). An eye capturing image is If the website is advertising something, adding in a portion for the visitor to subscribe to the newsletter would be a brilliant idea to put on the landing page. If the page is supposed to advertise a product, the landing page should display someone using the product.

Design aspects that a web designer would want to stray from when creating a landing page especially include clutter. Not only is clutter distasteful and tacky, but it can confuse the site visitor. If the site visitor cannot navigate himself on the landing page, he will leave, and so will just about all the other visitors because the page will make them all feel overwhelmed. Another ugly design technique to avoid using is a landing page full of links that do not stand out all because not only are there a countless number of them, but if there are three line descriptions along with the links, all the links will be lost among the forest of text.

To recap, in order for a designer to create a fabulous landing page, he must use good design tactics. These design tactics include keeping everything on one page without scrolling necessary, uncluttered, and with an attractive and eye catching image. If the landing page is for an advertisement, there should be a portion (like a box or something like that) where the site visitor would have no trouble signing up for the company’s newsletter. And the designer should avoid clutter at all costs because it is hideous and confusing.

Bibliography:

https://landerapp.com/blog/6-examples-of-awesome-and-awful-landing-pages/

http://unbounce.com/landing-page-examples/10-landing-page-samples-that-pissed-me-off/

Bootstrap CSS

Bootstrap CSS, also known as front-end-framework, is a free software that combines JavaScript, HTML, and CSS code that is used to develop interface components such as forms, buttons, and navigation. This program is filled with a ton of features that allow the user to not have any trouble working within it. There are several more pros than cons to Bootstrap CSS.

The biggest convenience is that comes with Bootstrap CSS is that is comes with free tools and controls for creating interface components and web layouts. This program also saves the user time by providing predefined design templates and classes. Bootstrap CSS also, as mentioned prior, comes with responsive features that are designed to make a web page appear appropriately on different computer screens, tablets, cell phones, and other kinds of monitors. And consistency is key with Bootstrap CSS, this is clear upon using the application because all the components share the same design templates and styles so that the site being created is consistent throughout the project design period.

Not only is Bootstrap consistent, time saving, and free, but it is easy to use-so easy, that even a noob could figure out how to navigate himself through the program, as long as he has basic knowledge of HTML and CSS (still too hard for casuals who visit websites that they only think are “pretty”). Along with the simplicity of Bootstrap CSS, it was developed with modern browsers, such as Google Chrome, Safari, and Firefox, in mind so it is compatible with all modern browsers.

However, every rose has its thorn. Bootstrap is flawed in that if the user wanted to add a bunch of customizations or just use his own style rather than the default Bootstrap ones, he would have to override a bunch of the Bootstrap default options. This is how the original file could possibly get deleted and need to be reinstalled. But the websites will all look the same if only default Bootstrap options are used.

Other than these two flaws, noob and skilled web designers usually recommend Bootstrap because it is a free program that comes with free tools to create web layouts and interface components, it’s a mega time saver,  comes with responsive features, consistent, compatible with all browsers, and is very easy to use!

Bibliography:

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-introduction.php

https://www.quora.com/What-are-the-pros-and-cons-of-using-Bootstrap-in-web-development