Bootstrap CSS!

What is a bootstrap? 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. This makes web development ten times easier than starting from scratch. Having a template gives the coder a head start in developing the website.

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. Browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Edge, Safari, and Opera are all compatible with the bootstrap. This makes it the website available to more people.

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. This is vital to every website because without a responsive website the UX and UI between the product and the user would be a disaster. It would look unorganized as if someone copy and pasted oversized graphic elements.

The image above shows an example of how a responsive website looks like. We have the Desktop, tablet, and mobile versions on the website adjusted by their dimension and resolution of the screen. As you can see the header is sized down according to the viewing device. It is also noticeable especially in the mobile version that the layout changed from profiles lined up horizontally versus in mobile where the profiles (circles) are lined up vertically.

One 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!

Why is Bootstrap so popular?

I believe bootstrap is popular because of the possibilities it is capable of. The templates Bootstrap provides can be altered to be one of a kind. Making a website could take only a matter of minutes, while at the same time visually look modern unlike former ways of building websites. Web Responsiveness is also another factor that makes web developing a lot easier which is why it is so popular.

Photo by David Rangel on Unsplash

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

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

 

UI & UX

UI and UX elements are essential to a product and depend on each other. UX design leans towards the analytical and technical field while UI design relates to graphic design. However, the responsibilities of both UI and UX are complex.

To put it in a simpler way to understand, UX are the essential components in a tree like its cells and UI would represent the “design” of the plant (appearance). Its appearance correlates to its structure to get what it needs to survive like sunlight and water.

UX

To start off, UX stands for User Experience.  As stated in careerfoundry.com, the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.  UX design covers everything that is used on the customer’s en provided by the product. UX design is improved through research and continuous testing. UX’s responsibility can be divided into three categories according to careerfoundry’s: Strategy and Content, Wireframing and Prototyping, and Execution & Analytics. To get into further detail, here is a list of what each category consists of.

Strategy & Content

• Competitor Analysis
• Customer Analysis
• Product Sttructure
• Content Development

Wireframing &Prototyping

• Wireframing
• Prototyping
• Testing/Iteration
• Development Planning

Execution & Analytics

• Coordination with UI Designers
• Coordination with Developers
• Tracking Goals and Integration
• Analysis and Iteration

UI

UI stands for User Interface. Its purpose is to make it effective and pleasant to use. It is all about the look and feel. UI delves more into graphic design and interactivity with websites and apps and several other elements.

User Interface design is responsible for the transference of a product’s development, research, content, and layout into an attractive, guiding and responsive experience for users. According to my citations, UI can be divided into two categories: Design and Interactivity.

Design

The design aspect of UI involves customer analysis, design research, branding and graphic development, and most importantly a storyline. Customer analysis allows the graphic developer to fix whatever is necessary to achieve an efficient product while design research is done to find what sort of style should be considered in making the product. The storyline is the plan of attack when it comes to designing and branding the product.

Interactivity

The interactive responsibility is very important because even though it may look pretty, it will not work. Interactivity consists of: animation, web responsiveness, and prototyping.

A wise man once said, “A great product experience starts with UX followed by UI.”

If you want to learn more about UI click here.

If you would like to expand your knowledge on  UI click here.

Photo by Nic Low on Unsplash